Exporting SVG en masse

I have been dealing with vector images for a long time now, but my usual workflow is editing vector files and exporting them as PNG -files for display. I have saved the projects as Adobe Illustrator .ai files of course, and the odd eps / svg file in there too. But I’ve never really had to delve in deep with SVG and web vector graphics…. Until now!

Vectors in web

In web use, SVG are most commonly used for logos, icons and other simple stuff. It is easy to understand why SVG files have caught on recently, as they are very small in file size, can be edited by programmers in the code, and can be responsive in both scale and coloring. As a web developer, you might want to change an icons color on hover or click, or perhaps have a site logo animate or change size. Instead of loading multiple images, we can edit the vector graphic directly in CSS, which is both easy and quick. Everyone wins!

Saving SVG

The obvious way would be to save the file as an SVG using ”File > Save As > SVG”. In the example below, you will see a icon of my logo as described by somewhat default settings. I saved the file using the artboards, and here is the saved SVG file as opened in text format.

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="30px"
	 height="30px" viewBox="0 0 30 30" style="enable-background:new 0 0 30 30;" xml:space="preserve">
<g id="Layer_1" style="display:none;">
	<rect x="-104.83" y="-473" style="display:inline;fill:#F1F3F8;" width="1920" height="1080"/>
</g>
<g id="Base" style="display:none;">
</g>
<g id="Icons">
	<path style="fill:#0285D5;" d="M26.67,30H3.33C1.49,30,0,28.51,0,26.67V3.33C0,1.49,1.49,0,3.33,0h23.33C28.51,0,30,1.49,30,3.33
		v23.33C30,28.51,28.51,30,26.67,30z"/>
	<path style="fill:#FFFFFF;" d="M14.37,19.49l1.08-1.53l1.54-2.2v2.22l2.4,0c1.66,0,3.01-1.34,3.01-2.99c0-1.69-1.35-3.06-3.01-3.06
		h-2.24l-4.88,7.43l-4.15-7.5H6.73l-0.61-1.37h3.39l2.92,5.6l3.41-5.6h3.56c2.48,0,4.49,2.02,4.49,4.49c0,2.48-2.02,4.49-4.49,4.49
		c-0.17,0-0.34,0-0.53,0H14.37z"/>
</g>
<g id="Guides" style="display:none;">
	<rect x="-104.83" y="-13" style="display:inline;fill:none;stroke:#CCCCCC;stroke-miterlimit:10;" width="1920" height="160"/>
	
		<rect x="-104.83" y="-33" style="display:inline;fill:none;stroke:#CCCCCC;stroke-width:1.118;stroke-miterlimit:10;" width="1920" height="200"/>
</g>
</svg>

Quite a lot of stuff is written down, as Illustrator presumes you’d want to be able to pick on the project some other time, and continue with the workspace as set previously. That’s why it has filled the file with useful information like SVG version, and included guides from the workspace as well. This is ideal if we wish to edit it in illustrator some other time, but would be a nightmare to drop in a website – especially as you may well have plenty of them next to each other. So we need a way to minimize the output.

You could try and optimize the save settings. But ultimately you would only get so far. The real answer lies in ”Export” menu.

Export as SVG

I never even realized this was a thing, and I have been using Illustrator for years. But under export menu, which is the one you use for printing out PNG’s and JPG’s, there’s a setting for exporting SVG.

For web use, I recommend the following settings:

Styling: Inline Style
Font: Convert to outlines (This way shape is preserved even if the reader hasn’t got it installed)
Images: Preserve (You probably should not have any raster images in your file if you are exporting icons and logos)
Object ID’s: Unique (Preserves path names, and names the SVG after the layer. Any of them work well.
Decimal: 2
Minify: If you want to. I prefer not to, as it is a little more legible at almost no cost (it only adds linebreaks)
Responsive: If you have a set size you want to use, I suggest not going for responsive. That way the SVG is saved in the size of the artboard. If you choose responsive, the vector will assume the size of it’s parent element. This could be useful in some cases.

Here is the code as output through settings above! For legibility, I have chosen to include path names (Object ID) and not minified (Allow line breaks).

<svg id="e007b1d9-5d59-4023-8969-58dff1792e1f" data-name="Icons" xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30">
  <rect id="b3a9dfaf-090a-4df0-b3de-9aea846fe73b" data-name="Backdrop" width="30" height="30" rx="3.33" style="fill: #0285d5"/>
  <path id="ba30f726-1e4e-42e0-aa00-ba584d2d8fbb" data-name="logo" d="M14.37,19.49,15.45,18,17,15.76V18h2.4a3,3,0,0,0,3-3,3,3,0,0,0-3-3.06H17.15l-4.88,7.43-4.15-7.5H6.73l-.61-1.36H9.51l2.92,5.59,3.4-5.59h3.56a4.49,4.49,0,0,1,0,9h-5Z" style="fill: #fff"/>
</svg>

And here is the output as PNG! Lots of work for such a small image 🙂 Mind you, if you set up your enviroment well, you will be able to print out loads of variations (different icon shape, different background shape, colors, gradients…) in quick succession, with each output perfect for your web development needs!

Industrial size vector exports

So how do we scale up the production? Well, here is a system I decided to use for a large amount of vectors. I expect you to understand the core functionalities of artboards – if you are not familiar with them, I suggest you to look it up from official documents to better understand what we’re about to do!

1. I first drew up some variations of the icon: Rectangle with rounded corners, Circle, and everyone’s favorite, the squircle!
2. I added 7 paraller artboards (One for each finish of the icon). I centered the icons to fit the boxes.
3. I populate the boxes with the icon graphics
4. Export them all at once! But remember to tick the box for using the artboards, otherwise you’ll end up with one messy file of all the icon graphics…

You may want to add more icons. I would suggest adding the other icon families below the first ones, so you can see them all as you work. But that’s just a personal preference. If you do go this route, I would name each layer based on the name of the icon – first one for me would be Varjo Designs, then Icon 2, then so on. This way your SVG file name would be the name of the icon as stated in the layer, helping you keep everything neat and organised!

Keeping everything organized helps you in the editor, but could help you in the code too. The artboard that includes all the small icon artboards would print out:

<svg>
    <g data-name="Icons">
        <g data-name="varjodesigns">
            <g data-name="squircle"> 

It is noteworthy however, that in this scenario the viewbox would be set by the big artboard. Illustrator doesn’t recongnize the smaller artboards as crop areas, unless you specifically print them out. In that scenario, they will print out to separate files.

Another neat trick is to rename the artboards – that way each file will be named after the artboard, followed by the number of the artboard. For example, if I select first 7 artboards (shift + click), and select options from hamburger menu in the top of the ”artboards” window, it allows me to rename all the selected layers. That way they print out a neat file library that is much easier to scroll through for a dev. Better yet, if you name each layer according to their name and shape, you get this print out:

Why bother with custom icons anyway?

Well, it’s a fair question with no straight answer. There are a lot of good libraries for icons, that save a lot of time and effort. But I often find myself not happy with a design, and mixing and matching icons from different sets can be difficult, as sizing and certainly aesthetic styles might not work together.

Notes for improving this article

• Improve the theme for ”code” blocks
• What turned out to be the best for quick use in web?
• How the style classes need to be set in order to hit them with CSS, and how to target them with CSS?
• A good chance to improve the theme too… This text theme is quite blocky and heavy. Should be more like web magazine

Dog