@parametric-svg/element

Parametric 2D graphics. As a custom HTML element.

<svg>
  <rect parametric:width="2 * (a + 3)"/>
</svg>

➔

<parametric-svg a="5"><svg>
  <rect parametric:width="2 * (a + 3)"
                   width="16" />
</svg></parametric-svg>

➔

<parametric-svg a="50"><svg>
  <rect parametric:width="2 * (a + 3)"
                   width="106" />
</svg></parametric-svg>

Getting started

If you’re building your app with webpack or something:

$ npm install @parametric-svg/element

require('@parametric-svg/element');

Otherwise you can drop our <script> from the fantastic wzrd.in CDN anywhere in your HTML document:

<script src="https://wzrd.in/standalone/@parametric-svg%2Felement@latest"></script>

If you’re going the <script> way, remember to swap latest with a concrete version number in production. You can also download the script from https://wzrd.in/standalone/@parametric-svg%2Felement@latest and serve it yourself.

If it still doesn’t work, have a look at our note about browser support.

Usage

Wrap an <svg> with a <parametric-svg> element – all parametric attributes within the <svg> will be immediately resolved and updated.

See the example to get a general idea what a parametric SVG is. You can read up on the syntax in the spec.

You can define variables by setting attributes on the <parametric-svg> element. Any time you update an attribute, your drawing will be updated. Lightening-fast!

Browser support

Any browser which supports ES5 and custom elements will do. You can make custom elements work in any browser using the great document-register-element polyfill.

API

^{FUNCTION SIGNATURES USE JSIG (?)}

Register the `<parametric-svg>` element with custom settings

register(options: {
  logger?       : {warn: Function},
  document?     : Document,
  HTMLElement?  : Function,
}) => void

In most cases you’ll just import the main module and be fine with the default settings (see getting started). But if you want fine control, you can require('@parametric-svg/element/register'). The function you get back takes a single argument options with the following properties:

logger – A custom logger. Default: window.console.
document – A custom implementation of document – for headless tests or something. Default: window.document
HTMLElement – A custom HTMLElement constructor. If you’re passing a document, you’ll probably want to pass this as well. Default: window.HTMLElement.