May 08, 2018 · Everything SVG

How Nano Compresses SVG

Wanted to know how Nano compresses SVG? Of course you do, so let's have a look at the long list of techniques we used to compress your SVG.

Please do note that these techniques are not exhaustive, and we will further improve nano with more techniques to ensure even smaller sizes.

Optimizing fonts

The entire SVG will be scanned for used text elements. If none is used, no fonts will be embedded. If text are used, only used fonts are embedded, to ensure smallest of file size.

Removing tabs, line feeds and carriage returns

Whitespace characters such as tabs and carriage returns are redundant in SVG and can be safely removed.

Remove events and scripts

SVG files are allowed to have scripts and events according to specifications. However, for the case of using an SVG on an <image> tag, no external resources, scripts nor events are allowed, therefore it can be removed. For usage on <object> tags, they are preserved.

Remove comments

<!-- Some svg comments -->
<svg width="10" height="10"></svg>

Comments in SVG can be safely removed.

Remove namespaced tags

SVG codes produced by some editors may contain namespaced tags:

   inkscape:persp3d-origin="0.5 : 0.33333333 : 1"
   id="perspective2824" />

For use cases such as embedding svg images on websites, these namespaced tags can be safely removed without affecting display.

Remove namespaced attributes

<rect v:begin="thin.end" />

Namespaced attributes are used by editors to store data and can be safely removed.

Remove third party namespaces

<svg xmlns=""

Many editors including insert a namespace and these can be safely removed.

Removing unused ID and classes

<g id="jgqbvghln5" transform="translate(20 10)">
    <rect width="10" height="10" x="0" y="0" />

Most editors insert an ID into every element to keep track of them. These IDs, if not referred by another element, can be safely removed. If a class is defined in a style, and it is not used on any elements, they will be removed.

Compacting ID

<g id="jgqbvghln5" transform="translate(20 10)">
    <rect width="10" height="10" x="0" y="0" />
<!-- will be compacted to: -->
<g id="A" transform="translate(20 10)">
    <rect width="10" height="10" x="0" y="0" />

If an ID is used, nano will compact the ID into a very short string to save space. The same applies for classes.

Removing hidden elements

Elements with opacity === 0, width === 0, display === none, etc, will be removed because they do not render.

Converting elements

Polygons, polyline and line elements will be converted to paths, because paths occupies less space. If a rectangle does not have rounded corners it will also be converted to paths. If an ellipse have the same x and y radius, it will be converted into a circle.

Removing zero units

By default, certain SVG elements will have 0 as default, therefore specifying x="0" for a rectangle is not necessary and can be safely removed. Nano selectively scans the entire SVG to remove these unnecessary attributes.

Minifying styles

Styles in <style> tags and in attributes will be minified, respecting CSS styling precedence and specificity. Unused styles or CSS rules that does not affect any elements will be removed.

Removing unknown or extraneous attributes

The SVG specifications are very clear on what attributes are allowed on elements, therefore unknown or extraneous attributes will be removed. For example, stroke-linejoin and stroke-linecap attributes will be removed from circle elements because these attributes does not affect the rendering of the circle element.

Minifying colors

Nano scans the entire SVG to reduce colors into the smallest string. If a hex 6 color is encountered (#000000), it will be replaced with #000. Whenever possible, predefined SVG colors will be used, only if they are shorter in length.

Removing title and description

For the use case of embedding SVG with <img> tags, title and descriptions can be safely removed, for they will not display, and will only be useful when embedding with inline SVG.

Removing useless containers

        <rect id="A" width="10" height="10" />
<!-- will be minified to: -->
    <rect id="A" width="10" height="10" />

Although the SVG specification allows container elements to contain other container elements, these are not necessary and can be safely removed without affect SVG display.

Compressing transform attributes

Whenever possible, transformations will be applied to elements, including gradient elements without affecting rendering, to save space. Complex, multi step transformations will be simplified into a single transformation.

Merging and minifying paths

If paths does not intersect and are not styled with gradients, they can be safely merged to result in space savings. Path attributes are also minified when possible, to result in the shortest "d" attribute.

Removing useless groups

<g><rect width="10" height="10" /></g>
<!-- will be reduced to: -->
<rect width="10" height="10" />

Useless groups will be removed or reduced whenever possible.

Rounding values

Whenever possible, values will be rounded to 3 decimals, so attributes with 2.0000009, will be selectively and smartly rounded to just 2.

Like the article? Give the author some claps.

Share it with your friends!

Thomas Yip

Founder at, created Electra, engineering nerd.

Creating a diagram?

Introducing the world's first SVG editor with javascript based plugins

Learn more...


May 14, 2019 · Everything SVG

5 Most common problems faced by SVG users

As SVG adoption increases 100% year-over-year, front end developers and designers like yourself will increasingly be expected to use more and more SVG in websites, all around the world.

January 05, 2019 · Everything SVG

Tips for smaller svg sizes

You fire up your favourite editor and produce SVGs but found their sizes to be bigger than expected. Is there anything you can do to reduce SVG file sizes? Read on to find out how to reduce SVG sizes to a bare minimum.

October 28, 2018 · Everything SVG

Using fonts in SVG

A year after SVG 1.0 was introduced back in 1999, SVG fonts was introduced with intention to allow designers to design SVG graphics with any fonts they like and have the fonts showing up correctly on the end user browser. But 18 years later now, how ...

Keep yourself updated with the latest development on SVG, Web development, CSS and Javascript. BETA