ianmackenzie/elm-geometry-svg/1.0.2

elm-geometry-svg

Release notes for version 1.0 (relative to opensolid/svg 3.0) are here.

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

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
• Or if you happen to be in the New York area, come on out to the Elm NYC meetup =)

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!