SVG not rendering properly with Blazor

[mdegroot71]

Originally posted by @mdegroot71 in https://github.com/aspnet/Blazor/issue_comments#issuecomment-430270522

I am having the same issues. I've taken all of the same CSS, Javascript and produced HTML from Blazor, popped it into a static HTML page and ran it. The SVG scales as it should without any workarounds. I'm using Chrome. When I run it with Blazor, the SVG behaves in a weird way. This isn't a CSS issue. This is definitely a rendering issue b/c no matter how I inject the SVG, it still does not behave as if Blazor was not present.

[Lupusa87]

Link is not working. Can you provide related issue number?

[mdegroot71]

Here is the link...https://github.com/aspnet/Blazor/issues/888. The original issue was about SVGs not resizing to size of parent. Thank you. Let me know if you need anything else.

[Lupusa87]

Maybe it is related to this #1317
Did you check generated svg in chrome's inspector? Is this exact as expected?

[mdegroot71]

Maybe it is related to this #1317
Did you check generated svg in chrome's inspector? Is this exact as expected?

I am not binding variables into the inline SVG. The SVG is within an If block - if that matters. Is there a work-around?

[mdegroot71]

You nailed it.  The viewBox attribute got case-changed and appears as viewbox.  So this is related, although there are no bound variables.  The SVG is within an If block, however.  What is the work-around? Thanks, Michael On Tuesday, October 23, 2018, 12:41:14 PM CDT, Vakhtangi Abashidze <notifications@github.com> wrote: Maybe it is related to this #1317 Did you check generated svg in chrome's inspector? Is this exact as expected? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[Lupusa87]

I don't know how you can avoid this case changing. Hope @SteveSandersonMS will comment.

[Lupusa87]

You can ask here too https://gitter.im/aspnet/Blazor

[SQL-MisterMagoo]

Take a look here : it's working fine for me - maybe you are doing something different?

I found that as long as blazor is rendering the entire svg it is fine even with @fields present in the markup, but if you try to update any property on the SVG from Blazor, it will then lowercase the viewBox.

If you do need to update the SVG, try to find a way to do it with CSS and then modify the CSS on the fly rather than changing the SVG.

https://github.com/SQL-MisterMagoo/BlazorTest/blob/master/Bletris/BletrisPiece.cshtml
https://github.com/SQL-MisterMagoo/BlazorTest/blob/master/BlazorClock/Clock.cshtml

[mdegroot71]

I'm not sure why mine kept breaking.  I am using version 0.5.1.  I was simply copying and pasting the SVG from a text editor into my view.  I didn't do any manipulation of the SVG with Blazor and yet I was still getting the the badly rendered viewBox attribute.  Could this be a 0.6.0 vs. 0.5.1 thing?  I have been reluctant to upgrade to 0.6.0 as when I have tried in the past, everything breaks. Thanks, Michael On Wednesday, October 24, 2018, 11:22:35 AM CDT, SQL-MisterMagoo <notifications@github.com> wrote: Take a look here : it's working fine for me - maybe you are doing something different? I found that as long as blazor is rendering the entire svg it is fine even with @fields present in the markup, but if you try to update any property on the SVG from Blazor, it will then lowercase the viewBox. If you do need to update the SVG, try to find a way to do it with CSS and then modify the CSS on the fly rather than changing the SVG. https://github.com/SQL-MisterMagoo/BlazorTest/blob/master/Bletris/BletrisPiece.cshtml https://github.com/SQL-MisterMagoo/BlazorTest/blob/master/BlazorClock/Clock.cshtml — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[SteveSandersonMS]

@mdegroot71 Yes, it is a 0.5.1 vs 0.6.0 thing. The SVG case handling bug isn't fixed in 0.6.0, but for an unrelated reason (the introduction of static markup blocks), the bug doesn't affect the initial render in 0.6.0 as long as your SVG is purely static (i.e., doesn't contains C# expressions in the Razor source).

So to clarify, I recognise the bug is still there in 0.6.0, but there is a case where it affects 0.5.1 worse than 0.6.0.

[StevenTCramer]

@SteveSandersonMS Can you give us a hint on where the code is for this and maybe I can take a stab at a PR?

[BlazorDashboard]

I am having the same issues with a for loop in a svg tag.

<svg height="200px" viewBox="-1 -1 2 2" style="transform: rotate(-90deg)">
<path.....
@for (var i = 0; i < 1; i++)
{
}
</svg>

[Suchiman]

@StevenTCramer rendering is in this file BrowserRenderer.ts, e.g. here's some special casing for SVG when creating Elements https://github.com/aspnet/Blazor/blob/f9547db310d7a187115f85701a3833ddb5a5d827/src/Microsoft.AspNetCore.Blazor.Browser.JS/src/Rendering/BrowserRenderer.ts#L184-L186

[PaulOst]

@StevenTCramer have you been able to resolve this bug?

[mdegroot71]

In my scenario, I was looking to load a map of a user's office.  Originally, I had it as an in-line SVG file within my cshtml.  Unfortunately, Blazor changed the case of some of my tags making the graphic not auto-scale or render properly in Chrome.  I tried using raw HTML, etc. but that didn't seem to solve the issue.  Ultimately, I resorted to making a service/function call for the SVG and then doing a $("#svgContainer").html(mapContents) call.  My images are fairly small so the performance hit has been negligible.   On Wednesday, November 7, 2018, 9:55:45 PM CST, paulost <notifications@github.com> wrote: @StevenTCramer have you been able to resolve this bug? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[StevenTCramer]

@PaulOst Not resolved yet... Planing to review the code next week if someone has not gotten to it before me. I will make note here before I start working on a PR. (So no one wastes there time. including me )

[StevenTCramer]

@Suchiman
Update on this. I am investigating to see where the original PascalCase variable gets converted to all lowercase.

In the entire callstack below the value is already lower case.

export function renderBatch(browserRendererId: number, batch: RenderBatch) {
...

The batch in the above is just a memory stream in the HEAP. So far from easy to debug. I am guessing what ever passes this thing has already converted it to all lowercase. If anyone can give me hints on where the original Razor is parsed before sending it to mono I can test and see if it is lowercase on that side.

To debug I added a "viewBox" attribute to the current SVG component in the test app.

toJavaScriptString (MonoPlatform.ts:87)
readHeapObject (MonoPlatform.ts:131)
attributeName (SharedMemoryRenderBatch.ts:85)
./src/Rendering/BrowserRenderer.ts.BrowserRenderer.applyAttribute (BrowserRenderer.ts:233)
./src/Rendering/BrowserRenderer.ts.BrowserRenderer.applyEdits (BrowserRenderer.ts:84)
./src/Rendering/BrowserRenderer.ts.BrowserRenderer.updateComponent (BrowserRenderer.ts:35)
renderBatch (Renderer.ts:41)
window.Blazor._internal.renderBatch (Boot.WebAssembly.ts:17)
_mono_wasm_invoke_js_unmarshalled (mono.js:1)
(anonymous) (mono.js:1)
callMethod (MonoPlatform.ts:68)
beginInvokeDotNetFromJS (MonoPlatform.ts:299)
invokePossibleInstanceMethodAsync (Microsoft.JSInterop.ts:77)
invokeMethodAsync (Microsoft.JSInterop.ts:55)
raiseEvent (BrowserRenderer.ts:370)
(anonymous) (BrowserRenderer.ts:21)
./src/Rendering/EventDelegator.ts.EventDelegator.onGlobalEvent (EventDelegator.ts:83)

[ElderJames]

In my project, I can render the svg icon in components.
I use HttpClient to download the file and render it by converting to MarkupString.
https://github.com/ElderJames/ant-design-blazor/blob/master/components/icon/AntIcon.razor
https://ant-design-blazor.gitee.io/

[mkArtakMSFT]

Closing as we will be tackling this as part of #18271