@pixi-essentials/svg
TypeScript icon, indicating that this package has built-in type declarations

2.0.1 • Public • Published

@pixi-essentials/svg

This package aims to implements the SVG Native Specification. In addition, it also supports the <text />, <tspan /> elements.

It is designed for high performance rendering. As such, it automatically culls its internal scene graph and uses a shared texture atlas for rasterized images.

Installation 📦

npm install @pixi-essentials/svg

Usage 📄

import { SVGScene } from '@pixi-essentials/svg';

async function main() {
  console.info("Loaded payload");

  const app = new PIXI.Application({
    antialias: true,
    autoDensity: true,
    autoStart: false,
    backgroundColor: 0xffffff,
    resolution: window.devicePixelRatio,
    view: document.getElementById("view")
  });

  const viewport = app.stage.addChild(new PIXI.Container());
  const scene = viewport.addChild(await PIXI.SVGScene.from("https://upload.wikimedia.org/wikipedia/commons/f/fa/De_Groot_academic_genealogy.svg"));

  app.renderer.render(app.stage);

  console.info("Success");
}

main();

Implementation

@pixi-essentials/svg generates a scene graph that maps one-to-one for each SVG DOM element. Features like masks and gradients are implemented as "servers" which lazily render when needed.

Collaboration

I'd like to thank Strytegy for funding the initial development of this package.

Package Sidebar

Install

npm i @pixi-essentials/svg

Weekly Downloads

494

Version

2.0.1

License

MIT

Unpacked Size

1.09 MB

Total Files

9

Last publish

Collaborators

  • shukantpal