Chapter 22. SVG and the Web

Table of Contents

Updated for v0.47.

SVG should really come into its own on the Web. Its small compact file structure (when compressed) 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. SVG drawings can contain hypertext links. And SVG drawings can be scripted and animated.

Support for SVG is rapidly improving in browsers. Firefox (from 1.5), Opera (from 8.5), and Safari (from 3.0) include different levels of support; Konqueror is in the process of adding support. Users of Internet Explorer and other browsers can join the fun by using the (ancient) Adobe plug-in or one of the many other plug-ins. See Planet SVG for a list of possible solutions.

This chapter introduces SVG use for the Web and covers the Inkscape features that help with this use. It is not the purpose of this book to cover web design and it provides only a minimal introduction to animation and scripting, which are not (yet) supported by Inkscape. It also does not cover all the tricks that may be needed to get SVG files to work on all browsers.

The sections in this chapter build on each other. The first section covers getting an SVG to display on a web page. The second covers adding hyperlinks. The third section introduces the use of style sheets. The fourth section covers some features of Inkscape to help with JavaScript. And the final section is a short introduction to animation.

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