Embed HTML in SVG

Placing text in a SVG can be somewhat cumbersome. Styling that text, handling line wraps, etc. even more.
Today I found out, that it's possible to embed HTML into a SVG with the <foreignObject> element:

<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
<style>
.svg-embed {
background-color: #ffe;
font-size: 12px;
}
</style>
<rect x="10" y="10" width="180" height="80" stroke="hotpink" fill="#ccc" />
<text x="20" y="30">How boring, text within a text-element</text>
<foreignObject x="20" y="40" width="160" height="60">
<div class="svg-embed">
Some styled <strong>text</strong> with background and <a href="/">a link</a>.
</div>
</foreignObject>
</svg>

Which produces this:

How boring, text within a text-element
Some styled text with background and a link.
Published: February 18th, 2022
Tags: til,SVG,HTML
References: