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 use Example
• Using Shapes Outside of a defs Element
• Setting CSS Styles

The SVG <use> element can reuse an SVG shape from elsewhere in the SVG document, including <g> elements and <symbol> elements. The reused shape can be defined inside the <defs> element (which makes the shape invisible until used) or outside.

A use Example

Here is a simple example of the <use> element:

 <svg> <defs> <g id="shape"> <rect x="50" y="50" width="50" height="50" /> <circle cx="50" cy="50" r="50" /> </g> </defs> <use xlink:href="#shape" x="50" y="50" /> <use xlink:href="#shape" x="200" y="50" /> </svg> 

This example shows a <g> element defined inside a <defs> element. This makes the <g> invisible unless referenced by a <use> element.

Before the <g> element can be referenced, it must have an ID set on it via its id attribute. The <use> element references the <g> element via its xlink:href attribute. Notice the # in front of the ID in the attribute value.

The <use> element specifies where to show the reused shapes via its x and y attributes. Notice that the shapes inside the <g> element are located at 0,0. That is done because their position is added to the position specified in the <use> element.

Here is the resulting image:

The blue dots are not part of the example. They are added to show the x and y of the two <use> elements.

Using Shapes Outside of a defs Element

The <use> element can reuse elements from anywhere in an SVG image as long as that shape has an id attribute with a unique value. Here is an example:

 <svg width="500" height="110"> <g id="shape2"> <rect x="0" y="0" width="50" height="50" /> </g> <use xlink:href="#shape2" x="200" y="50" /> </svg> 

This example defines a <g> element with a <rect> element inside. Then it reuses the <g> element (including the nested <rect> element) via a <use> element.

Here is the resulting image:

Notice that both the original shape and its reused version are shown. That is happening because the shape that is reused (the <g> element) is not defined inside the <defs> element or <symbol> element. Therefore it is visible.

Again, the blue dot shows the coordinates of the <use> element.

Setting CSS Styles

You can set the CSS styles when reusing a shape, if the original shape has no CSS style set on it. You simply specify the styles to set inside the style attribute of the <use> element. Here is an example:

 <svg width="500" height="110"> <g id="shape3"> <rect x="0" y="0" width="50" height="50" /> </g> <use xlink:href="#shape3" x="100" y="50" style="fill: #00ff00;"/> <use xlink:href="#shape3" x="200" y="50" style="stroke: #00ff00; fill: none;"/> </svg> 

Notice how the original shape has no style attribute set on it. It will then be rendered with default styles (typically black).