How to Use SVG in Qwik City
Qwik's resumability model changes how you should think about SVG delivery — here's the pattern that keeps it lightweight.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Component and Import Patterns
Qwik City supports importing SVGs as Qwik components via its Vite-based tooling (similar to SVGR), letting you use `<Logo />` syntax with full prop support for size and color. For simple icons, inline SVG directly in JSX/TSX templates works well and avoids any build-step dependency, staying consistent with Qwik's minimal-JS philosophy.
- Vite-based SVG-to-component imports work with Qwik's tooling
- Inline SVG in templates needs no extra build configuration
- currentColor fills let icons inherit Qwik component prop-driven colors
Respecting Qwik's Resumability Model
Qwik's core value proposition is shipping near-zero JavaScript until interaction — keep decorative SVGs as plain markup rather than wrapping them in components with unnecessary event handlers, which would pull in JS the resumability model is designed to avoid. Reserve interactive SVG components for icons that genuinely need click handlers or dynamic props.
- Static decorative SVGs should stay plain markup, not components
- Reserve component wrapping for icons needing real interactivity
- Unnecessary event handlers undermine Qwik's zero-JS-by-default model
Frequently Asked Questions
Does Qwik have a built-in SVGR-style import system?
Qwik's Vite-based build supports SVG component imports through community plugins similar to SVGR. Check the current Qwik City documentation for the officially recommended plugin, as tooling evolves.
Will using many inline SVGs hurt Qwik's resumability benefits?
No — inline SVG markup with no JavaScript event handlers doesn't affect resumability at all; it's just HTML/SVG the browser parses normally, independent of Qwik's JS-loading strategy.
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