1.0.1 • Published 6 years ago
svg-deconstruct v1.0.1
SVG Deconstruct
An SVG deconstructor that splits an SVG file into its outermost groups, such that a file is formed for each individual group. If Inkscape was used, the individual files will be their layer names.
Usage
svg-deconstruct [options] input.svg [input1.svg ...]
Options
-f, --force-overwrite force overwrite deconstructed SVGs
-o, --output-dir [dir] specify an output directory
-n, --no-opt do not optimise using SVGO
Example
Given the SVG file input.svg
<svg viewBox="0 0 16 9">
<g id="polygons">
<rect width="8" height="9" fill="#d74444" />
<rect x="8" width="8" height="4.5" fill="#2b9e2b" />
<rect x="8" y=4.5 width="8" height="4.5" fill="#2f2fad" />
</g>
<g id="circle">
<circle cx="8" cy="4.5" r="1" fill="white" />
</g>
</svg>
Running svg-deconstruct input.svg
creates a folder input
,
with the files
input/input-circle.svg
<svg viewBox="0 0 16 9">
<g id="circle">
<circle cx="8" cy="4.5" r="1" fill="white"></circle>
</g>
</svg>
input/input-polygons.svg
<svg viewBox="0 0 16 9">
<g id="polygons">
<rect width="8" height="9" fill="#d74444"></rect>
<rect x="8" width="8" height="4.5" fill="#2b9e2b"></rect>
<rect x="8" y="4.5" width="8" height="4.5" fill="#2f2fad"></rect>
</g>
</svg>
SVG Optimisation
While not required, SVGO is recommended (and your preference for its presence will be asked if svg-deconstruct is
installed via npm). The SVG files are automatically optimised with its
presence, and the optimisation configuration can be found in svgo/svgo.json
.
Credits
Configuration for SVG optimisation adapted from the SVGO example script
DOM rendering adapted from a gist by siddMahen