SVG-Bug: different rendering of standalone-SVG and inline-SVG for foreignObject-tag
Options
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
04-25-2025 01:29 AM
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"
<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>
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.)
0 REPLIES 0

