Using SVG with HTML5 tutorial
Introduction
According to Wikipedia (retrieved April 1 2012), “Scalable Vector Graphics (SVG) is a family of specifications of an XML-based file format for two-dimensional vector graphics, both static and dynamic (i.e. interactive or animated). The SVG specification is an open standard that has been under development by the World Wide Web Consortium (W3C) since 1999. SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted and, if required, compressed. As XML files, SVG images can be created and edited with any text editor, but it is often more convenient to create them with drawing programs such as Inkscape. All major modern web browsers have at least some degree of support and render SVG markup directly, including Mozilla Firefox, Internet Explorer 9, Google Chrome, Opera and Safari. Earlier versions of Microsoft Internet Explorer (IE) do not support SVG natively.”.
SVG is part of the HTML 5 draft specification, i.e. SVG tags are part of the language and can be inline. We have seen it working since Chrome 9 and 10, Firefox 4, Opera 11 and Internet Explorer 9 (feb 2011). Support of SVG is still not complete, but rapidly improving. All major browser brands (except IE9) now offer very good support - Daniel K. Schneider 19:47, 1 April 2012 (CEST)
If you want to know whether your browser can handle SVG and HTML5, look at this See the When can I use Inline SVG in HTML5? compatibility table at caniuse.com.
See also:
Learning SVG
The SVG links article includes a number of good links.
If you want to dive in, use:
- SVG-edit (online editor at googlecode)
Respect the syntax of the SVG fragment:
Minimal example:
<svg id="circle" height="200" with="600" xmlns="http://www.w3.org/2000/svg">
<circle id="greencircle" cx="30" cy="30" r="30" fill="green" />
</svg>
Unfinished example that defines a canevas size
<svg id="circle" height="200" with="600" xmlns="http://www.w3.org/2000/svg">
<!-- SVG tags go in here, between a few lines and several hundreds .... -->
</svg>
How can I include SVG in HTML5
There are several ways of including SVG in HTML5. So-called inlining is preferred.
Inlining SVG in HTML 5
Live example:
- circle.html (look at the source)
<!DOCTYPE html>
<html>
<head>
<title>HTML5 SVG demo</title>
</head>
<body>
<h1>HTML5 SVG Demo</h1>
A nice green circle:
<svg id="circle" height="200" xmlns="http://www.w3.org/2000/svg">
<circle id="greencircle" cx="30" cy="30" r="30" fill="green" />
</svg>
<hr>
<address>Created by DKS. This is free code</address>
</body>
</html>
Embeding SVG in HTML 5 with the object tag
Live example:
Below are the most important elements of this example:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 SVG demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<h1>HTML5 SVG Demo (embed with object)</h1>
<p> A nice green circle that was embeded using the HTML "object" tag:
<object type="image/svg+xml" data="green-circle.svg"
width="64" height="64" border="1"></object>
</p>
</body>
</html>
Embeding SVG in HTML 5 with the iframe tag
Live example:
Below are the most important elements of this example:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 SVG demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<h1>HTML5 SVG Demo (embed with iframe)</h1>
<p> A nice green circle that was embeded using the HTML "iframe" tag:
<iframe src="green-circle.svg"
width="64" height="64" style="border:1;"></iframe>
</p>
<p>
Tips:
<iframe src="green-circle.svg" style="float:left;margin-right:1cm;"
width="64" height="40" style="border:1;"></iframe>
</p>
</body>
</html>
Embeding SVG in HTML 5 with the src tag
Live example:
Below are the most important elements of this example:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 SVG demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<h1>HTML5 SVG Demo (embed with img src)</h1>
<p> A nice green circle that was embeded using the img element:
<img src="green-circle.svg" height="64" alt="Nice green circle"/>
</p>
Using SVG as background image in HTML 5
Below are the most important elements of this example: Live example:
<!DOCTYPE html>
<html>
<head>
<title>HTML5 SVG demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/CSS">
body {
background-image: none, url('green-circle.svg');
background-position: 50% 50%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>HTML5 SVG Demo (embed with CSS background)</h1>
<p> A nice green circle that was embeded using CSS Background.
</p>
<p>Tips:</p>
<ul>
<li>SVG included as CSS can't be scripted and positioning is hard. Therefore only use this method for background illustrations.</li>
</ul>
</body>
</html>
Adapting the size of an SVG graphic
There are several ways for doing this. For starters, we suggest editing the SVG and adding the following "transformation" code:
Right after the opening svg tag add this:
<g transform="scale(0.1)">
Right before the closing svg tag add this:
</g>
Simple live example:
- circle-scale.html that you should compare with circle.html
Live example that includes some long SVG code (look at the source):