Chapter 23. SVG and the Web

Table of Contents

Updated for v0.48 and HTML5.

SVG really comes into its own on the Web. The small compact file structure (when compressed and stripped of unneeded items) makes for quick downloads, yet its vector nature results in excellent rendering at any scale. But this is only the beginning. SVG plays nicely with other web technologies: SVG files can be embedded into web pages, they can contain hypertext links, and they can be can be scripted and animated. And now with HTML5, SVG will be everywhere.

This chapter introduces SVG use for the Web and covers the Inkscape features that help with this use. Inkscape has mostly been developed as a tool for artists and not for web graphics but it is still possible with a little work and knowledge to use Inkscape to create web graphics.

It is not the purpose of this book to cover web design. Only a minimal introduction to animation and scripting is presented. It only touches briefly on some of the tricks that may be needed to get SVG files to work on all browsers. It is assumed that the reader has a working knowledge of HTML. The following sites are good references (although some of the information is a bit dated) for using SVG on the web: SVG Primer and Carto:Net. For fun demonstations of the power of SVG go to the SVG Wow site.

Support for SVG has improved rapidly in Web browsers. Current versions of Firefox, Opera, Safari, and Chrome include almost complete support (Firefox doesn't handle SVG fonts and Safari 5 doesn't handle filters). Internet Explorer 9 will offer almost full SVG support (missing SVG fonts, SMIL animation, and filters). Options for users of older Internet Explorer browsers are discussed later.

The upcoming HTML5 (Hypertext Markup Language, version 5) specification allows inline SVG. HTML5 defines two different syntaxes: HTML and XML. All major Web browsers will support HTML syntax in the very near future. All major browsers except Internet Explorer (prior to version 9) already support inline SVG with XML syntax as well as in XHTML proper. The major difference between the HTML and XML syntaxes are that HTML does not always require tags to be closed while XML does, HTML is not case sensitive while XML is, and Name Spaces are not allowed in HTML (except for the XHTML, XLink, MathML, and SVG Name Spaces in special cases) while they are required in XML. Using closing tags and Name Spaces is good practice so it is recommended that you write to the XHTML syntax. You also need not strip Inkscape SVG of the various items declared in Inkscape and other Name Spaces.

[Warning]SVG Is Case Sensitive

SVG being based on XML is case sensitive. For example, viewbox is not the same as viewBox (the latter is the correct attribute name). This may trip up people coming from an HTML background. Work is being done to determine how to handle case sensitivity in CSS markup.

[Tip]Validate Your SVG and HTML

Validating your SVG and HTML5 ensures that it will be rendered as intended, especially if you create content by hand. The W3C offers an on-line validator service.

For an up-to-date list of which browsers support what, take a look at the When can I use... website. Chrome is frequently updated (every six weeks!), Firefox, Opera, Safari less so, and, well you probably already know about Internet Explorer.

The sections in this chapter build on each other. The first section covers getting an SVG to display on a web page (including options for older browsers). The second section covers how an SVG is fitted into a web page. The third covers adding hyperlinks. The fourth section introduces the use of style sheets. The fifth section introduces animation. And a final section covers some features of Inkscape to help produce SVGs for the web.

A web page displaying the examples discussed here is available at the book's website. Several web pages for testing browser support of SVG can also be found there.