node package manager
Orgs are free. Discover, share, and reuse code in your team. Create a free org »

pixi-svg

pixi-svg

SVG to Graphics DisplayObject for pixi.js.

Build Status

Examples

See SVG and pixi.js side-by-side comparisons: https://bigtimebuddy.github.io/pixi-svg/example/

Install

npm install pixi-svg --save

Usage

For an inline SVG element:

<svg id="svg1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle r="50" cx="50" cy="50" fill="#F00" />
</svg>

Create a new PIXI.SVG object, provide the <svg> element.

const svg = new PIXI.SVG(document.getElementById("svg1"));
const app = new PIXI.Application();
app.stage.addChild(svg);

Supported Features

Only supports a subset of SVG's feature. Current this includes:

  • SVG Elements:
    • <path>
    • <circle>
    • <rect>
    • <polygon>
    • <polyline>
    • <g>
  • style attributes with the following properties:
    • stroke
    • stroke-width
    • fill
    • opacity

Unsupported Features

  • Basically, anything not listed above
  • Interactivity
  • Any transform attributes
  • <style> elements are ignored
  • <path> elements which use arcs to draw (a or A drawing command)
  • <text> elements are ignored
  • Gradients or images
  • The following attributes are also ignored:
    • stroke-linejoin
    • stroke-linecap
    • fill-rule

License

MIT License.