SVG Evolution 2: Our First Steps Into SVG
By Jeff Schiller · 30 Nov, 2006
In Case You Are Just Tuning In
This is the second in a short series of articles in which we explore how to integrate Scalable Vector Graphics (SVG) into DHTML web applications. In our first article, we gave an introduction to SVG language and some of its basic capabilities. We introduced the concept that SVG images are XML documents with DOMs and that web developers have the ability to integrate SVG documents with other (X)HTML and SVG documents such that scripted communication between document DOMs can take place.
To illustrate the concepts, we took a simple DHTML image gallery and rewrote the application using SVG documents for the raster images. The end result is an HTML+SVG image gallery that provides equivalent functionality while presenting us with a lot of interesting possibilities for enhancements. We will start to explore these possibilities in this and the next article.
Immediate Benefits
SVG, as a graphical format, has many benefits over its raster counterparts. But it's interesting to observe that, even in our simple SVG Image Gallery application we created to be at parity with the HTML version that user agents (browsers) can allow some immediate benefits by default.
Remember: The 'S' in SVG stands for "scalable". As a result, user agents can allow the user to zoom, pan and otherwise manipulate SVG images in ways that might not make sense for other graphic formats. In Opera you can right-click on any SVG image to zoom in/out. Try this in the SVG version of the photo gallery: Click on a thumbnail, then once the image loads in the main panel, right-click the large image and choose Zoom In from the context menu. Now hold down the mouse button on the image and move the mouse around - this allows you to pan around the image. Because the format is SVG, the user gets Image Zoom and Pan for free. The Adobe SVG Viewer also allows similar manipulations. NOTE: At this time, Firefox does not support SVG zooming/panning out of the box, though there is an extension that allows this.
It is also worth noting that, because SVG is plain text XML, the user can also look at the source of an SVG image using the context menu. Looking at the "source" of an image is probably a new concept to most folks, but it can be extremely useful in certain situations (when learning about the SVG format, when trying to discover copyright/contact information, etc). In Opera, this is achieved by choosing the "Source" option from the context menu. In Firefox, this is achieved by choosing "This Frame -> View Frame Source".
For most other intents and purposes, an SVG image in a web page functions very much like a raster image in a web page. For instance, you can copy an SVG image via the context menu and paste it into a different application as a raster bitmap.
The Painters Model and Transformations
Next, let's modify our simple example. We're going to add a simple visible watermark to the photos to illustrate how SVG content is rendered as well as the concept of transformations. If you're lucky, you might also learn something about SVG text and opacity.
The Painters Model
SVG uses something called the Painters Model to dictate how SVG content should be rendered. What this means is that conceptually the SVG document is rendered in the order in which the SVG entities appear in the XML. In other words, if I have a simple SVG document like:
<svg>
<circle fill="blue" cx="50" cy="50" r="40"/>
<rect fill="red" x="0" y="0" width="50" height="50"/>
</svg>The blue circle will be rendered and then the red rectangle will be rendered "on top" of the circle, partially obscuring it (like this). If we had flipped the order (put the <rect> element before the <circle> element), then the circle would partially obscure the rectangle (like this).
We use our knowledge of the painter's model concept to draw a simple text caption on top of the main image like so:
<g id="the_preview">
<image id="thePreviewImage" class="preview" x="0" y="0" width="640" height="480"/>
<text fill="white" fill-opacity="0.4" x="10" y="20"
font-size="20" font-family="Times">SVG Image Gallery</text>
</g>Because the <text> element appears after the <image> element in the SVG document, the text will be drawn on top of the raster image.
Note that we are filling the text with the colour white, but we are making it partially transparent (fill-opacity="0.4"). SVG supports a set of Fill and Stroke Properties that can be applied to any SVG element (i.e. shapes, rasters, text). In the text example, we are not stroking (outlining) the text, only filling it. Read more about the SVG text element here.
Transformations
SVG supports the ability to transform any element in a variety of ways via the transform attribute. The value of the transform attribute can take a whitespace/comma-separated list of the following values:
- translate( tx, [ty] )
- Shifts the element by tx and ty units. ty is optional and defaults to the value of 0.
- scale( sx, [sy] )
- Scales the element by sx in the x-direction and sy in the y-direction. sy is optional and defaults to the value of sx.
- rotate( rotate-angle [cx cy] )
- Rotates the element by rotate-angle degrees around the given point (cx,cy). cx and cy are optional and default to the point (0,0).
The transform attribute supports additional transformations (skewing and general-purpose matrix transformation), see the SVG spec for further details.
We're going to use the rotate value to put our digital watermark along the left side of the image:
<g id="the_preview">
<image id="thePreviewImage" class="preview" x="0" y="0" width="640" height="480"/>
<text transform="rotate(90, 10, 20)" fill="white" fill-opacity="0.4" x="10" y="20"
font-size="20" font-family="Times">SVG Image Gallery</text>
</g>Note that SVG coordinates start at the top-left corner of the image. The y-axis goes from the top of the image to the bottom and the x-axis goes from the left of the image to the right. Thus, we need to rotate our text +90 degrees (clockwise) around the anchor point of the text (10,20).
Click here to see the SVG gallery with the digital watermark added.
One final note about SVG text: SVG user agents are supposed to allow you to select and copy SVG text, just like HTML text. This may not sound too interesting until you realize that text can be rotated, skewed and even flown along a curved path. However, support for SVG text selection is not yet broadly supported in all of today's modern browsers (the screenshot at the right is of Opera 9's context menu).
By now, I hope you are realizing that the SVG format offers some very exciting possibilities. Each SVG image is a living, breathing document that can be modified, transformed, re-arranged, scripted, and styled to your heart's content. Now let's move on to some eye candy!