Thursday, January 19, 2012

How Wikipedia uses HTML5 to save bandwidth

Something I hadn't noticed until recently is that Wikipedia tries to use the browser's native SVG support to render certain images. For example, if you search for a high resolution image of your country's flag, you will probably end up viewing an SVG. Wikipedia also offers downloads to the image rendered as a PNG though.

Next to being able to scale to an arbitrary size without suffering data loss, the SVG data format allows images to be far more compact. Basically, SVG is just XML, which also means it can be easily compressed to make its size even smaller. For example, this is the (uncompressed) SVG for the flag of the Kingdom of Belgium.
<svg xmlns="http://www.w3.org/2000/svg" width="450" height="300">
    <rect width="450" height="300"/>
    <rect x="150" width="150" height="300" fill="#FAE042"/>
    <rect x="300" width="150" height="300" fill="#ED2939"/>
</svg>
This svg node only weighs as much as 224 bytes, while the image rendered as a high resolution PNG weighs 13.402 bytes. Stuff like that makes a significant difference when you're serving millions of page views on a daily basis.

The first time I touched SVG was a few years ago when I was still working on fire department projects. We were working with a third party that used SVG to draw maps in the browser. Being already in the post-Google Maps era, I thought it was terrible I had to download Adobe's SVG viewer. While the Google Maps technology already works great, there are still things SVG can do better and cleaner, especially for more specialized GIS applications. There is an interesting paper on that subject here, it's a bit outdated though.

I can only applaud making the browser more capable, and losing yet another plug-in. I'm curious to see how other applications will start taking advantage of the opportunities native SVG support across all modern browsers (even Internet Explorer) presents.

Have you already built things using SVG? Or even considered it?

22 comments:

  1. I took that SVG, multiplied all dimensions by 10, and saved as PNG. It's 17.5K.

    SVG is better, for sure. It's still smaller, and it's scalable (which matters more in images with angles & curves). But you're selling PNG a bit short here.

    ReplyDelete
  2. You are right Casey. I think I copied the wrong number in this post, I fixed it.

    Thanks for letting me know!

    ReplyDelete
  3. Even SVG could be used to draw graphics based on some logic in the code. Thus eliminating the use of so many images for lines, rectangles and circles. Of course when has to write the tags for svg but can use javascript to write them to the bpdy pf web page.

    JavaScript at Google

    ReplyDelete
  4. Why are you under the impression that using SVG is equivalent to using HTML5? Not everything that shines these days can be considered HTML5.

    ReplyDelete
  5. @itoctopus It's in the HTML5 spec for a reason right? http://dev.w3.org/html5/spec/Overview.html

    ReplyDelete
  6. Thanks for sharing information. didn't really know that wikipedia has started using html5.

    ReplyDelete
  7. SVG has been around for a lot longer than HTML5

    ReplyDelete
  8. Absolutely, but it hasn't been in the spec for that long.

    ReplyDelete
  9. Wikipedia has been using svg since before HTML5 became a buzz word.

    ReplyDelete
  10. Interesting, if Wikipedia is using it then we should also take note... specially because it can significantly reduce page loading times, and that is a SEO factor...

    ReplyDelete
  11. bandwidth is cheap. whats the cost of rendering a svg vs. png cpu wise on the clients end.

    ReplyDelete
  12. "This svg node only weighs as much as 224 bytes, while the image rendered as a high resolution PNG weighs 13.402 bytes."

    13 bytes or 13 kilobytes?

    ReplyDelete
  13. I re-discovered SVG a few years ago when we need to embed graphics into one of our analytics reports. We ended up using RaphaelJS (http://raphaeljs.com) to do the rendering. It's a javascript library that renders SVG on modern browsers and VML for those not so modern (IE6-7). Nice and compact.

    ReplyDelete
  14. SVG isn’t HTML5. What’s new in HTML5 is that SVG can now be used inline in HTML documents.

    ReplyDelete
  15. IE6 renders SVG man... it's like 10 yrs old. Can we stop with this HTML5 buzzwording already? Anything to make headlines I guess...

    ReplyDelete
    Replies
    1. IE6 renders VML. IE6 can only render SVG if you're using a plug-in.

      Delete
  16. This comment has been removed by a blog administrator.

    ReplyDelete
  17. This comment has been removed by a blog administrator.

    ReplyDelete
  18. I appreciate your article and decided to translate it to french ... http://aljilogy.blogspot.fr/2012/03/comment-wikipedia-utilise-html5-pour.html

    keep on ;)

    ReplyDelete