Какой предпочтительный способ использовать изображения SVG в приложениях HTML5 / CSS3 / Javascript?

Question

Имеются следующие варианты: <svg>, <object>, <embed>, <img> и <iframe>. Каковы их относительные достоинства и недостатки? Есть ли другие?

Answer 1

<iframe>, <embed> и <object> все встраивают внешние файлы SVG, и все они позволяют сценарии.<embed> кажется более или менее стандартом де-факто.Спецификация HTML5 гласит:

• Элемент iframe представляет собой вложенный контекст просмотра.

• Элемент embedпредставляет собой точку интеграции для внешнего (обычно не HTML) приложения или интерактивного контента.

• Элемент объекта может представлять внешний ресурс, который в зависимости отТип ресурса, будет рассматриваться как изображение, как вложенный контекст просмотра или как внешний ресурс для обработки плагином.

<svg> isтолько для встроенного содержимого SVG, но может содержать <image> элементов с внешним содержимым.

<img> и вложенные <image> элементы НЕ позволяют создавать сценарии.

Источники:

• http://dev.w3.org/html5/spec/the-iframe-element.html#the-iframe-element
• http://dev.w3.org/html5/spec/the-embed-element.html#the-embed-element
• http://dev.w3.org/html5/spec/the-object-element.html#the-object-element