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:
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!
