title: svg code is not displaying at all when used inside an <img> tag
body: <p>I have some SVG here which displays fine inside a div, but not inside an img with src="data:image/svg+xml;utf8, etc .....</p>
  
  <p>I've swapped the svg for more simple ones and its fine, so I know it's something odd about my actual svg code.</p>
  
  <pre><code>&lt;svg width="500" height="420"&gt;
  &lt;style id="mystyle" type="text/css"&gt;.node { cursor: pointer;    }   .node circle { fill: #fff; stroke: steelblue; stroke-width: 1.5px;  }   .node text { font: 10px sans-serif;     }   .link { fill: none; stroke: #000; stroke-width: 1px;    }       .erd-bc { fill: none; stroke: #aaa; stroke-width: 2px;  }       marker {    fill: none;     stroke: #000;   stroke-width: 1px;  }       &lt;/style&gt;&lt;g transform="translate(120,20)"&gt;
      &lt;defs&gt;
          &lt;marker viewBox="0 0 10 10" id="card-many-end" refX="0" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;"&gt;
              &lt;path d="M 10 0 L 0 5 L 10 10 M 0 5 L 10 5"/&gt;
          &lt;/marker&gt;
      &lt;/defs&gt;
      &lt;defs&gt;
          &lt;marker viewBox="0 0 10 10" id="card-one-end" refX="0" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;"&gt;
              &lt;path d="M 0 5 L 10 5"/&gt;
          &lt;/marker&gt;
      &lt;/defs&gt;
      &lt;defs&gt;
          &lt;marker viewBox="0 0 10 10" id="card-many-start" refX="10" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;"&gt;
              &lt;path d="M 0 0 L 10 5 L 0 10 M 10 5 L 0 5"/&gt;
          &lt;/marker&gt;
      &lt;/defs&gt;
      &lt;defs&gt;
          &lt;marker viewBox="0 0 10 10" id="card-one-start" refX="10" refY="5" markerWidth="10" markerHeight="10" orient="auto" style="stroke: black; stroke-width: 1px ; fill:none;"&gt;
              &lt;path d="M 10 5 L 0 5"/&gt;
          &lt;/marker&gt;
      &lt;/defs&gt;
      &lt;path class="link" marker-end="" marker-start="url(#card-many-start)" d="M60,275C60,300 60,300 60,325" style="opacity: 1;"/&gt;
      &lt;path class="link" marker-end="url(#card-many-end)" marker-start="" d="M130,155C130,180 60,180 60,205" style="opacity: 1;"/&gt;
      &lt;path class="link" marker-end="url(#card-many-end)" marker-start="" d="M130,155C130,180 200,180 200,205" style="opacity: 1;"/&gt;
      &lt;path class="link" marker-end="url(#card-many-end)" marker-start="" d="M130,45C130,70 130,70 130,95" style="opacity: 1;"/&gt;
      &lt;g opacity="1" class="node" transform="translate(200,240)"&gt;
          &lt;g class="node-bc" transform="translate(-60,-25)"&gt;
              &lt;rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/&gt;
              &lt;text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging"&gt;Operation Bindings&lt;/text&gt;
              &lt;text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging"&gt;TAB1&lt;/text&gt;
          &lt;/g&gt;
          &lt;text dy="-5em" class="fkcol" text-anchor="middle"&gt;PORT_ID&lt;/text&gt;
      &lt;/g&gt;&lt;g opacity="1" class="node" transform="translate(60,350)"&gt;
          &lt;g class="node-bc" transform="translate(-60,-25)"&gt;
              &lt;rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/&gt;
              &lt;text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging"&gt;Operation&lt;/text&gt;
              &lt;text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging"&gt;TAB2&lt;/text&gt;
          &lt;/g&gt;
          &lt;text dy="-5em" class="fkcol" text-anchor="middle"/&gt;
      &lt;/g&gt;&lt;g opacity="1" class="node" transform="translate(60,240)"&gt;
          &lt;g class="node-bc" transform="translate(-60,-25)"&gt;
              &lt;rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/&gt;
              &lt;text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging"&gt;Intersection&lt;/text&gt;
              &lt;text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging"&gt;TAB3&lt;/text&gt;
          &lt;/g&gt;
          &lt;text dy="-5em" class="fkcol" text-anchor="middle"&gt;PORT_ID&lt;/text&gt;
      &lt;/g&gt;&lt;g opacity="1" class="node" transform="translate(130,130)"&gt;
          &lt;g class="node-bc" transform="translate(-60,-25)"&gt;
              &lt;rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/&gt;
              &lt;text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging"&gt;Port&lt;/text&gt;
              &lt;text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging"&gt;TAB4&lt;/text&gt;
          &lt;/g&gt;
          &lt;text dy="-5em" class="fkcol" text-anchor="middle"&gt;WEB_SERVICE_ID&lt;/text&gt;
      &lt;/g&gt;&lt;g opacity="1" class="node" transform="translate(130,20)"&gt;
          &lt;g class="node-bc" transform="translate(-60,-25)"&gt;
              &lt;rect width="120" height="50" x="0.000001" y="0.000001" class="erd-bc" rx="5" style="fill: rgb(255, 255, 255);"/&gt;
              &lt;text dx="0.5em" dy="0.5em" class="bc" text-anchor="left" dominant-baseline="hanging"&gt;Web Service&lt;/text&gt;
              &lt;text dx="0.5em" dy="1.5em" class="table" text-anchor="left" dominant-baseline="hanging"&gt;TAB5&lt;/text&gt;
          &lt;/g&gt;
          &lt;text dy="-5em" class="fkcol" text-anchor="middle"/&gt;
      &lt;/g&gt;
  &lt;/g&gt;
  </code></pre>
  
  <p></p>