SVG-Bug: different rendering of standalone-SVG and inline-SVG for foreignObject-tag

padina — Fri, 25 Apr 2025 08:29:46 GMT

I developed an SVG inline a HTML-file and used the foreignObject. Everything worked fine.
Then I build an svg-file from the inline-svg. And the foreignObject did not worked anymore. 😞
HTML-example

<!DOCTYPE html> <html lang="de"> <head> <meta charset="UTF-8"> <title>test</title> </head> <body> <h1>Test include vs. inline</h1> <h2>Include SVG </h2> <div> <img width="841mm" height="1189mm" src="error_poster_2.svg" /> </div> <h2>Inline SVG</h2> <svg xmlns="http://www.w3.org/2000/svg" width="841mm" height="1189mm" viewBox="0 0 2384 3370"> <g> <text x="1640" y="1535" font-size="22" font-weight="bolder"> testing </text> <foreignObject x="1640" y="1545" width="100" height="100" xmlns="http://www.w3.org/1999/xhtml"> <h1>Hier ist die Welt</h1> </foreignObject> </g> </svg> </body> </html>

SVG-Example "error_poster_2.svg"

Interesting: The attribute width in <img> leads to another size than the attribute width in <svg>. See the example-code. (I saw the same bug in the chrome too. Perhaps I misunderstood the usage of the attribute width. I am not an expert.)

Re: SVG-Bug: different rendering of standalone-SVG and inline-SVG for foreignObject-tag

longsonr — Thu, 17 Jul 2025 00:38:13 GMT

foreignObject is not in the html namespace so you need to remove the xmlns="http://www.w3.org/1999/xhtml" from the foreignObject element and put it on the <h1> tag instead.

html does not process xmlns attributes at all which is why it works on a html page.

topic SVG-Bug: different rendering of standalone-SVG and inline-SVG for foreignObject-tag in Discussions

SVG-Bug: different rendering of standalone-SVG and inline-SVG for foreignObject-tag

Re: SVG-Bug: different rendering of standalone-SVG and inline-SVG for foreignObject-tag