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">
.svg-embed {
background-color: #ffe;
font-size: 12px;
<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>.

Which produces this:

How boring, text within a text-element
Some styled text with background and a link.

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