Tip 19Creating Vector Graphics with SVG

We’re not limited to drawing graphics on the canvas. HTML5 documents support Scalable Vector Graphics, or SVG. Instead of using JavaScript to plot lines and draw shapes, we define lines, curves, circles, rectangles, and polygons using XML. Graphics in SVG are true vector graphics, meaning that instead of being made up of pixels like raster graphics, they use math to define the lines. That means we can easily resize vector graphics without blurriness or loss of quality, unlike the raster graphics of the Canvas.

To learn about SVG, we’ll use SVG’s XML syntax to redraw the AwesomeCo logo we drew before.

First we create a simple HTML skeleton with an <svg> element on the page:

html5_svg/index.html
 
<!DOCTYPE ...

Get HTML5 and CSS3, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.