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
Creating Stand-alone SVG File
<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
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
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>
<?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
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>
Read Next:How To Create Basic Shapes in SVG
Comments are closed.