Preparing SVG Illustrations for Export

Tips for preparing scalable SVG illustrations

After many years of creating and exporting illustrations using the same method in Illustrator CC, I’ve switched over to a more efficient (and enjoyable) process of exporting SVG through Sketch. If you’re like me, you’re stuck in your ways and find Illustrator to be much faster and more comfortable for creating illustrations. I just can’t bring myself to do beziers in Sketch or to use the combine shape tool.

As a Designer working on white-labeling products for web, iOS and Android, I am challenged with creating assets that can easily be scaled and adapted to fit a client’s brand. Rather than re-creating each asset for new client projects, we decided to develop a design system to edit and scale design assets through SVG manipulation. This method involves several steps to set up the files, and through some trial and error, I was able to export the SVG files in an efficient way that renders correctly in browsers.

*This article uses Illustrator and Sketch to create and export illustrations.

Issues with Designing in Illustrator

  • Extra steps to outline strokes and combine paths
  • Tedious layer organization which doesn’t cleanly export to SVG
  • Limitations in artboards (up to 100)
  • Issues with transparencies when exporting from Illustrator to Sketch

Setting Up Your Illustrator File

Illustrator File Organization

My process usual involves a combination of a Wacom tablet brush strokes and vector paths. These two methods result in varied stroke and path marks, which need additional attention.

  • Combine all overlapping similar paths into the same shape. Shift + M is my best friend.
Combine overlapping paths
  • Combine any similar path colors into one shape (Shift + M)
Combine similar shapes
  • Outline any remaining strokes (Sketch will automatically do this when you open the file in Illustrator, but it will cause problems with overlapping strokes, so it’s much easier to do this step in Illustrator). Once you’ve completed this step, remember to combine the overlapping shapes.
Outline Stroke

Organizing Your Files in SVG

I had considered skipping the layer organization and instead managing file and colors within the SVG file itself.

The SVG file is an unwieldy mess, and far too much effort to organize through SVG alone. It’s difficult to parse out where the id and path class selectors are. You’ll see that there are multiple classes named path class="cl-1" which is the root of the problem. Illustrator assigns class names to paths, which can cause issues, such as bleeding colors or misrepresentation of layers, when rendering in a browser.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800.42 236.47"><defs><style>.cls-1{fill:#e5e5e5;}.cls-2{fill:#662079;}.cls-3{fill:#1ac8df;}.cls-4{fill:#262626;}.cls-5{fill:#006ab6;}.cls-6{fill:#ed7d1a;}.cls-7{fill:#645fa8;stroke:#37246a;stroke-miterlimit:10;stroke-width:2.11px;}.cls-8{fill:#fff;}.cls-9{fill:#e0d2e4;}.cls-10{fill:#4d185b;}</style></defs><title>achievements-icon</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M0,82s32,0,51,33,54.51,27.49,78,36,48,50.49,89,51.48,76.51,33.49,76.51,33.49l-294,.56Z"/><path class="cls-1" d="M799,226.74v9.2H408.95a57.9,57.9,0,0,1,28-19.25c17.9-5.57,37.71-2.18,55.52-8.07,15.41-5.09,27.7-16.56,40.65-26.35s28.44-18.45,44.55-16.4c10.31,1.32,19.58,6.9,29.72,9.21,35.63,8.13,68.48-25,105-25.57a61.47,61.47,0,0,1,52.77,29.64c9.19,15.6,12.46,36.49,28.31,45.24A31.19,31.19,0,0,0,799,226.74Z"/><g id="_Group_" data-name="&lt;Group&gt;"><path class="cls-2" d="M730.17,61.17a2.59,2.59,0,0,1-.56,1c-2.24,6.56-17.16-8.19-19.11-10.4-6.59-7.48-10.43-19.19-4.45-28.22,5.72-8.67,17.22-8.32,23.2,0C736.6,33.72,733.4,50.06,730.17,61.17Z"/></g><g id="_Group_2" data-name="&lt;Group&gt;"><path class="cls-2" d="M787.87,64.06c1.85,9.9-2.7,22.7-8.86,30.45a2.09,2.09,0,0,1-2.82.57c-8.91-1.16-14.92-16.83-16.4-24.16-1.54-7.68,1.09-17.23,9.18-20.12C778.11,47.52,786.29,55.59,787.87,64.06ZM776.49,89.53a41.13,41.13,0,0,0,6.78-20.42c.18-6.47-4.45-16.74-12.77-13.55-7.12,2.73>
...
</g></g></svg>

Importing File into Sketch

I don’t both with naming my layers in Illustrator. It’s a tedious step and I have to repeat the process again when I import the file into Sketch.

Once I import the file, I see a big mess of layers that looks a little overwhelming.

Big ol’ mess of layers

Organize and Rename Your Layers

After I open the Illustrator file in Sketch, I organize the layers by color type. The layers allow for three core brand colors (brand-primary, brand-secondary and brand-tertiary) along with variations of the core colors for accents. A light gray or black can also be used when core colors don’t allow for enough contrast or depth.

The Rename It plugin has saved my life.

Rename Your Layers

Preparing for Export

If you export the illustration after organization, the file will look something like this, which isn’t quite what we want.

<?xml version="1.0" encoding="UTF-8"?>
<svg width="75px" height="75px" viewBox="0 0 75 75" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
<title>points-advanced-activity</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="points-advanced-activity">
<path d="M75.93925,37.8204757 C75.93925,58.5616288 59.1951591,75.3754306 38.5408409,75.3754306 C17.8865227,75.3754306 1.14379545,58.5616288 1.14379545,37.8204757 C1.14379545,17.0793225 17.8865227,0.264836036 38.5408409,0.264836036 C59.1951591,0.264836036 75.93925,17.0793225 75.93925,37.8204757" id="white" fill="#FFFFFF"></path>
<path d="M75.93925,37.8204757 C75.93925,58.5616288 59.1951591,75.3754306 38.5408409,75.3754306 C17.8865227,75.3754306 1.14379545,58.5616288 1.14379545,37.8204757 C1.14379545,17.0793225 17.8865227,0.264836036 38.5408409,0.264836036 C59.1951591,0.264836036 75.93925,17.0793225 75.93925,37.8204757 Z" id="brand-primary" stroke="#006AB6"></path>
<path d="M37.3539318,60.7680937 L48.7450682,60.7680937 C48.7450682,58.2655712 45.37825,58.070436 44.4250682,57.0598414 C43.7602955,56.3559856 43.8571136,54.242364 43.8571136,54.242364 L33.2248409,54.242364 C33.2248409,54.242364 33.3223409,56.3559856 32.6568864,57.0598414 C31.7043864,58.070436 28.3368864,58.2655712 28.3368864,60.7680937 L39.7280227,60.7680937" id="brand-primary" fill="#4C8ACE"></path>
...
</g>
</g>
</svg>

SVG Compressor

I used a nifty SVG Compressor, which does a great job of organizing files and removing unnecessary elements. But now the layer names, class and ids are gone.

<svg xmlns="http://www.w3.org/2000/svg" width="787" height="234" viewBox="0 0 787 234">
<g fill="none" fill-rule="evenodd">
<g fill="#E5E5E5" transform="translate(0 78)">
<path d="M0 7.92989686e-10C0 7.92989686e-10 32-.00599999921 51.007 32.99 70.014 65.986 105.513 60.479 129.014 68.975 152.516 77.471 177.023 119.466 218.024 120.457 259.024 121.449 294.53 153.942 294.53 153.942L.53 154.5 0 7.92989686e-10zM784.07 146.235993L784.07 155.435993 394 155.435993C401.139 146.415993 411.04 139.594993 422.04 136.185993 439.94 130.615993 459.75 134.005993 477.56 128.115993 492.969 123.025993 505.259 111.554993 518.21 101.765993 531.17 91.9759933 546.65 83.3159933 562.759 85.3659933 573.07 86.6859933 582.34 92.2659933 592.48 94.5759933 628.11 102.705993 660.96 69.5259933 697.5 69.0059933 718.639 68.6959933 739.53 80.4359933 750.27 98.6459933 759.46 114.245993 762.73 135.134993 778.58 143.884993 780.34 144.855993 782.179 145.625993 784.07 146.235993"/>
</g>
<g fill="#ED7D1A" transform="translate(247 10)">
<path d="M151.396,171.034 L122.035,171.034 C118.149,171.034 115,166.759526 115,161.486 L158.43,161.486 C158.43,166.759526 155.281,171.034 151.396,171.034"/>
<polygon points="83.17 68.207 192.861 68.207 192.861 58.659 83.17 58.659"/>
<polygon points=".515 28.939 28.015 13.439 32.015 27.439 2.515 45.439"/>
<polygon points="153.015 16.439 180.515 .939 184.515 14.939 155.015 32.939"/>
<polygon points="291.399 90.18 276.53 62.369 290.581 58.659 307.902 88.52"/>
<polygon points="237.872 64.236 219.647 38.424 233.214 33.068 254.133 60.621"/>
</g>
...
</g>
</g>
</svg>

Go to the Settings for the Plugin and go to Edit SVGO Settings. From here, remove collapseGroups and cleanupIDs . The output will look something like the below. Now our layer ids are included!

<svg xmlns="http://www.w3.org/2000/svg" width="787" height="234" viewBox="0 0 787 234">
<g id="Symbols" fill="none" fill-rule="evenodd">
<g id="icon-/-achievements-/-achievements-header-1">
<g id="icon-/-achievements-/-achievements-banner">
<g id="gray" fill="#E5E5E5" transform="translate(0 78)">
<path d="M0 7.92989686e-10C0 7.92989686e-10 32-.00599999921 51.007 32.99 70.014 65.986 105.513 60.479 129.014 68.975 152.516 77.471 177.023 119.466 218.024 120.457 259.024 121.449 294.53 153.942 294.53 153.942L.53 154.5 0 7.92989686e-10zM784.07 146.235993L784.07 155.435993 394 155.435993C401.139 146.415993 411.04 139.594993 422.04 136.185993 439.94 130.615993 459.75 134.005993 477.56 128.115993 492.969 123.025993 505.259 111.554993 518.21 101.765993 531.17 91.9759933 546.65 83.3159933 562.759 85.3659933 573.07 86.6859933 582.34 92.2659933 592.48 94.5759933 628.11 102.705993 660.96 69.5259933 697.5 69.0059933 718.639 68.6959933 739.53 80.4359933 750.27 98.6459933 759.46 114.245993 762.73 135.134993 778.58 143.884993 780.34 144.855993 782.179 145.625993 784.07 146.235993"/>
</g>
<g id="brand-secondary" fill="#ED7D1A" transform="translate(247 10)">
<path d="M151.396,171.034 L122.035,171.034 C118.149,171.034 115,166.759526 115,161.486 L158.43,161.486 C158.43,166.759526 155.281,171.034 151.396,171.034"/>
<polygon points="83.17 68.207 192.861 68.207 192.861 58.659 83.17 58.659"/>
<polygon points=".515 28.939 28.015 13.439 32.015 27.439 2.515 45.439"/>
<polygon points="153.015 16.439 180.515 .939 184.515 14.939 155.015 32.939"/>
<polygon points="291.399 90.18 276.53 62.369 290.581 58.659 307.902 88.52"/>
<polygon points="237.872 64.236 219.647 38.424 233.214 33.068 254.133 60.621"/>
</g>
<g id="brand-tertiary" transform="translate(11 1)">
<path fill="#661F79" d="M704.1646 57.1732C704.0456 57.5832 703.8456 57.9122 703.6046 58.1832 701.3656 64.7422 686.4446 49.9922 684.4946 47.7822 677.9046 40.3032 674.0646 28.5932 680.0456 19.5632 685.7656 10.8932 697.2656 11.2422 703.2446 19.5232 710.5956 29.7232 707.3946 46.0632 704.1646 57.1732M761.8669 60.0567C763.7129 69.9557 759.1659 82.7567 753.0079 90.5047 752.1739 91.5497 751.0729 91.5737 750.1899 91.0727 741.2809 89.9117 735.2669 74.2427 733.7869 66.9137 732.2519 59.2347 734.8739 49.6847 742.9639 46.7967 752.1099 43.5247 760.2889 51.5897 761.8669 60.0567z"/>



<g id="brand-tertiary-30" fill="#4D185B" transform="translate(28 7)">

</g>
</g>
</g>
</svg>

And Voila! We now have an organized and appropriately exported SVG file that we can manipulate in the browser.

Thank you for reading! Do you have a better method? I would love to hear it. As always, I welcome your feedback.