Skip to content
SVG to Graphics DisplayObject for pixi.js
Branch: master
Clone or download
Latest commit 70fe649 Apr 29, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
.babelrc
.eslintrc.js
.gitignore
.travis.yml
LICENSE
README.md
package.json

README.md

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.

You can’t perform that action at this time.