Quelle  mq_dynamic_svg_ref.html   Sprache: HTML

<!DOCTYPE html>
<html>
<meta charset=utf-8>
<style>
iframe { border: none; }
</style>
<p>inline</p>
<svg width="50" height="50">
  <rect width="50" height="50" fill="green"/>
</svg>
<p>iframe</p>
<iframe src='data:image/svg+xml,
  <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
    <rect width="50" height="50" fill="green"/>
  </svg>
' width=50 height=50></iframe>
<p>img</p>
<img src='data:image/svg+xml,
  <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
    <rect width="50" height="50" fill="green"/>
  </svg>
' width=50 height=50>
<p>background-image</p>
<div style='background-image: url("data:image/svg+xml,\
  <svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'>\
    <rect width='50' height='50' fill='green'/>\
  </svg>\
"); width: 50px; height: 50px;'></div>
<p>img with nested document</p>
<img src='data:image/svg+xml,
  <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
    <image href="data:image/svg+xml,
      &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;50&quot; height=&quot;50&quot;>
        &lt;rect width=&quot;50&quot; height=&quot;50&quot; fill=&quot;green&quot;/>
      &lt;/svg>
    " width="50" height="50"/>
  </svg>
' width=50 height=50>