SVG don't load external CSS when used in DOM

Question

Give a look to the following jsFiddle.
In IE the external CSS is loaded and the rectangle is red, instead in Chrome and FF the rectangle remains black.

Why?

<!-- Used to reference the external css -->
<?xml-stylesheet href="mystyle.css" type="text/css"?>

Answer 1

If SVG is used in an image context i.e. via an html `' tag or as a CSS background image then it must be complete in a single file, otherwise you have a privacy leak.

If you change the CSS include from an external file to an internal data URL you'll find it works in Chrome and Firefox. If you imagine that the capabilities of SVG as an image are similar to raster images you won't go far wrong, after all raster images consist of a single file.

Consider a hypothetical forum that allows SVG images as avatars. If external loading was allowed, a trickster/malicious user could upload an SVG file that contains <image xlink:href="http://evilhacker.com/myimage.png"> and (assuming they control evilhacker.com), they could do any & all of the following:

• receive a ping at their own domain whenever anyone views their profile (& log the ip address of the person viewing it)
• potentially serve different-looking avatar to different people based their IP address, request-headers, etc.
• potentially change the appearance of their avatar at-will (i.e. wait for forum-admins to approve it thumbs-up, and then change it to be NSFW)