How To Use Scalable Vector Graphics In Web Pages

Scalable Vector Graphics (SVG) is an XML grammar for stylable graphics. In web, the word “scalable” means that a particular technology can grow to a large number of files, a large number of users, a wide variety of applications. Its printed output uses the full resolution of the printer and can be placed at different sizes on the same Web page, and re-used at different sizes on different pages. The term “Vector Graphics” in its name indicates that is is fundamentally different from raster image formats, such as GIF, JPEG and PNG, that specify a matrix of pixel values, instead it contain geometric objects such as lines and curves.

SVG is a large and moderately complex grammar. In addition to simple shape-drawing primitives, it includes support for arbitrary curves, text, and animation. SVG graphics can even incorporate JavaScript scripts and CSS style-sheets to add behavior and presentation information. The full specification of SVG is available at http://www.w3.org/TR/SVG which includes a a complete Document Object Model for SVG documents.

Table of Contents

How To use SVG in Web pages

There are a variety of ways in which SVG content can be included within a Web page, some of them are given below.

Creating Stand-alone SVG File

You can create stand-alone SVG file with extension “.svg” which can be loaded directly into a Web browser. For example write the following SVG code in Notepad and save with file name “shapes.svg” and open with any web browser which supports SVG.

<svg xmlns=”http://www.w3.org/2000/svg”>
<circle r=”50″ cx=”50″ cy=”50″ fill=”red”/>
<rect x=”120″ y=”5″ width=”90″ height=”90″ stroke=”blue” fill=”none”/>
</svg>

Embedding By Reference

A parent HTML/XHTML document can reference a separately stored SVG document and the given SVG document should be embedded as a component of the HTML/XHTML document.

Using <img> element

You can display SVG images using an ordinary <img> element. For faster display, the width and height of the image can be given as attributes. One attribute that is required is alt, used to give an alternate textual string for people browsing with images off, or who cannot see the images. You can embed svg file on HTML document as given below.

<img src=”shapes.svg” width=”300″ height=”150″ alt=”Circle”/>

Using <object> element

Some slightly older browser such as Firefox 3.6 do not support embedding on <img> tag and require to use <object> element. You can embed svg file on HTML document with <object> element as given below.

<object data=”shapes.svg” type=”image/svg+xml” width=”300″ height=”150″/>

Embedding Inline

SVG content can be embedded inline directly within a Web page. Here is an example to embed SVG content inline on HTML document.

Here is an example code to create circle and rectangle with SVG.

<html>
<body>
<svg xmlns=”http://www.w3.org/2000/svg”>
<circle r=”50″ cx=”50″ cy=”50″ fill=”red”/>
<rect x=”120″ y=”5″ width=”90″ height=”90″ stroke=”blue” fill=”none”/>
</svg>
</body>
</html>

You can embed SVG content inline on XHTML document as given on the code below.

<?xml version=”1.0″?>
<html xmlns=”http://www.w3.org/1999/xhtml”
xmlns:svg=”http://www.w3.org/2000/svg”>
<body>
<svg:svg>
<svg:circle r=”50″ cx=”50″ cy=”50″ fill=”red”/>
<svg:rect x=”120″ y=”5″ width=”90″ height=”90″ stroke=”blue” fill=”none”/>
</svg:svg>
</body>
</html>

Referencing From CSS or XSL

You can reference SVG resources wherever CSS or XSL properties allow for the referencing of raster images. For examples you can include the ‘background-image’ and ‘list-style- image’ properties that are included in both CSS and XSL as given below.

Here is an example with CSS and HTML code to use external “.svg” document on CSS background-image property.

<style>
#svg_background{
width:100px; height:100px;
background-image:url(“shapes.svg”);
}
</style>

<div id=”svg_background”>This is sample Text with SVG image on its background.</div>