The <defs> element is a storage container for graphical objects that are
not intended to be rendered directly.
Why use Defs?
Think of <defs> as the "library" or "palette" of your SVG. You put things
here that you want to reference later by ID:
- Gradients and Patterns: Define the color math once, then apply it
to shapes using
fill="url(#my-grad)". - Icons and Symbols: Define a complex shape that will be stamped
across the drawing using
<use>. - Clipping Paths and Masks: Define a shape that will "cookie cut" or transparently mask another element.
Elements inside <defs> have no physical presence on the drawing until they
are referenced.
Examples
Vectored.Elements.Defs.new([
Vectored.Elements.LinearGradient.new() |> Vectored.Elements.LinearGradient.with_id("gold")
])
Summary
Functions
Append one or more children to the <defs> element.
Create a new <defs> container with an optional list of children.
Types
@type children() :: [Vectored.Renderable.t()]
@type t() :: %Vectored.Elements.Defs{children: children()}
Functions
@spec append( t(), Vectored.Renderable.t() | children() | (-> Vectored.Renderable.t() | children()) ) :: t()
Append one or more children to the <defs> element.
Accepts a single element, a list of elements, or a function that returns elements.
Create a new <defs> container with an optional list of children.