SVG images are uncommon compared to png, gif and jpeg so when we implemented support for them we wanted to keep to the mental model that people have for raster images.
If SVG images work just like raster images then websites that support raster image upload can allow SVG images to be uploaded too without having to worry about implementing additional security or privacy checks.
So let’s see what we expect from raster images:
- Comprise a single file
- Are not interactive i.e. for example they can’t react to you moving the mouse over them
- Should display pretty much the same independent of the operating system you’re running
- Cannot change to display something else depending on the time they are viewed
- Behave like a raster image to the containing document i.e. they don’t have a DOM
- Cannot have areas that work as hyperlinks
- Will not render differently depending on whether particular sites have been visited
- Cannot send or receive data
- But they can be animated
If we omitted one of these restrictions, allowing hyperlinks to be displayed in visited colours for example, copying the image to canvas via drawImage would then allow a web page to determine whether another site had been visited by the user unless we made the canvas write-only. As we don’t make the canvas write-only when a raster image is copied to it, we don’t want to make it write-only when an SVG image is copied to it either.
So if you’re going to use SVG as a background-image, border-image or via a html <img> or SVG <image> element and your image needs to do something that a raster image could not do then it’s unlikely that will work for you. Having the image on the same domain as the host document won’t make any difference.
Some workarounds for common problems:
- If you want to use a stylesheet, you can encode the stylesheet contents as a data URI in the image file
- If you want your SVG image to contain other images then you can encode the embedded images as data URIs
- While hyperlinks in images are disabled, you can make the whole image a hyperlink by wrapping a hyperlink tag round the image element itself in the container document
- If you need anything that images don’t offer then perhaps you should be considering putting the SVG inline in the document or using an <iframe> or <object> tag instead