Restrictions on SVG used as an image

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

7 responses to this post.

  1. “Cannot change to display something else depending on the time they are viewed”

    I assume you mean “when saved to disk”? After all, a server can send different responses to depending on the time of day.

    “Cannot have areas that work as hyperlinks”

    What about client side image maps, using the “map” tag?

    • I mean if you look at a png today and it looks like a boat, then it’s not going to look like a naked woman tomorrow unless the png itself changes. With SVG, in theory you could do a clock based animation that would enable that. So I’m talking about a single image file here.

      You could do client side image maps with SVG images too but note that it’s the document hosting the image doing that and not inherent in the image itself.

      • With animated GIFs, you can do a clock-based animation.

        I agree thaat with client side image maps it’s not the image doing it, but you talked about user expectations – and the effect is much the same.

  2. Posted by Mark on October 23, 2013 at 1:16 pm

    Are these restrictions new? When will/did they come into force?

    And by animations, do you mean all the things described in Chapter 19 of the SVG 1.1 Spec (including scripted animations) or more, or less?

    • These restrictions are not new but I do see folks confused every day about why SVG images have these restrictions. I don’t think there’s anywhere where we’ve documented why we made these choices even in the bugzilla bugs that implemented them although some of this information is there.

      SVG used as an image supports most SMIL animations except those which are triggered by events so the capabilities mirror what you can achieve with png animations.

  3. ‘If you want your SVG image to contain other images then you can encode the embedded images as data URIs’
    Is probably the only restriction I feel is unnecessary and have bumped into a few times as its foreign to SVG to be unable to transclude images, considering it would likely be limited to same-origin domain images anyway…

Comments are closed.

%d bloggers like this: