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

Don’t you just hit ‘Save as SVG’ in Illustrator, and you’ve got yourself an SVG?

--ADVERTISEMENT--

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.

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

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.

The export dialog for optimized SVGs in 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.

Webcode

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

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.

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

Peter Collingridge’s online SVG optimizer.

Regardless of which editor you use, none of them write perfect SVG code. As such, it’s worth looking at standalone SVG Optimizers.

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.

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.

Alex has been doing cruel and unusual things to CSS since 2001. He is the lead front-end design and dev for Sitepoint and one-time SitePoint's Design and UX editor with over 150+ newsletter written. Now Alex is involvement in the planning, development, production and marketing of a huge range of printed and online products and references. And has designed over 40+ of SitePoint's book covers.