Using Inline SVGs With HTML5

It goes without saying that SVG isn’t as widely used as many people in the web development community might believe it should be. Setting the debate aside, in this tutorial, Sue Smith will demonstrate how to use inline SVGs, covering a range of techniques and exploring the interaction between web page and graphic. When used in conjunction with other emerging standards in HTML5, JavaScript and CSS3, inline SVGs can significantly add to the user experience.

As you likely will be aware, inline SVGs fall within the emerging HTML5 standards, so the code Sue Smith uses in this tutorial will not be fully supported across all browsers. Although inline SVGs are theoretically supported in all current versions of the major browsers, the internal animations and interactive effects that she’ll use are not so well supported just yet. One of the primary advantages to using SVG is how scalable it is. To exploit this, she is primarily going to use relative values to define the SVG content. Add a container element for the SVG in the page body. Sue Smith has set the width and height to 100%, as she is going to specify the width of the containing element. However, rather than specifying the dimensions explicitly, she’ll instead use a JavaScript function to reveal how easily you can scale the SVG up and down.