1. SVG Tutorial
2. SVG Examples
3. A Simple SVG Example
4. Displaying SVG in Web Browsers
5. SVG Icons
6. SVG Coordinate System
7. SVG svg element
8. SVG g element
9. SVG rect element
10. SVG circle element
11. SVG ellipse element
12. SVG line element
13. SVG polyline element
14. SVG polygon element
15. SVG path element
16. SVG marker element
17. SVG text element
18. SVG tspan element
19. SVG tref element
20. SVG textpath element
21. SVG switch element
22. SVG image element
23. SVG a element
24. SVG defs Elements
25. SVG symbol Element
26. SVG use Element
27. SVG and CSS - Cascading Style Sheets
28. SVG Stroke
29. SVG Fill
30. SVG Viewport and View Box
31. SVG Animation
32. SVG Scripting
33. SVG Transformation
34. SVG Gradients
35. SVG Fill Patterns
36. SVG Clip Path
37. SVG Masks
38. SVG Filters

• A symbol Example
• preserveAspectRatio and viewBox

The SVG <symbol> element is used to define reusable symbols. The shapes nested inside a <symbol> are not displayed unless referenced by a <use> element.

A symbol Example

Here is a simple symbol example:

<svg width="500" height="100">
    <symbol id="shape2">
        <circle cx="25" cy="25" r="25" />
    </symbol>

    <use xlink:href="#shape2" x="50" y="25" />
</svg>

The <symbol> element needs an id attribute so it can be referenced later by a <use> element.

preserveAspectRatio and viewBox

A <symbol> element can have a preserveAspectRatio and viewBox attribute. A <g> cannot have these two attributes. Therefore the <symbol> element is probably a better way to reuse shapes than by using a <g> element inside the <defs> element.