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.

[mkArtakMSFT]

I've duped all the svg-related issues with this one. We should make sure all those concerns are considered when handling this.

[dmitry-pavlov]

@MikaBerglund has shared in our ASP.NET Core community the blog Configure Offline Assets for Blazor PWA Applications which explains how to add SVG support .

What would adding "SVG support in Blazor" mean in scope of this issue? @captainsafia

[MarkusRodler]

@dmitry-pavlov Fixing all of those issues that are referenced in this issue. For example this one: https://github.com/dotnet/aspnetcore/issues/13280

[captainsafia]

Correct: I'll update the issue title to reflect this but this particular issue is really about addressing the known gaps in our existing SVG support.

[Thaina]

Is this issue also include autocomplete for svg in razor file?

[captainsafia]

@Thaina Not explicitly. I'd recommend opening an issue with a clear description of what you'd like to see that we can dupe against this one.

[Thaina]

@captainsafia Thanks, but I think it should be include in the term "improve svg support"

It was nothing much, just that I wish that while html element could be shown in vscode autocomplete in .razor file like this

It should also show svg and svg elements and attributes, ideally when we write thing in svg node

[ghost]

We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our Triage Process.

[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.

[Zaneris]

Not sure if this has been covered or not, but within .Net 5, using something like `

works fine, but using a variable within the href ` 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" >