How to Use SVG in Blazor
Render SVG icons and graphics in Blazor applications using static assets or inline component markup.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Static Asset References
Place SVG files in wwwroot and reference them with standard img tags for simple cases where CSS styling of internal paths isn't required.
- Place SVGs in wwwroot/ and reference with relative img src paths
- Works for non-styled SVG usage across Blazor Server and WASM
- Confirm static file middleware is configured to serve SVGs
Inline SVG as Blazor Components
Create a reusable Blazor component (.razor file) containing the raw SVG markup, accepting parameters for size and color so the same icon component can be reused with different styling throughout the app.
- Create .razor components with embedded SVG markup
- Pass parameters for fill color and dimensions per instance
- Reuse one icon component across the app with different props
Frequently Asked Questions
Can Blazor components accept color parameters for SVG icons?
Yes — define a component parameter for color and bind it to the fill attribute in the embedded SVG markup, letting each usage customize the icon's appearance.
Does Blazor WASM handle SVG differently than Blazor Server?
Static SVG file serving works the same way in both hosting models since it's handled by static file middleware, though component rendering behavior is otherwise consistent.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG