Navigable SVG Workshop: Difference between revisions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
* [[SVG] | == Creating a drag + Zoom-able SVG == | ||
The [http://code.google.com/p/svgpan/ 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]] | |||
* Add the link tag to the SVG | |||
* Ensure that the "xlink" namespace is in the XML file | |||
== SVG Animation with CSS Transitions == | |||
[http://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_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) | |||
== Links == | |||
* [[Inkscape]] http://inkscape.org | * [[Inkscape]] http://inkscape.org | ||
* [http://code.google.com/p/svgpan/ SVG pan] | * [http://code.google.com/p/svgpan/ SVG pan] | ||
* https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL | |||
* http://codepen.io/1Marc/pen/FJbtj | * http://codepen.io/1Marc/pen/FJbtj | ||
== Examples == | == Examples == | ||
* The [http://archipels.be 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. | * The [http://archipels.be 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. | ||
Revision as of 12:12, 6 May 2014
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
- Add the link tag to the SVG
- Ensure that the "xlink" namespace is in the XML file
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)
Links
- Inkscape http://inkscape.org
- SVG pan
- https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL
- 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.