Using SVGS in blazor page

user_13054237 0
Viewed 7856

I have a razor component and I want to add an SVG to it.

Would It be best to create a component for each SVG so that I can re-use it pretty easily or would it be better to just include the SVG into the blazor page?

Those are just the two ways I thought that it could be done, whats the best way to go about this and how can I implement it?

Haven't found any rescources, so I wasn't able to try anything.

blazor razor
2 Answers

I gave it try, as far as I can see the Blazor Component model works perfectly well with Svg:

SvgHolder.razor

<svg width="100" height="100">
   @ChildContent
</svg>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

}

SvgSample.razor

<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />

@code {

}

TestPage.razor

<SvgHolder >
    <SvgSample />
</SvgHolder>
user_607610

One way that I found to do it:

Add the files inside wwwroot:

wwwroot example

then just add it to the HTML page:

<img src="Images/scissors.svg" />

EDIT: This works if you don't need to edit the image with css. Read @J-Ho comments.

user_23567230
Related