None
Blog / 2009 / November / 25

Introduction to svgweb

November 25, 2009

Svgweb is an interesting project that allows you to embed SVG directly into a web page. It will render using native functionality on proper browsers, and fall back to using Flash on Internet Explorer (IE8 still has no SVG support). It is also possible to force the use of the Flash version so you can use extended features that they have provided. To do this, add the tag

<meta name="svg.render.forceflash" content="true">

Here's a simple example of the library's use, using the Cat example from O'Reilly's SVG Essentials book.

<html>
  <head>
    <script src="/site_media/svgweb/svg.js" data-path="/site_media/svgweb"></script>
  </head>
  <body>
    <h1>svgweb example</h1>
    <script type="image/svg+xml">
       <svg width="140" height="170"
        style="background-color: #D2B48C; display: block; margin-bottom: 5px;"
        id="embeddedSVG">
      <title>Cat</title>
      <circle cx="70" cy="95" r="50" style="stroke: black; fill: none;"/>
      <circle cx="55" cy="80" r="5" stroke="black" fill="#339933"/>
      <circle cx="85" cy="80" r="5" stroke="black" fill="#339933"/>
      <g id="whiskers">
        <line x1="75" y1="95" x2="135" y2="85" style="stroke: black;"/>
        <line x1="75" y1="95" x2="135" y2="105" style="stroke: black;"/>
      </g>
      <use xlink:href="#whiskers" transform="scale(-1 1) translate(-140 0)"/>
      <polyline points="108 62, 90 10, 70 45, 50 10, 32 62" style="stroke: black; fill: none;"/>
      <polyline points="35 110, 45 120, 95 120, 105 110" style="stroke: black; fill: none;"/>
      <path d="M 75 90 L 65 90 A 5 10 0  0 0 75 90 " style="stroke: black; fill: #fcc;"/>
      <text x="60" y="165"  style="font-family: sans-serif; font-size:14pt; stroke: none; fill: black;">Cat</text>
    </svg>
  </script>
</body>
</html>

Animation

SMIL animation doesn't work in Firefox, and the Flash renderer (using Flash 10 on Kubuntu 9.10) just renders the background and no SVG content. Ho Hum.

However, scripting does work. Here's a simple animation example that uses Javascript to change the size of a rectangle:

<script type="image/svg+xml">
<svg width="400" height="200" 
   style="background-color: #D2B48C; display: block; margin-bottom: 5px;"
   id="animation">
     <rect id="myRectangle" x="10" y="10" width="200" height="20" stroke="black" fill="none">
     </rect>
</svg>
</script>

<a onclick="javascript:clicked()">Click me to start</a>

<script>
function makesmaller()
{
  var rect = document.getElementById('myRectangle');
  var width = rect.getAttribute('width')
  rect.setAttribute('width', width - 10)
  if ((width - 10) > 0) {
    setTimeout ( "makesmaller()", 1000 );
  }
}

function clicked()  {
  var rect = document.getElementById('myRectangle');
  rect.setAttribute('fill', 'red');
  setTimeout ( "makesmaller()", 1000 );
}

</script>

Tags: svg svgweb javascript animation