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:
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!
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!
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.
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?
Is there a solution to fix this in Chrome?
I had the same issue. No solution yet either.
I've used this on a project and it seems to work well.
There is a SVG Block in the Marketplace I recall.
<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.
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.
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.
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.
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.
