pixi-vector-graphics

PIXI-SVG-Graphics

This module can draw SVG documents on PIXI.js's Graphics object, making them scaleable and crisp. The code originates from saschagehlich/pixi-svg-graphics but is API wise incompatible and refactored quite a bit.

Usage:

Using as a module

var svg = document.querySelector('svg#MySVGTag')
var SVGGraphics = require('pixi-svg-graphics')
var graphics = new SVGGraphics(svg);

Or just include pixi-svg-graphics.min.js in your HTML:

<script src="pixi-svg-graphics.min.js"></script>

The module is then available using window.SVGGraphics

Supported Tags:

• <svg>
• <style>
• <g>
• <text>
• <line>
• <polyline>
• <circle>
• <ellipse>
• <rect> (no rounded corners supported)
• <polygon>
• <path> (points that are too close together, like less than 1 pixel until a few pixels, can lead to graphic errors)

Supported Attributes:

• class
• style
• fill
• stroke
• stroke-width
• stroke-dasharray
• vector-effect
• transform (only supported for transforming the whole SVG):
  • matrix
  • translate
  • scale
  • rotate
  • not supported: skewX, skewY
• d (<path> only):
  • M (move to)
  • L (line to)
  • C (curve to)
  • V (vertical line to)
  • H (horizontal line to)
  • S (bezier curve to)
  • Z (close path)

Test:

In order to test the library you need a browserstack account and have inkscape installed. First create a '.browserstack.json' in your home folder. Fill it with your credentials. Then you can run 'run_tests.py'. This will automatically start an nginx server, convert all test images inside 'test/src' to png's using inkscape and will then compare these png's with png's, which are created through browserstack. Afterwards it will run an image comparison tool.

Todos:

• Add font formating support