SVG to Graphics DisplayObject for pixi.js

Primary LanguageHTMLOtherNOASSERTION

PixiJS SVG Graphics

SVG to Graphics DisplayObject for PixiJS.

Node.js CI


See SVG and pixi.js side-by-side comparisons: https://mattkarl.com/pixi-svg/example/


npm install pixi-svg --save
# or
yarn add pixi-svg


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" />

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

import { Application } from 'pixi.js';
import { SVG } from 'pixi-svg';

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

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
    • stroke-linejoin
    • stroke-linecap

Unsupported Features

  • Basically, anything not listed above
  • Interactivity
  • Any transform attributes
  • <style> elements are ignored
  • <text> elements are ignored
  • Gradients or images
  • The following attributes are also ignored:
    • fill-rule


MIT License.