tools / svg
SVG tools for the problems that appear after export
SVG, 11 tools.
An SVG that looks correct in the design tool can still break a page: ids collide the moment two files are inlined and one icon renders with another’s gradient, editor metadata rides along into production, and a missing viewBox stops the thing scaling at all. These tools each fix one of those, and show you the file before and after rather than asking you to trust the pass.
SVG CleanClean, sanitize, and normalize exported SVG files for safe reuse in production pages, React components, icon systems, and asset pipelines.SVG CSS BackgroundEmit CSS background-image rules that inline each SVG as a percent-encoded data URL with sensible default background sizing.SVG Extract ImagesExtract embedded base64 PNG/JPEG/GIF/WebP payloads from SVG files, optionally rewriting the SVG to reference the externalized assets.SVG ID PrefixPrefix every SVG id and rewrite matching url(#id), href="#id", and ARIA idref references in one pass.SVG InspectReport SVG element counts, ID uniqueness, embedded raster payloads, and structural risk warnings.SVG MinifyConservatively minify SVG files without changing geometry: strip comments, optionally strip metadata, convert legacy xlink:href, remove whitespace-only text nodes, and write compact XML.SVG RecolorRecolor SVG artwork from an explicit old-to-new color map applied to fills, strokes, gradient stops, inline styles, and <style> rules.SVG Remove MetadataStrip <metadata> elements and Canva/C2PA/XMP/Adobe provenance comments from SVG files while leaving all rendered content intact.SVG ResponsiveAdd a missing viewBox from numeric width/height and set root sizing (width=100%, height=auto, preserveAspectRatio, block display) for responsive layouts.SVG SanitizeRemove active SVG content, event handlers, remote links, javascript: URLs, CSS imports, and unsafe CSS url(...) references while preserving internal fragment refs and data-image references.SVG to ReactConvert SVG files into React JSX component source with hyphenated attributes rewritten to camelCase, class to className, inline style parsed to a JSX object, and {...props} spread on the root.
Enable JavaScript to use the tools. Each one runs inside the tab; nothing here is uploaded.