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:

This article has been published on February 18th, 2022 on my blog. Here's a list of all articles if you're interested in this kind of stuff.