How to Use SVG in Fresh
Serve static SVG assets and render inline SVG within Fresh's island architecture.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Static SVG Assets
Fresh serves files from its static directory automatically, so dropping an SVG there makes it available at a predictable URL — simplest for logos and fixed icons that don't need interactivity.
- Place SVG files in the static directory
- Reference them with a simple <img> tag
- No island hydration needed for static icons
Interactive SVG in Islands
For SVG that needs interactivity, render it inline inside a Fresh island component where Preact can bind events and state to individual SVG elements.
- Inline SVG inside an island for interactivity
- Bind Preact state to SVG attributes
- Convert source art to SVG for crisp island UI
Frequently Asked Questions
Where should static SVG icons go in a Fresh project?
Place them in the static/ directory; Fresh serves them automatically at the matching URL path without extra configuration.
Can I animate an SVG inside a Fresh island?
Yes — inline the SVG in an island component and bind Preact state or CSS classes to its elements for interactive animation.
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