SVG не загружает внешний CSS при использовании в DOM

Question

Посмотрите на следующие jsFiddle.
В IE загружается внешний CSS, а прямоугольник красный, вместо этого в Chrome и FF прямоугольник остается черным.

Почему?

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

Answer 1

Если SVG используется в контексте изображения т.е. через HTML `» тега или как CSS фоновое изображение, то оно должно быть завершено в одном файле, в противном случае у вас есть утечка конфиденциальности.

Если вы измените CSS-код из внешнего файла на внутренний URL-адрес данных, вы обнаружите, что он работает в Chrome и Firefox. Если вы представляете, что возможности SVG как изображения похожи на растровые изображения, вы не ошибетесь, ведь растровые изображения состоят из одного файла.

Рассмотрите гипотетический форум, который позволяет изображениям SVG в качестве аватаров. Если внешняя нагрузка была разрешена, обманщик/злонамеренный пользователь может загрузить файл SVG, который содержит <image xlink:href="http://evilhacker.com/myimage.png"> и (при условии, что они контролируют evilhacker.com), они могли бы сделать какую-либо & все следующее:

• получить пинг на их собственный домен всякий раз, когда кто-то просматривает их профиль (& журнал IP-адрес лица, просматриваемой его)
• потенциально служить иной вид аватара для разных людей на основе их IP-адрес, запрос-заголовки и т.д.
• потенциально изменить внешний вид их аватара по желанию (т.е. дождаться, что администраторы форума одобрят его bs-up, а затем изменить его как NSFW)