Search code examples
svgtexturespixi.js

Pixi.JS: Using the Pixi Loader to create textures for inline SVG images

Everyone seems to recommend utilizing the Pixi Loader to load textures together, get updates on progress, etc. This works great so far.

However, I am wondering if there is a way to load a texture from an inline SVG using the Pixi Loader? Any insights would be appreciated.

(Note: I am looking to load the SVG as a texture, so I understand it will become a raster image, I am not looking for scalability features of SVG, but to simply reduce the amount of web requests needed by utilizing inline SVG images)

Solution

  • The only way I was able to get this to work, was to make the URL passed into the loader be a base64 encoded dataURI. Everything after "base64," is just a base64 encoded svg. Example:

    let svgTest = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5..."
Loader.shared.add('SvgTest',svgTest);
Loader.shared.load((loader, resources) => {
  //callback, do what you wish
});