SVG Example with Pizzazz

Okay, now for a little pizzazz! Let's start with the same 2 images and text, add a few shapes, experiment with styles, and toss in opacity.

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg SYSTEM "SVG-19990812.dtd">
<!-- local DTD so we aren't subject to changes in draft -->

<svg width="500" height="500" style="text-antialiasing:true" >
  <desc>This example mixes shapes, text, images, and opacity.</desc>
  <title>Title of WDVL SVG Example 2</title>

  <g id="Group1" style="stroke-width:4; 
  stroke-antialiasing: false" >
    <line x1="0" y1="0" x2="300" y2="300" 
	style="stroke: yellow; stroke-width: 2" />
    <image xlink:href="WDVL.jpg" x="30" y="30" 
	width="431" height="82" />
    <text style="font-size: 48; fill: teal; fill-opacity: 0.4"
	x="175" y="45">SVG Rules!</text>
    <rect x="30" y="90"  height="50" width="50" 
 	style="stroke: red; fill: blue; fill-opacity: 0.4" />
    <text style="font-size: 14; fill: white; stroke-width: 1"
	x="35" y="130">Hello, Opacity</text>
    <circle cx="150"  cy="125" r="25"
 	style="stroke: blue; fill: red" />
    <image xlink:href="internetcom.jpg" x="170" y="85" 
	width="200" height="27" />
    <line x2="500" y2="0" x1="300" y1="300" 
	style="stroke: blue; stroke-width: 2" />
 </g>
</svg>

Our second example will be rendered as shown in this screen capture. Aspects of this example to note are:

• The attribute fill-opacity can be used to create interesting effects both for text and for shapes.
• Stacking order is again determined by order in the file. Note how the first (yellow) line appears under the image whereas the second (blue) line appears above the image since the image was defined in the file between the two line definitions.
• Did you notice the addition of title and desc elements? Look at the titlebar of the SVG Viewer used to display the image. The value of our title is displayed, whereas the desc element is not displayed. (I believe this is implementation dependent.)
• We mentioned that SVG permits zooming and panning. Check out the zoomed in view and a panned view.

SVG Basic Example
Doing It With SVG (Scalable Vector Graphics), Part 1
CSIRO SVG Viewer