The Scalable Vector Graphics technology, SVG in short, seems to be experiencing nowadays its second (or third?) birth on the web. The browser vendors are investing heavily into lifting up what they initially prototyped long time before. This is true of Opera, Firefox, Safari and Chrome, but there is no clear indication on the plans to supporting SVG from the major browser vendor - Microsoft. True, Microsoft has recently made a vague statement on its commitment to support the standards and the thrilling web-as-a-platform thing aka HTML5, but in what extent and when? And what shall we do until that time has come, or until the older IE browser park has updated?

Many developers heard something about an alternative vector graphics technology shipped originally with Internet Explorer 5.0 - VML, the technology that never became a standard even though it was initially backed up by bigger vendors. VML is big and powerful though is full of issues. It is in fact more powerful than SVG in several directions, though it misses out some of the strengths of the later entirely. Luckily enough the technology intersection between SVG and VML is so vast, that many of the SVG features can be expressed well in VML.

Here comes the Ample SDK JavaScript GUI Framework. It is that framework that makes wonder happen - it enables SVG markup in HTML in Internet Explorer too by rendering SVG content into VML. The framework does not only allow for rendering static SVG images, but also enables script author to query and modify SVG fragments by the means of standard DOM APIs (note: standard, not the ones available in IE natively) at runtime.

There are two ways of embedding SVG markup (as well as the other - XUL, XHTML5) into a page featuring Ample SDK:

 
<script type="application/ample+xml">
<svg:svg xmlns:svg="http://www.w3.org/2000/svg" viewBox="0,0 400,50"
    xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="100px">
    <svg:defs>
        <svg:linearGradient id="linear" x1="0" x2="0" y1="1" y2="0">
            <svg:stop stop-color="red" offset="0.2" />
            <svg:stop stop-color="yellow" offset="0.5" />
        </svg:linearGradient>
    </svg:defs>
    <svg:text>
        <svg:tspan x="0" y="30" stroke="gray" stroke-width="1" fill="url(#linear)" font-family="Verdana" style="font-size:25px;font-weight:600">SVG in Internet Explorer!</svg:tspan>
    </svg:text>
</svg:svg>
</script>

 
<script type="text/javascript">ample.open()</script>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0,0 400,50"
    xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="100px">
    <defs>
        <linearGradient id="linear" x1="0" x2="0" y1="1" y2="0">
            <stop stop-color="red" offset="0.2" />
            <stop stop-color="yellow" offset="0.5" />
        </linearGradient>
    </defs>
    <text>
        <tspan x="0" y="30" stroke="gray" stroke-width="1" fill="url(#linear)" font-family="Verdana" style="font-size:25px;font-weight:600">SVG in Internet Explorer!</tspan>
    </text>
</svg>
<script type="text/javascript">ample.close()</script>

Indeed in order for these fragments to be found and processed by Ample SDK, the framework files need to be included in the head of the HTML page:

 
<script type="text/javascript" src="ample/runtime.js"></script> 
<script type="text/javascript" src="ample/languages/svg/svg.js"></script>

The full list of SVG modules implemented and available for usage in Internet Explorer:

• Basic Shapes Module, such as rect, circle, ellipse, line, polyline and polygon
• Paths Module's path element with commands for drawing complex shapes
• Text Module with its text, tspan and textPath elements
• Transformations Module with its transform attribute
• Document Structure Module with its svg, g and use elements
• Styling Module with many of its attributes

Here are two screenshots of how exactly same SVG document is rendered in Internet Explorer and, for example, Google Chrome:

as seen in Google Chrome	as seen in Internet Explorer

You may see more demos that feature multiple SVG functionalities supported on the Ample SDK website:

• SVG has a posse
• Tiger
• and more...

Of course, the tiny JavaScript library cannot replace a browser-based SVG renderer - it will hardly be able to render larger SVG documents with a performance close to acceptable, it lacks of a powerful SVG Filters module, still it can do a very good job helping you in rendering SVG-based graphs and other primitives.

Read more from Sergey Ilinsky.