https://github.com/bigtimebuddy/pixi-svg
SVG to Graphics DisplayObject for pixi.js
https://github.com/bigtimebuddy/pixi-svg
draw html5-canvas pixi pixi-svg pixijs svg webgl
Last synced: over 1 year ago
JSON representation
SVG to Graphics DisplayObject for pixi.js
- Host: GitHub
- URL: https://github.com/bigtimebuddy/pixi-svg
- Owner: bigtimebuddy
- License: other
- Created: 2017-04-24T22:38:32.000Z (about 9 years ago)
- Default Branch: main
- Last Pushed: 2023-02-10T12:31:10.000Z (over 3 years ago)
- Last Synced: 2025-03-06T14:04:31.239Z (over 1 year ago)
- Topics: draw, html5-canvas, pixi, pixi-svg, pixijs, svg, webgl
- Language: TypeScript
- Homepage: https://npmjs.com/pixi-svg
- Size: 3.21 MB
- Stars: 111
- Watchers: 7
- Forks: 13
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# PixiJS SVG Graphics
SVG to Graphics DisplayObject for PixiJS.
[](https://github.com/bigtimebuddy/pixi-svg/actions?query=workflow%3A%22Node.js+CI%22)
## Examples
See SVG and pixi.js side-by-side comparisons:
https://mattkarl.com/pixi-svg/examples/
## Install
```bash
npm install pixi-svg --save
# or
yarn add pixi-svg
```
## Usage
For an inline SVG element:
```html
```
Create a new `PIXI.SVG` object, provide the `` element.
```js
import { Application } from 'pixi.js';
import { SVG } from 'pixi-svg';
const svg = new SVG(document.getElementById("svg1"));
const app = new Application();
app.stage.addChild(svg);
```
## Supported Features
Only supports a subset of SVG's features. Currently, this includes:
- SVG Elements:
- ``
- ``
- ``
- ``
- ``
- ``
- `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
- `` elements are ignored
- `<text>` elements are ignored
- Gradients or images
- The following attributes are also ignored:
- `fill-rule`
## License
MIT License.