Лучший способ разместить контент SVG в HTML

Question

Лучший способ разместить контент SVG в HTML

20

Из моего исследования я понимаю, что есть три способа размещения SVG файла внутри HTML:

с помощью embed:

<embed src="plot1.svg" width="500" height="320" type="image/svg+xml" />

с помощью объекта:

<object data="plot1.svg" width="500" height="320" type="image/svg+xml" />

с помощью iframe:

<iframe src="plot1.svg" width="500" height="320"> </iframe>

Я экспериментировал со всеми тремя на тестовой установке (встроенный сервер django dev, отображающий страницы в Firefox 3.6). В этой, очевидно, стерильной среде, я не заметил никакой разницы между производительностью или разрешением трёх раз/т/т.

Мой вопрос заключается в том, что один из них лучше, чем два других, и если да, то какой. Ответ, конечно, может зависеть от фактов, которые я пытался ограничить тем, что важно:

Мы часто показываем данные (например, временные ряды) на нашем веб-сайте, обычно создаваемые в ответ на некоторые действия пользователя; основанный на этом действии пользователя, вызов делается в базу данных, возвращаемые данные свернуты и отправляются в механизм построения графиков, который отображает статическое изображение, которое затем встроено в страницу, - очень стандартное.

Это прекрасно работает, но я хотел бы добавить некоторые интерактивные функции к этим диаграммам (например, всплывающие подсказки, гиперссылки с надписями осей, выделение группы точек без сюжета). Некоторые из диаграмм довольно сложны (например, мульти-панельное кондиционирование), и я не нашел библиотеку диаграмм javascript, которая включает эти функции. Наконец, я решил использовать одну и ту же графическую библиотеку (Lattice in R), но при этом создавая каждую диаграмму в svg, а затем добавляя функции пользовательского взаимодействия на этапе последующей обработки, который состоит в основном из функций javascript, которые непосредственно манипулируют XML.

doug 29 сен. 2010, в 12:22

Источник

0

Так же, как к вашему сведению, есть несколько других способов включить svg на страницу.
Erik Dahlström 29 сен. 2010, в 15:59
0

тег <object> не является самозакрывающимся, вы должны добавить </object>
0x1gene 03 июнь 2015, в 16:45

Теги:

html

xml

svg

2 ответа

7

для меня лучший способ - это

<svg id="circle" height="60" width="60" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
  <image x="0" y="0" height="60" width="60"  xlink:href="huge-red-circle.svg" />
</svg>

Здесь вы можете увидеть пример

источник: http://edutechwiki.unige.ch/en/Using_SVG_with_HTML5_tutorial

JALF 23 май 2014, в 13:59

Ещё вопросы

Так же, как к вашему сведению, есть несколько других способов включить svg на страницу.
тег <object> не является самозакрывающимся, вы должны добавить </object>

bobince · Accepted Answer · 2010-09-29T11-12-00.000Z

<embed> Я бы вообще избегал. Он устарел в HTML4, не позволяет создавать резервный контент и имеет множество проблем в IE.

<object> позволит вам включать резервный HTML-контент для браузеров без поддержки SVG. <iframe> вернется к предложению загрузить файл .svg. Какой из них лучше всего, вероятно, зависит от приложения.

Другая альтернатива для современных браузеров (включая IE от версии 9) - служить вашей веб-странице как application/xhtml+html и включать элементы SVG на самой странице.

Вау, IE теперь поддерживает SVG? Никогда не думал, что это произойдет. VML все еще есть или как?
Ну, IE9 все еще находится в бета-версии, но поддерживает SVG (и тоже неплохо). Шаблон SVG не заставляет SVG фактически работать до IE6, он просто позволяет разместить на странице, не убивая IE6. VML все еще существует, но может показаться нежелательным наследием; MS очень плохо справилась с этой задачей в IE8, потребовав еще одного утомительного обходного пути для людей, все еще использующих его.