SVGO Compressor
A Plugin that compresses SVG assets using SVGO, right when you export them. This Plugin requires Sketch 3.8.
Install
- Download SVGO Compressor & unzip it.
- Double click SVGO Compressor.sketchplugin to install the Plugin.
Usage
Selecting menu items or hitting keys is out of fashion, so SVGO Compressor will compress your SVG assets whenever you export them, without you having to do anything.
You’ll get a message on your document window showing some stats about the process to let you know the compression worked as expected.
If you want your SVG assets uncompressed, you can temporarily disable the Plugin by opening Sketch’s Preferences › Plugins and unchecking 'SVGO Compressor'. Or you can right-click any layer and select Copy SVG Code, and that will give you the original, uncompressed code.
Editing Settings
If for some reason you’re not happy with the default settings we’ve chosen, you can select Plugins › SVGO Compressor › About SVGO Compressor and then click the Edit SVGO Settings… button. You default editor will open the svgo.json
file, where you’ll be able to tweak the settings.
SVGO Plugins: what they do
addAttributesToSVGElement
Adds attributes to an outer <svg>
element
What it does:
- nothing, apparently
addClassesToSVGElement
Adds classes to an outer <svg>
element
What it does:
- nothing, apparently
cleanupAttrs
Cleanups attributes from newlines, trailing and repeating spaces
What it does:
It removes newlines, trailing and repeating spaces from all attributes in an SVG. Sketch doesn't output extra white space or newlines in SVG attributes, so this plugin is not enabled by default in SVGO Compressor.
cleanupEnableBackground
Remove or cleanup enable-background attr which coincides with a width/height box (see http://www.w3.org/TR/SVG/filters.html#EnableBackgroundProperty).
It will turn this:
<svg width="100" height="50" enable-background="new 0 0 100 50">
to this:
<svg width="100" height="50">
This is not needed in SVGO Compressor, since Sketch does not output enable-background attributes, so it's not enabled by default.
cleanupIDs
Removes unused IDs in the file, and minifies used IDs (only if there are no <style>
or <script>
tags).
It will turn this:
<defs>
<rect id="path-1" x="0" y="0" width="100" height="100"></rect>
</defs>
<mask id="mask-2" fill="white">
<use xlink:href="#path-1"></use>
</mask>
<use id="Mask" fill="#D8D8D8" xlink:href="#path-1"></use>
<rect id="Rectangle" fill="#D8D8D8" mask="url(#mask-2)" x="-10" y="-10" width="100" height="100"></rect>
into this:
<defs>
<rect id="a" x="0" y="0" width="100" height="100"/>
</defs>
<mask id="b" fill="white">
<use xlink:href="#a"/>
</mask>
<use fill="#D8D8D8" xlink:href="#a"/>
<rect fill="#D8D8D8" mask="url(#b)" x="-10" y="-10" width="100" height="100"/>
By default, SVGO will change the IDs for paths in defs
, using minified names (a
, b
…), and this may not be ideal for all scenarios (i.e: if you export multiple SVG assets for use on a web page, they'll use the same IDs for paths on different assets).
We work around this issue by adding a prefix for each asset, based on its filename. I.e: if you're exporting an asset named icon-star
, its defs
will be named icon-star-a
, icon-star-b
, etc…. You can disable this behaviour by setting minify
to false
in svgo.json
:
"plugins": [
{
"name": "cleanupIDs",
"params": {
"minify": false
}
}
]
cleanupListOfValues
Rounds list of values to the fixed precision (defaults to 3 decimals) in the following attributes:
- points
- enable-background
- viewBox
- stroke-dasharray
- dx
- dy
- x
- y
It won't round width
, height
or transform
attributes.
Turns this
<polygon points="208.250977 77.1308594 223.069336 ... "/>
into this
<polygon points="208.251 77.131 223.069 ... "/>
It is enabled by default in SVGO Compressor, and we default it to 3 decimals. If you want to change the precision, you can do so in svgo.json
:
"plugins": [
{
"name": "cleanupListOfValues",
"params": {
"floatPrecision": 1
}
}
]
cleanupNumericValues
Rounds numeric values to the fixed precision, removes default ‘px’ units.
Enabled by default in SVGO Compressor.
collapseGroups
Collapses useless groups.
Turns this:
<g>
<g attr1="val1">
<path d="..."/>
</g>
</g>
into this
<path attr1="val1" d="..."/>
Enabled by default in SVGO Compressor.
convertColors
Converts colors: rgb() to #rrggbb and #rrggbb to #rgb.
It supports the following features:
- Convert color name keyword to long hex (
names2hex
param, enabled by default)fuchsia
➡#ff00ff
- Convert rgb() to long hex (
rgb2hex
param, enabled by default)rgb(255, 0, 255)
➡#ff00ff
rgb(50%, 100, 100%)
➡#7f64ff
- Convert long hex to short hex (
shorthex
param, enabled by default)#aabbcc
➡#abc
- Convert hex to short name (
shortname
param, enabled by default). Converts hex to color name if the color name is shorter than the hex value.#000080
➡navy
convertPathData
Optimizes path data: writes in shorter form, applies transformations.
Since this modifies path data, it's off by default in SVGO Compressor.
convertShapeToPath
Converts basic shapes to more compact path form.
This is turned off in SVGO Compressor, since it will turn your rect
s and polygon
s into path
s, which might not be ideal if you plan on doing SVG animation.
convertStyleToAttrs
Converts style in attributes. Cleanups comments and invalid declarations (without colon) as a side effect.
Turns this
<g style="fill:#000; color: #fff; -webkit-blah: blah">
into this
<g fill="#000" color="#fff" style="-webkit-blah: blah">
Enabled by default in SVGO Compressor.
convertTransform
Converts matrices to the short aliases, converts long translate, scale or rotate transform notations to the shorts ones, converts transforms to the matrices and multiply them all into one, remove useless transforms.
Enabled by default in SVGO Compressor.
mergePaths
Merges multiple Paths into one.
Enabled by default in SVGO Compressor.
minifyStyles
Minifies styles (<style>
element + style attribute)
Enabled by default in SVGO Compressor.
moveElemsAttrsToGroup
Collapses content's intersected and inheritable attributes to the existing group wrapper.
Turns this
<g attr1="val1">
<g attr2="val2">
text
</g>
<circle attr2="val2" attr3="val3"/>
</g>
into this
<g attr1="val1" attr2="val2">
<g>
text
</g>
<circle attr3="val3"/>
</g>
Off by default in SVGO Compressor.
moveGroupAttrsToElems
Moves group attrs to the content elements.
Turns this
<g transform="scale(2)">
<path transform="rotate(45)" d="M0,0 L10,20"/>
<path transform="translate(10, 20)" d="M0,10 L20,30"/>
</g>
into this
<g>
<path transform="scale(2) rotate(45)" d="M0,0 L10,20"/>
<path transform="scale(2) translate(10, 20)" d="M0,10 L20,30"/>
</g>
Off by default in SVGO Compressor.
removeAttrs
Removes the specified attributes in the plugin params.
Example:
"plugins": [
{
"name": "removeAttrs",
"params": {
"attrs": "fill"
}
}
]
will remove all the fill
attributes in the file.
Off by default for obvious reasons in SVGO Compressor.
removeComments
Removes comments in the SVG file. Gets rid of the <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
bit.
Enabled by default in SVGO Compressor.
removeDesc
Removes <desc>
. Gets rid of the <desc>Created with Sketch.</desc>
bit.
Enabled by default in SVGO Compressor.
removeDimensions
Removes width/height attributes when a viewBox attribute is present.
Off by default in SVGO Compressor, because it sometimes messes with rendering on web pages.
removeDoctype
Removes DOCTYPE declaration.
Enabled by default in SVGO Compressor.
removeEditorsNSData
Removes editors namespaces, elements and attributes.
This is on by default in SVGO Compressor for historical reasons, but it's not really needed since Sketch no longer outputs an editor namespace.
removeElementsByAttr
Removes arbitrary SVG elements by ID or className.
Example:
"plugins": [
{
"name": "removeElementsByAttr",
"params": {
"id": "elementID"
}
}
]
will remove all the elements whose id
is elementID
.
Off by default for obvious reasons in SVGO Compressor.
removeEmptyAttrs
Removes attributes with empty values.
On by default in SVGO Compressor.
removeEmptyContainers
Removes empty container elements.
Turns this
<g>
<marker>
<a/>
</marker>
</g>
into nothing.
On by default in SVGO Compressor.
removeEmptyText
Removes empty Text elements.
On by default in SVGO Compressor.
removeHiddenElems
Removes hidden elements with disabled rendering:
- display="none"
- opacity="0"
- circle with zero radius
- ellipse with zero x-axis or y-axis radius
- rectangle with zero width or height
- pattern with zero width or height
- image with zero width or height
- path with empty data
- polyline with empty points
- polygon with empty points
Off by default in SVGO Compressor, since Sketch does not export hidden elements.
removeMetadata
Removes <metadata>
.
On by default in SVGO Compressor.
removeNonInheritableGroupAttrs
Removes non-inheritable group's "presentation" attributes.
On by default in SVGO Compressor.
removeRasterImages
Removes raster images references in <image>
.
Off by default in SVGO Compressor, since it's pretty destructive.
removeStyleElement
Removes the <style>
element.
Off by default in SVGO Compressor.
removeTitle
Removes <title>
.
On by default in SVGO Compressor, but you may consider disabling it for accessibility reasons.
removeUnknownsAndDefaults
Removes unknown elements' content and attributes, removes attrs with default values.
On by default in SVGO Compressor.
removeUnusedNS
Removes unused namespaces declaration.
On by default in SVGO Compressor.
removeUselessDefs
Removes content of defs and properties that aren't rendered directly without ids.
On by default in SVGO Compressor.
removeUselessStrokeAndFill
Removes useless stroke and fill attrs.
On by default in SVGO Compressor.
removeViewBox
Removes viewBox attr which coincides with a width/height box.
Turns this
<svg width="100" height="50" viewBox="0 0 100 50">
into this
<svg width="100" height="50">
Off by default in SVGO Compressor.
removeXMLNS
Removes the xmlns
attribute when present.
Turns this
<svg viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
into this
<svg viewBox="0 0 100 50">
On by default in SVGO Compressor.
removeXMLProcInst
Removes XML Processing Instruction (the <?xml version="1.0" encoding="UTF-8"?>
bit).
On by default in SVGO Compressor.
sortAttrs
Sorts element attributes to improve readability.
On by default in SVGO Compressor.
transformsWithOnePath
Performs a set of operations on SVG with one path inside.
Off by default in SVGO Compressor, don't enable unless you really know what you're doing : )
Acknowledgements
We would like to thank:
- The SVGO project, for creating the golden standard for SVG compression.
- Andrey Shakhmin, for his inspiration during the Hamburg Hackathon, where he showed us how to use node modules inside Sketch.
Support & feedback
We’ve done our best to make the Plugin useful & usable, but we know there’s always room for improvement. If you have any question or want to share your feedback, we’d love to hear it. Either file an issue, or get in touch with us at developers@sketchapp.com