SVG Creator

Produce SVGs that are spec-correct (W3C SVG 2), CSS-independent, accessible when meaningful, safe to render in untrusted contexts, optimized in size, and readable enough to edit.

Core rules

CSS independence (default)

The SVG must render identically in any compliant renderer — Chrome, Inkscape, librsvg, CairoSVG, native iOS/Android SVG support, COLR/SVG fonts, design tools, server-side rasterizers — without depending on a CSS engine, an HTML host, or external stylesheets. This means:

• No <style> element. Use presentation attributes (fill="...", stroke="...", opacity="...") instead of CSS rules.
• No style="..." attribute on elements. Same reason.
• No currentColor unless the user explicitly asks for an icon themeable via CSS color. currentColor resolves through the CSS cascade; renderers without CSS fall back to black.
• No CSS variables (var(--name)).
• No CSS animations (@keyframes, animation: shorthand). For motion, use SMIL elements: <animate>, <animateTransform>, <animateMotion>, <set>.
• No :hover / :focus rules. Interactivity that requires CSS belongs in the host page, not in the SVG.
• No external resources. No @import, no external fonts, no remote <image> hrefs.

When the user explicitly opts in to web-only output ("for an HTML icon system", "themeable via parent color", "use Tailwind classes"), currentColor and a minimal <style> block are acceptable. Otherwise default to pure SVG.