SVG Files: From Illustrator to the Web
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.
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.
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.
Decoration: I don't need to sell this idea to a load of vector artists, do I?
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.
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.
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.
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):
Then go to Type > Create 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:
You'll then be presented with another dialogue, this time with some 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.
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.
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:
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.
- 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.
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.
In much the same way as with fonts SVG files can hold bitmap images. Where you seeImage 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
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:
Older browsers, such as Internet Explorer 8 and earlier, do not support the SVG format, and sadly won't play along.
But as long as you're using a modern browser, the SVG file will open and display without any problem.
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.
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.
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:
1
| <img src="SVG-Test.svg" /> |
Assuming the file path is correct, your HTML page will open in a browser just like this:
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:
1
| <img src="SVG-Test.svg" width="900" /> |
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:
1
| <object type="image/svg+xml" data="SVG-Test.svg"></object> |
The result is precisely the same:
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:
1
| <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:
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 Illustratorcomment, 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:
1
2
3
| <svg> <path/></svg> |
Our SVG:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
| <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:
1
| 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!
Share story
