Лучший способ разместить контент SVG в HTML - PullRequest
22 голосов
/ 29 сентября 2010

Из моего исследования я понимаю, что существует три способа размещения 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, рендеринг страниц в Firefox 3.6).В этой явно стерильной среде я не заметил никакой разницы между производительностью или разрешением три - w / r / t.

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

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

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

Ответы [ 2 ]

12 голосов
/ 29 сентября 2010

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

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

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

11 голосов
/ 23 мая 2014

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

<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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...