Vectored.Elements.Defs (Vectored v0.4.0)

Copy Markdown View Source

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

children()

@type children() :: [Vectored.Renderable.t()]

t()

@type t() :: %Vectored.Elements.Defs{children: children()}

Functions

append(svg, children)

@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.

new(children \\ [])

@spec new(children()) :: t()

Create a new <defs> container with an optional list of children.