SVG with linked .png does not render

Question

Here is my svg:

https://s3-us-west-2.amazonaws.com/idelog/assets/cultii_logo_final.svg

It contains a linked .png. It renders fine in the browser by itself (as you will see if you click on link above).

But when I use it inside an IMG tag, the png portion does not render in either Chrome or Firefox:

http://plnkr.co/edit/tjNeMgFxpU91q8swBkPX?p=preview

  <body>
    <h1>SVG Demo</h1>
    <img src="https://s3-us-west-2.amazonaws.com/idelog/assets/cultii_logo_final.svg" />
  </body>

I have tried local and remote urls for linking the .png. What am I doing wrong?

Here is the SVG code:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 257 74" enable-background="new 0 0 257 74" xml:space="preserve">
<g id="idolore_x5F_icon.psd_1_">

        <image overflow="visible" width="287" height="274" id="Layer_1_2_" xlink:href="https://s3-us-west-2.amazonaws.com/idelog/assets/EDEE15BD15B895E0.png"  transform="matrix(0.2254 0 0 0.2254 6.3 6.1153)">
    </image>
</g>
<text transform="matrix(1 0 0 1 78 58)" font-family="'Lora-Bold'" font-size="67">cultii</text>
</svg>

score 2 · Accepted Answer · edited May 23 '17 at 12:03

2

You can embed the png in the SVG. The file gets slightly bigger but you get one (1) httprequest less (and only 1 image file to maintain).

Src: Does SVG support embedding of bitmap images?

Edit

You could actually try and combine this with Hasse's or Ramis solution.

Edit2

You can do this with your SVG using css: background-image: url(data:image/svg+xml,...); but whether the embedded png will go along I can't say, though it has to be worth a try

edited May 23 '17 at 12:03

Community

1
1

answered Oct 25 '15 at 16:51

Asons

84,923
12
110
165

Yes, it will, still you win as you get only one request. Try optimize the png first ... here is a few apps: https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=png%20optimizer%20windows – Asons Oct 25 '15 at 16:54

Hasse Björk · Answer 2 · 2015-10-25T17:07:52.280

When Chrome displays an SVG image, it will fetch all linked files.

When linking to an SVG image from a html document, it does not fetch linked material.

You could try to embed the SVG code into html and it should work in Chrome.

Edit: I had similar issues trying to embed SVG-images into an SVG image. Everything worked as long as I displayed the vector image in Chrome, but putting it in a html page (<img src="">) did not fetch the linked files. I think it worked when I embedded the image in the html file (<svg></svg>).

This could be a security thing, not permitting images to fetch external resources.

The png is too big to embed - explodes to 162K. – metalaureate Oct 25 '15 at 16:51 — metalaureate, Oct 25 '15 at 16:51

score 1 · Answer 3 · answered Oct 25 '15 at 16:45

1

You could also use <object> for embedding the SVG. MDN Documentation

Plunker Demo

answered Oct 25 '15 at 16:45

Ramiz Wachtler

5,623
2
28
33

Neat. Is there a way to do this in css? My code context is really css: `background-image: url()` – metalaureate Oct 25 '15 at 16:51

SVG with linked .png does not render

3 Answers3