Definition

Scalable Vector Graphics (SVG) are mathematical formulas that represent a graphical image intended for display on a computer monitor or print output. Depending on the image, the file size could be much smaller.

This image (only .5 kb) was created as:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="144px" height="144px" xml:space="preserve">
<rect x="16" y="16" transform="matrix(0.9479 -0.3185 0.3185 0.9479 -18.9959 26.5526)" fill="#3FA2FF" width="111" height="111"/>
<circle fill="#EF4136" cx="71" cy="71" r="65"/>
</svg>

It is possible to interact with SVG through the use of JavaScript (see p. 149 of HTML5: Designing Rich Internet Applications), but at this point I’m not sure how powerful or realistic it is. Because IE8 doesn’t natively support SVG, I’m doing some experiments with the Raphael polyfill, which generates VML for IE and SVG for everyone else.

SVG drawings are made up of one or more XML elements with attributes that describe the element, for example the fill color of a circle. It is possible to set-up Mouse listeners on the individual SVG elements. SVG is ideally suited for logos and other illustrations, especially when you want to take advantage of high pixel ratio (dpi) displays such as Apple’s Retina screens.

For more information, check out SVG’s W3C Standards page.

How to Create SVG Graphics with Adobe Illustrator

You could code them by hand, but you would have more fun driving a nail through your head. Fire up Adobe Illustrator, create your image, and then do a "Save As…" SVG to make your image. Much easier. Don’t have Illustrator? Try Inkscape.

Tips

• Check out How to Create Scalable Icons using SVG.
• When using Filters, only use the SVG filters, otherwise your lovely illustration will be rasterized and you will lose all the benefits of creating an SVG file.
• It is possible to embed a raster image into an SVG, but if you intend to display this on the web then do not allow any rasterized content into your file, either through direct placement or Adobe’s filters or gradient meshes that force rasterization.
• Use symbols and patterns, which reduce the file size, when you can.
• Simplify your paths as much as possible–Illustrator has commands to help you out in this regard.
• Apply transparency to objects, not layers.
• Do the stuff in the box below.

Saving the SVG File

1. Do the stuff in the box above.
2. File / Save As...
3. Profile=SVG 1.1
   1. SVG Tiny is for limited capability devices like old cellphones. Certain capabilities are dropped; like gradients, filters, opacity, and masking.
   2. SVG Mobile has more capabilities, but still designed for mobile devices.
   3. Most modern cell phones support SVG 1.1.
4. If no text is being used, the the "Fonts" section can be ignored. I have had spacing problems when setting the “Type=SVG”, so go with “Convert to Outline” instead. If you need programatic access to the text, then you will have to go with Type=SVG. For most instances the Subsetting should be set to “Only Glyphs Used”; this of course depends on your intended use.
5. Image Location=Embed
6. Set the decimal places to 1 (or 2 if you have really fine detail)

This StackOverflow response also goes into detail on the best settings. There was an interesting tidbit in the answer:

Note that linked bitmap images won't display if the SVG is displayed through the <img> tag, because img doesn't allow loading external resources. Furthermore: webkit has a bug that does not display bitmap images within svg files even if you embed them. In short: use a plain <svg> tag if you intend to embed or link bitmap images, don't use <img>.

Finalizing the SVG File

If you are inlining the SVG into your web page, the SVG tag can look like this:

<svg width="115" height="190" viewBox="0 0 115 190">

Compressing

Once you are done with the manual tweaks, run it through SVGO to compress the code.

The Designer's Guide to Working with SVG Pt.1 has more information on creating and tweaking SVG files.

SVG: Deep Dive

For an in-depth discussion of the specifics of the SVG format, check out the SVG Essentials/Coordinates eBook from O’Reilly.

<svg> attributes

Viewbox: Specified by the width and height attributes. Space taken up on the screen.

viewport: Specifies the canvas size for the internal drawing routines. This is not the actual size shown to the user.

preserveAspectRatio: Comes into play when the aspect ratio of the viewbox and viewport do not match. This is NOT a cure for maintaining aspect ratio on the webpage. This will not be used if you are using a program like Adobe Illustrator to create your SVG (nor should you manually add it in later).

Placing on a Page

First, SVG is not supported in IE8, but all is not lost; stick SVGWeb on your page and you should be fine. You may also need to define the mime-types on your web server. For Apache, put these two lines in your .htaccess file.

AddType image/svg+xml svg svgz

AddEncoding gzip svgz

HTML options

<!-- 1. Using an image tag -->
<img src="mySVG.svg" width="100" height="100">

<!-- 2. Using an object tag -->
<object data="mySVG.svg" width="100" height="100" type="image/svg+xml">
	<!-- alternate content -->
</object> 

<!-- 3. Using an iframe tag -->
<iframe src="mySVG.svg" width="100" height="100"> 

<!-- 4. Direct placement with svg tag -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="144px" height="144px" xml:space="preserve">
	<!-- Your gfx statements go here -->
</svg>

<img> tag

Summary: Good method for placing SVG on a page.

To specify a back-up image for browsers that do not support SVG in the <img> tag you could do this:

<img src="foo.svg" onerror="this.src=foo.png">

If you want the graphic to be responsive, handle it similarly to the way you would a standard image. In other words, do not include the width and height attributes—let those come from the SVG source. Then apply a CSS width. To prove this concept, see this page.

<object> tag

Summary: Do not use.

<iframe> tag

Summary: Do not use

<svg> tag

Summary:Use if you want to style it using CSS or otherwise need access to its DOM. Because you are inlining the SVG into your page, you are eliminating an HTTP Request at the expense of reusability and readability.

CSS Options

Summary: This is a good method for placing SVG on your page; go ahead and use it.

.PxProLogo {
	background:url(PxPro-Logo-optimized.svg);
	background-size:contain; //This will make it fit the box.
	width:182px;
	height:50px; 
}

Snap.svg

Snap.svg is a brand new JavaScript library for working with SVG. Snap provides web developers with a clean, streamlined, intuitive, and powerful API for animating and manipulating both existing SVG content, and SVG content generated with Snap.

Currently, the most popular library for working with SVG is Raphaël. One of the primary reasons Raphaël became the de facto standard is that it supports browsers all the way back to IE 6. However, supporting so many browsers means only being able to implement a common subset of SVG features. Snap was written entirely from scratch by the author of Raphaël (Dmitry Baranovskiy), and is designed specifically for modern browsers (IE9 and up, Safari, Chrome, Firefox, and Opera). Targeting more modern browsers means that Snap can support features like masking, clipping, patterns, full gradients, groups, and more.

Another unique feature of Snap is its ability to work with existing SVG. That means your SVG content does not have to be generated with Snap for you to be able to use Snap to work with it (think "jQuery or Zepto for SVG"). That means you create SVG content in tools like Illustrator, Inkscape, or Sketch then animate or otherwise manipulate it using Snap. You can even work with strings of SVG (for example, SVG files loaded via Ajax) without having to actually render it first which means you can do things like query specific shapes out of an SVG file, essentially turning it into a resource container or sprite sheet.

Finally, Snap supports animation. By providing a simple and intuitive JavaScript API for animation, Snap can help make your SVG content more interactive and engaging. Snap is 100% free and 100% open-source

Comparison to Canvas

Canvas is a relatively new element, while SVG has been around for some time. The difference is canvas was designed for programatic access and it outputs bitmap images (although you can develop with vectors), whereas SVG outputs images from vector data (although it can work with bitmaps).

Given that both Canvas and SVG draw images on the screen, it’s often not immediately clear why you should use one over the other. The two mediums have vastly different approaches. Canvas is an immediate mode API is much like drawing with crayons. You can clear or destroy part of the drawing but you can’t by default revert or alter a previous stroke. Canvas is also a raster bitmap, so it is subject to pixelation when images are scaled. SVG can serve multiple resolutions and pixel densities (dpi) with the same source file; it can also be scripted.

Articles

Using SVG by Chris Coyier (Start with this article)

http://www.html5rocks.com/en/tutorials/svg/mobile_fundamentals/

http://www.inserthtml.com/2013/01/svg-guide-part-1/

A List Apart has a great article explaining how to create an SVG background.

Animation and Tools

Animation is tricky because of cross-browser bugs/inconsitencies. Use GSAP to make it easier. See SVG Animation and CSS Transforms for more information.

This Javascript library claims to help with animating SVG.

Use SVG Optimizer to compress the code.

Use Base64 Encoder if you want to embed the SVG into your CSS.

Styling SVG and Aspect Ratios

Check out this article from Adobe to see how you can use CSS to style your SVG.

For more styling and advanced ways to embed SVG on your page, see my Advanced SVG page.

Using SVG in a CSS "background-image" property

Setting the background size correctly, coverage, and keeping the aspect ratio correct can be quite involved, thankfully it is all detailed out by Mozilla in their Scaling of SVG Backgrounds article.

Fallback for IE8

Because IE8 can not display SVG, you need to create a fallback image such as a PNG to use instead of the SVG. If you have a lot of these to make, or just want it automated as part of the workflow, then the Grunt module “svg2png” is a good option.

If you are using SVGs as inline images, the most robust fallback is to add an inline onerror event to the image tag like this:

<img src="/img/image.svg" onerror="this.src='/img/image.png';this.onerror=null;">

This will swap out the SVG for the PNG image if the SVG fails to load. The extra bit at the end (this.onerror=null;) will stop the event from firing again, which could happen if there was an issue with the path of the PNG. This would then cause an infinite loop of event calls, which is obviously best avoided.

If you are using SVGs as background images in your CSS then there’s a simple way to fall back to PNGs. The support for SVG is roughly in line with support for multiple background images. This means you can use a pure CSS solution, and so the following declarations are all you need:

background: url('/img/image.png') no-repeat; /* works for all browsers */
background: none,
	url('/img/image.svg') no-repeat; /* fails for IE8, and overrides previous statement for current browsers */

Here we are setting a PNG as the background but then overriding it with an SVG for browsers that are able to support multiple backgrounds on the second line.