Spaxe / svg-pathd / Svg.PathD

PathD - Minimal, complete SVG Path constructor of the data (d) attribute.

This library helps you specify SVG paths with a clean Elm interface. For the complete instruction on what each segment does, consult the MDN docs on SVG: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

Example of drawing a custom shape:

import Svg
import Svg.PathD exposing (Segment(..), pathD, m, l)

...

Svg.path
    [ d <| pathD
        [ M (-0.5, 0.5)
        , Q (0.5, 0.5) (0.5, -0.5)
        , L (-0.5, -0.5)
        , m (0.1, 0.1)
        , l (0.2, 0.1)
        , l (0.2, 0.25)
        , Z
        ]
    ]
    []

Uppercase commands work in absolute coordinates, and lowercase commands work in relative coordinates. For how relative paths work, see https://oreillymedia.github.io/Using_SVG/guide/path-data.html

Specifying a SVG Path

pathD : List Segment -> String

This function takes a list of Segments and produces a SVG d attribute with exact specifications.


type Segment
    = M Point
    | L Point
    | H Basics.Float
    | V Basics.Float
    | Z
    | C Point Point Point
    | S Point Point
    | Q Point Point
    | T Point
    | A Point Basics.Float Basics.Bool Basics.Bool Point
    | Md Point
    | Ld Point
    | Hd Basics.Float
    | Vd Basics.Float
    | Zd
    | Cd Point Point Point
    | Sd Point Point
    | Qd Point Point
    | Td Point
    | Ad Point Basics.Float Basics.Bool Basics.Bool Point

Complete implementation of the SVG path d attribute.

For relative commands in corresponding lowercase, such as m or l, they are exposed from the top-level module.

Construtors ending with -d are implementation details, and will be removed in a future iteration. Use the corresponding lowercase function instead.

Qualifying imports may be used to resolve namespace clashing, like

import Svg.PathD as PathD exposing (Segment(..), m, l)

The commands will then be accessible as PathD.M, PathD.Q, PathD.m etc.

Helper methods

a : Point -> Basics.Float -> Basics.Bool -> Basics.Bool -> Point -> Segment

Declare a relative arc SVG path command

c : Point -> Point -> Point -> Segment

Declare a relative cubic curve-to SVG path command

h : Basics.Float -> Segment

Declare a relative horizontal line SVG path command

l : Point -> Segment

Declare a relative line-to SVG path command

m : Point -> Segment

Declare a relative move-to SVG path command

q : Point -> Point -> Segment

Declare a relative quadratic curve-to SVG path command

s : Point -> Point -> Segment

Declare a relative smooth cubic curve-to SVG path command

t : Point -> Segment

Declare a relative smooth quadratic curve-to SVG path command

v : Basics.Float -> Segment

Declare a relative vertical line SVG path command

z : Segment

Declare a relative close-path SVG path command

Data Type


type alias Point =
( Basics.Float, Basics.Float )

Type shorthand for 2 floats that make up a coordinate.