Video icon 64
Upgrade your design skills with practical video courses from Tuts+. Start your free trial today.
Advertisement

SVG Files: From Illustrator to the Web

by
This post is part of a series called Web and Interface Design With Vector.
Create a Set of Glossy Labels and Save them for Web
Quick Tip: How to Create a Simple Web Button Set Using the Appearance Panel

Scalable Vector Graphics (SVG) is a vector image format which began life back in 1998. It was always developed with the web in mind, but only now has the web actually started to catch up. There's no denying its relevance today, so let's have a look at the basics of taking SVG from Illustrator to the web browser.

Note: I'm using Adobe Illustrator CC to demonstrate things here, but other versions have similar (if not identical) options and tools.


Why is SVG Useful?

The SVG format was developed, and continues to be maintained, by the World Wide Web Consortium (W3C). The W3C comprises a group of clever folk, who strive to standardize the web, making it an open and accessible place for everyone.

SVG is good for the web, especially these days, as it bypasses the problem of screen resolution. It doesn't matter how densely packed your new smart-phone's pixels are, vectors will always be displayed as crisply as freshly fallen snow, which isn't always true of rasterized images.

File size is always an issue with the web (no one wants to wait for a 5Tb image to load into the browser over a mobile connection) and so SVG is a simplified vector format. It's built with XML, and a lot of unnecessary "stuff" is removed, giving a relatively light-weight file.

Lastly, given these XML building blocks, the contents of an SVG file can be manipulated and styled just like any other element on a web page. Parts within an SVG can be isolated, the colors can be changed, the stroke weight can be altered, the transparency, we can even apply certain filters (such as blurring), even animate - all through CSS and JavaScript.


When Would I Use SVG?

The advantages of crisp line quality and being able to manipulate a graphic element are self-explanatory, but where can you take advantage of this? Here's a quick list of situations where SVG comes into its own:

Every day graphics: If you're using a graphic on a website, consider whether or not it could be as SVG format. If so, why not use it? Photography would be an example where SVG doesn't make sense, but for everything else, give it some thought.

Demonstrating crisp font specimens Why bother with fuzzy raster formats
Demonstrating crisp font specimens. Why bother with fuzzy raster formats?

Icons: Websites the world over are peppered with icons; they're universally understood (when used properly) and shorten the time it takes for a user to process an interface. Icons these days are often applied to websites through web fonts, but can also be injected into a page as SVG. Perfectly clean and crisp icons for everyone, lovely.

I havent finished this set of SVG icons yet but youre welcome to download and use them
I haven't finished this set of SVG icons yet, but you're welcome to download and use them..

Logos: If there's one thing a company should keep precious, it's its identity. SVG offers the best way to display branding on the web, plain and simple. Colors can be precise, line quality is immaculate and the same file can be used repeatedly across one website, but altered depending on its circumstances. Perfect.

Recognise this logo

Recognize this logo?

Decoration: I don't need to sell this idea to a load of vector artists, do I?

SVG decoration courtesy of fixateit
SVG decoration courtesy of fixate.it

Animation: Through CSS3 and JavaScript a whole world of animation has opened up to the web. SVG is the perfect vehicle too, for all the reasons I've listed so far. Can you imagine buttons which animate when you roll over them? Icons which give you direct personalized feedback? The sky really is the limit.

Iconic demonstrating SVG feedback
Iconic demonstrating SVG feedback

So that's what SVG is. A vector format, developed with the web in mind. Let's have a look at how we can use it.


Saving a File as SVG

We're going to work with a really basic image, to demonstrate what SVG does.

New Document

Open up Illustrator, begin a new document (File > New Document), give it a name if you wish, and set the Artboard at 300 x 300px.

svg-new-document

Choose an Image

It makes little difference what you use as your demo vector at this point, but go for something relatively simple. I've used the "No Pirates Allowed" glyph, freely available with the "Webdings" font (I never thought I'd use that for anything!)

Go to the Glyphs panel (Type > Glyphs) then select the "Webdings" font to browse the various available characters.

svg-webdingst

With the Text Tool selected, click on the Artboard, then double-click your glyph of choice to make use of it.

Convert to Outlines

We're now going to convert this type glyph into outlines.

Note: SVG does actually support text objects, but to demonstrate things on a fundamental level, we'll opt for paths.

Select the glyph, using the Selection Tool (V):

svg-select

Then go to Type > Create Outlines.

svg-outlines

Super! We now have a path-based vector object.

Saving

To save this document as SVG, go to File > Save, or File > Save As.. In the dialogue which pops up, choose a location, give it a file name (if you haven't already) and, crucially, select SVG as the format:

svg-save

You'll then be presented with another dialogue, this time with some SVG options.

svg-options

In all truth, ignoring these options at this point will serve you perfectly well. The defaults are all as you'd want them under normal circumstances.

We'll cover some of these options a bit later, but for now, hit OK.

svg-file

We have an SVG file!


So Then, Those SVG Options

We skipped over the SVG options because you don't really need to pay much attention to them. However, for the sake of being thorough, let's have a look.

SVG vs. SVGZ

To begin with, we could have chosen two potential SVG formats in the save dialogue.

svg-save-dialogue

SVGZ is a heavily compressed (Zipped, I suppose) version of SVG. It gives a smaller file size, but turns the XML within the file itself into gibberish, preventing us from manipulating the vectors through CSS and JavaScript should we want to.

SVG Profiles

The ever-shifting landscape of the web, and the continual development of web standards, mean that SVG is always growing. You can see this thanks to the first option when saving an SVG file: SVG Profiles. The profile choices currently look like this:

svg-profiles

They mean (more or less) the following:

  • SVG 1.0: The first (2001) incarnation of SVG
  • SVG 1.1: Pretty much the same as SVG 1.0, except that SVG 1.1 can be split into further sub-types, those being..
  • SVG Tiny 1.1: This is the first sub-type of SVG 1.1 and is optimized with the mobile web in mind. It's a very simple form of SVG, designed for "highly restricted mobile devices". Tiny doesn't support gradients, transparency, clipping, masks, symbols, patterns, underline text, strike-through text, vertical text, or SVG filter effects.
  • SVG Tiny 1.1+: A slight development of SVG Tony 1.1, adding support for gradients and transparency.
  • SVG Basic 1.1: This is the second sub-type of SVG 1.1 and allows features for the more capable of mobile devices, such as smart phones. Basic doesn't support non-rectangular clipping and some SVG filter effects.
  • SVG Tiny 1.2: This was initially intended to be the next full specification for SVG, but ended up being a development of the Tiny sub-type. Don't ask me what on earth the difference is.

Soon, we'll be able to add SVG 2.0 to this list. In reality, the nuances of these profiles are largely irrelevant to us. SVG is capable of handling all kinds of things, but for simple vectors stick to the current default of SVG 1.1 and your graphics will be just fine, wherever possible, on the web.

Fonts

SVG files can contain much more than just vector paths. Text objects are one such example, and the Font option allows you to determine how text objects are treated.

svg-fonts
  • Adobe CEF: This uses font-hinting to display more refined typography. It isn't supported by all SVG viewers, however.
  • SVG: Maximum support, recognized by all SVG viewers, but lacking the refinement of Adobe CEF.
  • Convert To Outlines: Removes all editing capabilities, but preserves the text in exactly the same way, wherever it's viewed. Results in a slightly larger file, as the paths need to be described, rather than just stating which characters are present.

Part of the font option involves Subsetting. This is relevant only if you've chosen not to convert your text to outlines.

svg-subsetting

Subsetting embeds character details into the SVG file, allowing the file to display fonts which may not be present on the user's system. Embedding whole fonts (obviously) results in much heavier files, though you can choose how many glyphs are to be included.

Options

While we're on the subject of embedding, the last remaining options here can also have an impact on file size.

svg-embed

In much the same way as with fonts SVG files can hold bitmap images. Where you see Image location choose "embed" to have images included within the file in code form, or choose "link" to have the images simply referenced. This works in much the same way as placing images within Illustrator itself and greatly impacts the end file's size.

The last checkbox here allows you to preserve Illustrator editing capabilities if needed. This means that details of all layers, filters and effects, symbols etc. will be kept. Again, keep this unchecked if your SVG is ready for production and file size is important.

Note: It's recommended you keep a working .AI file to use for editing.

Couple o' buttons

svg-final

Finally, the three buttons at the foot of the options dialogue do the following:

  • More Options: Let's leave these for now, shall we?
  • SVG Code..: Launches the XML code, contained within the SVG file, directly in a text editor.
  • Globe: Launches the SVG file directly in a web browser. Just so you can check.

Using the SVG on the Web

If you're not used to working directly with the web, HTML, browsers, all that stuff, there are a few things to take into account at this point.

Web Browsers

Firstly, let's demonstrate that your browser can handle this format perfectly well. Right-click your new, shiny SVG file, and choose to open it with your standard web browser:

svg-browser

Older browsers, such as Internet Explorer 8 and earlier, do not support the SVG format, and sadly won't play along.

More details of SVG and browser support can be found on caniusecom
More details of SVG and browser support can be found on caniuse.com.

But as long as you're using a modern browser, the SVG file will open and display without any problem.

svg-in-browser

The first thing to note is that the SVG file has retained the dimensions we originally gave it. Our SVG has opened at 300 x 300px, the Artboard has dictated the outer boundaries, and the pirate icon is placed as it should be in the center.

svg-in-browser-artboard

Embedding SVG Within a Web Page

So far we've created an SVG file and we've opened it in a browser to check it works. Now it's time to properly use our file within a web page.

To begin with we need a web page. This needn't be anything more complex than an empty file, with the .html file extension, saved from within a normal text editor. We needn't worry about having any code within this file, but if you're interested in the basics of HTML, take a look at The Best Way to Learn HTML at some point.

Here's my file, open in TextEdit for Mac OS X, but you can use whatever text, or code editor you please.

svg-text-editor

This file will open in a web browser just fine as it is, but we need to add some HTML "markup" code in order to embed the SVG. There are a few approaches towards doing this.

The <img> Tag Approach

Firstly, we can use an image tag (which you might be used to using for JPG, PNG files etc.) pointing to the exact file path within the src="" attribute. Paste this snippet into your HTML file:

<img src="SVG-Test.svg" />

Assuming the file path is correct, your HTML page will open in a browser just like this:

svg-in-browser-html

Yes, I know the general effect at this stage is precisely the same as when we opened the SVG directly in the web browser, but now we have much more power! For example, we can immediately make the SVG larger, by using the width="" attribute:

<img src="SVG-Test.svg" width="900" />
A beautiful crisp SVG infinitely scalable
A beautiful, crisp SVG, infinitely scalable!

This approach is perhaps the easiest, but it does have its problems. Some browsers, for security reasons, will restrict what you're able to do the the SVG (with JavaScript, for example). Let's look at alternatives.

The <object> Tag Approach

Using the <object> tag is similar, but you point to the file path like this:

<object type="image/svg+xml" data="SVG-Test.svg"></object>

The result is precisely the same:

svg-in-browser-html

For browsers which don't support SVG, you can even place a warning within the contents of the <object>, to be displayed if the SVG can't be:

<object type="image/svg+xml" data="SVG-Test.svg">This browser sucks</object>

Many web designers agree that this approach is the most reliable and flexible way to use SVG within a web page at the moment.

The Inline Approach

We've spoken about the XML origins of SVG, and if you open the SVG file with your text editor you'll see something like this:

svg-xml

Wow, what a load of nonsense! Actually, once you're over the initial shock, you should be able to see some sense in amongst it. We can use this XML code inline, by pasting the contents directly into our HTML file.

When you become a bit more familiar with the SVG XML structure, you'll be able to trim bits out of the file, which all helps file size.

Feel free to remove the <!DOCTYPE> line, the <!-- Generator: Adobe Illustrator comment, and even the <?xml statement, if you feel like it.

All you really need is a simplified version, comprising just a couple of XML tags:

<svg>
	<path/>
</svg>

Our SVG:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">

	<path d="M220.784,150c0,19.533-6.914,36.214-20.742,50.042c-13.828,13.829-30.51,20.743-50.042,20.743
		c-19.533,0-36.213-6.914-50.042-20.743C86.13,186.214,79.216,169.533,79.216,150c0-19.533,6.914-36.213,20.743-50.042
		C113.787,86.129,130.468,79.215,150,79.215c19.532,0,36.214,6.914,50.042,20.742C213.87,113.786,220.784,130.467,220.784,150z
		 M209.463,150c0-16.421-5.806-30.436-17.416-42.047C180.437,96.343,166.421,90.537,150,90.537c-14.693,0-27.6,4.753-38.72,14.261
		l11.149,11.148l-7.865,8.644l-11.322-11.409c-8.47,10.775-12.705,23.048-12.705,36.819c0,16.422,5.804,30.438,17.415,42.048
		c11.61,11.609,25.626,17.415,42.047,17.415c13.712,0,25.957-4.265,36.732-12.791l-10.199-10.112l7.778-8.643l10.804,10.717
		C204.68,177.514,209.463,164.636,209.463,150z M175.756,177.744c0,7.145-2.521,13.224-7.562,18.236
		c-5.043,5.013-11.106,7.52-18.193,7.52c-7.145,0-13.253-2.507-18.323-7.52c-5.071-5.013-7.605-11.092-7.605-18.236v-15.212
		c-2.882-0.114-5.315-1.18-7.303-3.197c-1.988-2.017-2.982-4.408-2.982-7.174c0-2.708,0.994-5.069,2.982-7.087
		c1.988-2.017,4.421-3.082,7.303-3.198v-38.114c17.861,0,31.315,3.197,40.362,9.593c7.548,5.302,11.322,12.044,11.322,20.225
		V177.744z M124.072,158.729v-13.051c-4.207,0.346-6.31,2.507-6.31,6.483C117.762,156.195,119.865,158.384,124.072,158.729z
		 M152.333,111.28l-17.977-4.148h-5.963v6.31L152.333,111.28z M165.384,119.663l-7-5.186l-29.991,3.284v6.31L165.384,119.663z
		 M170.311,128.824l-2.247-4.84l-39.67,4.754v5.186L170.311,128.824z M171.435,138.418v-4.84l-43.042,4.84H171.435z
		 M171.435,177.744v-35.869h-3.458c0,6.167-0.691,10.473-2.074,12.921c-1.383,2.45-3.774,3.674-7.173,3.674
		c-6.108,0-9.162-5.532-9.162-16.595h-21.175v35.869H171.435z M146.802,173.681h-3.198v-24.027h-12.187v-2.938h15.384V173.681z
		 M138.678,151.728l-2.939,3.112l-2.506-3.112H138.678z M159.68,186.559v-3.371h-19.532v3.371H159.68z"/>

</svg>

The CSS Background Approach

Using CSS (the styling syntax used in combination with HTML) we can also dictate that our SVG file acts as a background image to an element on our web page.

We're pushing the boundaries of this tutorial now, but if you're interested in learning the basics of CSS, take a look at The Best Way to Learn CSS.

We can use a separate CSS file, linking to it from our HTML document, or we can use <style> tags directly within our HTML. Our styles would look something like this:

html { background-image: url(SVG-Test.svg); }

This style rule states that our SVG file should display as the background to our HTML element.


Conclusion

That about wraps up the basics! In this tutorial we covered SVG creation, and basic SVG usage for the web.

If you've always wondered what SVG was, but never knew precisely why you should use it, I hope this tutorial has opened your eyes. The potential for this format is huge and is growing all the time thanks to the imagination and technical wizardry of folks in the web and graphics industries.

We have more tutorials on animation and interacting with SVG graphics on the way, so stay tuned!

Advertisement