SVG Definitions and Reuse
The defs and use elements are SVG's built-in system for reusability. Define a shape once, and then stamp it out as many times as you need without repeating the code.
The defs Element
The defs element acts as a hidden storage space inside your SVG. Any content placed inside defs is not rendered directly. It just sits there waiting to be referenced later. This is where you'll define shapes, gradients, patterns, and filters that you plan to reuse.
Every element you put inside defs must be given a unique id so it can be referenced.
The use Element
The use element pulls a defined element out of storage and renders it at a specified position. You point it at its target using the href attribute (which contains the id of the stored element with a # prefix).
Each use instance can be positioned independently using x and y attributes. You can also apply transform, fill, or other attributes to override the original definition's styles.
Example: Reusing a Star Shape
Notice how we define the star shape only once inside defs, centered at (0,0). Each use element then positions the star by translating from that origin point. This is a very efficient way to do it, because if you want to change the shape of the star, you only have to change the code in one place.
What Can Be Defined in defs?
Almost any SVG element can be placed in defs for reference later. Common uses include:
- Reusable shapes (icons, logos, repeated decorative elements).
linearGradientandradialGradientelements.patternelements for repeating fills.filterelements for effects like drop shadows and blurs.clipPathelements for clipping and masking.