Friday, October 02, 2009

SVG at Google and in Internet Explorer

At Google we're excited about new web technologies like HTML 5, CSS 3, Web Fonts, SVG, faster JavaScript, and more. It's an exciting time to be a web developer, especially with the major advancements made in modern browsers like Firefox, Safari, Opera, and Chrome the last two years. In this blog post I want to share some of the work we've been doing with SVG in particular.

Today kicks off the start of the SVG Open 2009 conference, hosted at Google this year. The SVG Open conference is an annual conference where the SVG community comes together for three-days. Other sponsors of the conference this year include Microsoft and IBM.

What is SVG?

SVG, or Scalable Vector Graphics, is an open web standard that makes it easy to add interactive vector graphics to your web pages. Vector graphics, as opposed to bitmap graphics like JPG, GIF, or PNG files, describe the shapes on your screen with mathematical equations rendered by your computer rather than pixels. This allows vector graphics to stay beautiful and crisp whether displayed on a 40" monitor or a small mobile device.

Just as HTML gives you simple tags such as <form> or <table> to add to your web pages, SVG gives you such graphical tags as <circle> or <rect> for a rectangle that you can drop into your web page. Working with SVG is very similar to working with HTML - you use JavaScript to animate and make things interactive, CSS (Cascading Style Sheets) to add style, etc.

Why Google is Excited About SVG

We're excited about SVG for a host of reasons:

First, SVG is part of the HTML 5 family of technologies. One of the major new features of HTML 5 is the fact that you can now drop SVG tags into normal HTML, directly embedded into your page. We're excited about how this will empower developers. Here, for example, is a small code sample that embeds an SVG circle and rectangle right into an HTML 5 page:
<!DOCTYPE html>
<html>
<body>
<h1>SVG/HTML 5 Example</h1>
<svg>
<circle id="myCircle"
cx="100" cy="75" r="50"
fill="blue"
stroke="firebrick"
stroke-width="3" />
<text x="60" y="155">Hello World</text>
</svg>
</body>
</html>

Produces:


Second, we like that SVG is composed of text and markup, just like HTML. Because it's markup, search engines have a much easier time working with SVG; server-side languages like PHP or Google App Engine can simply emit SVG just like they generate HTML; and users and developers can easily view the source just like a normal web page to learn and move things forward. It's also easy to import and export SVG into tools like the open source Inkscape drawing package or Adobe Illustrator.

Third, the compact size of SVG when combined with HTTP GZip compression can easily make the images on a page roughly an order of magnitude smaller, and when directly embedded into an HTML 5 page can decrease the latency of a page by reducing the number of fetches. Small and fast are definitely two things we like at Google, and we like that SVG helps enable both.

Fourth, SVG integrates with the rest of the web stack, including JavaScript, CSS, and the DOM (Document Object Model). Even better, developers can easily adapt the skills they already know when working with SVG.

Finally, SVG is an open standard that is vendor-neutral. It also has accessibility built in, so when screen readers start to work with SVG your content will be future-proofed with accessibility baked in. We also like that SVG is now natively supported on all modern browsers, including the iPhone.

What Are Some Places We Use SVG?

We use SVG ourselves in a range of products. In Google Docs, for example, you can insert drawings, illustrations, and diagrams using a built in drawing tool:


On all browsers we use SVG to build this user interface; on Internet Explorer we have to revert to an older technology named Vector Markup Language (VML) unfortunately.


Another example is the Google Visualization API, which lets you access multiple sources of structured data that you can display, choosing from a large selection of visualizations. Some of these visualizations (such as this one and this one) use SVG to do their drawing on all browsers except Internet Explorer.

Canvas Or SVG? Oh My!

A natural question is how SVG compares to the Canvas tag. In our opinion both are needed for the web and are suitable for different applications.

The Canvas tag can best be thought of as a scriptable image tag that you build up yourself using JavaScript. This means it is lower-level, requiring you to keep track of all objects you have placed on the canvas. This can be a benefit if you want to do a large degree of non-interactive animation, but can quickly become a burden if you need to build sophisticated user interfaces.

SVG, meanwhile, is higher-level, doing the bookkeeping necessary to keep track of where everything is, making things like mouse interaction much easier. If you don't need this interaction, however, the overhead imposed by SVG can get in the way of certain applications. Because SVG is markup, importing and exporting is much easier, including SEO and accessibility.

We believe that Canvas versus SVG is a false dichotomy. A great example of both technologies working together is the Firefox Download Tracker. This page shows real time updates across the world whenever a copy of Firefox is downloaded. SVG is used to draw the map of the world; this is an appropriate use, since we don't want thousands of lines of JavaScript for this but rather markup from a tool like Inkscape. Red circles are drawn on top of the SVG using the Canvas tag as copies are downloaded; this is perfect for Canvas as the circles are non-interactive and might number in the thousands if copies are being downloaded rapidly.

SVG In Internet Explorer and in Wikipedia

Now that you know a bit more about SVG, why we like it, and some of the places we use it, let me tell you a bit about some of the work we've been doing to support SVG lately.

In addition to hosting this years conference, we are also helping to address the fact that SVG can't be used on Internet Explorer. It's hard for developers to use new web technologies if they can't deploy them on IE. In response to this, we've been working with others in the open source community on a drop-in JavaScript library named SVG Web that brings SVG to Internet Explorer.

SVG Web cleverly uses existing facilities on Internet Explorer 6, 7, and 8 to instantly enable SVG support without the user having to download any new software or plugins. Using SVG Web plus native SVG support you can now target close to 100% of the existing installed web base, today. Before SVG Web you could only target about ~30% of web browsers with SVG.

Once dropped in SVG Web gives you partial support for SVG 1.1, SVG Animation (SMIL), Fonts, Video and Audio, DOM and style scripting through JavaScript, and more in about a 60K library. Your SVG content can be embedded directly into normal HTML 5 or through the OBJECT tag. If native SVG support is already present in the browser then that is used. No downloads or plugins are necessary other than Flash which is used for the actual rendering, so it's very easy to use and incorporate into an existing web site. Here's a quick one minute introduction to SVG Web:



SVG Web is currently in alpha and is a developer release. It's also important to note that it is a collaboration with many others in the open source community outside Google, including Rick Masters at F5 Networks and James Hight at Zavoo Labs. Google is just one participant in this open source project. Finally, a JavaScript library will never be as fast as native support; this doesn't take Internet Explorer off the hook for needing to implement SVG, but it does help developers in the here and now deploy their SVG today to get the wheel turning.

In addition to helping enable SVG on Internet Explorer, we've been working with Wikipedia. Wikipedia has an impressively large collection of SVG files that are under Creative Commons licenses. Every one of these files is available in the Wikimedia Commons; for example here is the Linux penguin Tux as SVG. We've been working with Wikipedia to enable interactive zooming and panning of these SVG files, similar to Google Maps; even better, this functionality works in Internet Explorer thanks to the SVG Web library on the sixth largest site on the web.

Today at the SVG Open show we are demoing a prototype of the Wikipedia SVG Zoom and Pan tool; deployment to the wider base of Wikipedia users will happen after the conference and an appropriate QA period. Here's a screencast showing the tool in action:



We hope you are as excited as we are about SVG and other new web technologies in the pipeline!

11 comments:

  1. Brad,
    The exquisite timing of browser dynamics, along with your talents has, finally, lauched SVG.
    I am so glad for those who have hung in for so many years...

    ReplyDelete
  2. Good articles in the press talking about how Google is calling on Microsoft to (finally) implement SVG in IE and congratulations on SVG Web. But how are things going with Android supporting SVG? Is this finally happening? Would hate to have to use Chrome Frame or SVG Web to get SVG working in Android. If Microsoft does finally implement SVG, Android will be the lone holdout. SVG has become ubiquitous on desktop and mobile except Android.

    ReplyDelete
  3. That example about embedding svg in html doesn't seem to work with WebKit (nor Firefox for that matter).

    I thought it could have been a problem in our Qt port (I'm a WebKit developer), but testing with Safari shows that it doesn't work there as well.

    Cheers,
    Kenneth

    ReplyDelete
  4. Internet Explorer huh? Sorry, but I'm really trying hard to care...

    ReplyDelete
  5. @Francis: Thanks for the nice comment! Much appreciated :)

    @Kenneth: The SVG in HTML 5 embed syntax (documented at http://www.whatwg.org/specs/web-apps/current-work/#svg-0) is still being finalized. It is in FF 3.6 but off by default; I'm sure it will arrive in Webkit soon. SVG Web currently allows direct embed of SVG into HTML 5 and will support the final HTML 5 syntax when it is finalized soon.

    ReplyDelete
  6. All five of the reasons why "Google is excited about SVG" apply to MathML: it's part of HTML5; it's text and markup; it's compact relative to images; it integrates with other web technologies; and it's vendor neutral. MathML works in IE, Firefox, and somewhat in Opera (via CSS). MathML development is going on in Webkit. MathML in IE via the MathPlayer plug-in works with a lots of assistive technology so that the math encoded with MathML is accessible.

    It's great that your working to improve the SVG experience, but what about improving the experience for people who use math (something that every child does every school day)? Any plans for MathML support in Chrome?

    [Disclaimer: I work on MathML support/accessibility]

    ReplyDelete
  7. Hey Brad!

    SVG Web means that SVG is now ubiquitous. I'll ask the SVG IG to see if we can't put some energy into updating the Wikipedia entry on SVG to help celebrate the confluence of streams.

    Great conference! Thanks so much to you and Google for hosting it.

    Next year in .ie?

    I mean Ireland of course.

    ReplyDelete
  8. I wrote up my own entry about this, and wrote up a simple PHP library around the SVGWeb code that also takes into account the different declarations needed between browsers: download here. Hopefully it's of some use to you guys!

    It's not quite as compatible as just writing a tag, but I think that it is pretty easy to implement and pulls off the "embed with one line of code" objective. Right now, it only works with external SVG resources.

    ReplyDelete
  9. As the poster above said, it is interesting that default browser in Android does not support SVG. Here is what seems to be the reason why: issue 1376.

    Perhaps the google people that are excited about SVG can try to get the android people more excited. :)

    ReplyDelete
  10. There is a port of libsvg for Android, can be used to rasterize a SVG image to an Android canvas object.

    https://code.launchpad.net/libsvg-android

    ReplyDelete
  11. SVG on Android! Head out of Sand! The author of this blog should go talk some sense into the folks who say it's too big (1MB? really?) to include in Android. See http://code.google.com/p/android/issues/detail?id=1376

    ReplyDelete