SVG Frame Extractor — Split SVG Into Individual Files
Extract individual icons, artboards, or layers from a master SVG file into separate files for distribution and use.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Extracting Elements from SVG
Common scenarios for extracting elements from a master SVG.
- Icon sprite → individual icons: extract each <symbol> as its own SVG file
- Design system master → component SVGs: split layered SVG into individual component files
- Illustrator artboards → individual SVGs: each artboard becomes a separate file
- Animation frames → frame SVGs: extract SVG animation key states as static SVGs
- Logo variations: extract primary, secondary, and icon mark from one master SVG
Tools for SVG Splitting
Free tools and methods for extracting SVG content.
- Illustrator: File > Export > Export for Screens — each artboard as separate SVG
- Figma: select each frame/component → Export as SVG individually
- Inkscape + CLI: inkscape --actions='select-by-id:icon1;export-do' input.svg -o icon1.svg
- svg-export (npm): extracts <symbol> or <g id> elements to individual SVG files
- Manual: copy the <svg> wrapper + the target element to a new file, set viewBox to element bounds
Frequently Asked Questions
How do I export each Illustrator artboard as a separate SVG?
File > Export > Export for Screens (Alt+Ctrl+E). Select all artboards. Choose SVG format. Each artboard exports as a separate optimized SVG file.
How do I split an SVG into individual icon files?
If icons are in <symbol> elements: create a new SVG for each — copy the symbol content into an <svg> with a matching viewBox. Or use the svg-export npm package to automate this.
Can I extract a single layer from Inkscape as SVG?
Yes — in Inkscape, hide all layers except the target layer. File > Export PNG Image → switch to Selection export. Or use the XML editor to copy the layer group to a new SVG document.
How do I extract a group from SVG and make it its own SVG?
Copy the <g> group element. Create a new SVG with the same viewBox as the original. Paste the group. Adjust viewBox to match the group's bounding box (use Inkscape Resize Page to Drawing).
Is there a batch SVG extractor CLI tool?
Yes — svg-sprite (for sprite creation/extraction) and svgo (with custom plugin) can handle batch extraction. Or write a Node.js script using cheerio to parse SVG XML and extract elements by id.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Convert Image to SVG — Free