@thi.ng/hiccup-svg
@thi.ng/hiccup-svg
This project is part of the @thi.ng/umbrella monorepo.
About
SVG element functions & conversion for @thi.ng/hiccup & @thi.ng/hdom.
Important
The functions provided here do produce valid hiccup elements, but since none of them make use of (or support) the global hiccup / hdom context object, they can ONLY be invoked directly, i.e. they MUST be called like:
// correct (direct invocation)svg.svg, svg.circle, 100, ; // incorrect / unsupported (lazy evaluation)
SVG conversion of @thi.ng/geom & @thi.ng/hdom-canvas shape trees
Since v2.0.0 this package provides a conversion utility to translate the more compact syntax used by @thi.ng/geom and @thi.ng/hdom-canvas shape trees (designed for more performant realtime / canvas drawing) into a SVG serializable hiccup format.
The convertTree()
function takes a pre-normalized hiccup tree of
hdom-canvas shape definitions and recursively converts it into an hiccup
flavor which is ready for SVG serialization (i.e. using stringified
geometry attribs). This conversion also involves translation &
re-organization of various attributes, as described below. This function
returns a new tree. The original remains untouched, as will any
unrecognized tree / shape nodes (those will be transferred as-is to the
result tree). See example below.
Automatic attribute conversions
Colors
Since v3.1.0:
Color conversions are only applied to fill
and stroke
attributes and color stops provided to linearGradient()
, radialGradient()
String
String color attribs prefixed with $
are replaced with url(#...)
refs (e.g. to refer to gradients), else used as is (untransformed)
Number
Interpreted as ARGB hex value:
{ fill: 0xffaabbcc }
=> { fill: "#aabbcc" }
Array
Interpreted as float RGB(A):
{ fill: [1, 0.8, 0.6, 0.4] }
=> { fill: "rgba(255,204,153,0.40)" }
@thi.ng/color values
Converted to CSS color strings:
{ fill: hcya(0.1666, 1, 0.8859) }
=> { fill: "#ffff00" }
Transforms
(i.e. transform
, rotate
, scale
, translate
)
If an element has a transform
attrib, conversion of the other
transformation attribs will be skipped, else the values are assumed to
be either strings or:
transform
: 6-element numeric array (2x3 matrix in column major order)translate
: 2-element arrayrotate
: number (angle in radians)scale
: number (uniform scale) or 2-elem array
If no transform
, but others are given, the resulting transformation
order will always be TRS. Any string values will be used as-is and
therefore need to be complete, e.g. { rotate: "rotate(60)" }
Installation
yarn add @thi.ng/hiccup-svg
Dependencies
Usage examples
;;; fs.writeFileSync "hello.svg", serialize svg.svg , svg.defssvg.linearGradient"grad", , , , svg.circle, 50, , svg.text, "Hello", ;
Minimal example showing SVG conversion of a hdom-canvas scene:
// scene tree defined for hdom-canvas; fs.writeFileSync "radialgradient.svg", serialize svg.svg, svg.convertTreescene ;
Result:
Authors
- Karsten Schmidt
License
© 2016 - 2018 Karsten Schmidt // Apache Software License 2.0