5.4.24 • Published 4 months ago

@thi.ng/hiccup-svg v5.4.24

Weekly downloads
412
License
Apache-2.0
Repository
github
Last release
4 months ago

hiccup-svg

npm version npm downloads Twitter Follow

This project is part of the @thi.ng/umbrella monorepo.

About

SVG element functions 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([0, 0], 100, { fill: "red" }));

// incorrect / unsupported (lazy evaluation)
[svg.svg, {}, [svg.circle, [0, 0], 100, { fill: "red" }]]

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.

Since v3.7.0 tree conversion can be implicitly triggered by providing a convert: true attribute to the root svg() element.

// create SVG root element and convert body
svg(
    { width: 100, height: 100, convert: true},
    ["rect", { fill: [1, 0, 0] }, [0,0], 100, 100]
)
// [
//   'svg',
//   {
//     version: '1.1',
//     xmlns: 'http://www.w3.org/2000/svg',
//     'xmlns:xlink': 'http://www.w3.org/1999/xlink',
//     width: 100,
//     height: 100
//   },
//   [ 'rect', { fill: '#ff0000', x: 0, y: 0, width: 100, height: 100 } ]
// ]

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 array
  • rotate: 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)" }

Status

STABLE - used in production

Search or submit any issues for this package

Installation

yarn add @thi.ng/hiccup-svg

ES module import:

<script type="module" src="https://cdn.skypack.dev/@thi.ng/hiccup-svg"></script>

Skypack documentation

For Node.js REPL:

# with flag only for < v16
node --experimental-repl-await

> const hiccupSvg = await import("@thi.ng/hiccup-svg");

Package sizes (gzipped, pre-treeshake): ESM: 2.61 KB

Dependencies

Usage examples

Several demos in this repo's /examples directory are using this package.

A selection:

ScreenshotDescriptionLive demoSource
Probabilistic color theme generatorDemoSource
Heatmap visualization of this mono-repo's commitsSource
Basic crypto-currency candle chart with multiple moving averages plotsDemoSource
Color palette generation via dominant color extraction from uploaded imagesDemoSource
Mouse gesture / stroke analysis, simplification, corner detectionDemoSource
Various hdom-canvas shape drawing examples & SVG conversion / exportDemoSource
CLI util to visualize umbrella pkg statsSource
Generate SVG using pointfree DSLSource
Polygon to cubic curve conversion & visualizationDemoSource
rdom powered SVG graph with draggable nodesDemoSource
Interactive grid generator, SVG generation & export, undo/redo supportDemoSource
Additive waveform synthesis & SVG visualization with undo/redoDemoSource

API

Generated API docs

import * as svg from "@thi.ng/hiccup-svg";
import { serialize } from "@thi.ng/hiccup";
import * as fs from "fs";

fs.writeFileSync(
    "hello.svg",
    serialize(
        svg.svg(
            {width: 100, height: 100},
            svg.defs(svg.linearGradient("grad", [0, 0], [0, 1], [[0, "red"], [1, "blue"]])),
            svg.circle([50, 50], 50, { fill: "url(#grad)" }),
            svg.text([50, 55], "Hello", { fill: "white", "text-anchor": "middle" })
        )
    ));

Minimal example showing SVG conversion of a hdom-canvas scene:

// scene tree defined for hdom-canvas
const scene = [
    ["defs", {},
        ["radialGradient",
            { id: "bg", from: [150, 280], to: [150, 300], r1: 300, r2: 100 },
            [[0, "#07f"], [0.5, "#0ef"], [0.8, "#efe"], [1, "#af0"]]],
        ["radialGradient",
            { id: "sun", from: [110, 120], to: [110, 120], r1: 5, r2: 50 },
            [[0, "#fff"], [1, "rgba(255,255,192,0)"]]]
    ],
    ["circle", { fill: "$bg" }, [150, 150], 130],
    ["circle", { fill: "$sun" }, [110, 120], 50],
];

fs.writeFileSync(
    "radialgradient.svg",
    serialize(
        svg.svg({ width: 300, height: 300 }, svg.convertTree(scene))
    )
);

Result:

<svg version="1.1"
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
    <defs>
        <radialGradient id="bg" fx="150.00" fy="280.00" cx="150.00" cy="300.00" fr="300.00" r="100.00" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#07f"/>
            <stop offset="0.5" stop-color="#0ef"/>
            <stop offset="0.8" stop-color="#efe"/>
            <stop offset="1" stop-color="#af0"/>
        </radialGradient>
        <radialGradient id="sun" fx="110.00" fy="120.00" cx="110.00" cy="120.00" fr="5.00" r="50.00" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#fff"/>
            <stop offset="1" stop-color="rgb(255,255,192)" stop-opacity="0"/>
        </radialGradient>
    </defs>
    <circle cx="150.00" cy="150.00" r="130.00" fill="url(#bg)"/>
    <circle cx="110.00" cy="120.00" r="50.00" fill="url(#sun)"/>
</svg>

Authors

Karsten Schmidt

If this project contributes to an academic publication, please cite it as:

@misc{thing-hiccup-svg,
  title = "@thi.ng/hiccup-svg",
  author = "Karsten Schmidt",
  note = "https://thi.ng/hiccup-svg",
  year = 2016
}

License

© 2016 - 2021 Karsten Schmidt // Apache Software License 2.0

5.4.24

4 months ago

5.4.23

5 months ago

5.4.21

5 months ago

5.4.22

5 months ago

5.4.20

5 months ago

5.4.18

5 months ago

5.4.19

5 months ago

5.4.17

6 months ago

5.4.16

6 months ago

5.4.15

6 months ago

5.4.14

6 months ago

5.4.13

6 months ago

5.4.12

6 months ago

5.4.11

7 months ago

5.4.10

7 months ago

5.4.9

8 months ago

5.4.8

8 months ago

5.4.7

8 months ago

5.4.6

8 months ago

5.4.5

8 months ago

5.4.4

9 months ago

5.3.9

11 months ago

5.3.8

11 months ago

5.3.7

11 months ago

5.3.6

12 months ago

5.3.5

12 months ago

5.3.4

12 months ago

5.3.3

12 months ago

5.3.2

1 year ago

5.3.1

1 year ago

5.3.0

1 year ago

5.3.13

10 months ago

5.3.12

11 months ago

5.3.11

11 months ago

5.3.10

11 months ago

5.4.3

9 months ago

5.4.2

9 months ago

5.4.1

10 months ago

5.4.0

10 months ago

5.2.37

1 year ago

5.2.36

1 year ago

5.2.35

1 year ago

5.2.34

1 year ago

5.2.33

1 year ago

5.2.32

1 year ago

5.2.31

1 year ago

5.2.30

1 year ago

5.2.29

1 year ago

5.2.28

1 year ago

5.2.27

1 year ago

5.2.26

1 year ago

5.2.25

1 year ago

5.2.24

1 year ago

5.2.23

1 year ago

5.2.22

1 year ago

5.2.21

1 year ago

5.2.20

1 year ago

5.2.19

1 year ago

5.2.18

1 year ago

5.2.17

1 year ago

5.2.16

1 year ago

5.2.15

1 year ago

5.2.14

1 year ago

5.2.13

1 year ago

5.2.12

1 year ago

5.2.11

1 year ago

5.2.10

1 year ago

5.2.9

1 year ago

5.2.8

1 year ago

5.2.7

1 year ago

5.2.6

1 year ago

5.2.5

1 year ago

5.2.4

1 year ago

5.2.3

1 year ago

5.2.2

2 years ago

5.2.1

2 years ago

5.2.0

2 years ago

5.1.2

2 years ago

5.1.1

2 years ago

5.1.0

2 years ago

5.0.40

2 years ago

5.0.38

2 years ago

5.0.39

2 years ago

5.0.37

2 years ago

5.0.30

2 years ago

5.0.31

2 years ago

5.0.32

2 years ago

5.0.33

2 years ago

5.0.34

2 years ago

5.0.35

2 years ago

5.0.36

2 years ago

5.0.20

2 years ago

5.0.21

2 years ago

5.0.22

2 years ago

5.0.23

2 years ago

5.0.24

2 years ago

5.0.25

2 years ago

5.0.26

2 years ago

5.0.27

2 years ago

5.0.28

2 years ago

5.0.29

2 years ago

5.0.9

2 years ago

5.0.8

2 years ago

5.0.7

2 years ago

5.0.6

2 years ago

5.0.10

2 years ago

5.0.11

2 years ago

5.0.12

2 years ago

5.0.13

2 years ago

5.0.14

2 years ago

5.0.15

2 years ago

5.0.16

2 years ago

5.0.17

2 years ago

5.0.18

2 years ago

5.0.19

2 years ago

5.0.5

2 years ago

5.0.4

2 years ago

5.0.3

2 years ago

5.0.2

2 years ago

5.0.1

2 years ago

5.0.0

2 years ago

4.3.40

2 years ago

4.3.39

2 years ago

4.3.38

2 years ago

4.3.37

2 years ago

4.3.36

2 years ago

4.3.35

2 years ago

4.3.34

2 years ago

4.3.33

2 years ago

4.3.32

2 years ago

4.3.31

2 years ago

4.3.30

2 years ago

4.3.29

2 years ago

4.3.24

3 years ago

4.3.28

3 years ago

4.3.27

3 years ago

4.3.26

3 years ago

4.3.25

3 years ago

4.3.13

3 years ago

4.3.17

3 years ago

4.3.16

3 years ago

4.3.15

3 years ago

4.3.14

3 years ago

4.3.19

3 years ago

4.3.18

3 years ago

4.3.20

3 years ago

4.3.23

3 years ago

4.3.22

3 years ago

4.3.21

3 years ago

4.3.12

3 years ago

4.3.11

3 years ago

4.3.10

3 years ago

4.3.2

3 years ago

4.3.1

3 years ago

4.3.4

3 years ago

4.3.3

3 years ago

4.3.0

3 years ago

4.3.9

3 years ago

4.3.6

3 years ago

4.3.5

3 years ago

4.3.8

3 years ago

4.3.7

3 years ago

4.2.10

3 years ago

4.2.11

3 years ago

4.2.12

3 years ago

4.2.13

3 years ago

4.2.14

3 years ago

4.2.9

3 years ago

4.2.8

3 years ago

4.2.3

4 years ago

4.2.2

4 years ago

4.2.5

4 years ago

4.2.4

4 years ago

4.2.1

4 years ago

4.2.0

4 years ago

4.2.7

4 years ago

4.2.6

4 years ago

4.1.6

4 years ago

4.1.4

4 years ago

4.1.5

4 years ago

4.1.3

4 years ago

4.1.0

4 years ago

4.1.1

4 years ago

4.0.1

4 years ago

4.0.0

4 years ago

4.0.3

4 years ago

3.8.1

4 years ago

3.7.33

4 years ago

3.7.32

4 years ago

3.8.0

4 years ago

3.7.31

4 years ago

3.7.30

4 years ago

3.7.29

4 years ago

3.7.27

4 years ago

3.7.28

4 years ago

3.7.26

4 years ago

3.7.25

4 years ago

3.7.24

4 years ago

3.7.23

4 years ago

3.7.22

4 years ago

3.7.21

4 years ago

3.7.20

4 years ago

3.7.19

4 years ago

3.7.18

4 years ago

3.7.17

4 years ago

3.7.16

4 years ago

3.7.15

4 years ago

3.7.14

4 years ago

3.7.13

4 years ago

3.7.12

4 years ago

3.7.8

4 years ago

3.7.7

4 years ago

3.7.6

4 years ago

3.7.5

4 years ago

3.7.4

4 years ago

3.7.3

4 years ago

3.7.2

5 years ago

3.7.1

5 years ago

3.7.0

5 years ago

3.6.6

5 years ago

3.6.5

5 years ago

3.6.4

5 years ago

3.6.3

5 years ago

3.6.2

5 years ago

3.6.1

5 years ago

3.6.0

5 years ago

3.5.11

5 years ago

3.5.10

5 years ago

3.5.9

5 years ago

3.5.8

5 years ago

3.5.7

5 years ago

3.5.6

5 years ago

3.5.5

5 years ago

3.5.3

5 years ago

3.5.4

5 years ago

3.5.2

5 years ago

3.5.1

5 years ago

3.5.0

5 years ago

3.4.26

5 years ago

3.4.25

5 years ago

3.4.24

5 years ago

3.4.23

5 years ago

3.4.22

5 years ago

3.4.21

5 years ago

3.4.20

5 years ago

3.4.19

5 years ago

3.4.18

5 years ago

3.4.17

5 years ago

3.4.16

5 years ago

3.4.15

5 years ago

3.4.14

5 years ago

3.4.13

5 years ago

3.4.12

5 years ago

3.4.11

5 years ago

3.4.10

5 years ago

3.4.9

5 years ago

3.4.8

5 years ago

3.4.7

5 years ago

3.4.6

5 years ago

3.4.5

5 years ago

3.4.4

5 years ago

3.4.1

5 years ago

3.4.0

5 years ago

3.3.3

6 years ago

3.3.2

6 years ago

3.3.1

6 years ago

3.3.0

6 years ago

3.2.6

6 years ago

3.2.5

6 years ago

3.2.4

6 years ago

3.2.3

6 years ago

3.2.2

6 years ago

3.2.1

6 years ago

3.2.0

6 years ago

3.1.22

6 years ago

3.1.21

6 years ago

3.1.20

6 years ago

3.1.19

6 years ago

3.1.18

6 years ago

3.1.17

6 years ago

3.1.16

6 years ago

3.1.15

6 years ago

3.1.14

6 years ago

3.1.13

6 years ago

3.1.12

6 years ago

3.1.11

6 years ago

3.1.10

6 years ago

3.1.9

6 years ago

3.1.8

6 years ago

3.1.7

6 years ago

3.1.6

6 years ago

3.1.5

6 years ago

3.1.4

6 years ago

3.1.3

6 years ago

3.1.2

6 years ago

3.1.1

6 years ago

3.1.0

6 years ago

3.0.1

6 years ago

3.0.0

6 years ago

2.0.10

7 years ago

2.0.9

7 years ago

2.0.8

7 years ago

2.0.7

7 years ago

2.0.6

7 years ago

2.0.5

7 years ago

2.0.4

7 years ago

2.0.3

7 years ago

2.0.2

7 years ago

2.0.1

7 years ago

2.0.0

7 years ago

2.0.0-alpha.1

7 years ago

2.0.0-alpha.0

7 years ago

2.0.0-alpha

7 years ago

1.0.14

7 years ago

1.0.13

7 years ago

1.0.12

7 years ago

1.0.11

7 years ago

1.0.10

7 years ago

1.0.9

7 years ago

1.0.8

7 years ago

1.0.7

7 years ago

1.0.6

7 years ago

1.0.5

7 years ago

1.0.4

7 years ago

1.0.3

7 years ago

1.0.2

7 years ago

1.0.0

7 years ago

0.2.13

7 years ago

0.2.12

7 years ago

0.2.11

7 years ago

0.2.10

7 years ago

0.2.9

7 years ago

0.2.8

7 years ago

0.2.7

7 years ago

0.2.6

7 years ago

0.2.5

7 years ago

0.2.4

7 years ago

0.2.3

7 years ago

0.2.2

7 years ago

0.2.1

7 years ago

0.2.0

7 years ago

0.1.0

7 years ago