<interactive-svg>

A navigatable SVG canvas.
Perfect for design apps and maps.

Heads up! This is totally a work in progress. Ideas are very welcome :)

Installation

interactive-svg is available through NPM:

$ npm install interactive-svg

– and through bower:

$ bower install interactive-svg

Usage

1

If you’re fine using <script> tags, import the desired plugins and register the element. All plugins loaded before interactive-svg.register.js will be registered by default on every <interactive-svg> element.

<script src="/path/to/interactive-svg.viewport.js"></script>
<script src="/path/to/interactive-svg.scale.js"></script>
<script src="/path/to/interactive-svg.register.js"></script>

If you’re building your app with a bundler like webpack, you can also require the parts:

var interactiveSvg = require('interactive-svg/core');
var viewport = require('interactive-svg/plugins/viewport');
var scale = require('interactive-svg/plugins/scale');

interactiveSvg({
  plugins: [viewport, scale]
});

2

Add an <interactive-svg> to your document. Pack an <svg> element inside.

<interactive-svg>
  <svg></svg>
</interactive-svg>

3

Add attributes to your <interactive-svg>.

<interactive-svg
  viewport="500 × 300"
  scale="2"
  ><svg></svg>
</interactive-svg>

The viewBox, width, height and style of the <svg> will be updated automatically as needed.

Features

Every feature is available as a separate plugin. All of them are currently in development – ideas and criticism are very welcome.

zoom

<interactive-svg
  zoom.speed="3"
  >
  <!-- ... -->
</interactive-svg>

• Enables zooming content in the viewport with the mouse wheel and the pinch-zoom event.

pan

<interactive-svg
  pan.mouse-button="right"
  >
  <!-- ... -->
</interactive-svg>

• Enables panning content in the viewport with the mouse and the touch-drag event.

scale

<interactive-svg
  scale="1.5"
  >
  <!-- ... -->
</interactive-svg>

• Requires the plugin viewport.

• Supports relative units. 1.5 means 150%.

• scale="1" means “1 SVG pixel = 1 CSS pixel.”

target

<interactive-svg
  target.x="100"
  target.y="-50"
  >
  <!-- ... -->
</interactive-svg>

• The above says “the point at (100, -50) SVG pixels is at the center of the <interactive-svg>”

• Supports all SVG units. Unitless means pixels, just like in SVG.

viewport

<interactive-svg
  viewport="400 × 200"
  >
  <!-- ... -->
</interactive-svg>

• The above tells the <interactive-svg> “your DOM element is 400 pixels wide”

• Supports all CSS units.

• I’m thinking of an opt-out, implicit viewport="auto" which would poll and update the element’s dimensions. Please let me know what you think in an issue.

canvas

<interactive-svg
  canvas.width="10000"
  canvas.height="6000"
  >
  <!-- ... -->
</interactive-svg>

• The above will limit panning and zooming to an area of 10000 × 6000 SVG pixels

License

MIT © Tomek Wiszniewski