<foreignObject>

html,
body,
svg {
  height: 100%;
}

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <style>
    div {
      color: white;
      font: 18px serif;
      height: 100%;
      overflow: auto;
    }
  </style>

  <polygon points="5,5 195,10 185,185 10,195" />

  <!-- よくある用途: HTML テキストを SVG へ埋め込む -->
  <foreignObject x="20" y="20" width="160" height="160">
    <!--
      HTML 文書に埋め込まれた SVG のコンテキストでは
      XHTML 名前空間は省略できますが、SVG 文書内の
      コンテキストでは必須です。
    -->
    <div xmlns="http://www.w3.org/1999/xhtml">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis mollis
      mi ut ultricies. Nullam magna ipsum, porta vel dui convallis, rutrum
      imperdiet eros. Aliquam erat volutpat.
    </div>
  </foreignObject>
</svg>