Skip to main content

Google's SVGWeb Making Vector Graphics Ubiquitous

Kurt Cagle's picture
Posted in

As a few readers of this site may know, all too many years ago I wrote a book on Scalable Vector Graphics, or SVG, back around 2004. The book focused primarily on the Adobe SVG Viewer, at the time the only major implementation of SVG on the planet. While the tool was incredibly useful - it really served to highlight the potential that SVG could offer, and became the both the foundation for a number of applications over the years - Adobe's acquisition of Macromedia (and Flash) in 2006, coupled with Microsoft's continued intransigence in supporting anything other than their own Vector Markup Language (VML), provided the coup de grace that very nearly killed SVG outright.

However, SVG is not quite dead yet.

Over the last few years, there's been a dramatic attempt by all of the browser vendors with the exception of Microsoft to aim towards SVG 1.1 support. Firefox, Opera, Safari and Chrome all now support most of the SVG spec, with the near uniform exception of animation. For those that were a big fan of declarative animations in the ASV component, this has been frustrating, but overall the SVG Recommendation itself should be seen first and foremost as a graphics specification, not an animation one.

However, even given that, Internet Explorer has long been the major holdout. Since the ASV component was effectively abandoned by Adobe a couple of years ago, its meant that most of the SVG implementations that worked in IE were small, highly specialized efforts that typically were unable to get much market traction. Even though there's strong evidence that the IE browser is losing significant share, it is still the de facto browser on the planet (by numbers) and their reluctance to implement SVG has been a significant bar on adoption overall.

Recently, a new Google project is now beginning to force the issue. SVG Web is a project first debuted at the Google campus as part of SVG.org 2009. The premise behind the project is, like that of many Google projects, simultaneously simple and rather stunning in its implications.

In essence, they have used Flash as a platform to build an SVG implementation.This implementation is reasonably impressive - like Adobe's original ASV, it has full animation support, it has support for filters, it will eventually support glyphs. They then combined this with a JavaScript layer that lets the web developer choose either to use the native SVG renderer in the browser (usually just marginally faster than the Flash code to render) or to use the Flash renderer.

This extends to Internet Explorer. SVG Web's makes it possible to render SVG graphics in IE without requiring the specialized (and unsupported) ASV browser. This means that the same content can be rendered in the same way across multiple browsers, supporting both animation and DOM controller, not that important in HTML markup but vital in graphical overlays. What this does is complete the arc, finally, after more than eight years, making it possible to use SVG graphics without fear of those not being supported in the brower..

SVG Web supports two different modes of including SVG images within web pages. The first involves the use of the

tag in order to load the image in from an external file. The computer graphic on this page is one example of such a usage, taking an SVG graphic image from the OpenClipart.org site, which contains SVG based clip art ranging from the extraordinarily primitive to the breathtakingly detailed and stunning.

The object tag for the computer is given as follows:

<!--[if IE]>
<object src="http://openclipart.org/people/Anonymous/Anonymous_Computer_1.svg"    
    classid="image/svg+xml"
    width="200" height="170"
    id="mySVGObject">
<![endif]-->
<!--[if !IE]>-->
<object data="http://openclipart.org/people/Anonymous/Anonymous_Computer_1.svg"
   type="image/svg+xml" width="200" height="170" id="mySVGObject">
    <!--<![endif]-->
</object>

which includes different usages depending upon whether this is displayed in Internet Explorer or elsewhere.

The second usage involved creating a new use for the element, this time with a @type attribute of "image/svg+xml. In this case, the content is actually inline. An example of this can be be seen in the example to the right. The code is actually rendered as part of an inline script that uses JavaScript in order to change the associated fill gradient whenever someone clicks on the round button, as well as changing text ... text that's in this case outside of the SVG itself (Listing 1).

<script type="text/javascript">
    function toggle(me) {
    var status = document.getElementById('status1a');
    if (me.getAttribute('fill') == 'url(#blueNavy)') {
    me.setAttribute('fill', 'url(#redMaroon)');
    status.textContent = "The ball is now red. Click on it again to return it to blue.";
    } else {
    me.setAttribute('fill', 'url(#blueNavy)');
    status.textContent = "The ball is now blue. Click on it again to return it to red.";
    }
    };</script>
<script type="image/svg+xml">
    <svg width="200" height="200"
        style="display: block; margin-bottom: 5px;float:left;" id="embeddedSVG"
        xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <linearGradient id="blueNavy" gradientTransform="rotate(90)">
                <stop stop-color="blue" offset="0"/>
                <stop stop-color="navy" offset="1"/>
            </linearGradient>
            <linearGradient id="redMaroon" gradientTransform="rotate(90)">
                <stop stop-color="red" offset="0"/>
                <stop stop-color="maroon" offset="1"/>
            </linearGradient>
        </defs>
        <g id="myGroup" fill="blue"
               style="font-size: 18px; text-anchor: middle; font-family: serif;">
            <circle id="myCircle" cx="100" cy="75" r="50" stroke="firebrick"
               stroke-width="3" fill="url(#blueNavy)" onclick="toggle(this)" cursor="pointer"/>
            <text x="100" y="75" fill="white" font-size="9pt"
               onclick="toggle(document.getElementById('myCircle'))" cursor="pointer" >Click Me</text>
        </g>
    </svg>
</script>

Listing 1. Inline SVG for a simple button.

Note however, that this is an option that extends beyond inline content. One of the more intriguing (and potentially worrisome) aspects of SVG images is that there is no distinction internally beyond SVG content running inline and SVG loaded in from external resources. If you know the internal structure of the SVG, then you can manipulate it from the DOM on the page. Moreover, you can manipulate the DOM on the page from the SVG. I haven't had a chance to get deep into the code yet, but I have to assume there is some kind of sandboxing at work (from my own experiments, there would seem to be).

Regardless, the SVG Web capabilities that Google is offering may very well go a long way to insuring that SVG content can, at least, become an ubiquitous part of the web - from clip art to charts,maps and diagrams to specialized fonts (and hopefully even animation). Get the picture?

One quick note - for those of you who have blogging permissions on the site and would like to incorporate SVG images from external sites into your work should use the object tag notation pretty much throughout. I'm working on some fixes to be able to handle inline content, but its still a little unstable at this stage. I'll be posting a FAQ with more detailed information shortly.

Editor's Note: I've disabled the svg web component because of a known bug with jQuery. As soon as a fix to this is release I will re-enable the site. Native SVG rendering should still display fine for those browsers that support it.