SVG Kickstart 1: Allow Myself To Introduce...Myself

by Jeff Schiller, 2005-06-10

Table of Contents

• SVG KICKSTART TUTORIAL #1
• 1. Introduction
• 2. Setting Up Your Browser
• 3. A Good Starting Point
• 4. The Immediate Benefit
• 5. Conclusion

• ---

• SVG KICKSTART TUTORIAL #2

3. A Good Starting Point

To show you some basic SVG functionality, I will contrive an example: Let's say we want to develop a website that sells T-shirts of international flags. The website should allow a user to view a country's flag online in thumbnail form, view a large size image of the flag in the browser and then order a T-shirt with that flag on it.

Let's start with Japan's flag, since it contains a simple design: A red circle on a white background. The official dimensions of the flag are described here

If I'm dealing with raster graphics, I would probably approach it as follows:

1. Design a full-size image of the flag in a plush graphics program like the GIMP or Adobe Photoshop for use with printing on t-shirts.
2. Save a large-size image for display in the web-browser.
3. Save a thumbnail-size image for display in the web-browser.

If I want to get fancy and be efficient, I could write scripts that would automate steps 2 and 3 above so that I don't have to manually scale each image and re-save.

If I'm dealing with scalable vector graphics, I would ONLY need one image file. That same image file can be used for t-shirt printing, for large viewing in the web browser and for thumb-nail viewing because SVG allows the user agent (web browser or t-shirt printing software) to produce the best-looking image for the particular resolution.

Here is the SVG file for the Japan flag:

And here is what is displayed:

You should be able to view the source of the above image and verify that it is what is shown in the code snippet. There is no raster graphics here, only SVG code. You can also view the image alone by clicking http://www.codedread.com/images/svg/japan.svg and view the source there. Notice that when you do this, the image scales to the size of the browser window. The image is perfect at any resolution

For those unfamiliar with XML grammar, the code may seem confusing at first so I'll step through each line:

All XML documents must begin with an XML declaration as shown above. Its sole purpose is to identify the document as XML, define the XML version (always 1.0) and the character encoding used in the document.

XML is a grammar, not really a language. XML is used as the grammar to construct other languages. One such language is SVG. The SVG language itself is fully defined in a Document Type Declaration (DTD). By putting in a DOCTYPE declaration as shown above, the user agent is able to validate the document against the DTD. If the document is nonconformant, then the user agent will be able to determine this immediately and parsing can stop to inform the user of the problem. This is one of the benefits of a XML grammar.

XML states that all documents must have a root node. A root node is a single, top-level element that encloses the entire documentation. The root node for SVG is a <svg> element. We use attributes within the svg element to specify details about the document:

• width="100%" => The width of the image will be 100% of the user agent's viewport width
• height="100%" => The height of the image will be 100% of the user agent's viewport height
• version="1.1" => The version of SVG we are using is SVG 1.1.
• viewbox="..." => The image coordinate system goes from (0,0) to (300,200)
• xmlns="..." => The default XML namespace of this document is SVG (more on this in future tutorials or consult XML documentation for this).

With the above out of the way, it is now time to describe what the image will show. This is done by two lines of SVG code:

It is pretty obvious what this does, right? It draws a rectangle with top-left coordinates at (0,0) and dimensions 300x200. These coordinates and lengths are with respect to the containing SVG viewbox (defined in the <svg> element above. Because we have specified 300x200 and viewBox="0 0 300 200" for this image, the rectangle will fill the entire viewbox. We specify that the rectangle should be filled with the colour white and have a black border (the black border is to help with our illustration purposes only but is not strictly necessary for this example).

And here is a circle element. We define the center of the circle to be the center of the containing viewbox (150,100) and the radius to be 3/5ths of the height (60). The circle is to be filled with the colour red.

The order in which the user agent renders the SVG elements is the order in which they are placed in the file. Thus, the viewbox is first filled with a white rectangle, then a red circle is painted on top of this rectangle. For more details, you can read about the SVG "painters model" here.

And that's it. Once you get past the XML angly brackets and some of the confusing XML terminology (like DTDs and namespaces (xmlns), SVG turns out to be pretty simple and straightforward (so far).