• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Support for SVG in img tags

CyberAP

Well-known member
#1
I understand that exposing svg directly into the document is really a bad idea for security reasons, but when served in an img tag it can cause no harm as it doesn't have any access to the outer document scope at all, also any Javascript within the SVG wouldn't even execute with that method.
Interestingly enough SVG do work if you try to embed them in the editor but fail to display after you post the message.
Considering a security issue with direct navigation to the proxied SVG I can think of this solution: when navigating to the direct path of that SVG serve a wrapper html with SVG within an img tag. That would help in 99% of the cases. Another solution would be to proxy every SVG into an SVG wrapper that serves an image with an image tag.
Basic example: http://jsfiddle.net/rfjoj2zn/
 
Last edited:

CyberAP

Well-known member
#2
Made a bit more complex example with non square dimensions and sophisticated internals on embedded SVG: http://jsfiddle.net/rfjoj2zn/3/
It does require a simple JS action in order to fit SVG container to its contents (should be fairly fast, might need some adjustment to watch for load event). I have outlined SVG container dimensions in green so it's clear that no space is wasted.
Important thing to note here is that you can't directly access the embedded image. You'll have to dive into the source code in order to get the embedded SVG URL.