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? 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 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. Recognize this logo?Decoration: I don't need to sell this idea to a load of vector artists, do I? SVG decoration courtesy of fixate.itAnimation: 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
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 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
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. 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.
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.
Advertisement
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
<imgsrc="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
<imgsrc="SVG-Test.svg"width="900"/>
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:
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:
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 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:
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!
Unknown
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
Medical Disclaimer
The information on this site is not intended or implied to be a substitute for professional medical advice, diagnosis or treatment. All content, including text, graphics, images and information, contained on or available through this web site is for general information purposes only. Krobknea makes no representation and assumes no responsibility for the accuracy of information contained on or available through this web site, and such information is subject to change without notice. You are encouraged to confirm any information obtained from or through this web site with other sources, and review all information regarding any medical condition or treatment with your physician. NEVER DISREGARD PROFESSIONAL MEDICAL ADVICE OR DELAY SEEKING MEDICAL TREATMENT BECAUSE OF SOMETHING YOU HAVE READ ON OR ACCESSED THROUGH THIS WEB SITE.