A Plugin that compresses SVG assets using SVGO, right when you export them. This Plugin requires Sketch 3.8.
- Download SVGO Compressor & unzip it.
- Double click SVGO Compressor.sketchplugin to install the Plugin.
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.
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.
pretty
: Make SVG pretty printedindent
: Indent number when pretty printing SVGsmultipass
: Run the optimization 10 timesfloatPrecision
: The precision of the numbers to use in all the pluginsdebug
: Print some logs to help debug the SVGO configuration
Adds attributes to an outer <svg>
element
It will turn this:
<svg viewBox="0 0 100 50">
to this:
<svg width="100" height="50" viewBox="0 0 100 50">
Use the attribute
parameter if you only have one attribute, or pass an array of attribute objects to attributes
.
Can be used with one or more attributes
{
"name": "addAttributesToSVGElement",
"params": {
"attribute": { "width": "100"},
"attributes": [
{ "width": "100" },
{ "height": "50" }
]
}
}
Adds classes to an outer <svg>
element
It will turn this:
<svg viewBox="0 0 100 50">
to this:
<svg viewBox="0 0 100 50" class="test another-test">
Use the className
parameter if you only have one class, or pass an array of classes to classNames
.
Can be used with one or more attributes
{
"name": "addClassesToSVGElement",
"params": {
"className": "test",
"classNames": [
"test",
"another-test"
]
}
}
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.
Remove or cleanup enable-background attributes 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.
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. You can disable this behaviour by setting minify
to false
in svgo.json
:
"plugins": [
{
"name": "cleanupIDs",
"params": {
"minify": false
}
}
]
TODO: send SVGO a pull request to do this on their side, using something like an autoprefix
param.
TODO: we should do a better job with this in Sketch, since we're basically using path-X
ourselves, where X
is a number that starts from 1 for each exported asset. We should probably use the path name, or something derived from it.
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
}
}
]
Rounds numeric values to the fixed precision, removes default ‘px’ units.
Enabled by default in SVGO Compressor.
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.
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
Optimizes path data: writes in shorter form, applies transformations.
Since this modifies path data, it's off by default in SVGO Compressor.
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.
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.
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.
Moves + merges styles from style elements to element styles.
Off by default in SVGO Compressor.
Merges multiple Paths into one.
Enabled by default in SVGO Compressor.
Minifies styles (<style>
element + style attribute)
Enabled by default in SVGO Compressor.
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.
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.
Add a prefix to IDs.
Off by default in SVGO Compressor.
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.
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.
Removes <desc>
. Gets rid of the <desc>Created with Sketch.</desc>
bit.
Enabled by default in SVGO Compressor.
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.
Removes DOCTYPE declaration.
Enabled by default in SVGO Compressor.
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.
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.
Removes attributes with empty values.
On by default in SVGO Compressor.
Removes empty container elements.
Turns this
<g>
<marker>
<a/>
</marker>
</g>
into nothing.
On by default in SVGO Compressor.
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.
Removes <metadata>
.
On by default in SVGO Compressor.
Removes non-inheritable group's "presentation" attributes.
On by default in SVGO Compressor.
Removes raster images references in <image>
.
Off by default in SVGO Compressor, since it's pretty destructive.
Removes the <script>
element.
Off by default in SVGO Compressor.
Removes the <style>
element.
Off by default in SVGO Compressor.
Removes <title>
.
On by default in SVGO Compressor, but you may consider disabling it for accessibility reasons.
Removes unknown elements' content and attributes, removes attrs with default values.
On by default in SVGO Compressor.
Removes unused namespaces declaration.
On by default in SVGO Compressor.
Removes content of defs and properties that aren't rendered directly without ids.
On by default in SVGO Compressor.
Removes useless stroke and fill attrs.
On by default in SVGO Compressor.
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.
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.
Removes XML Processing Instruction (the <?xml version="1.0" encoding="UTF-8"?>
bit).
On by default in SVGO Compressor.
Sorts element attributes to improve readability.
On by default in SVGO Compressor.
requires Sketch >= 52
You can specify custom SVGO plugins by giving a relative path to a JS file instead of a name:
...
+ {
+ "path": "./SVGO-plugins/sRGB-blur.js",
+ "enabled": true,
+ "params": {}
+ }
You can find a list of custom SVGO plugins that the community created:
- sRGB-blur (see #40)
- convertIdToClass
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.
This plugin is built using skpm. To build it, just run
npm i
npm run build
To edit the Plugin's code, edit the code in src
and run npm run build
again (or, for the ultimate laziness, run npm run watch
and it will observe any changes in the files and rebuild the Plugin every time you save them.)
For more details, check the skpm documentation.