SVG with no explicit width and height is not rendered correctly in GUI

marlon360 · March 22, 2021, 6:44pm

Hello!

We noticed some problems with SVG files that don’t have an explicit width and height attribute on their root element.

Safari works as expected. Chrome renders with wrong dimensions. Firefox does not render.

I would suggest a fallback to the viewbox attribute for width and height.

RaananW · March 22, 2021, 7:09pm

There is no magic in the way we deal with SVGs. for us they are nothing more than images that are loaded using the browser’s Image object.
Would you be able to share the svg (and maybe a quick playground) so that we can see that the best way to get all browsers to work the same?

marlon360 · March 22, 2021, 7:14pm

I will prepare a playground.

github.com

BabylonJS/Babylon.js/blob/97aa6137ccc3898549bda74e7711133d2a1ef7a7/gui/src/2D/controls/image.ts#L572


        return svgsrc;

    } else {

        return value;

    }

}



/**

 * Sets sourceLeft, sourceTop, sourceWidth, sourceHeight automatically

 * given external svg file and icon id

 */

private _getSVGAttribs(svgsrc: HTMLObjectElement, elemid: string) {

    var svgDoc = svgsrc.contentDocument;

    // get viewbox width and height, get svg document width and height in px

    if (svgDoc && svgDoc.documentElement) {

        var vb = svgDoc.documentElement.getAttribute("viewBox");

        var docwidth = Number(svgDoc.documentElement.getAttribute("width"));

        var docheight = Number(svgDoc.documentElement.getAttribute("height"));

        // get element bbox and matrix transform

        var elem = svgDoc.getElementById(elemid) as Nullable<SVGGraphicsElement>;

        if (vb && docwidth && docheight && elem) {

            var vb_width = Number(vb.split(" ")[2]);

In this method you are using the attributes to calculate the dimensions, this should also work without the width and height attributes.

RaananW · March 22, 2021, 7:22pm

You are totally right. @msDestiny14 - want to take this one?

This is probably the best solution.

And here is a sentence we hardly ever read.

DanSinni · March 22, 2021, 8:38pm

Ha! Ain’t that the truth. Appreciate your attention on this, @RaananW and @msDestiny14 !

msDestiny14 · March 22, 2021, 9:39pm

Yep! Poke me when you have a PG and I will test and push. Nice find.

marlon360 · March 23, 2021, 2:57pm

Finished the PG @msDestiny14

https://www.babylonjs-playground.com/#QEPV26#3

Topic		Replies	Views
SVG boorked, or am I? Questions	6	1062	September 23, 2019
Weird behavior of onSVGAttributes playground Bugs	6	717	October 14, 2021
How to size image to fill its container while maintaining aspect ratio (using svg as source)? Questions gui , svg , size , image	8	144	June 27, 2024
SVG files rendering incorrectly Bugs	2	204	February 26, 2021
Babylonjs gui svg icon id support Feature requests	18	2384	December 4, 2019

SVG with no explicit width and height is not rendered correctly in GUI

Related topics