SVG issues

Permalink
Hello,

I have a problem with embedding svg-files (scalable vector graphics) in my concrete5 site. Some of my svg-files contain embedded images (usually png). I know they are embedded as they should, because the browser shows them just fine (screenshot browser.png). However, when loaded in concrete5, some parts are not loaded. The embedded image is not visible when viewing the page in concrete5 (screenshot c5.png). Both the svg-file and the original illustrator file and both mentioned screenshots are included as attachment. The images are embedded using a regular image-tag:
<img src="path/to/test.svg" alt="svg imge" />


A link to the file on the host:
http://nose4food.nl/concrete5/files/7613/6679/7188/test.svg... . Could anyone help me on this? Any help would be appreciated :) Thank you very much!

3 Attachments

View Replies:
Didel replied on at Permalink Reply
Update: Aparently this is a webkit-bug (I was using chrome, firefox works as expected). Not exactly sure what it is, but it has something to do with the cashing of images embedded in an svg.
bcurrid replied on at Permalink Reply
I'm having the same issue & since I'm using a Chromebook I can't even switch browsers. Plus, that's not really a solution since it would be pretty crappy to tell my visitors that they aren't allowed to use Chrome.

Is there a solution to fix this in Chrome?
matt21 replied on at Permalink Reply
I had the same issue. No solution yet either.
Cahueya replied on at Permalink Reply
I've used this on a project and it seems to work well.

<img alt="Your Image Name" class="ccm-svg-block" src="/images/your_image_name.svg" onerror="this.src='/images/your_image_name.png';this.onerror=null;" />


There is a SVG Block in the Marketplace I recall.
mesuva replied on at Permalink Reply
mesuva
I've got a block here on github that does this:
https://github.com/Mesuva/svg_image... (see the releases for the different c5 versions)

However, I believe what is being described here is a subtle bug in the way Chrome/webkit handles SVGs with embedded pngs. It's not that they won't show, it's that they don't render properly.

From what I've read, the issue is when an SVG is linked as an image. So it might be worth embedding the SVG on the page using an <embed> tag instead.
Cahueya replied on at Permalink Reply
Hi Mesuva,

thanks for the block. The code I pasted here works well in Chrome and is <img> tag. Dont know whats the difference here... But worth finding out.

Using Chrome 38.0.2125.111 on MacOSX.