Is it possible (and how) to load SVG string in Phaser 3 instead of loading it from path/url?

Phaser 3
1

I have several SVGs in my code which I would like to use with Phaser (specifically for particles) without saving them into separate SVG files.

const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/></svg>`;

function preload()
{
    // Usual way
    this.load.svg('plus', 'assets/svg/plus.svg');

    // What I would like to do
    this.load.svg('plus', svgString)
}

Is there a way to achieve this (and how)?

2 
const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
   <path d="M24 10h-10v-10h-4v10h-10v4h10v10h4v-10h10z"/>
</svg>`;
const blob = new Blob([svg], {type: 'image/svg+xml'});
const url = URL.createObjectURL(blob);
3 Likes
3

Thank you so much! You’re a life saver!