Vectored.Elements.Path (Vectored v0.4.0)

Copy Markdown View Source

The <path> element is the most versatile SVG shape, capable of defining any shape.

It uses a "data" attribute (d) consisting of a series of commands that move a virtual "pen" across the drawing surface.

Why use a Path?

While Circle and Rectangle are easier for simple shapes, <path> is necessary for everything else: complex logos, icons, line charts, and organic shapes. Because all other basic shapes can be represented as paths, many design tools export everything as paths.

Path Commands: How they work

  • Move To (M / m): Lifts the pen and places it at a new coordinate.
  • Line To (L / l): Draws a straight line from the current position.
  • Horizontal/Vertical Line To (H/V): Shorthands for drawing straight lines along an axis.
  • Bezier Curve (C/Q): Draws smooth curves using control points to influence the curve's direction.
  • Elliptical Arc (A / a): Draws a portion of an ellipse. Useful for pie charts or rounded complex corners.
  • Close Path (Z): Draws a straight line back to the start of the current sub-path.

Absolute vs. Relative: Uppercase commands (e.g., L) use coordinates relative to the drawing's origin (0,0). Lowercase commands (e.g., l) use coordinates relative to the last pen position.

Examples

# Draws a simple triangle
Vectored.Elements.Path.new()
|> Vectored.Elements.Path.move_to(10, 10)
|> Vectored.Elements.Path.line_to(90, 10)
|> Vectored.Elements.Path.line_to(50, 90)
|> Vectored.Elements.Path.close_path()

Summary

Types

paths()
t()

Functions

append_path(path, p)

Append a raw command string to the path.

attributes(element)
attrs()
close_path(path)

Close the current sub-path by drawing a straight line back to the start.

cubic_bezier_curve(path, x1, y1, x2, y2, x, y, rel \\ false)

Draw a cubic Bezier curve.

delete_dataset(elem, key)

Remove a dataset attribute

eliptical_arc_curve(path, rx, ry, angle, large_arc_flag, sweep_flag, x, y, rel \\ false)

Draw an elliptical arc.

horizontal_line_to(path, x, rel \\ false)

Draw a horizontal line to the given x-coordinate.

line_to(path, x, y, rel \\ false)

Draw a straight line from the current position to (x, y).

move_to(path, x, y)

Move the pen to a new location without drawing a line.

new(path \\ [])

Create a new path element.

put_dataset(elem, key, value)

Set a dataset attribute. Mimics the DOM Element.dataset API. The key will be converted from camelCase to kebab-case for the data-* attribute.

quadratic_bezier_curve(path, x1, y1, x, y, rel \\ false)

Draw a quadratic Bezier curve.

rendered_key(key)
smooth_bezier_curve(path, x2, y2, x, y, rel \\ false)

Draw a smooth cubic Bezier curve.

smooth_quadratic_curve(path, x, y, rel \\ false)

Draw a smooth quadratic Bezier curve.

vertical_line_to(path, y, rel \\ false)

Draw a vertical line to the given y-coordinate.

with_alignment_baseline(elem, value)

Simple setter to put the value alignment-baseline onto the element

with_baseline_shift(elem, value)

Simple setter to put the value baseline-shift onto the element

with_class(elem, value)

Simple setter to put the value class onto the element

with_clip_path(elem, value)

Simple setter to put the value clip-path onto the element

with_clip_rule(elem, value)

Simple setter to put the value clip-rule onto the element

with_color(elem, value)

Simple setter to put the value color onto the element

with_color_interpolation(elem, value)

Simple setter to put the value color-interpolation onto the element

with_color_interpolation_filters(elem, value)

Simple setter to put the value color-interpolation-filters onto the element

with_cursor(elem, value)

Simple setter to put the value cursor onto the element

with_d(elem, value)

Simple setter to put the value d onto the element

with_dataset(elem, dataset)

Simple setter to put the value dataset onto the element

with_description(elem, content)
with_direction(elem, value)

Simple setter to put the value direction onto the element

with_display(elem, value)

Simple setter to put the value display onto the element

with_dominant_baseline(elem, value)

Simple setter to put the value dominant-baseline onto the element

with_fill(elem, value)

Simple setter to put the value fill onto the element

with_fill_opacity(elem, value)

Simple setter to put the value fill-opacity onto the element

with_fill_rule(elem, value)

Simple setter to put the value fill-rule onto the element

with_filter(elem, value)

Simple setter to put the value filter onto the element

with_flood_color(elem, value)

Simple setter to put the value flood-color onto the element

with_flood_opacity(elem, value)

Simple setter to put the value flood-opacity onto the element

with_font_family(elem, value)

Simple setter to put the value font-family onto the element

with_font_size(elem, value)

Simple setter to put the value font-size onto the element

with_font_size_adjust(elem, value)

Simple setter to put the value font-size-adjust onto the element

with_font_stretch(elem, value)

Simple setter to put the value font-stretch onto the element

with_font_style(elem, value)

Simple setter to put the value font-style onto the element

with_font_variant(elem, value)

Simple setter to put the value font-variant onto the element

with_font_weight(elem, value)

Simple setter to put the value font-weight onto the element

with_glyph_orientation_horizontal(elem, value)

Simple setter to put the value glyph-orientation-horizontal onto the element

with_glyph_orientation_vertical(elem, value)

Simple setter to put the value glyph-orientation-vertical onto the element

with_height(elem, value)

Simple setter to put the value height onto the element

with_href(elem, value)

Simple setter to put the value href onto the element

with_id(elem, value)

Simple setter to put the value id onto the element

with_image_rendering(elem, value)

Simple setter to put the value image-rendering onto the element

with_letter_spacing(elem, value)

Simple setter to put the value letter-spacing onto the element

with_lighting_color(elem, value)

Simple setter to put the value lighting-color onto the element

with_marker_end(elem, value)

Simple setter to put the value marker-end onto the element

with_marker_mid(elem, value)

Simple setter to put the value marker-mid onto the element

with_marker_start(elem, value)

Simple setter to put the value marker-start onto the element

with_mask(elem, value)

Simple setter to put the value mask onto the element

with_mask_type(elem, value)

Simple setter to put the value mask-type onto the element

with_opacity(elem, value)

Simple setter to put the value opacity onto the element

with_overflow(elem, value)

Simple setter to put the value overflow onto the element

with_paint_order(elem, value)

Simple setter to put the value paint-order onto the element

with_path_length(elem, value)

Simple setter to put the value pathLength onto the element

with_pointer_events(elem, value)

Simple setter to put the value pointer-events onto the element

with_preserve_aspect_ratio(elem, value)

Simple setter to put the value preserveAspectRatio onto the element

with_shape_rendering(elem, value)

Simple setter to put the value shape-rendering onto the element

with_stop_color(elem, value)

Simple setter to put the value stop-color onto the element

with_stop_opacity(elem, value)

Simple setter to put the value stop-opacity onto the element

with_stroke(elem, value)

Simple setter to put the value stroke onto the element

with_stroke_dasharray(elem, value)

Simple setter to put the value stroke-dasharray onto the element

with_stroke_dashoffset(elem, value)

Simple setter to put the value stroke-dashoffset onto the element

with_stroke_linecap(elem, value)

Simple setter to put the value stroke-linecap onto the element

with_stroke_linejoin(elem, value)

Simple setter to put the value stroke-linejoin onto the element

with_stroke_miterlimit(elem, value)

Simple setter to put the value stroke-miterlimit onto the element

with_stroke_opacity(elem, value)

Simple setter to put the value stroke-opacity onto the element

with_stroke_width(elem, value)

Simple setter to put the value stroke-width onto the element

with_style(elem, styles)

Simple setter to put the value style onto the element

with_text_anchor(elem, value)

Simple setter to put the value text-anchor onto the element

with_text_decoration(elem, value)

Simple setter to put the value text-decoration onto the element

with_text_overflow(elem, value)

Simple setter to put the value text-overflow onto the element

with_text_rendering(elem, value)

Simple setter to put the value text-rendering onto the element

with_title(elem, content)
with_transform(elem, value)

Simple setter to put the value transform onto the element

with_transform_origin(elem, value)

Simple setter to put the value transform-origin onto the element

with_unicode_bidi(elem, value)

Simple setter to put the value unicode-bidi onto the element

with_vector_effect(elem, value)

Simple setter to put the value vector-effect onto the element

with_view_box(elem, value)

Simple setter to put the value viewBox onto the element

with_view_box(elem, width, height)
with_view_box(elem, minx, miny, width, height)
with_visibility(elem, value)

Simple setter to put the value visibility onto the element

with_white_space(elem, value)

Simple setter to put the value white-space onto the element

with_width(elem, value)

Simple setter to put the value width onto the element

with_word_spacing(elem, value)

Simple setter to put the value word-spacing onto the element

with_writing_mode(elem, value)

Simple setter to put the value writing-mode onto the element

with_x(elem, value)

Simple setter to put the value x onto the element

with_y(elem, value)

Simple setter to put the value y onto the element

Types

paths()

@type paths() :: [String.t()]

t()

@type t() :: %Vectored.Elements.Path{
  alignment_baseline: term(),
  baseline_shift: term(),
  class: term(),
  clip_path: term(),
  clip_rule: term(),
  color: term(),
  color_interpolation: term(),
  color_interpolation_filters: term(),
  cursor: term(),
  d: paths(),
  dataset: term(),
  desc: term(),
  direction: term(),
  display: term(),
  dominant_baseline: term(),
  fill: term(),
  fill_opacity: term(),
  fill_rule: term(),
  filter: term(),
  flood_color: term(),
  flood_opacity: term(),
  font_family: term(),
  font_size: term(),
  font_size_adjust: term(),
  font_stretch: term(),
  font_style: term(),
  font_variant: term(),
  font_weight: term(),
  glyph_orientation_horizontal: term(),
  glyph_orientation_vertical: term(),
  height: term(),
  href: term(),
  id: term(),
  image_rendering: term(),
  letter_spacing: term(),
  lighting_color: term(),
  marker_end: String.t() | nil,
  marker_mid: String.t() | nil,
  marker_start: String.t() | nil,
  mask: term(),
  mask_type: term(),
  opacity: term(),
  overflow: term(),
  paint_order: term(),
  path_length: String.t() | number() | nil,
  pointer_events: term(),
  preserve_aspect_ratio: term(),
  shape_rendering: term(),
  stop_color: term(),
  stop_opacity: term(),
  stroke: term(),
  stroke_dasharray: term(),
  stroke_dashoffset: term(),
  stroke_linecap: term(),
  stroke_linejoin: term(),
  stroke_miterlimit: term(),
  stroke_opacity: term(),
  stroke_width: term(),
  style: term(),
  text_anchor: term(),
  text_decoration: term(),
  text_overflow: term(),
  text_rendering: term(),
  title: term(),
  transform: term(),
  transform_origin: term(),
  unicode_bidi: term(),
  vector_effect: term(),
  view_box: term(),
  visibility: term(),
  white_space: term(),
  width: term(),
  word_spacing: term(),
  writing_mode: term(),
  x: term(),
  y: term()
}

Functions

append_path(path, p)

Append a raw command string to the path.

Use this if you have an existing SVG path string you want to extend.

attributes(element)

attrs()

close_path(path)

Close the current sub-path by drawing a straight line back to the start.

Always use this for shapes you intend to fill, as it ensures a clean closure.

cubic_bezier_curve(path, x1, y1, x2, y2, x, y, rel \\ false)

Draw a cubic Bezier curve.

This is the "standard" curve. It uses two control points:

  1. (x1, y1) controls the "pull" from the start point.
  2. (x2, y2) controls the "pull" from the end point. (x, y) is where the curve ends.

delete_dataset(elem, key)

Remove a dataset attribute

eliptical_arc_curve(path, rx, ry, angle, large_arc_flag, sweep_flag, x, y, rel \\ false)

Draw an elliptical arc.

Arcs are complex but powerful.

Parameters

  • rx, ry: Radii of the ellipse the arc is part of.
  • angle: How much the ellipse is rotated.
  • large_arc_flag: 1 to draw the long way around, 0 for the short way.
  • sweep_flag: 1 for clockwise, 0 for counter-clockwise.
  • x, y: The end point.

horizontal_line_to(path, x, rel \\ false)

Draw a horizontal line to the given x-coordinate.

Useful for drawing perfectly flat lines without worrying about the y-coordinate.

line_to(path, x, y, rel \\ false)

Draw a straight line from the current position to (x, y).

Equivalent to L (absolute) or l (relative).

move_to(path, x, y)

Move the pen to a new location without drawing a line.

Equivalent to the M command. Always call this first in a new path.

new(path \\ [])

@spec new(paths()) :: t()

Create a new path element.

You can optionally pass a list of initial path command strings.

put_dataset(elem, key, value)

Set a dataset attribute. Mimics the DOM Element.dataset API. The key will be converted from camelCase to kebab-case for the data-* attribute.

Security

The key is converted to an atom at render time (required by :xmerl). Never pass untrusted/user-derived strings as key — unbounded distinct keys exhaust the atom table and crash the BEAM. Use static key names. value is safe and may be dynamic.

quadratic_bezier_curve(path, x1, y1, x, y, rel \\ false)

Draw a quadratic Bezier curve.

A simpler curve that uses only one control point (x1, y1) for the whole arc.

rendered_key(key)

smooth_bezier_curve(path, x2, y2, x, y, rel \\ false)

Draw a smooth cubic Bezier curve.

A shorthand that assumes the first control point is a reflection of the previous curve's last control point. Use this to keep curves perfectly smooth without math.

The SVG S/s command takes only the second control point x2,y2 and the endpoint x,y; the first control point is inferred.

smooth_quadratic_curve(path, x, y, rel \\ false)

Draw a smooth quadratic Bezier curve.

The SVG T/t command takes only the endpoint x,y; the control point is inferred as the reflection of the previous curve's control point.

vertical_line_to(path, y, rel \\ false)

Draw a vertical line to the given y-coordinate.

Useful for drawing perfectly vertical lines.

with_alignment_baseline(elem, value)

@spec with_alignment_baseline(t(), term()) :: t()

Simple setter to put the value alignment-baseline onto the element

with_baseline_shift(elem, value)

@spec with_baseline_shift(t(), term()) :: t()

Simple setter to put the value baseline-shift onto the element

with_class(elem, value)

@spec with_class(t(), term()) :: t()

Simple setter to put the value class onto the element

with_clip_path(elem, value)

@spec with_clip_path(t(), term()) :: t()

Simple setter to put the value clip-path onto the element

with_clip_rule(elem, value)

@spec with_clip_rule(t(), term()) :: t()

Simple setter to put the value clip-rule onto the element

with_color(elem, value)

@spec with_color(t(), term()) :: t()

Simple setter to put the value color onto the element

with_color_interpolation(elem, value)

@spec with_color_interpolation(t(), term()) :: t()

Simple setter to put the value color-interpolation onto the element

with_color_interpolation_filters(elem, value)

@spec with_color_interpolation_filters(t(), term()) :: t()

Simple setter to put the value color-interpolation-filters onto the element

with_cursor(elem, value)

@spec with_cursor(t(), term()) :: t()

Simple setter to put the value cursor onto the element

with_d(elem, value)

@spec with_d(t(), term()) :: t()

Simple setter to put the value d onto the element

with_dataset(elem, dataset)

@spec with_dataset(t(), term()) :: t()

Simple setter to put the value dataset onto the element

with_description(elem, content)

with_direction(elem, value)

@spec with_direction(t(), term()) :: t()

Simple setter to put the value direction onto the element

with_display(elem, value)

@spec with_display(t(), term()) :: t()

Simple setter to put the value display onto the element

with_dominant_baseline(elem, value)

@spec with_dominant_baseline(t(), term()) :: t()

Simple setter to put the value dominant-baseline onto the element

with_fill(elem, value)

@spec with_fill(t(), term()) :: t()

Simple setter to put the value fill onto the element

with_fill_opacity(elem, value)

@spec with_fill_opacity(t(), term()) :: t()

Simple setter to put the value fill-opacity onto the element

with_fill_rule(elem, value)

@spec with_fill_rule(t(), term()) :: t()

Simple setter to put the value fill-rule onto the element

with_filter(elem, value)

@spec with_filter(t(), term()) :: t()

Simple setter to put the value filter onto the element

with_flood_color(elem, value)

@spec with_flood_color(t(), term()) :: t()

Simple setter to put the value flood-color onto the element

with_flood_opacity(elem, value)

@spec with_flood_opacity(t(), term()) :: t()

Simple setter to put the value flood-opacity onto the element

with_font_family(elem, value)

@spec with_font_family(t(), term()) :: t()

Simple setter to put the value font-family onto the element

with_font_size(elem, value)

@spec with_font_size(t(), term()) :: t()

Simple setter to put the value font-size onto the element

with_font_size_adjust(elem, value)

@spec with_font_size_adjust(t(), term()) :: t()

Simple setter to put the value font-size-adjust onto the element

with_font_stretch(elem, value)

@spec with_font_stretch(t(), term()) :: t()

Simple setter to put the value font-stretch onto the element

with_font_style(elem, value)

@spec with_font_style(t(), term()) :: t()

Simple setter to put the value font-style onto the element

with_font_variant(elem, value)

@spec with_font_variant(t(), term()) :: t()

Simple setter to put the value font-variant onto the element

with_font_weight(elem, value)

@spec with_font_weight(t(), term()) :: t()

Simple setter to put the value font-weight onto the element

with_glyph_orientation_horizontal(elem, value)

@spec with_glyph_orientation_horizontal(t(), term()) :: t()

Simple setter to put the value glyph-orientation-horizontal onto the element

with_glyph_orientation_vertical(elem, value)

@spec with_glyph_orientation_vertical(t(), term()) :: t()

Simple setter to put the value glyph-orientation-vertical onto the element

with_height(elem, value)

@spec with_height(t(), term()) :: t()

Simple setter to put the value height onto the element

with_href(elem, value)

@spec with_href(t(), term()) :: t()

Simple setter to put the value href onto the element

with_id(elem, value)

@spec with_id(t(), term()) :: t()

Simple setter to put the value id onto the element

with_image_rendering(elem, value)

@spec with_image_rendering(t(), term()) :: t()

Simple setter to put the value image-rendering onto the element

with_letter_spacing(elem, value)

@spec with_letter_spacing(t(), term()) :: t()

Simple setter to put the value letter-spacing onto the element

with_lighting_color(elem, value)

@spec with_lighting_color(t(), term()) :: t()

Simple setter to put the value lighting-color onto the element

with_marker_end(elem, value)

@spec with_marker_end(t(), term()) :: t()

Simple setter to put the value marker-end onto the element

with_marker_mid(elem, value)

@spec with_marker_mid(t(), term()) :: t()

Simple setter to put the value marker-mid onto the element

with_marker_start(elem, value)

@spec with_marker_start(t(), term()) :: t()

Simple setter to put the value marker-start onto the element

with_mask(elem, value)

@spec with_mask(t(), term()) :: t()

Simple setter to put the value mask onto the element

with_mask_type(elem, value)

@spec with_mask_type(t(), term()) :: t()

Simple setter to put the value mask-type onto the element

with_opacity(elem, value)

@spec with_opacity(t(), term()) :: t()

Simple setter to put the value opacity onto the element

with_overflow(elem, value)

@spec with_overflow(t(), term()) :: t()

Simple setter to put the value overflow onto the element

with_paint_order(elem, value)

@spec with_paint_order(t(), term()) :: t()

Simple setter to put the value paint-order onto the element

with_path_length(elem, value)

@spec with_path_length(t(), term()) :: t()

Simple setter to put the value pathLength onto the element

with_pointer_events(elem, value)

@spec with_pointer_events(t(), term()) :: t()

Simple setter to put the value pointer-events onto the element

with_preserve_aspect_ratio(elem, value)

@spec with_preserve_aspect_ratio(t(), term()) :: t()

Simple setter to put the value preserveAspectRatio onto the element

with_shape_rendering(elem, value)

@spec with_shape_rendering(t(), term()) :: t()

Simple setter to put the value shape-rendering onto the element

with_stop_color(elem, value)

@spec with_stop_color(t(), term()) :: t()

Simple setter to put the value stop-color onto the element

with_stop_opacity(elem, value)

@spec with_stop_opacity(t(), term()) :: t()

Simple setter to put the value stop-opacity onto the element

with_stroke(elem, value)

@spec with_stroke(t(), term()) :: t()

Simple setter to put the value stroke onto the element

with_stroke_dasharray(elem, value)

@spec with_stroke_dasharray(t(), term()) :: t()

Simple setter to put the value stroke-dasharray onto the element

with_stroke_dashoffset(elem, value)

@spec with_stroke_dashoffset(t(), term()) :: t()

Simple setter to put the value stroke-dashoffset onto the element

with_stroke_linecap(elem, value)

@spec with_stroke_linecap(t(), term()) :: t()

Simple setter to put the value stroke-linecap onto the element

with_stroke_linejoin(elem, value)

@spec with_stroke_linejoin(t(), term()) :: t()

Simple setter to put the value stroke-linejoin onto the element

with_stroke_miterlimit(elem, value)

@spec with_stroke_miterlimit(t(), term()) :: t()

Simple setter to put the value stroke-miterlimit onto the element

with_stroke_opacity(elem, value)

@spec with_stroke_opacity(t(), term()) :: t()

Simple setter to put the value stroke-opacity onto the element

with_stroke_width(elem, value)

@spec with_stroke_width(t(), term()) :: t()

Simple setter to put the value stroke-width onto the element

with_style(elem, styles)

@spec with_style(t(), term()) :: t()

Simple setter to put the value style onto the element

with_text_anchor(elem, value)

@spec with_text_anchor(t(), term()) :: t()

Simple setter to put the value text-anchor onto the element

with_text_decoration(elem, value)

@spec with_text_decoration(t(), term()) :: t()

Simple setter to put the value text-decoration onto the element

with_text_overflow(elem, value)

@spec with_text_overflow(t(), term()) :: t()

Simple setter to put the value text-overflow onto the element

with_text_rendering(elem, value)

@spec with_text_rendering(t(), term()) :: t()

Simple setter to put the value text-rendering onto the element

with_title(elem, content)

with_transform(elem, value)

@spec with_transform(t(), term()) :: t()

Simple setter to put the value transform onto the element

with_transform_origin(elem, value)

@spec with_transform_origin(t(), term()) :: t()

Simple setter to put the value transform-origin onto the element

with_unicode_bidi(elem, value)

@spec with_unicode_bidi(t(), term()) :: t()

Simple setter to put the value unicode-bidi onto the element

with_vector_effect(elem, value)

@spec with_vector_effect(t(), term()) :: t()

Simple setter to put the value vector-effect onto the element

with_view_box(elem, value)

@spec with_view_box(t(), term()) :: t()

Simple setter to put the value viewBox onto the element

with_view_box(elem, width, height)

with_view_box(elem, minx, miny, width, height)

with_visibility(elem, value)

@spec with_visibility(t(), term()) :: t()

Simple setter to put the value visibility onto the element

with_white_space(elem, value)

@spec with_white_space(t(), term()) :: t()

Simple setter to put the value white-space onto the element

with_width(elem, value)

@spec with_width(t(), term()) :: t()

Simple setter to put the value width onto the element

with_word_spacing(elem, value)

@spec with_word_spacing(t(), term()) :: t()

Simple setter to put the value word-spacing onto the element

with_writing_mode(elem, value)

@spec with_writing_mode(t(), term()) :: t()

Simple setter to put the value writing-mode onto the element

with_x(elem, value)

@spec with_x(t(), term()) :: t()

Simple setter to put the value x onto the element

with_y(elem, value)

@spec with_y(t(), term()) :: t()

Simple setter to put the value y onto the element