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!
Is there a solution to fix this in Chrome?
<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.
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.
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.