Skip to content

GreyRook/pixi-svg-graphics

Repository files navigation

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:

Install the module (yarn install pixi-vector-graphics)

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

Or 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

About

Draws SVG documents on PIXI.Graphics objects

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages