elm-geometry-svg

This Elm package provides functions to create and manipulate SVG elements using the elm-geometry data types. You can:

• Draw 2D elm-geometry objects as SVG
• Apply elm-geometry-based 2D transformations to arbitrary SVG elements
• Convert SVG between different coordinate systems

Drawing

The lineSegment2d, triangle2d, polyline2d, polygon2d, circle2d, ellipse2d, arc2d, ellipticalArc2d, quadraticSpline2d, cubicSpline2d, rectangle2d and boundingBox2d functions all produce standard Svg msg values that can be included in any SVG diagram:

The appearance of the resulting elements can be customized by adding SVG attributes such as fill and stroke.

Transformation

The scaleAbout, rotateAround, translateBy and mirrorAcross functions behave just like their standard elm-geometry counterparts. You can use them to do things that would be difficult to do using just SVG, such as mirror a fragment of SVG across an arbitrary axis:

Note that these functions will work on any Svg msg, value, not just ones that happen to have been produced with this package! So you can use them as a convenient way to transform SVG that you've produced in some other way.

Coordinate conversion

The relativeTo and placeIn functions allow you to take SVG defined in one coordinate system and convert it to another. For example, you can take SVG defined in a model coordinate system where (0,0) is the center and positive Y is up, and use relativeTo to convert it into SVG in window coordinates for display, where (0,0) is the top left corner and positive Y is down.

placeIn is useful for 'instancing' or 'stamping' a fragment of SVG in many different positions with different orientations:

Installation

Assuming you have installed Elm and started a new project, you can install elm-geometry-svg by running

elm install ianmackenzie/elm-geometry-svg

in a command prompt inside your project directory.

Documentation

Full API documentation is available.

Climate action

I would like for the projects I work on to be as helpful as possible in addressing the climate crisis. If

• you are working on a project that helps address the climate crisis (clean energy, public transit, reforestation, sustainable agriculture etc.) either as an individual, as part of an non-profit organization or even as part of a for-profit company, and
• there is a new feature you would find helpful for that work (or a bug you need fixed) in any of my open-source projects, then

please open a new issue, describe briefly what you're working on and I will treat that issue as high priority.

Questions? Comments?

Please open a new issue if you run into a bug, if any documentation is missing/incorrect/confusing, or if there's a new feature that you would find useful (although note that this package is not meant to be general-purpose full-blown SVG package, more just a convenient way to render elm-geometry values). For general questions about using this package, try:

• Joining the #geometry or #svg channels on the Elm Slack, or sending me (@ianmackenzie) a message - even if you don't have any particular questions right now, it would be great to know what you're hoping to do with the package!
• Posting to the Elm Discourse forums

You can also find me on Twitter (@ianemackenzie), where I occasionally post elm-geometry-related stuff like demos or new releases. Have fun, and don't be afraid to ask for help!