I recently embarked on the task of converting an interactive Flash widget to SVG (Scalable Vector Graphics) and DHTML. The incentive for this project is primarily to make this widget work on the iPad which does not support the Flash player. SVG has been supported in all major browsers except for IE including mobile browsers for a long time. And now that IE 9 will include native support for SVG (finally!), this technology will soon actually be a viable option for cross-browser graphics support.
There are two ways to include SVG graphics in a web page. One is to create an SVG document using the SVG DOM. This type of document has a different MIME type and supports a different tag set than a standard HTML document. In this way you can declare your SVG elements using markup just as you would your normal HTML elements . This mechanism is appropriate if your entire document will be composed of SVG elements. You can script this type of document just as you can a standard HTML document.
The second method is to create SVG elements inside of a regular HTML document using JavaScript. This method is appropriate if you want to enhance an HTML page with some fancy graphical elements, but you still want the basic HTML support. Creating SVG elements in this way using JavaScript is fairly straightforward but there is not a lot of info out there describing how to do it. I will attempt to remedy this with a series of posts (this being the first) explaining how to create and add various SVG elements to an HTML document. I will try to cover the basics to get you started, and also any tricky stuff that I run into as I progress through my project.
Given the increasing use of mobile devices to browse the web, I will limit the scope of what I cover to only the subset of SVG that is included in the SVG Tiny spec, which is the set of SVG supported by Mobile Safari.
I will assume you have a basic knowledge of JavaScript, CSS and the DOM as I present this material. For a primer on DOM scripting see the W3C’s JavaScript and HTML DOM Reference.
OK, here we go. I will start off with a simple example that creates the base SVG document and draws some circles in it. Start with a simple HTML document like this:
<html>
<head>
<title>SVG Circles</title>
<style>
#svgContainer {
width:600px;
height:200px;
background-color:#EEEEEE;
}
</style>
<script>
window.onload = function() {
}
</script>
</head>
<body>
<div id="svgContainer"></div>
</body>
</html>
This document includes a div with id “svgContainer” that will hold your SVG graphics. It also includes a window.onload handler where your script will go.
To create an SVG graphic you need to start with the base “svg” element, which acts as a container for your graphics. In an SVG document this would be the outermost DOM element in the tree. Inside your onload handler add the following code:
var container = document.getElementById("svgContainer");
var mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
mySvg.setAttribute("version", "1.2");
mySvg.setAttribute("baseProfile", "tiny");
container.appendChild(mySvg);
This creates the base SVG element to which you will add your circle elements. Note that you need to use the DOM method “document.createElementNS” rather than the standard “createElement” because the “svg” element is part of the SVG DOM rather than the HTML DOM. For a complete specification of the valid attributes of an svg element see the W3C SVG Tiny Spec Section on the SVG Element
Now add a circle to your SVG element with the following javascript:
var c1 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
c1.setAttribute("cx", "100");
c1.setAttribute("cy", "100");
c1.setAttribute("r", "60");
c1.setAttribute("fill", "#336699");
mySvg.appendChild(c1);
the cx and cy properties are the x and y coordinate of the center of the circle, and r is the radius. Fill determines which color will fill the circle.
You can also add a stroke to the circle like so:
var c2 = document.createElementNS("http://www.w3.org/2000/svg", "circle");
c2.setAttribute("cx", "250");
c2.setAttribute("cy", "100");
c2.setAttribute("r", "60");
c2.setAttribute("fill", "#996699");
c2.setAttribute("stroke", "#AA99FF");
c2.setAttribute("stroke-width", "7");
mySvg.appendChild(c2);
See the W3C SVG Tiny Spec section on the Circle Element for the complete list of attributes you can apply to a circle. Here is the result of the above code:
So there you have a simple example of how to include SVG graphics in your web page using JavaScript. I will follow up with more examples regularly, so check back soon!
