HTML5 Loves SVG files.

With the HTML5 movement in full swing, designers of all ilk are scrambling to get all the tools they need in their arsenal to be ready for the next generation of the web. The good news is that some of the key tools we need, we already have, like Adobe Illustrator. That’s right, Illustrator’s vector design tools were built not just for great print work, but for the modern web, though a little format called SVG.

So what is SVG? Simple, it’s a file format developed by World Wide Web Consortium, that uses XML to describe still and animated vector graphics. The acronym SVG stands for Scalable Vector Graphics, and they’re really unlike any format you can output in Illustrator. In 2001 the standard was adopted by the developers of feature-phones, and stylus based PDA’s. SVG aided in the creation of scalable interfaces that could be used on multiple screen resolutions, without the need for dedicated graphics for each different one. SVG files can even be used to build web application, and imported into 3D programs. There’s even a good chance that you’re TomTom or Garmin is using SVG files. Now that trends in web design shifting toward HTML 5, responsive web design, and mobile, SVG files are more in-demand than ever.

The benefits of the SVG format

SVG files are scalable.

If people with vision issues are zoomed in to your site in their browser, normal images would become pixelated, even though those images may not have been created with pixels. It begs the question: why make something vector for the web if it won’t receive the benefits of that format once you output it? SVG files can scale to any size without loosing any quality, without increasing the file size. It just makes sense as a web best practice.

SVG files are great for accessibility.

Once you save an SVG file, you can open and edit that same file in programs like TextEdit or Notepad. It’s built on XML and CSS, so you can even use the DOM (Document Object Model) in your browser to edit the contents of your SVG with JavaScript. If you have users with disabilities, or who browse on content-limited devices, you may want to make your images black and white, or just bump up contrast. You can do that without even having to create an entirely new image on the fly with things like media queries and CSS style sheets.

SVG files use real text.

If you add text to an SVG file, you can search for that text in a website, and even find it on a page in your web browser. You can even use CSS and JavaScript to access and modify that text on the page: making it say different things, changing its type face, color, or even animating it. That means you get a lot of graphical control over your typography, with even more finesse than web typography and HTML typically afford a content creator. You can use Adobe Type Tool to add custom kerning between letters, change letter colors, and all the other cool things Illustrator lets you do with type, without the fuss of writing any HTML or CSS.

It’s perfect for mobile.

Android and iPhone both use web-kit browsers: Chrome and Safari respectively, or at least versions of them. Since SVG files are scalable and color consistent, you can serve up a perfectly customized experience to your mobile users without the need to create additional assets for you websites.

Illustrator can edit them.

Illustrator has native support for SVG files built right in. You can go look for a logo or something of the like on google and try opening it in Adobe Illustrator. You’ll find you can manipulate it the same you would any other Illustrator file.

Saving an SVG file in Illustrator

Starting an Illustrator doc with the intention of outputting an SVG file requires almost no forethought. One thing you should be aware of, however, is your planned use of fonts and gradients. Illustrator can leverage Adobe font-embedding technology to include fonts inside of your graphics. Of course, the best way to assure that your fonts are going to make it into the browser is to leverage Illustrator’s “Create Outlines” function on all the planned fonts in your design. Creating outlines, of course, has an effect on the complexity and file size of your document. Illustrator embeds fonts in the SVG format in a similar way that Flash embeds fonts in exported SWF files. Rather than including the entire font, it instead embeds individual characters. Of course, you could always leave your file as is and try to leverage some features upon saving your document.

Illustrators “Save As” Menu for saving in the .svg file format.

There are a couple of ways to generate SVG files in Illustrator. The first is through the “Save as” menu. Illustrator’s “Save As” menu has more options for font embedding but won’t respect your sliced boundaries upon saving. Let’s take a look at the “Save As” menu for creating an SVG file. You may notice some options regarding Adobe’s SVG viewer tool—they aren’t much use, unless you plan on all of your audience downloading and installing it. Most major browsers these days (Firefox, Internet Explorer 9, Chrome, Safari, Opera) can view SVGs easily, so you should be able to make do without that tool. Older IE7 and IE8 users may want to grab the SVG viewer tool. If you want to read more about compatibility, here’s some more information. Now, lets check out the “Subsetting” option.

  • Subsetting – helps you decide what to do with the fonts (if you have chosen that they remain fonts in the SVG file rather than turned into outlines)
    • None – Turns any text in the SVG into system fonts. (smaller file size, uses system-default fonts as substitute)
    • All Glyphs – includes the entire font in your file. (larger file size, more accurate type)

Where the “Save As” menu really shines—and differentiates itself from the “Save for Web” menu—is in its “More options” button on the right. It can also teach us some things about the format.

More Options

More Options on the “Save As” menu reveals some additional and useful information about your SVG file like

  • CSS PropertiesThis
    lets you control how the code of the file gets written
  • Optimize for Adobe SVG ViewerCreates a file optimized for an SVG file viewer application created by Adobe.
  • Include Slicing DataGenerates a file with data saved about slice locations.
  • Include XMPEncodes things like Author, Date created and Modified.
  • Output fewer <tspan> elementsReduces the code in your SVG file. (We’ll cover <tspan> and <textPath> soon)
  • Use <text> for Text on PathChanges the code written around text assigned to a path in your SVG file
  • Preserve Illustrator Editing CapabilitiesEnsures maximum compatibility when re-opening your saved SVG files in Illustrator, by writing additional code into the file. Adobe offers up a little more information on that here.

An SVG file is written in CSS and XML. We can control the way the file writes itself with these options. The best way to understand all the options in the “CSS Properties” option write options is to take a look at the code they generate. You can tell the differences within the first 20 lines of each file once they’ve been generated. You’ll also notice some tags called <tspan> and <textPath>, these are for displaying different types of text layouts. The <tspan> tag is SVG’s generic font tag, used to declare type in a graphic, while <textPath> is used to declare text that’s following a curved path of some sort.

If you try saving your SVG file in the different settings under “CSS Properties,” you will be able to see the difference in the resulting code the file outputs. Let’s open a saved SVG file in a text editor and taking a peek at the code it generated.

Presentation output mode

Presentation output mode in the “Save As” menu created a SVG file with code where all of its path objects use a type of XML property called “fill.” In plain English, the SVG file uses its own type of declaration to guarantee visual accuracy instead of leaving the browsers to determine properties. It doesn’t yield the smallest file size, but it’s the default option for a reason. It more than likely will generate the expected result from your SVG export.

You’ll also notice, when you take a look at a SVG file created with the Presentation method from Illustrator, that it declared a lot of important properties right at the top of the document.

SVG code exported from Illustrator’s SVG Presentation mode.

Here we see things like the version of the file, an ID that corresponds to the layer name that you saved the item on, some standard code from the W3C, and information about placement, image size, and document size. Properties like this would be particularly useful if you’re planning to access this code through JavaScript or media queries if you’re using some responsive web design techniques.

  • Style attributesThis option
    uses CSS style elements to declare color fills and other basic properties.

The “Style attributes” option doesn’t require much attention. It’s essentially the same exact file that the “Presentation” setting generates.

  • Style attribute entitiesThis option a great option for reducing file size. The code shows multiple elements being declared first.

This setting generates a file that is built with code similar to a style sheet for an HTML file. It drastically reduces file size, but can lead to the SVG file itself “building in” on slower connection speeds.

  • Style elementsThis option uses an HTML tag to declare the visual elements of the graphic at the top of the generated code.

Lastly, the “Style elements” option is pretty much exactly like the name says. It leads to larger files, but essentially this would give you the ability to build a “master CSS style sheet” for all of your SVG files on a website, have the browser load that once, and be able to display graphics without additional loading for the viewer. The amount of planning on the front end would be mind-boggling. But it may be an interesting approach, especially if you wanted to have simple one or two-color graphics on your website and the ability to manipulate them with a style sheet or animate them in similar ways throughout the site.

The other options on the “Save as” screen aren’t going to have a huge impact on your design if you’re not using any text. . Beware that this isn’t your golden ticket if you sliced your design. In fact, it does’t do what you’d expect from saving other sliced documents, what it does do is write some additional XML data into your file so the coordinates of your slices are accessible for reference in case you want to modify parts of a SVG file with Javascript afterwards. It won’t give you separate, sliced-out files.

The Save for Web Menu

Illustrators “Save for Web” Menu

The second way of creating a SVG from Illustrator is through the “Save for Web” menu. You’re probably familiar with outputting other files through this menu, and it has its own benefits and drawbacks. For example, we now have a preview of the graphic, which for the visually minded, is always a great reassurance. It also can handle saving out-sliced documents (just make sure, if you want all of your elements saved as SVGs that you select them all and designate them as SVG files). “Save for Web” also doesn’t label your option fields. But if you’re familiar with the options and corresponding output differences, this is a great method for saving your file—but you sacrifice your typography. One of my favorite benefits of the “Save for Web” method is the ability to save presets and call them back once you find the magic sauce that works for you. It should be noted, too, that either save method’s “web preview” is useless without the Adobe SVG plug-in. You’re better off saving and opening the file in a browser afterwards.

Some tips to work with the format

Compression helps. Compressing your documents can cut the file size by more than 60% in some cases. Though I’ve often found problems getting images that have been compressed to render in the browser, they’ll open back in Illustrator but be shifted slightly around. I always suggest having an .ai or .eps backup of any image you plan to output to SVG.

A closer look at multi-color, rotated gradients in the browser and in Illustrator.

Gradients can behave in unpredicted ways, especially very complex ones. If it’s rotated or has large continuous tones, some vertical banding can happen. When zoomed out, it looks like diagonal banding. Either way, the effect seems to happen on rotated, continuous-tone gradients that have more than two to three colors in them.

SVGs don’t play well with blending modes and advanced opacity. While SVGs don’t really have a problem handling transparency, blending modes won’t really behave. Multiply mode is turned into plain ol’ normal mode, though it will retain the original opacity you set to it. And opacity masks seem to disappear completely when you save these out in SVG format: sometimes they won’t display the art they are masking, and they simply ignore the mask altogether and show everything. Luckily, clipping masks seem to remain intact. Tweaking the code format does not seem to have an effect on these.

Gradient meshes output wonderfully. Even with growing complexity and adding colors and points, gradient meshes look great when output to SVG format. The one issue here that they add massive amounts of file size to your SVG document. A single rectangle with 6 points of colors will run you about one megabyte, which is insane. The growth in file size is because these are not stored as vectors in your file, and they will pixelate when scaled up. You’re better off keeping things with heavy gradient usage as PNGs or JPEGs for now.

Illustrator SVG filters display in Chrome and Firefox, but not Safari on Macs.

3D transformations and filters will remain mostly intact. It depends on how many effects you have. You’ll want to keep them sparse as they all tack on to your file size anyway. The largest thing to note here is that there is a “SVG Filters” section in your filters menu, that seem to behave seemingly randomly upon export, most are terrible looking, and none of them seem to show up when viewed in Safari. Chrome and Firefox handle them well enough, I’m just not sure that any of them are worth the extra kilobytes they’re going to tack on to the end of your image. You’re better off manipulating things like opacity and shadows with CSS and JavaScript instead.

A more perfect world

Illustrator’s made to handle SVG files and the future of the web

In the end, whether your creating or outputting an SVG file, Illustrator’s a great tool for the job. It’s always nice to find out that the same tool designers everywhere have been using for years is the same tool that’s ready for the future of the web. It’s a credit to the people who created the program for their forethought. Also, as with all things, there’s no substitute for experience. Open up the program, and try to save one of your old creations as a SVG just to test it. Play with some of the options we talked about here and try making your next desktop or mobile project vector-based. The you can live in a world that gets better than “pixel perfection.”

There’s so much more to learn too. In October, the W3 Standards organization is having a SVG convention of sorts in Cambridge Massachusetts, and there they’ll be re-writing their roadmap for SVG 2.0. It’s an exciting time for this format and it’s going to be refined to work even better for our modern web usage than ever before. You can also read their documents about accessibility and uses of the format. Really the most important thing you can do is just jump into Illustrator, open up some of your old work, and try outputting it in SVG format. The second you see your work in a browser and you’re zooming in and out without seeing any pixilation should have you squealing in delight.

Check these out for more information: