SVG Basic Example
September 6, 1999
Let's try a simple example that displays 2 images and a text
string.
<?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="300" height="300" >
<image xlink:href="WDVL.jpg" x="30" y="30"
width="431" height="82" />
<text style="font-size:48; stroke: blue" x="120"
y="170">SVG Rules!</text>
<image xlink:href="internetcom.jpg" x="170" y="85"
width="200" height="27" />
</svg>
This example will be
rendered as shown in this
screen capture.
Several things to note here are:
- We're referencing a local copy of the August 12, 1999
SVG DTD just to be sure nothing changes that we care
about (since it is still a Working Draft).
- Even though we have two distinct images, we can position
them so that they appear to be one image. The
stacking order is determined by order in the file;
the last listed image appears to be on top.
- Text font size and color are controlled by the
style attribute.
Note that the word stroke rather than
color is used to specify font color.
- The gray background is an artifact of the SVG viewer used,
not the image itself.
SVG Graphics Elements
Doing It With SVG (Scalable Vector Graphics), Part 1
SVG Example with Pizzazz
|
