How to Use SVG in Astro Islands
Astro's islands architecture rewards keeping SVG static wherever possible — here's how to decide when hydration is actually needed.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Static SVG by Default
Astro components render to zero-JS static HTML by default, making inline SVG markup or `.astro`-imported SVG files essentially free — no hydration cost, no framework runtime shipped to the browser. This should be the default choice for any icon or graphic that doesn't need client-side interactivity.
- Astro components ship zero JS unless explicitly hydrated
- Inline SVG in .astro files costs nothing at runtime
- Default to static SVG for any non-interactive icon or graphic
When an SVG Needs an Island
Only wrap an SVG in a hydrated island (React, Vue, Svelte, Solid — Astro supports all as islands) when it genuinely needs client-side state, like an animated toggle icon reacting to user input. Use `client:visible` or `client:idle` directives to defer that hydration cost until it's actually needed.
- Hydrate only SVGs needing genuine client-side interactivity
- client:visible defers hydration until the icon scrolls into view
- Framework choice per island is independent — mix React and Svelte icons freely
Frequently Asked Questions
Does Astro support SVGR-style component imports?
Depends on the integration used per framework island (e.g., the React integration supports standard SVGR-style imports within React components) — static .astro files typically just inline the SVG markup directly instead.
Will unhydrated SVG icons animate on hover?
Yes — pure CSS hover animations work on static SVG with zero JavaScript needed, since CSS :hover doesn't require any framework runtime or hydration at all.
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