Improve SVG support in Blazor

[mkArtakMSFT]

Treating this as the top-level issue for SVG support in Blazor to track

[pablofrommars]

SVG support has nicely been working for me until I started experimenting with foreignObject.

A possible workaround until "full support" is to render your problematic content as raw html using MarkupString:

<svg>
    @((MarkupString)$"<foreignObject>Hello, <em>{@name}</em>!</foreignObject>")
</svg>

@code {
    private string name = "World";
}

Hope it helps prevent a few headaches!

[pablofrommars]

CultureInfo can interfere with SVG rendering, specifically which decimal separator is used. Probably quite tricky to handle, how to feed SVG properties (or CSS for that matter) with the expected number formatting while retaining Blazor ability to localize content? Important feature for full SVG support.

[Zaneris]

Not sure if this has been covered or not, but within .Net 5, using something like
<svg> <use xlink:href="bootstrap-icons.svg#house-fill" /> </svg>
works fine, but using a variable within the href
<svg> <use xlink:href=@($"bootstrap-icons.svg#{HouseFill}") /> </svg>
causes it to not render on the page.

[dmitry-pavlov]

Not sure if this has been covered or not, but within .Net 5, using something like
<svg> <use xlink:href="bootstrap-icons.svg#house-fill" /> </svg>
works fine, but using a variable within the href
<svg> <use xlink:href=@($"bootstrap-icons.svg#{HouseFill}") /> </svg>
causes it to not render on the page.

@Ted-Lapkin it should be something like this I guess (note wrapping quotes):

<use xlink:href="@($"bootstrap-icons.svg#{HouseFill}")" />

[dennisreimann]

I noticed that referencing a file with the ~ doesn't work for the href and xlink:href attributes of a use tag. Also it'd be good to have support for the asp-append-version="true" attribute here.

[MaxNau]

Hi,

is this supported at the moment? If not, any plans when it will?

<svg>
<foreignObject>
         @foreach (var htmlTag in HtmlTags)
          {
              @((MarkupString)htmlTag)
          }
</foreignObject>
</svg>

[ghost]

Thanks for contacting us.
We're moving this issue to the Next sprint planning milestone for future evaluation / consideration. We will evaluate the request when we are planning the work for the next milestone. To learn more about what to expect next and how this issue will be handled you can read more about our triage process here.

[jongio]

Looks like LinearGradient isn't support:

<svg data-slug-id="storage" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 18 18">
  <defs>
    <linearGradient id="storage:ad4c4f96-09aa-4f91-ba10-5cb8ad530f74" x1="9" y1="15.83" x2="9" y2="5.79" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#b3b3b3"/>
      <stop offset="0.26" stop-color="#c1c1c1"/>
      <stop offset="1" stop-color="#e6e6e6"/>
    </linearGradient>
  </defs>
   
  <path d="M.5,5.79h17a0,0,0,0,1,0,0v9.48a.57.57,0,0,1-.57.57H1.07a.57.57,0,0,1-.57-.57V5.79A0,0,0,0,1,.5,5.79Z" fill="url(#storage:ad4c4f96-09aa-4f91-ba10-5cb8ad530f74)"/>
  <path d="M1.07,2.17H16.93a.57.57,0,0,1,.57.57V5.79a0,0,0,0,1,0,0H.5a0,0,0,0,1,0,0V2.73A.57.57,0,0,1,1.07,2.17Z" fill="#37c2b1"/>
  <path d="M2.81,6.89H15.18a.27.27,0,0,1,.26.27v1.4a.27.27,0,0,1-.26.27H2.81a.27.27,0,0,1-.26-.27V7.16A.27.27,0,0,1,2.81,6.89Z" fill="#fff"/>
  <path d="M2.82,9.68H15.19a.27.27,0,0,1,.26.27v1.41a.27.27,0,0,1-.26.27H2.82a.27.27,0,0,1-.26-.27V10A.27.27,0,0,1,2.82,9.68Z" fill="#37c2b1"/>
  <path d="M2.82,12.5H15.19a.27.27,0,0,1,.26.27v1.41a.27.27,0,0,1-.26.27H2.82a.27.27,0,0,1-.26-.27V12.77A.27.27,0,0,1,2.82,12.5Z" fill="#258277"/>
</svg>

Should be:

Renders as:

With
<img src="imgs/@item.Icon">

[Xyncgas]

I actually would like to pick up my drawing talbet and draw svg directly in visual studio, put that aside, it would be like if we can have a svg animation designer/work flow for stepping up the game of website appearances

[jongio]

@guardrex - I noticed that you closed this item in ref to 22450. I wanted to make sure that gradient support didn't get lost in that. Do we have that captured somewhere else?

[guardrex]

The PU issue (here) tracks the framework work ... which is done, and the docs issue tracks the doc work, which is still open and hasn't been done. That issue will probably be worked in the RC1 timeframe ... due to churn ... we've been burned a few times trying to doc things too early before the feature settles for release. The docs issue cross-links this, so this won't get lost.

[guardrex]

Looks like LinearGradient isn't support:

... but btw if you're referring to this issue being closed before the framework has a gradient feature that you don't think the preview work covers, then you'd need to take that up with the PU here. The docs issue is only that ... for docs. It doesn't track feature work over here.

[gulbanana]

The linearGradient svg above works for me in .NET 6 preview 4 when embedded directly in a .razor file.

[jongio]

Can you see if it works when you ref with <img src="name.svg" >