SVG Document Structure

SVG DOCUMENT STRUCTURE

A look at how to achieve reusabability with SVG's semantic grouping and referencing elements. We additionally look at SVG's root element too.

For most web developers, SVG (or Scalable Vector Graphics), should bring some familiarity in terms of syntax. This is due to the fact, that SVG is a dialect of XML and quite similar to HTML. However, many "SVG noobs" hit a stumbling block with a couple of concepts that are unique to SVG. My advice to folks new to SVG, is to push through these challenges, since the ROI that SVG brings is well worth the effort. With that said, I hope that this article clarifies one of the more challenging areas…SVG Document Structure.

We look at:

* SVG's Root Element

* Grouping Elements

* Referencing Elements 

View corresponding blog post at:

http://unicorn-ui.com/blog/svg-document-structure.html

Music Attributions:

Loop Freesky–dEbE–http://www.freesound.org/people/bebeto/sounds/554/

frankum-http://www.freesound.org/people/frankum/sounds/237581/ (adapted with vocals by Nico Dotti)

notembug-Epic Tribal Drums–http://www.freesound.org/people/notembug/sounds/264284/