mq_dynamic_svg_ref.html

Enable keyboard shortcuts

<!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=&apos;http://www.w3.org/2000/svg&apos; width=&apos;50&apos; height=&apos;50&apos;>\

    <rect width=&apos;50&apos; height=&apos;50&apos; fill=&apos;green&apos;/>\

  </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,

      &amp;lt;svg xmlns=&amp;quot;http://www.w3.org/2000/svg&amp;quot; width=&amp;quot;50&amp;quot; height=&amp;quot;50&amp;quot;>

        &amp;lt;rect width=&amp;quot;50&amp;quot; height=&amp;quot;50&amp;quot; fill=&amp;quot;green&amp;quot;/>

      &amp;lt;/svg>

    " width="50" height="50"/>

  </svg>

' width=50 height=50>