CODEWITHSUNDEEP
svgblazor
Scott Perry
Scott Perry

Reputation: 75

How to use inline svg's in Blazor wasm .NET 5

My Blazor wasm project is targeting the .NET 5.0 runtime. I've got .NET SDK 5.0.200 and .NET Runtime 5.0.2 installed.

According to Zaneris on this Github issue, inline svg's can be used like this in Blazor:

<div>
   <svg> <use xlink:href="images/test.svg#test-logo" /> </svg>
</div>

photo-wwwroot

However, I can only get it to work like this:

         <div>
            <svg>
                <symbol id="test-logo" viewBox="0 0 255.905 185.056">
                    <g id="Group_284" data-name="Group 284" transform="translate(-65.569 -74.438)">
                        ...
                    </g>
                </symbol>
                <use xlink:href="#test-logo" />
            </svg>
        </div>

What am I doing wrong? Do I need to link the svg file in the head tag? If so, what do I set the "rel" to?

I would love to be able to reference the symbol ID straight from the svg file in wwwroot.

Upvotes: 0

Views: 3766

Answers (2)

Bennyboy1973
Bennyboy1973

Reputation: 4236

Okay, I made a sample file and tested the technique you mentioned in your OP, and was able to display two symbols from a single file by #referencing them. So the technique seems not to be the problem.

However, they were upside down from the original. My understanding was that you could just use a symbol and it would work, but maybe it needs a little more tinkering somehow, with regard to setting the viewboxes properly?

--edit--
According to Mozilla, "xlink:href" is now obsolete. So there's a possibility that at some point in the future, client sites will break. I doubt it will be soon because it seems to be a VERY new update, but something to consider.

Upvotes: 1

Bennyboy1973
Bennyboy1973

Reputation: 4236

I'd like to sell you on the idea of treating .svg code like any other markup and putting it into Razor components. This way, you can put it inline anywhere you want, and control variables like you would with any other razor control:

Here's an .svg saved from illustrator: (sample.svg)

<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
    <text transform="matrix(1 0 0 1 16.2917 24.9155)"><tspan x="0" y="0" font-family="'MyriadPro-Bold'" font-size="12px">Lorem ipsum</tspan></text>
    <circle fill="#EC008C" stroke="#000000" stroke-miterlimit="10" cx="50" cy="58.8" r="15.3" />
</svg>

Here's a razor page I made from it, (SampleSVG.razor). Note the variables @Text and @fill. I can put it anywhere I want like any other component: <SampleSVG />

@page "/svgsample"


Change Text: <input @bind="@Text" /><button @onclick="DoCoolStuff">Go Crazy!</button>
<div style="width:50%; height:auto">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
            viewBox="0 0 100 100" enable-background="new 0 0 100 100" style="stroke-width: 0px; background-color: #000000;" xml:space="preserve">
        <text transform="matrix(1 0 0 1 16.2917 24.9155)">
            <tspan x="0" y="0" fill="orange" font-family="'MyriadPro-Bold'" font-size="12px">@Text</tspan>
        </text>
        <circle fill="@fill" stroke="#000000" stroke-miterlimit="10" cx="50" cy="58.8" r="15.3" />
    </svg>
</div>


@code {
    string Text = "Start Text";
    string fill = "#EC008C";
    Random random = new Random();

    async Task DoCoolStuff()
    {
        for (int i=0; i< 5; i++)
        {
            fill = String.Format("#{0:X6}", random.Next(0x1000000));
            StateHasChanged();
            await Task.Delay(200);
        }
    }
}

Pro-tip: since the button handler is async, if you click it over and over really fast, you can change the circle's color more than 5x / second. DISCO! (and possible seizure warning. . . )

Upvotes: 1

Related Questions