The Designer’s Guide to Working with SVG – Pt 1

What’s the big deal about SVG, anyway? Don’t you just hit ‘Save as SVG’ in Illustrator, and you’ve got yourself an SVG? Yes and no. While it’s technically true, by the same logic, every MS Word user is technically a web developer. Perhaps the question to ask is: Is that SVG file any more useful than an equivalent PNG or JPG? Often the generated SVG files we get from graphics apps are not actually very much use outside the application that made it. The real power of SVG becomes clearer when you’ve got a readable, manipulatable document — and not a dense, arcane document ejected from a graphics app. Today, I want to give you a speed guide on the basics of SVG, and how to get files that you can work with. In the weeks that follow, we’ll cover some more interesting thing you can do with these files.

SVG 101: How do you create an SVG?

Arguably, the coolest thing about SVG is you don’t need fancy (or expensive) software to make them. Just like your HTML/CSS files, you can create an SVG with nothing more than trusty ol’ Notepad, Textedit or even VIM. In fact, if you’ve never hand-coded SVG before, try this:

• Bust out a new text file in your editor of choice.
• Add the following three lines : <svg xmlns="https://www.w3.org/2000/svg"> <circle cx="40" cy="40" r="24" fill="#00cc00"/> </svg>
• Save the file as ‘whatever.svg‘.
• Point your browser at it.

There you go. You’ve created a simple, finished graphic in less than it takes to write a tweet. If we wanted to add a red rectangle after the circle, we could add the following. <rect x="100" y="20" height="40" width="70" fill="#ff3300"/> What about if we wanted to group the circle and rectangle into a single object? SVG has a handy <g> element that you can use as a ‘container’ for grouping objects together. Think of it like a DIV in HTML. We could do something like this.

<svg xmlns="https://www.w3.org/2000/svg">
  <g id="shapes">
  <circle cx="40" cy="40" r="24" fill="#00cc00"/>
  <rect x="100" y="20" height="50" width="50" fill="#ff3300"/>  
  </g>
</svg>

As you can see, SVG is relatively simple to both write and make sense of. If you know your HTML, this should feel reassuringly familiar. However, there are going to be times where hand-coding a complicated letterform, an icon or a map coastline becomes impractical. We’re going to need a graphics tool that gives us clean, raw SVG to work with. So, let’s first take a quick (and by no means comprehensive) look at the some of the main graphics editors that handle SVG — and how they perform.

Inkscape

I’m starting with Inkscape because, though it may not be the prettiest, it’s powerful, it’s free, it runs on all platforms, and can produce very nice SVG. Like many graphics applications, Inkscape has a ‘Layers’ panel on the right column. Any time you name one of these layers, that name automatically becomes the ID of a group in your SVG. This is a great way to start structuring and organising your SVG, before it becomes code. Exporting SVG in Inkscape Chances are, if you know anything about Inkscape, it’s probably that Inkscape uses SVG as its default format. Perfect, right? Not quite. The default Inkscape format — referred to as ‘Inkscape SVG’ — isn’t really what you want to work with outside of Inkscape.

It’s fine to keep these files as ‘working documents’, but they’re full of Inkscape-specific code that is useless and bloating outside of Inkscape. So, when you save a document in Inkscape, you’ll see ‘Plain SVG’ listed as a format just below ‘Inkscape SVG’. This is much better. Even better, further down that file format list you’ll see ‘Optimized SVG’. This ‘Optimized SVG’ option offers you an export settings dialog (pictured), including the ability to trim decimal places and embed raster images. How does this ‘Optimized SVG’ compare to the default format? As an example, here’s a very simple SVG letterform that is 2125 characters when viewed in a text editor.

Look at the markup and you’ll see line after line of ‘inkscape’ and ‘sodipodi’ properties, that have no meaning outside of Inkscape. The same file exported as an ‘Optimized SVG’ becomes 760 characters. And even that file could be manually trimmed to less than 500 characters without altering the way it renders. In short, always use the ‘Optimized SVG’ option for any file you intend to use in a browser. Note: The ‘Optimized SVG’ option may require you to install an extra Python library file. If this becomes a sticking point for you , the ‘Plain SVG’ is a still very good option.

Adobe Illustrator CC

Adobe Illustrator has been capable of exporting SVG for long time, but until recently it’s been fairly horrible. The good news is Adobe has stepped up their game here, and Illustrator CC’s SVG export is now quite flexible and efficient. Like Inkscape, Illustrator will convert your all layer names into SVG groups, so use meaningful layer titles and don’t miss the opportunity to organise your artwork properly. Under the ‘Save As’ option, you’ll find SVG in the dropdown list. This will launch a dialog (shown) that will let you set the precision levels

Illustrator’s amazing tool set is also its biggest potential SVG ‘gotcha’. It’s easy to be lured into using extravagant brushes and filters that don’t have obvious equivalents in SVG. Most of the time the results are going to be visually clunky and bloated, and you’ll start losing a lot of the benefits of using SVG. In short: Use Illustrator, but try not to get too fancy. Also note that older version of Illustrator will export SVG, but you’ll have to manually clean the files up.

Webcode

Webcode is an OS-X-only option that I reviewed a few weeks ago, so I won’t go into in great detail here. One great aspect of Webcode is its ability to easily produce fallback PNGs or JPGs from your SVGs. It also gives your pure SVG circles when you ask for circles. Suffice to say, Webcode positively encourages you to construct intelligent, well-organised SVGs from the start with a very SVG-centric toolset. I like it.

Sketch

Sketch is another OS-X-only option, that seems to have struck a huge chord with designers. In fact, our own Peter Bakacs will be covering his experiences making the shift to Sketch in a separate article. I digress. In terms of pure toolsets, Sketch is probably more closely related to Adobe Fireworks or even Illustrator, than it is to Photoshop. It has a heart of vectors, not pixels, which is a good start. But, can it write nice SVG? Sketch is certainly a broader graphic design tool than a ‘coder-focused’ tool like Webcode. As such, Sketch doesn’t currently expose you directly to the SVG code as you work. Personally, I do find it useful to be able to see my code before hitting export. Sketch has a single ‘Export as SVG’ option, so there’s currently no way to adjust or tune your SVG output to your liking. However, that being said, the Sketch SVG code is as clean and well-considered as anything I’ve seen.

Adobe Fireworks

Though Fireworks was never really designed to write SVG, ( Aaron Beale’s SVG Export ) extension successfully grafts SVG super powers on to it. Normally, you might expect such an afterthought to deliver shabby results, but I’ve actually had great results from this solution. It even allows you to export smaller components within a larger project. This can be useful when you’re assembling a larger SVG infographic or animation from smaller SVG components.

Things to watch out for:

• It exports path coordinates to four decimal points. That’s far more than we need or want. We’ll talk about how to use SVG optimizers to fix this later.
• Like Inkscape, Fireworks keeps rectangles intact, but seems to automatically convert circles into more complicated paths on export.

In short, if you’re already a Fireworks fan, this is actually a fairly good solution.

Code Playgrounds are Great for Honing Your SVGs

I’ve found live ‘code playgrounds’ like CSSDeck.com and CodePen.io are incredibly useful when working with SVG. Being able to edit your SVG and see the results is real-time, really helps you understand what you’re looking at. Just open your SVG in a code editor, and copy and paste it straight into the HTML window. These apps give you live feedback as you work with your file, and are a great way to learn how SVG works.

Use CSS in Your SVG

SVG starts to get really interesting when you realise you can use <style> blocks in the top of your SVG document. As it is with HTML, this allows you to move repeating properties out of your inline elements to a single class at the top, often dramatically reducing your file size. Obviously, it also lets you make document-wide changes from a single point. For instance, take an SVG element like this:

<rect  fill="#7f7f00" stroke="#7f0000" stroke-width="3" height="143" width="143" y="156" x="386" />

We can move the stroke, stroke-width and fill properties off this PATH element, and move it to a class:

 <style>.basecolor{
    stroke: #7f0000;
    stroke-width: 3; 
    fill: #7f7f00;
    }</style>
...
<rect class="basecolor" height="143" width="143" y="156" x="386" />

Now, at this scale, this obviously makes little difference to your file size, but once you get hundreds (or thousands) of image components sharing a class, this is a big deal. If you’re thinking, ‘hang on, stroke, stroke-width and fill aren’t valid CSS’, they are perfectly valid in an SVG file. In fact, you can move almost all SVG properties to CSS, besides stuff like coordinates, positions and sizes.

Optimizing your SVG Code

Regardless of which editor you use, none of them write perfect SVG code. As such, it’s worth looking at standalone SVG Optimizers. There are number of downloadable apps, but I prefer Peter Collingridge’s online tool. As we noted earlier, some apps will export ridiculously precise coordinates. This precision not only means nothing to the way it renders — what is 1/100th of a pixel? — but it quickly blows out your filesize in any SVG file containing lots of coordinates. Peter’s SVG Optimizer will trim decimal places in any SVG file you give it. One decimal place SHOULD be PLENTY for most situations – two at most. In path-heavy documents, I’ve found this can slash your filesize by more than a third — and at the same time, making your file easier to read and make sense of. As an example, here’s a PATH for the letter ‘K’ in Helvetica exported to SVG from Adobe Fireworks.

<path d="
M 18 191 L 58.1684 191 L 58.1684 129.1406 L 73.5454 112.6903 
L 128.6201 191 L 177 191 L 102.3118 83.5213 L 173.2865 6 
L 123.9128 6 L 58.1684 76.4261 L 58.1684 6 L 18 6 L 18 191 
L 18 191 Z" />

Here’s the same PATH after Peter’s tool has done it’s thing.

<path d="
M18 191 L58.2 191 58.2 129.1 73.5 112.7 128.6 191 
177 191 102.3 83.5 173.3 6 123.9 6 58.2 76.4 58.2 6 
18 6 18 191 18 191Z"/>

To the eye, it renders identically. Keep this in mind particularly with SVG maps, icons or diagrams that you source from Wikimedia Commons or other online repositories. In my experience, most need some love. Peter’s optimizer can also automatically move inline SVG properties to a style block at the top of your document. This becomes a killer feature on more complex artwork, and I’m not aware of any other tool that can automate that process. It’s very handy. Definitely check it out. And that’s the end of part one. This has been a bit of a primer for the coming articles. Next week we’ll get into the funner stuff. See you then!

Frequently Asked Questions about SVG for Designers