SVG Path Data

[charlie_says]

I'm working with SVGs in my project - this works fine, the sprite created from the texture does what I need.

But, I also need to do some calculations & further work from the path data in the SVG. I can't see any way of accessing this in the Texture or BaseTexture (although I may have missed it.)

If it isn't possible to get the path data from the texture, is it possible to  import the SVG file as data and then create the texture from it (leaving me the data to do what I need later)

Thanks

[ivan.popelyshev]

its in the SVGResource. somehow.

[charlie_says]

Thanks, I've looked (& looked) and have not made any progress...

It seems that the baseTexture.resource is not an instance of SVGResource, but ImageResource which probably is the problem - is there a way to convert?

[charlie_says]

Ok, so I created an SVGResource like this:

const svgResource = new PIXI.resources.SVGResource(
			texture.baseTexture.resource.source.src
		   );

but, the svg property of this is just the path to the SVG file.

[charlie_says]

I've managed to get the svg to load as data by renaming it .txt - I can then see all the paths in it, but creating the texture from that isn't working properly. I guess working along this way might get to a solution - but, it feels a bit hacky...

[charlie_says]

I realised this morning the texture is creating fine - it's just not created instantly, so I'd need a Promise, or some delay to handle the 'wait'.

I'm still interested if there's another way to handle this.

 

[charlie_says]

Even further experimentation reveals that if I use:

  let tex = PIXI.Texture.from( this.assetPath + 'img/hat.svg')

then the texture's basetexture resource is an SVG resource - which is good.

Sadly the svg property of it is just a path to the file, not the data, which is not so good.

Does this mean that SVGs loaded via the loader are handled incorrectly? 

And, is there really no way to get the path infomation of a loaded SVG?

 

Edited December 2, 2020 by charlie_says

[ivan.popelyshev]

Charlie, did you look at the source of SVGResource? IT has an option to load from text. I dont know whether it creates SVG element that you can manipulate. That's all PixiJS has on SVG's, so you are asking for advanced user experience. SVG is huge problem for pixi. There're plugins like https://github.com/eXponenta/pixi5-svg . Nothing gives you full implementation of SVG.

[charlie_says]

Thanks Ivan - I will investigate further.

I'm not actually looking to implement anything with the SVGs, I just need to copy the path data for reuse elsewhere.

[charlie_says]

I had a quick look, and didn't see anything that would allow loading from text - can you point me to a line?

I did find:

 (this as any).svg = `data:image/svg+xml;base64,${btoa(unescape(encodeURIComponent(this.svg)))}`;

which would seem likely to overwrite any path data...

[charlie_says]

As per my other topic about loading blob data - I wasn't able to get this to wotk. In the end I loaded the SVG with a fetch which lets me keep my data and create the texture for a sprite.

[rich_earth]

On 12/1/2020 at 8:18 PM, charlie_says said:

I'm working with SVGs in my project - this works fine, the sprite created from the texture does what I need.

But, I also need to do some calculations & further work from the path data in the SVG. I can't see any way of accessing this in the Texture or BaseTexture (although I may have missed it.)

If it isn't possible to get the path data from the texture, is it possible to  import the SVG file as data and then create the texture from it (leaving me the data to do what I need later)

Thanks

Hey Charlie, 

Did some work with SVGs a while back,   I used a combination of svgson package (https://www.npmjs.com/package/svgson) to get data out of svg files (mine needed to have path attributes), and some native html methods on the Path object. 
 

    static getSVGPaths(svgString)
    {
        return svgson.parseSync(
                svgString
        ).children.filter((child) =>
            child.name === "path" && child.attributes.d)
            .map((child) =>
                child.attributes.d);
    }

    static getPointsFromSVG(svgPath, spacing, scale)
    {
        const line = [];

        const svgEl = document.createElementNS("http://www.w3.org/2000/svg", "path");

        svgEl.setAttributeNS(null, "d", svgPath);

        const totLength = svgEl.getTotalLength();
        let trackLength = 0;

        while (trackLength <= totLength)
        {
            const svgPoint = svgEl.getPointAtLength(trackLength);

            line.push({ x: svgPoint.x * scale, y: svgPoint.y * scale });
            trackLength += (spacing * scale);
        }

        return line;
    }

    static getSVGPathLength(svgPath)
    {
        const svgEl = document.createElementNS("http://www.w3.org/2000/svg", "path");

        svgEl.setAttributeNS(null, "d", svgPath);

        return svgEl.getTotalLength();
    }

 

[charlie_says]

Thanks @rich_earth I'll take a look at that, although, in the end I took a slightly different direction (I implemented a version of Potrace which I then use to trace the Bitmap and export the SVG shape.)