JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<svg version="1.1" preserveAspectRatio="xMidYMid meet" width="200" height="100" viewBox="0 0 400 200">
    <g>
        <g transform="translate(20,20)">
            <foreignObject width="180px" height="80px">
                <div style="font-size: 20px; color: rgb(0, 0, 0);position: relative;">This is a test (SVG; viewBox)<br /></div>
            </foreignObject>
        </g>
    </g>
</svg>
<hr />
<svg version="1.1" preserveAspectRatio="xMidYMid meet" width="200" height="100">
    <g transform="scale(0.5)">
        <g transform="translate(20,20)">
            <foreignObject width="180px" height="80px">
                <div style="font-size: 20px; color: rgb(0, 0, 0);position: relative;">This is a test (SVG; scale)<br /></div>
            </foreignObject>
        </g>
    </g>
</svg>
<hr />
<div style="font-size:10px;">This is a test (HTML)</div>
</div>