RunLocalTools

SVG Extract — Pull Images, Fonts, Colors & Layers Out of an SVG

Free tool to extract embedded images, fonts, color palettes, text, and individual layers from any SVG file — plus a one-click cleanup pass and PNG export. Runs entirely in your browser.

What it does

SVG Extract takes an SVG file and pulls out everything embedded or described inside it: any raster images encoded directly in the file, any embedded fonts, the full color palette actually used for fills and strokes, all text content, and each top-level layer or group as its own downloadable file. It also renders the whole SVG (or any single layer) to a PNG at your chosen resolution, and includes a one-click cleanup pass that strips editor cruft and shows you exactly how much smaller the file got. Nothing is uploaded — everything is parsed and rendered locally in your browser.

How it works

An SVG file is just XML text, which means everything inside it — an embedded photo, a custom font, a fill color, a paragraph of text — is sitting in the file as a literal, readable value. This tool reads that text directly:

  • Embedded images show up as <image> elements whose href is a data: URI with base64-encoded image bytes. The tool finds every one, decodes it back into its original file, and lets you download it standalone.
  • Embedded fonts work the same way inside an @font-face rule’s src: url(data:font/...) — decoded back into a standalone .woff2/.woff/.ttf file. The tool also lists every font-family name referenced anywhere in the file, embedded or not, so you know what you’d need to source separately.
  • Colors are collected from every fill, stroke, and stop-color — as plain attributes or inside inline style declarations — normalized to hex (so red, rgb(255,0,0), and #f00 all count as the same color) and counted by how often each appears. Gradient and pattern references are excluded, since they’re not a single flat color.
  • Layers uses the browser’s real XML parser (not just pattern matching) to find each top-level <g> group and re-wraps it as its own complete, standalone SVG — carrying over the original viewBox so it renders identically in isolation, ready to download as SVG or as a PNG at any resolution.
  • Cleanup strips XML comments, <metadata> blocks, and the inkscape:/sodipodi: attributes that design tools like Inkscape leave behind, showing you the exact byte-size difference before you download.

How to use it

  1. Drop in an SVG file, or paste raw SVG code directly.
  2. Use the tabs to browse what was found: Overview for a quick summary, Images and Fonts to download embedded assets, Colors for the palette, Text for all text content, Layers to pull out individual groups, Source to view or copy the raw XML, and Cleanup to strip editor bloat.
  3. Click “Download as PNG” to rasterize the whole file at 1×–8× resolution.
  4. Load more than one SVG and use “Extract everything as .zip” to pull every asset from every loaded file in one download.

Supported formats & limits

Accepts any .svg file or pasted SVG markup. Layer extraction and PNG rendering both require the file to be well-formed XML — most SVGs exported from design tools qualify, but a hand-edited file with an unescaped & or unclosed tag may fail to parse; the tool tells you plainly when that happens rather than guessing. PNG rendering uses your browser’s own SVG renderer, so an SVG that references external images or fonts by URL (rather than embedding them) may render those parts blank, since a canvas can’t safely read cross-origin resources it didn’t load itself.

Privacy

The SVG never leaves your browser — parsing, extraction, and PNG rendering all happen locally. Loaded files persist across a refresh so you don’t lose your batch; clear them anytime with “Clear all.”

FAQ

Why does “Layers” say no groups were found? Some SVGs — especially ones exported directly from a vector tool without named layers — are a flat list of shapes with no <g> grouping at all. There’s nothing to isolate in that case; the Colors and Images tabs will still work normally since they don’t depend on grouping.

Can I extract an image that’s just linked, not embedded? Not the image itself — if an SVG references <image href="https://example.com/photo.png"> instead of embedding the actual bytes, the tool lists that reference so you know it exists, but can’t fetch or download it (that would mean the tool making outbound requests on your behalf, which it deliberately never does).

Why did PNG rendering come out blank or partially blank? This happens when the SVG references an external image or font by URL rather than embedding it — browsers block a canvas from reading pixels that came from a different origin, as a security measure. Embedding the image with the Cleanup tab’s output won’t fix this (cleanup doesn’t touch image references), but re-exporting the SVG from your design tool with images embedded will.

What does the color extraction count as one color? Any flat, literal color value on a fill, stroke, or stop-color — hex codes, rgb()/rgba() values, and standard named colors like red are all normalized to a single hex value so duplicates are merged correctly. Gradients, patterns, and currentColor/inherit are intentionally excluded, since they don’t represent one fixed color.

Does the cleanup pass change how the SVG looks? No — it only removes comments, metadata, and editor-specific attributes (inkscape:*, sodipodi:*) that have no visual effect. Nothing that affects rendering is touched.

Can I use this to convert a raster image into an SVG? No — this tool goes the other direction, pulling content out of an existing SVG. If you want to trace a photo or PNG into vector paths, use the separate raster-to-SVG converter tool.