SVG: The XML based graphic

Tech Ads

Back to Article List

Originally published May 2004 [ Publisher Link ]

SVG: The XML based graphic

Scalable Vector Graphics is the World Wide Web Consortium's standard for two-dimensional graphics. SVG is a royalty-free vendor-neutral open standard that builds upon many other successful standards, like JPEG and PNG for image formats, DOM for scripting and interactivity, SMIL for animation, and CSS for styling. Its cornerstone is another mainstream technology: XML.

While GIFs and JPEGs are the most pervasive graphic formats on the Web, there are patent issues surrounding the GIF compression algorithm, and even the JPEG format has come under fire recently by a company named Forgent. On technical merits, these formats lack an easy way of creating customized graphics on a user basis -- each request normally requires a made-from-scratch file.

Let's examine a simple SVG graphic. To view it you will need an SVG-enabled browser. Currently, mainstream browsers like Mozilla and Internet Explorer offer support for SVG through a plug-in, while other browsers like X-smiles are SVG-enabled by default. Among other alternatives for interacting with SVG are toolkits such as Batik, which is a Java-based open source project developed by the Apache Software Foundation.


<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="15cm" height="10cm"  
        viewBox="0 0 1500 1000"
        xmlns="http://www.w3.org/2000/svg" 
        version="1.1">
  <g>

   <text id="SVG" x="0" y="0"
        font-family="Arial" font-size="10pt" 
        visibility="hidden">
           Animated SVG image

    <set attributeName="visibility" 
        attributeType="CSS" to="visible"
        begin="1s" dur="10s" fill="freeze" />
     
     <animateMotion path="M 100 100 L 300 100 L 200 300 z"
        begin="1s" dur="10s" fill="freeze" />

     <animateColor attributeName="fill"
        from="rgb(0,0,255)" to="rgb(255,0,0)"
        begin="1s" dur="10s" fill="freeze" />

    </text>
  </g>
</svg>

We first declare the root tag <svg> with its corresponding global parameters, including SVG's default namespace. Later we initiate a <g> element which is used to nest other information regarding the graphic. The <text> tag represents a string which is to be animated. In it we can find two attributes which define its font size and type, as well as its visibility property, which in this case indicates the text be hidden. We later define the <set> tag, which is used to visualize the text. Its begin attribute represents the time in seconds the text will be visual, and dur its total duration.

animateMotion defines the actual animation coordinates, which for this case represent a triangular sequence. The syntax as defined in the path attribute represents the following: M 100 100 move to coordinates 100 on the x and y axis, L 300 100 line to 300 on the x axis and leave as is on the y axis, L 200 300 line to coordinate 200 on x and 300 on y, and finally the z indicates the closing of the sequence. animateColor is used to define transitional colors as the image is being displayed, the from attribute indicates the RGB color code for blue, with the to defining the value rgb(255,0,0) to specify red as the final color for the text.

Lets create another simple SVG image to further illustrate its tag-based nature:


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="15cm" height="10cm"
        viewBox="0 0 1500 1000"
        xmlns="http://www.w3.org/2000/svg" 
        version="1.1">

  <circle cx="200" cy="800" 
      r="10" fill="blue" stroke="red" 
      stroke-width="5"/>

  <text id="SVG" x="100" y="850" 
      font-family="Arial" font-size="10pt" 
      visibility="visible">   Y
         You are here
  </text>

</svg>

This last snippet creates a circle through SVG's built-in <circle> element. It defines the circle's position on the x and y axes through the cx and cy attributes respectively. The r indicates the circle's radius, while the fill="blue" specifies it be colored blue, with an outer red circumference which is provided by the stroke attributes. Besides the <circle> element, we use SVG's <text> tag to display a string below the generated circle.

Although tagged generated graphics may not seem appealing to professional graphic designers, herein lies the true power of SVG: The previous examples showed a few of the many built-in mechanisms of SVG, but it is when you combine these features with your own graphical elements that you create a powerful combination. You could, for instance, create a mapping application that, with a simple pair of tags, can display a certain point on a single image -- like the previous example -- on the fly for distinct users.

Among the factors that will surely accelerate SVG's adoption are its optimal rendition on devices of all sizes. Derivative works such as SVG Tiny and SVG Basic profiles target resource-limited devices such as mobile handsets and PDAs. SVG's ability to easily integrate with other XML technologies, like Web services, which are making inroads in enterprise systems, bode well for its future prospects.