Using Canvas, SVG, and Web Fonts - HTML5 Advertising - page 77

Figure 4-6. The SVG and IMG versions of the Pepsi logo
Figure 4-6 places a vector (SVG) version above a bitmap (IMG) version. You can see that the SVG version is
as crisp as the bitmap image, and it will remain crisp regardless of scale on the image or zoom level on screen,
whereas the bitmap will degrade in quality with scaling up. In addition, the SVG version is 8 kilobytes, as opposed to
12 kilobytes for the IMG image. This may not seem like a big deal, but as you add more images with more color values
and graphics get more complex, you'll quickly notice that this approach can save an abundance of file size in your
ads. (You'll find more examples of SVG uses at bogotobogo.com/svg.html . Remember to always check for browser
support, using caniuse.com/svg-html5 , before launching a campaign in HTML5 that leverages SVG.)
RaphaëlJS
I'd like to draw your attention to a powerful JavaScript library called RaphaëlJS ( raphaeljs.com ) , which can streamline
your workflow with vector graphics on the Web. RaphaëlJS uses the SVG W3C Recommendation, where objects you