Create vector graphics in the browser with SVG

Basic stand-alone SVG

You can display SVG in several ways. First of all, it is an image format, just like JPEG or GIF. The most important difference is that it is a vector graphics format, meaning that you express graphics by declaring their basic elements. You define a circle merely by defining the position of the center and its radius. JPEG and GIF are raster formats, which express the properties of each point in the image. Another difference is that SVG is expressed in XML, whereas most graphics formats -- even other vector formats -- are binary formats. One thing that SVG does have in common with other formats is that you can display it as a stand-alone image, by directing the browser right at the URL of an SVG file. I'll explore this usage in the first couple of sections.

In theory, you should be able to use SVG in all the other areas where you can use Web images, such as the browser element background. In practice, however, some limitations exist, depending on your particular browser. You might consult documentation or experiment a bit to learn of any limitations.

You can also embed SVG into XML formats such as XHTML and Mozilla's XML User Interface Language (XUL -- a Mozilla-specific format for controlling the look and feel of the browser). SVG has its own namespace, which makes it clear to the Web browser where the embedded SVG starts and ends. In this mode, you can use all the other browser facilities such as document CSS, DOM, and events.

Choose which way you'll use SVG depending on how you need it to interact with the other components of your Web page or application.

First SVG diagram

Listing 1 (eg_2_2.svg in the download file) is a complete SVG file.

                    
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
  <circle cx="3cm" cy="2cm" r="1cm"/>
</svg>

The XML declaration is optional, but I recommend never omitting the XML declaration in stand-alone SVG files. An optional document type declaration exists for stand-alone SVG files, but because of some errors and confusion across SVG versions, the SVG working group recommends that you don't use the document type declaration. Instead, you should be sure to include version and baseProfile attributes on the document element, svg. Some SVG experts disagree with this advice, but I have adopted it in this tutorial. The version attribute indicates what version of the SVG specification the file conforms to, and the baseProfile attribute indicates the profile. An SVG profile is a subset of the full specification, perhaps for mobile hardware processors that can't handle all the capabilities in the full SVG specification. The attributes in Listing 1 specify that the file is designed for the full SVG 1.1 specification.

The svg element and all its children are in the SVG namespace, http://www.w3.org/2000/svg, declared as the default namespace so no prefixes are necessary. circle is one of the many elements that you can use to define graphics primitives. The attributes cx and cy define the position of the center of the circle along the X and Y axes. The r attribute specifies the radius of the circle. As in many computer graph applications, the use of these axes differs from the traditional mathematical convention. The position 0,0 (the origin) is at the upper-left side of the drawing, which takes up the entire browser display space when viewing stand-alone SVG. Position 2,2 is two pixels lower and to the right of the origin. You can specify units in SVG if you don't want to worry about pixel counts. I've used centimeters as the units for all dimensions in Listing 1. You can use other units such as points, which you're already familiar with to specify font sizes and inches. SVG's CSS is just like the CSS you use on regular Web pages, except that SVG has an additional set of rules you can use.

If you view Listing 1 in the browser, you should see a display similar to Figure 1. Try loading the image, changing these values, and refreshing the browser view to see the effect on the display. Try setting the center of the circle to the origin (position 0,0), so you can see how the browser truncates or clips the resulting image. You can even try to set a negative X or Y component to the location, which will end up clipping even more of the display.

Back to top

A matter of style

XML attributes control the dimensions of shapes, but matters such as the color and the border of shapes are controlled by style instructions expressed in CSS rules. Listing 2 (eg_2_3.svg in the download file) is an SVG file that defines three circles with the same radius but different appearances.

                    
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
  <circle cx="3cm" cy="2cm" r="1cm"
    style="fill: none; stroke: black; stroke-width: 0.05cm"/>
  <circle cx="6cm" cy="2cm" r="1cm"
    style="fill: red; stroke: none;"/>
  <circle cx="4.5cm" cy="4cm" r="1cm"
    style="stroke: #0000ff; stroke-width: 0.1cm"/>
</svg>

As you can see, one circle element exists for each object. Each has a different center location, so you can see each of them, but they all have the same radius. They all look different because of the differences in the style attributes, which specify CSS style rules for the object. One circle is rendered with a thin black stroke and no fill. The stroke is the outline of the circle shape; the fill is the way the body of the circle is painted. Notice that the circle in Figure 1 is filled in black. This is the default if no style is specified. In Figure 2, another circle is filled in red with no stroke. The third one has a stroke color specified as #0000ff. This is standard CSS code for a color with no red or green components and a maximum blue component. This is the equivalent to specifying blue.

If you view Listing 2 in the browser, you should see a display similar to Figure 2.

Note that style attributes are not the best way to apply CSS to SVG elements. If possible, it's better to use separate stylesheets (introduced in a later subsection), which attach rules to SVG elements through selectors based on element name, class and id attributes, and so forth. I demonstrate style attributes in this tutorial because they're extremely common in real-world SVG, so you should at least be familiar with them.

Back to top

Working with groups

In the examples so far, I've thrown the SVG object elements right into the document at the top level, but in most real-world uses of SVG, you'll find them at least bundled into groups. Groups are a way of organizing sets of objects. One useful property of a group is that you can apply certain characteristics to all objects within a group. This is similar to XHTML divs, which you often use to control cascading style for contained objects. Listing 3 (eg_2_4.svg in the download file) is an SVG file that defines three circles within a group, using some degree of common style.

                    
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
  <title>SVG example with three circles in a group</title>
  <g style="fill: none; stroke: lightgreen; stroke-width:0.1cm">
    <circle cx="3cm" cy="2cm" r="1cm"/>
    <circle cx="6cm" cy="2cm" r="1.5cm"/>
    <circle cx="4.5cm" cy="4cm" r="2cm" style="fill: #9999ff;"/>
  </g>
</svg>

The group is defined by the g element, which encloses members of the group. Characteristics specified on the g element are inherited by all members of the group. In this case, a style is specified for the stroke and fill. Any group member can override inherited characteristics. In this case, the third circle has a specified fill that overrides the group value.

Listing 3 also introduces the title element, which you can use on almost any SVG element. You should always have a title for a stand-alone SVG document. The desc element can also occur within almost every SVG element as a description passage. The content of these elements doesn't usually appear within the image, but it's usually available in some way through a viewer. Top-level titles appear in the title bar of SVG loaded in Firefox, much as the title of HTML documents do. If you view Listing 3 in the browser, you should see a display similar to Figure 3. Don't forget to check out the title bar.

Back to top

Using overlap

Notice how in Figure 3, the third circle overlaps the first two and obscures them. In SVG, objects specified later in the document order obscure objects specified earlier. If you imagine laying down the shapes as paper cutouts, the XML document order is analogous to the order in which you drop the cutouts onto the surface. You can use this fact to create some simple effects. For example, Listing 4 (eg_2_5.svg in the download file) is an SVG file that draws a crescent moon.

                    
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
  <title>SVG example creating a crescent-moon effect</title>
  <defs>
    <style type="text/css"><![CDATA[
      svg { background-color: black; }
      #moon { fill: yellow; }
      .shadow { fill: black; }
    ]]></style>
  </defs>
  <circle id="moon" cx="100" cy="100" r="50"/>
  <circle class="shadow" cx="120" cy="100" r="50"/>
</svg>

First, the browser draws a circle for the body of the moon, and then another circle, shifted a bit to the right, which covers the first and serves as the shadow, leading to the crescent effect. Interestingly, this listing doesn't use cm units. In fact, I don't specify units at all, defaulting to one pixel per unit. I use the defs element, which is a wrapper section for elements that aren't graphics objects themselves, but which provide information for reference by other elements. This includes global style elements. Such an element can provide a stylesheet inline or by reference to an external file. In this case, I include an inline stylesheet with the following instructions:

• Set the background of the entire document to black.
• Set the fill of the element with ID moon to yellow.
• Set the fill of any element with class shadow to black.

As I alluded to earlier, this is the proper way to specify style in SVG. The presentation details of the objects are now properly separated from the substance of the objects. Remember that more than one element can have a given class (even elements of different type), but only one can have a particular ID. If you view Listing 4 in the browser, you should see a display similar to Figure 4. You can see the crescent effect of the black circle drawn on the offset yellow.

Back to top

Transforms

SVG allows you to declare transforms on objects. In this case, the browser draws the object normally and then changes it in some way, such as by moving it, rotating it, resizing it, or otherwise distorting it. Listing 5 (eg_2_6.svg in the download file) draws a crescent moon to match Listing 4, but it uses a transform to offset the second circle.

                    
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
  <title>SVG example creating a crescent moon using a transform</title>
  <defs>
    <style type="text/css"><![CDATA[
      svg { background-color: black; }
      #moon { fill: yellow; }
      .shadow { fill: black; }
    ]]></style>
  </defs>
  <g>
    <title>Crescent</title>
    <circle id="moon" cx="100" cy="100" r="50"/>
    <circle class="shadow" cx="100" cy="100" r="50" transform="translate(20, 0)"/>
  </g>
</svg>

First, notice that I've put both circles in a group, and I've given that group a title. This underscores the fact that the group acts as a virtual, composite object. I've declared both circles with the same original positions and radii, but the second one has the attribute transform="translate(20, 0), which shifts the object 20 units along the X axis before rendering it. You cannot use units such as cm with the numbers expressed in transforms. You'll encounter some other sorts of transforms later in this tutorial. If you view Listing 5 in the browser, you should see the same display as for Listing 4.

Back to top

Manipulating opacity

So far, the objects sharing a space have completely obscured part of other objects, because SVG fills shapes with 100 percent opacity by default. You can make objects more transparent by modifying the opacity. Listing 6 (eg_2_7.svg in the download file) draws three overlapping circles of varying color and transparency.

                    
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" baseProfile="full"
     xmlns="http://www.w3.org/2000/svg">
  <title>SVG example with three overlapping circles</title>
  <defs>
    <style type="text/css"><![CDATA[
      circle { stroke:black; stroke-width:0.1cm; }
      #top { fill:red; fill-opacity:0.2; }
      #left { fill:green; fill-opacity:0.8; }
      #right { fill:blue; fill-opacity:0.5; }
    ]]></style>
  </defs>
  <g>
    <title>Translucent circles</title>
    <circle id="top" cx="6.5cm" cy="2cm" r="100"
        transform="translate(0,50)" />
    <circle id="right" cx="6.5cm" cy="2cm" r="100"
        transform="translate(70,150)" />
    <circle id="left" cx="6.5cm" cy="2cm" r="100"
        transform="translate(-70,150)"/>
  </g>
</svg>

The fill-opacity CSS property controls transparency. It's a value from 0 for fully transparent to 1 for fully opaque. I use one stylesheet rule to set the stroke properties for all circles, and then I use one rule for each circle to set its unique color and opacity. You might notice that the opacity also affects the appearance of color. The red circle is the most translucent, so it's more of a very light salmon color. The green circle is the most opaque, and thus is the deepest color. Notice that once again, I use transforms to offset the circles. One more interesting point is that I use a combination of units -- most are in cm, but the circles' radii don't have units specified and thus default to pixels. If you view Listing 6 in the browser, you should see a display similar to Figure 5.

2 of 8 | Previous | Next

Comments

Back to top

Table of contents

• Before you start
• Basic stand-alone SVG
• More complex drawings
• SVG in XHTML
• Wrap up
• Download
• Resources
• About the author

---

2 of 8 | Previous | Next

Dig deeper into XML on developerWorks

IBM SmartCloud trial. No charge.

Unleash the power of hybrid cloud computing today!

---

Public and private solutions in one trial.

Special offers