Want CNET to notify you of price drops and the latest stories?

Google urges Web adoption of vector graphics

Scalable Vector Graphics, or SVG, has languished as a graphics format on the Web, but now the stars are aligned for its success, Google argues.

Stephen Shankland principal writer
Stephen Shankland has been a reporter at CNET since 1998 and writes about processors, digital photography, AI, quantum computing, computer science, materials science, supercomputers, drones, browsers, 3D printing, USB, and new computing technology in general. He has a soft spot in his heart for standards groups and I/O interfaces. His first big scoop was about radioactive cat poop.
Expertise processors, semiconductors, web browsers, quantum computing, supercomputers, AI, 3D printing, drones, computer science, physics, programming, materials science, USB, UWB, Android, digital photography, science Credentials
  • I've been covering the technology industry for 24 years and was a science writer for five years before that. I've got deep expertise in microprocessors, digital photography, computer hardware and software, internet standards, web technology, and other dee
Stephen Shankland
3 min read

Some seeds for overhauling Web browser graphics were planted more than a decade ago, and Google believes now is the time for them to bear fruit.

The company is hosting the SVG Open 2009 conference that begins Friday to dig into a standard called Scalable Vector Graphics (SVG) that can bring the technology to the Web. With growing support from browser makers, an appetite for vector graphics among Web programmers, and new work under way to make SVG a routine part of the Web, the technology has its best chance in years at becoming mainstream.

New Web programming standards are hard to nurture, but they do arrive, said Brad Neuberg, a Google programmer and speaker at the conference.

"First they're ignored, then they're hyped, then they're written off for dead, then they start getting real work done," Neuberg said.

Bitmap images, such as this part of Wikipedia's logo, don't scale gracefully to different sizes.
Bitmap images, such as this part of Wikipedia's logo, don't scale gracefully to different sizes. Screenshot by Stephen Shankland/CNET
SVG lets this Wikipedia logo be shown as many pixels wide as you'd like.
SVG lets this Wikipedia logo be shown as many pixels wide as you'd like. Screenshot by Stephen Shankland/CNET

Vector graphics describe imagery mathematically with lines, curves, shapes, and color values rather than the grid of colored pixels used by bitmapped file formats such as JPEG or GIF widely used on the Web today. Where appropriate, such as with corporate logos but not photographs, vector graphics bring smaller file sizes and better resizing flexibility. That's good for faster downloads and use on varying screen sizes.

For one example, try the SVG version of the Wikipedia logo using the page-zoom tools in Firefox, Safari, Chrome, or Opera. It's a big SVG file, but it does scale. Another real-world example: the illustrations in Google Docs use SVG, Neuberg said.

But SVG has yet to catch on widely in Web programming circles, in part because the dominant Web browser, Microsoft's Internet Explorer, can't handle them. "It's hard to deploy this when you can't use it on most of the installed base," Neuberg said.

Google and various allies are working to change that--its Chrome browser along with Mozilla Firefox, Apple Safari, and Opera support SVG--and judging by the arrival of Microsoft as a gold sponsor of the conference, things could be turning around.

Other signs: vector graphics topped the list of desired new features in a Web programmer survey. And that result helped encourage Google to release a preview version of software called SVG Web that brings SVG support to browsers that lack it.

SVG Web can hand off SVG chores to browsers that support the standard. For those that don't, it runs a Flash program to handle rendering, Neuberg said. "It will never match the performance of native support. It's not a get-out-of-jail-free card, but it does help developers and users deploy content," he said.

At the conference, Google plans to show the fruits of work with Wikipedia to use SVG Web. Actual deployment of the technology is still one or two months away, awaiting more testing.

One issue for SVG is that it's been part of the evolutionary dead end of Web programming, XHTML. But that's changing: the HTML5 standard under development right now explicitly makes room for SVG so it'll become a first-class citizen, Neuberg said.

There's another way of doing vector graphics in a browser, a standard called Canvas that's also part of HTML5. Canvas is best suited to drawing a shape on the screen that the computer then forgets about, whereas SVG is better when the shape will be manipulated because the computer keeps track of its elements and attributes, Neuberg said. For comparison, equivalents of the SVG and Canvas approaches both are available in Adobe's Flash and Microsoft's Silverlight.

Realistically, though, the bigger vector competitor today is Adobe's Flash, which is in widespread use already. And just to spice things up, there's Adobe's FXG, an SVG-based format for vector graphics within Flash.

An advantage of vector graphics in Web pages is that because they're constructed from text, search engines can see and index content, Neuberg said. For example, labels in an anatomy diagram, along with conditions and medical procedures, are relevant data that would be indexed--or for that matter translated with a service such as Google Translate.

"SVG, like HTML, can have hyperlinks coming in and going out," Neuberg said. "It's part of the Web. It integrates with other technologies, so it's not trapped in a box."