Get started with Scalable Vector Graphics

Notice: A non well formed numeric value encountered in /home/forge/ on line 118

Notice: A non well formed numeric value encountered in /home/forge/ on line 119

Notice: A non well formed numeric value encountered in /home/forge/ on line 118

Notice: A non well formed numeric value encountered in /home/forge/ on line 119

Scalable Vector Graphics, or SVGs are an image format that scale beautifully to different resolutions and pixel densities. They also have a number of other tricks up their sleeves, such as animations and support for media queries. I’ll go into when to use an SVG (and when not to use one), how to create them and how this format has changed traditional workflows.

Before reading the rest of this article, I want to ask you a couple of questions:

  • Do you know how to design?
  • Do you know how to write HTML and CSS?

If your answer to either of these questions is no, then find someone who does, and read this with them. You’ll both benefit from doing this together.

What is SVG?

If you go to the Wikipedia entry for Scalable Vector Graphics, you’ll find the following description:

Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics that has support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.

There’s quite a lot packed into this paragraph, so let’s unpack it a bit. The first part, about SVGs being “XML-based”, refers to the fact that the format is written in a format not dissimilar to HTML, rather than being binary like most images. In fact SVG bears a great resemblance to HTML. So if you already know how to write HTML, you’re part way there.

The second sentence mentions that this format was developed by the W3C. If you wanted to learn exactly how the format is written and interpreted, you could take a look at the W3C documentation. I find this documentation incredibly helpful, but it’s a little overwhelming as a starting point.

Why use one?

Although the SVG format itself has been around since 1999, we’re only just getting to grips with using SVGs on the web. Part of the reason for this is that cross browser support for the format only came with IE9, although all other major browsers have supported SVG for years. Depending on the users who visit your website, you may need to ensure a fallback image appears for browsers which don’t support SVG graphics. The solution for providing a fallback is beyond the scope of this article, but I’ve documented one solution on my blog.

The benefits of SVGs have become more apparent in recent years, with different display densities, such as retina devices, and devices with a whole range of screen dimensions. Having a format that can respond elegantly to an unlimited combination of physical dimensions and pixel densities seems like the ultimate responsive image format. It does have it’s drawbacks however.

Limitations of the format

SVG images can have larger file sizes than raster images. Whether they are bigger or smaller than their traditional counterparts depends on a number of factors, so it’s worth doing some experimentation. Its nearly always possible to get the file size down significantly, by reworking your graphic. Every element you draw in your image editor will be output as a path, so try to limit the number of paths you draw.

The format doesn’t support any filters you may have applied in your image editor, such as blurs or colour adjustments. Again, try to keep your file as simple as possible to avoid disappointment. Some filters are available to SVGs, but support for them is poor, and most image editors don’t know about these filters yet, so exporting them is a pain.

In a recent project, we asked a branding agency to ensure that the logo they created be in a vector format, and asked that they send us an EPS version of it. They said that would be fine, and months later, when the logo was designed and signed off, they sent over the EPS file as promised. I was shocked to discover the filesize of this EPS file was 1.2mb. When I opened it up, I realised it was full of base64 encoded raster images. It turned out they had applied a blur filter to every path within the file, and so Illustrator had exported an EPS file with PSD images embedded within it.

So a word of warning, make sure that the graphic you design is able to be exported as an SVG file. I’d suggest exporting to an SVG periodically during the final design stages to ensure it’s still working nicely, and that your file hasn’t become too complex.

Learning how to write SVGs

Although the SVG format looks similar to HTML, there are a lot of differences. For instance. In HTML, to create a blue rectangle with a red border, you might create a div and give it the following CSS:

Whilst in SVG, the equivalent rectangle could be achieved with the following code:

Clearly, these two formats have little in common, and I’ve tripped myself up more than a few times by assuming I can write things in SVG that are only valid HTML.

Instead of pouring through the documentation and trying to understand what every element and attribute achieves, I suggest you dive right in and try converting some of your existing vector images into an SVG.

If you use Photoshop, you’ll need to import that document into Illustrator in order to save it as a SVG. If you use Fireworks, then I recommend you try the SVG for web plugin. Other applications such as Sketch support the SVG format natively.

Illustrator adds a lot of cruft to the files that it exports, making them harder to read whilst also increasing the file size unnecessarily. I’ll explain how to reduce the size of your SVG files later.

Once you’ve exported your SVG, open it up in your text editor of choice and prepare to be amazed! Although what you see may look a little scary, try to relate each element within the SVG file to the equivalent in you image editor. You may see a element. That’s a group. You’ll probably have a few elements, those, of course, describe paths within your image.

You should also open the SVG file in your browser. From here you can use the developer tools to inspect the elements and see how everything is constructed. You can also play around with all the values and see how things change on the screen.

Reducing file size

The file size of an SVG file is primarily determined by how complex the paths within it are. To describe a complex path requires more code than to describe a simple one. In addition to simplifying your image, there are some ways you can ensure your files are as small as possible.

svgo is a node plugin which is great at removing unnecessary code from SVG files. If the idea of installing node fills you with dread, try their drag and drop application svgo-gui. If you’re one for automating things, then there’s a grunt plugin called grunt-svgmin which uses svgo.

To further reduce the file size, you should compress it. On a Mac you can do this by opening the terminal and typing gzip (followed by a space) and dragging your SVG file into the terminal window. Press enter and your file will be replaced with a gzipped version. Rename it from .svg.gz to .svgz and you are done.

A collaborative process

During this article, I’ve probably confused designers and developers alike, by switching contexts between design and development continually. I’m a developer by trade, but I have a good eye for design, and enjoy collaborating with designers closely. You’ll need to achieve a great working relationship between these two disciplines if you’re going to create great SVG files.

I haven’t discussed how to animate SVGs, respond to interaction, or embed media queries within an SVG file. All of these additions require an even greater integration between the roles of developer and designer. If you have both of these skills then you’re in luck as the whole process will be simpler. Otherwise, you’d better pull up a chair beside your new best friend!

Subscribe to our mailing list