Using SVGS in blazor page

Question

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.

Answer 1

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>