Рассмотрим вставку SVG-рисунков в HTML-страницы. Такая задача встречается, когда графика представляет собой меню сайта, диаграмму или элемент оформления. Существуют три способа встраивания.
1. При помощи тега <embed>.
Фрагмент HTML-кода страницы:
<body bgcolor = "#6699FF">
<embed src="MnM.svg" width="210" height="250"
type="image/svg+xml" name="Mickey and Mini"
pluginspage="http://www.adobe.com/svg/viewer/install/main.html"
wmode="transparent">
</body>
Дополнительный атрибут pluginspage указывает адрес страницы, на которую будет направлен пользователь в том случае, если его браузер не поддерживает SVG-графику. В данном случае для фона HTML-страницы установлен голубой цвет (bgcolor = "#6699FF"). Атрибут wmode делает прозрачной область рисунка, не заполненной графикой.
Этот способ встраивания поддерживается многим браузерами и допускает прямое и обратное взаимодействие при помощи скриптов между HTML и SVG. Корпорация Adobe для своего плагина SVG Viwer рекомендует применение именно тега embed. Но он не вполне точно соответствует самой спецификации HTML.
2. При помощи тега <object>.
Фрагмент HTML-кода страницы:
Внутри тега object помещено сообщение, которое будет отображено при невозможности отображения браузером SVG графики.
Этот способ можно применять для всех браузеров, с поддержкой стандарта HTML 4.0 (или более высокого). Недостатком является отсутствие взаимодействия между HTML и SVG–рисунок может быть использован лишь в качестве иллюстрации или меню, в котором будет реализована система гиперссылок в самом SVG-документе.
3. При помощи тега <iframe>.
Фрагмент HTML-кода страницы:
Здесь также внутри тега iframe помещается информационное сообщение.
Этот способ поддерживается всеми современными браузерами, но он не документирован. Также заметна рамка вокруг рисунка. Для того чтобы от нее избавиться, следует добавить форматирование:
Фрагмент HTML – кода страницы теперь будет выглядеть так:
Теперь, страница будет выглядеть в точности так же, как и в случае применения тега object.
Источник: Intuit.ru
Этот способ встраивания поддерживается многим браузерами и допускает прямое и обратное взаимодействие при помощи скриптов между HTML и SVG. Корпорация Adobe для своего плагина SVG Viwer рекомендует применение именно тега embed. Но он не вполне точно соответствует самой спецификации HTML.
Примечание. Не все браузеры корректно отображают SVG-графику. В данном примере браузеры Google Chrome и Konqueror не смогли отобразить прозрачную область. Firefox (Iceweasel), Opera и Arora лишены этого недостатка.
2. При помощи тега <object>.
Фрагмент HTML-кода страницы:
<body bgcolor = "#6699FF"><object type="image/svg+xml" name="Mickey and Mini"data="MnM.svg" width="210" height="250">Ваш браузер не поддерживает SVG-графику</object></body>
Внутри тега object помещено сообщение, которое будет отображено при невозможности отображения браузером SVG графики.
Этот способ можно применять для всех браузеров, с поддержкой стандарта HTML 4.0 (или более высокого). Недостатком является отсутствие взаимодействия между HTML и SVG–рисунок может быть использован лишь в качестве иллюстрации или меню, в котором будет реализована система гиперссылок в самом SVG-документе.
3. При помощи тега <iframe>.
Фрагмент HTML-кода страницы:
<body bgcolor = "#6699FF"><iframe src="MnM.svg" width="210" height="250"name="Mickey and Mini" >Ваш браузер не поддерживает SVG-графику</iframe></body>
Здесь также внутри тега iframe помещается информационное сообщение.
Этот способ поддерживается всеми современными браузерами, но он не документирован. Также заметна рамка вокруг рисунка. Для того чтобы от нее избавиться, следует добавить форматирование:
frameborder="0" marginwidth="0" marginheight="0"
Фрагмент HTML – кода страницы теперь будет выглядеть так:
<body bgcolor = "#6699FF"><iframe src="MnM.svg" width="210" height="250"name="Mickey and Mini" frameborder="0"marginwidth="0" marginheight="0">Ваш браузер не поддерживает SVG-графику</iframe></body>
Теперь, страница будет выглядеть в точности так же, как и в случае применения тега object.
Источник: Intuit.ru
Комментариев нет:
Отправить комментарий