Navigable SVG Workshop

Creating a drag + zoom-able SVG

The SVG pan library is a javascript file that can be added to any SVG format image to make it drag and zoomable when viewed in a web browser.

• Create an SVG using Inkscape, or download one form a source like Open Clip Art.
• Add the link tag to the SVG
• Ensure that the "xlink" namespace is in the XML file

• Link to Example

SVG Animation with CSS Transitions

CSS Transitions are an extension to the CSS language to very simply add gradual transition behaviours to page elements in a style similar to standard (static) CSS rules. These rules work with SVG elements as well.

• Link to example with buttons to navigate to specific control points
• Link to example with transitions enabled (via stylesheet)
• Link to example

Links

• Inkscape http://inkscape.org
• SVG pan
• SMIL is another was to animate SVG
• http://codepen.io/1Marc/pen/FJbtj

Examples

• The Archipel website is an example of a hybrid HTML + SVG interface to a music collection. The SVG is generated based on a (changable) "backend" catalogue of music from the music lending library of Belgium.