Pixi.js: Feature Request: SVG parses size from viewBox

[tobyspark]

I have been given a folder of SVG assets that when loaded with PIXI.Sprite.from throw The SVG image must have width and height defined (in pixels), canvas API needs them.

On investigation they do not have width, height which SVGResource.js parses. They do have viewBox however. Creating the width, height attributes with the viewBox values leads to correct loading.

I suggest the following method should parse for viewBox if parsing for width, height fails.

    /**
     * Get size from an svg string using regexp.
     *
     * @method
     * @param {string} svgString - a serialized svg element
     * @return {PIXI.resources.SVGResource.Size} image extension
     */
    static getSize(svgString)
    {
        const sizeMatch = SVGResource.SVG_SIZE.exec(svgString);
        const size = {};

        if (sizeMatch)
        {
            size[sizeMatch[1]] = Math.round(parseFloat(sizeMatch[3]));
            size[sizeMatch[5]] = Math.round(parseFloat(sizeMatch[7]));
        }

        return size;
    }

I'm against a deadline right now, but if a pull request for this was wanted, I could do so. I'm on pixi.js - v5.0.3.

[ivanpopelyshev]

Yo! We had one or two PR's after 5.0.3: https://github.com/pixijs/pixi.js/pulls?utf8=%E2%9C%93&q=is%3Apr+is%3Aclosed++svg

Can you check if its the same problem in pixijs.download/dev/pixi.js ?

@JetLua

[tobyspark]

Thanks. I will check post-deadline, and do a PR if it still needs it.

And – thanks all for PixiJS!

[tobyspark]

Semi-related: the SVG needs to be set to fill as white for .tint to work, and these SVGs rendered black. For this deadline, I've hand-tweaked the SVG for size and colour, but I might make another PR for some kind of override-to-white.

[tobyspark]

Crikey. I now see #5697 completely re-works sizing [1]. This still doesn't work for me, however, as the real-world SVGs I have without width, height are being rendered at the wrong size, and there is no way to set the size to render a SVG resource at.

So, behold: PR #5776 SVRResource constructor has absolute size options

[1] Note to self: fix npm before working on the codebase, nomatter how trivial the changes.