A Simple SVG Demo

Here is a simple Scalable Vector Graphics (SVG) example

SVG Appearance	SVG source code (hello.svg)
	<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width='300px' height='300px'> <title>Small SVG example</title> <circle cx='120' cy='150' r='60' style='fill: gold;'> <animate attributeName='r' from='2' to='80' begin='0' dur='3' repeatCount='indefinite' /></circle> <polyline points='120 30, 25 150, 290 150' stroke-width='4' stroke='brown' style='fill: none;' /> <polygon points='210 100, 210 200, 270 150' style='fill: lawngreen;' /> <text x='60' y='250' fill='blue'>Hello, World!</text> </svg>

SVG Appearance

SVG source code (hello.svg)

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" 
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg xmlns="http://www.w3.org/2000/svg" 
 xmlns:xlink="http://www.w3.org/1999/xlink" 
 width='300px' height='300px'>

<title>Small SVG example</title>

<circle cx='120' cy='150' r='60' style='fill: gold;'>
 <animate attributeName='r' from='2' to='80' begin='0' 
 dur='3' repeatCount='indefinite' /></circle>

<polyline points='120 30, 25 150, 290 150' 
 stroke-width='4' stroke='brown' style='fill: none;' />

<polygon points='210 100, 210 200, 270 150' 
 style='fill: lawngreen;' /> 
   
<text x='60' y='250' fill='blue'>Hello, World!</text>

</svg>

To place a SVG digram on a Web page, there are two techniques. First, the OBJECT element is an HTML standard and is the way that you should be able to place an SVG diagram on a Web page. For example, like this:

SVG Appearance	HTML source code
	<object type="image/svg+xml" data="hello.svg" width="300" height="300" border="3"></object>

The EMBED (nonstandard) element sometimes has to be used for older browsers. For example, like this:

SVG Appearance	HTML source code
	<EMBED type="image/svg+xml" src="hello.svg" width="300" height="300" border="3"></EMBED>

Note how the EMBED attribute "src" is used instead of "data" in the OBJECT element to identify the SVG file.

If you don't see a diagram with a line, circle, and triange, install a SVG viewer like this one from Adobe.

If you see a line, circle, and triangle, place your cursor anywhere on the diagram and press down the right mouse button to see a menu of things you can do. Choose "View Source" to see the SVG code used to make this diagram.