Part of the Intro to SVG Reading List

Before we get to it makes sense to address the ways in which SVG files can be used on web pages. Those methods (and their support in browsers) are diverse, compared to the limited utility of bitmap images:

Inline, via the img tag

Probably the easiest method, and the one most familiar to web developers. SVG files can be brought onto a web page using an <img> tag, just as bitmap images are: 

<img src="twitter-icon.svg" alt="Twitter" style="width: 300px; height: 300px;">

Twitter Note that size can also be set in the SVG document itself; scaling doesn’t matter per se, as SVG is vector based. CSS is applied to the SVG image like any other element.

The only downside to this technique is the SVG features that you drop when doing so: inline SVG images may include animation, but links inside the file and any scripts and interactivity that are part of the SVG code will be ignored. (The entire SVG image can be linked using an <a> element, of course).

Browser compatibility: SVG-as-img can be used in all modern browsers: IE8 is a significant exception.

In CSS

SVG is very effective when used with CSS: like bitmaps, SVG files can be applied to properties like : 

header {
	background: url(columns.svg);
}

Browser support is much the same as for inline SVG images; there are also several possible variations. The SVG can also be written directly into the CSS as a DataURI: 

header {
	background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
width="100%" height="100%">… </svg>');
}

Using SVG in CSS also drops any scripting, interactivity, and links.

Directly, as an SVG tag

SVG code can also be written directly into the page. This preserves of the features of SVG, and is perhaps the best current practice, so long as you’re prepared to drop some backwards browser compatibility. The code usually looks something like this: 

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>HTML5 page with SVG Content</title>
	</head>
	<body>
		<svg xmlns="http://www.w3.org/2000/svg">
			<path fill="#5DD7FC" d="M0.5… />
		</svg>
	</body>
</html>

Browser support for this technique is slightly more limited, but all internal links, scripting and interactivity are preserved if you use this method.

Via the <object>, <iframe> or <embed> tags

The oldest methods, stemming from when native support for SVG in the browser was non-existent or limited. Commensurately also the best supported. 

<object type="image/svg+xml" data="twitter-icon.svg">
	Warning for older browsers, or alternative content
</object>
<embed type="image/svg+xml" src="twitter-icon.svg" pluginspage="http://www.adobe.com/svg/viewer/install/">
<iframe src="twitter-icon.svg">
	Warning for older browsers, or alternative content
</iframe>

There are many other possibilities for using SVG: as visual filters on content, paths for CSS animation, and much more, which are addressed in separate articles.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.