Введение в SVG
Вставка SVG рисунков в HTML – страницы
Рассмотрим теперь вставку SVG–рисунков в HTML – страницы. Такая задача встречается, когда графика представляет собой меню сайта, диаграмму или элемент оформления. Существуют три способа встраивания:
- При помощи тега <embed>.
Фрагмент HTML – страницы:
<body bgcolor = "#6699FF"> <embed src="butterfly.svg" width="500" height="300" type="image/svg+xml" name="mybutterfly" pluginspage="http://www.adobe.com/svg/viewer/install/main.html" wmode="transparent"> </body>Дополнительный атрибут pluginspage указывает адрес страницы, на которую будет направлен пользователь в том случае, если его браузер не поддерживает SVG–графику. В данном случае для фона HTML - страницы установлен голубой цвет ( bgcolor = "#6699FF" ). Атрибут wmode делает прозрачной область рисунка, не заполненной графикой (рис. 1.23>):
Этот способ встраивания поддерживается многими браузерами и допускает прямое и обратное взаимодействие при помощи скриптов между HTML и SVG. Корпорация Adobe для своего плагина SVG Viewer рекомендует применение именно тега embed. Но он не вполне точно соответствует самой спецификации HTML.
-
При помощи тега <object>.
Фрагмент HTML – кода страницы:
<body bgcolor = "#6699FF"> <object type="image/svg+xml" name="mybutterfly" data="butterfly.svg" width="500" height="300"> Для просмотра SVG графики Вам необходимо обновить браузер</object> </body>
Внутри тега object помещено сообщение, которое будет отображено при невозможности отображения браузером SVG графики. В этом случае рисунок не содержит прозрачной области (рис. 1.24):
Этот способ можно применять для всех браузеров, с поддержкой стандарта HTML 4.0 (или более высокого). Недостатком является отсутствие взаимодействия между HTML и SVG–рисунок может быть использован лишь в качестве иллюстрации или меню, в котором будет реализована система гиперссылок в самом SVG-документе.
-
При помощи тега <iframe>.
Фрагмент HTML – кода страницы:
<body bgcolor = "#6699FF"> <iframe src="butterfly.svg" width="500" height="300" name="mybutterfly" > Для просмотра SVG графики Вам необходимо обновить браузер </iframe> </body>Здесь также внутри тега iframe помещается информационное сообщение. Отображаемый рисунок также не содержит прозрачной области (рис.1.25):
Этот способ поддерживается всеми современными браузерами, но он не документирован. Также заметна рамка вокруг рисунка. Для того чтобы от нее избавиться, следует добавить форматирование:
frameborder="0" marginwidth="0" marginheight="0"
Фрагмент HTML – кода страницы теперь будет выглядеть так:
<body bgcolor = "#6699FF"> <iframe src="butterfly.svg" width="500" height="300" name="mybutterfly" frameborder="0" marginwidth="0" marginheight="0"> Для просмотра SVG графики Вам необходимо обновить браузер </iframe> </body>Теперь, страница будет выглядеть в точности так же, как и в случае применения тега object.
Обзор ресурсов, посвященных SVG-графике
При изучении SVG–графики полезно пользоваться тематическими ресурсами, на которых собрано множество примеров, иллюстраций и учебной литературы. В следующем описании предлагаю перечень ресурсов, наиболее значимых на мой взгляд:
-
Спецификация SVG 1.1 на сайте консорциума W3C http://www.w3.org/TR/SVG11/ Доступна также оффлайн версия спецификации, которую можно скачать в виде архива: http://www.w3.org/TR/SVG11/REC-SVG11-20030114.zip (2,82 Мб)
В виде PDF – документа: http://www.w3.org/TR/SVG11/REC-SVG11-20030114.pdf (6,49 Мб) (На англ. языке)
- Школа консорциума W3C – учебник, примеры, демонстрации, а также интерактивное изучение SVG графики:
http://www.w3schools.com/svg/default.asp (На англ. языке)
- Около 300 примеров, учебные материалы, доклады семинаров и презентации на сайте "SVG – Learning By Coding" автора Thomas Meinike:
http://svglbc.datenverdrahten.de/
На главной странице сайта размещен призыв – не "грабить" примеры по частям, а совершенно бесплатно скачать весь архив :
http://www.et.fh-merseburg.de/person/meinike/PDF/TMs-SVG-Package.zip (28,2 Мб) (На англ. и немец. языках)
- Учебник по SVG (школы Информационных Технологий Государственного Университета Иллинойс (Illinois State University):
http://www.itk.ilstu.edu/faculty/javila/SVG/index.htm
Достаточно подробный учебник, содержащий все необходимые начальные сведения. Подробное, ясное изложение, отличные иллюстрации. (На англ. языке)
- Учебные материалы, статьи, обзоры и примеры на сайте, посвященном картографии и географии:
http://www.carto.net/papers/svg/ (На англ. языке, на сайте также представлены материалы на немец. и франц. языках)
- Примеры, удобная галерея изображений, а также большое количество учебных материалов по смежным темам – XML, MathML, XSL:
http://www.zvon.org/HowTo/Output/index.html (На англ. языке).
- Небольшой учебник, несколько интерактивных примеров:
http://apike.ca/prog_svg.html (На англ. языке)
- Небольшой учебник по SVG, материалы по связке SVG + JavaScript:
http://www.kevlindev.com/tutorials/basics/index.htm (На англ. языке)
- Примеры, форум, статьи, посвященные связке SVG + PHP, а также хороший учебник – выполненный в формате SVG!
http://www.learnsvg.com/ (На англ. языке)
- Бесплатный веб-редактор SVG, статьи и учебные материалы по связке SVG + PHP:
http://pilat.free.fr/english/index.htm (На англ. и франц. языках).
- Статья, посвященная SVG, на сайте Новосибирского Государственного Университета. Интересно то, что весь сайт выполнен по технологии XML, а меню представляет собой SVG–документ:
http://xml.nsu.ru/extra/svgintro_0.xml (На рус. языке)