Project Management

Get started with Web vector graphics

At the Web Directions South conference in Sydney, Dmitry Baranovskiy presented "Web Vector Graphics", giving an overview of the models available for creating vector graphics on the Web and tools to make them render correctly in all browsers.

At the Web Directions South conference in Sydney, Dmitry Baranovskiy presented "Web Vector Graphics", giving an overview of the models available for creating vector graphics on the Web and tools to make them render correctly in all browsers.

There are currently three technologies enabling vector graphic creation on the Web — Scalable Vector Graphics (SVG), the HTML canvas, and Vector Markup Language (VML). SVG, introduced by Adobe is currently the only W3C standard. Apple's HTML canvas is part of the HTML 5 draft, while VML is only supported by Microsoft's Internet Explorer.

Scalable Vector Graphics (SVG)

SVG graphics and their behaviour are specified in XML. The language allows you to define shapes, text and raster graphics — bitmaps as objects that can be accessed directly through the DOM. SVG also supports CSS, allowing documents to be styled with style sheets.

A SVG drawn in Inkscape

This is the code for the example above:


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!— Created with Inkscape (http://www.inkscape.org/) —>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="744.09448819"
   height="1052.3622047"
   id="svg2"
   sodipodi:version="0.32"
   inkscape:version="0.46"
   sodipodi:docname="vector_graphics_example1.svg"
   inkscape:output_extension="org.inkscape.output.svg.inkscape">
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     gridtolerance="10000"
     guidetolerance="10"
     objecttolerance="10"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="0.35"
     inkscape:cx="375"
     inkscape:cy="862.85714"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     inkscape:window-width="1680"
     inkscape:window-height="1001"
     inkscape:window-x="-4"
     inkscape:window-y="-4" />
  <defs
     id="defs4">
    <inkscape:perspective
       id="perspective10"
       inkscape:persp3d-origin="372.04724 : 350.78739 : 1"
       inkscape:vp_z="744.09448 : 526.18109 : 1"
       inkscape:vp_y="0 : 1000 : 0"
       inkscape:vp_x="0 : 526.18109 : 1"
       sodipodi:type="inkscape:persp3d" />
  </defs>
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1"
     inkscape:groupmode="layer"
     inkscape:label="Layer 1">
    <path
       sodipodi:type="arc"
       style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       id="path2408"
       sodipodi:cx="352.85715"
       sodipodi:cy="203.79076"
       sodipodi:rx="138.57143"
       sodipodi:ry="125.71429"
       d="M 491.42857,203.79076 A 138.57143,125.71429 0 1 1 214.28572,203.79076 A 138.57143,125.71429 0 1 1 491.42857,203.79076 z" />
    <rect
       style="fill:#0000ff;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       id="rect2410"
       width="302.85715"
       height="222.85715"
       x="208.57143"
       y="406.64789" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 122.85714,940.93361 C 585.71429,643.79075 582.85714,643.79075 582.85714,643.79075"
       id="path2414" />
    <path
       style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       d="M 994.28571,689.50504 L 994.28571,689.50504 z"
       id="path2416" />
  </g>
</svg>

HTML Canvas

The HTML canvas draws bitmap graphics using a JavaScript API. This new tag sets up a canvas for rendering graphs and images, whose size is controlled using the width and height attributes or with CSS. The attributes are optional and when not set, the canvas will be 300 pixels wide and 150 pixels high. Once created, the canvas will be blank and can be drawn on using JavaScript.

Currently most major browsers provide some support for SVG and canvas, Internet Explorer needs the iecanvas plug-in. Baranovskiy provided links to tests that can be used for both SVG and canvas.

The following code shows how to use canvas to draw a square:


<html>
<head>
<title>Canvas</title>
<script type="text/javascript">
function drawSquare(){
  var canvas = document.getElementById('example');
  if (canvas.getContext){
    var context = canvas.getContext('2d');

    context.fillRect(50,50,100,100);

  }
}
</script>
</head>

<body onload="drawSquare();">

<canvas id="example">

</canvas>
</body>
</html>

This is how it renders in a browser:

Vector Markup Language (VML)

Similar to SVG, VML — a Microsoft standard — uses XML to create vector graphics. It was submitted to W3C as a proposed standard, but rejected. However, it was still incorporated into Internet Explorer.

Here's an example of a VML image:

This is the code it produces:


<html>
<head>

<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style type="text/css">
v\:* { behavior: url(#default#VML);}
</style>

</head>
<body>

<?xml:namespace prefix = v /><v:oval style="POSITION: absolute; WIDTH: 135px; HEIGHT: 122px; TOP: 49px; LEFT: 96px" id=nr1 coordsize = "21600,21600" fillcolor = "#f03" strokecolor = "#f03" strokeweight = ".75pt"><v:fill></v:fill><v:stroke></v:stroke></v:oval>
<v:rect style="POSITION: absolute; WIDTH: 163px; HEIGHT: 130px; TOP: 121px; LEFT: 247px" id=nr2 coordsize = "21600,21600" fillcolor = "#051dff" strokecolor = "#051dff" strokeweight = ".75pt"><v:fill></v:fill><v:stroke></v:stroke></v:rect>
<v:shape style="POSITION: absolute; WIDTH: 1461px; HEIGHT: 800px; TOP: 0px; LEFT: 0px" id=nr3 coordsize = "1461,800" fillcolor = "#fc6500" strokecolor = "#fc6500" strokeweight = ".75pt" path = " m67,226 l67,226,68,226,69,226,70,226,72,226,74,226,77,226,78,225,79,225,81,225,82,225,83,225,84,225,87,225,89,225,90,225,92,225,94,225,96,225,97,225 98,225,101,225,103,225,104,225,105,225,106,225,107,225,108,225,109,225,111,225,113,226,115,226,119,226,121,226,123,226,124,226,127,226,130,226,131,226,134,226 136,226,139,226,140,226,141,226,143,226,146,226,148,226,152,226,153,226,155,226,158,226,159,226,160,226,162,226,163,226,167,226,171,226,174,226,180,226,182,226 186,226,187,226,189,226,190,226,192,226,193,225,194,225,195,225,196,225,198,225,199,225,200,225,201,225,202,225,203,225,204,225,205,225,207,225,208,225,210,225 211,225,213,225,214,225,215,225,216,225,217,225,218,225 e"><v:path></v:path><v:fill></v:fill><v:stroke></v:stroke></v:shape>


</body>
</html>

Comparing SVG, Canvas and VML

  • SVG and VML use XML to render graphics, whereas canvas relies on JavaScript
  • SVG and VML allow content to be styled with CSS, whereas canvas does not
  • The final result in canvas is pixels, whereas VML and SVG produce DOM objects
  • Real animation is currently only possible with SVG. Canvas is capable of producing some very basic animations, but anything more complex would be inefficient, since a shape, once drawn, stays the way it is. The only way of moving it would be to redraw it.
  • Filter effects are available for SVG and VML to some extent but not canvas
  • Image data is available in canvas, but not in VML and SVG
  • In addition to graphics, text is supported in all three

Cross-browser Compatibility

With three different models available for working with vector graphics on the Web, cross-browser compatibility becomes an issue. There are a number of ways to make your vector graphics render correctly in all browsers:

  • DojoX — this library allows you to create cross-browser 2D and 3D vector graphics and charts without having to worry about SVG, VML or canvas. The library takes care of those details for you.
  • ExCanvas.js and mooCanvas.js — scripts make canvas render correctly in Internet Explorer.
  • Raphaël -– this library was built by Baranovskiy himself. Raphael creates graphics using either SVG or VML. Since you are then working with DOM objects, they can be manipulated with JavaScript event handlers. The library is currently supported by Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
  • Cappuccino –- is another library that is based on JavaScript and Apple's Cocoa frameworks where you can draw cross-browser graphics -– see the Scrapbook example here.

Vector graphics allow you to build more creative interfaces. By taking advantage of the libraries available, you can simplify development and make your graphics compatible with all browsers.

Editor's Picks

Free Newsletters, In your Inbox