title: Svg with image inside is not showing in safari
body: <p>Inside my website, I am embeding a few svgs. They all seem to work just fine in Chrome, Firefox, IE(9+) and in Safari. Howvere as soon as there is image included in the svg, safari does not render the image.</p>
  <p>Based on the previous similar topic I have tried the following:</p>
  <p><a href="https://stackoverflow.com/questions/17354482/svg-image-elements-not-displaying-in-safari">SVG &lt;image&gt; elements not displaying in Safari</a> - enclosing</p>
  <pre><code> &lt;use&gt;
  </code></pre>
  <p>tag like this <code>&lt;use&gt;&lt;/use&gt;</code></p>
  <p><a href="https://stackoverflow.com/questions/17286533/svg-image-dosent-appear-in-safari">SVG Image dosen&#39;t appear in Safari</a> - I dont find this very usefull,cause this is deleting aprt of the svg.</p>
  <p><a href="https://stackoverflow.com/questions/12012573/not-able-to-render-svg-image-in-safari">Not able to render SVG image in Safari</a> - Added</p>
  <p><code>&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;application/xhtml+xml&quot;&gt;</code> in header.</p>
  <p>And beyond that, I dont really know what else to try. Maybe one more interesting thing to note is that inside my page, image is not displayed, but I can open svg file in safari(just the file) and it will be renderd correctly. Further more, after it's opened in the browser as a file, it renders inside the page as well. And I embed the svg to the page with img tag.</p>
  <pre><code>&lt;img src=&quot;mysvg.svg&quot; class=&quot;center-block&quot;/&gt;
  </code></pre>
  <p>This is my svg:</p>
  <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;
  &lt;!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --&gt;
  &lt;!DOCTYPE svg PUBLIC &quot;-//W3C//DTD SVG 1.1//EN&quot; &quot;http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&quot;&gt;
  &lt;svg version=&quot;1.1&quot; id=&quot;Layer_1&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot; xmlns:xlink=&quot;http://www.w3.org/1999/xlink&quot; x=&quot;0px&quot; y=&quot;0px&quot;
       width=&quot;328px&quot; height=&quot;328px&quot; viewBox=&quot;0 0 328 328&quot; enable-background=&quot;new 0 0 328 328&quot; xml:space=&quot;preserve&quot;&gt;
  &lt;g&gt;
      &lt;defs&gt;
          &lt;polygon id=&quot;SVGID_1_&quot; points=&quot;1.414,164.001 164,326.586 326.586,164.001 164,1.414      &quot;/&gt;
      &lt;/defs&gt;
      &lt;clipPath id=&quot;SVGID_2_&quot;&gt;
          &lt;use xlink:href=&quot;#SVGID_1_&quot;  overflow=&quot;visible&quot;&gt;&lt;/use&gt;
      &lt;/clipPath&gt;
      &lt;g id=&quot;DSC_x5F_0112-2.psd&quot; clip-path=&quot;url(#SVGID_2_)&quot;&gt;
          &lt;g id=&quot;DSC_x5F_0112-2.psd_1_&quot; enable-background=&quot;new    &quot;&gt;
  
                  &lt;image overflow=&quot;visible&quot; width=&quot;338&quot; height=&quot;532&quot; id=&quot;DSC_x5F_0112-2&quot; xlink:href=&quot;data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/4QNhaHR0cDov
  .....SLKPF+7j+acOZPZjmsw4Q0f0L/6k1fu3WFvY/wDEB5o0d7H7/wD7SPFgPzVE54J9/wBI/qez5vei
  r/fdeaS//9k=&quot; transform=&quot;matrix(0.9818 0 0 0.9818 -2.7197 -11.064)&quot;&gt;
              &lt;/image&gt;
          &lt;/g&gt;
      &lt;/g&gt;
  &lt;/g&gt;
  &lt;g&gt;
      &lt;path fill=&quot;#FFFFFF&quot; d=&quot;M164,328.001L0,164.002L164,0.001l164,164.001L164,328.001z M1.414,164.002L164,326.587l162.586-162.585
          L164,1.415L1.414,164.002z&quot;/&gt;
  &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>I have reduced base64 image string, to shorten the code. Full svg can be found <a href="http://pastelink.me/dl/998eed" rel="noreferrer">here</a>.</p>
  <p>UPDATE: Just to be clear, svg shows in the browser(safari) but image is missing (I can see just border).</p>