Лабораторная работа 11. Создание SVG

1
Лабораторная работа 11. Создание SVG-изображений
Поддержка SVG браузерами
В настоящее время SVG применяется в Интернете сравнительно мало. На
сайтах, где используются SVG, оно не представляется непосредственно, а
конвертируется в растровое изображение. Для этого используются различные
библиотеки, например Batik (на языке Java), которые «на лету» выполняют
преобразования.
Браузеры Internet Explorer 9, Opera (начиная с 8-й версии) и Mozilla
способны самостоятельно, без дополнительных утилит воспроизводить формат
SVG. Что касается прочих браузеров – в том числе и Internet Explorer 6
(входящего в состав Windows XP), то им для воспроизведения нужны плагины.
Плагины для просмотра SVG-графики:
 Adobe SVG Viewer ;
 Corel SVG Viewer.
Если плагин установлен, то при щелчке на изображении становится
доступным контекстное меню, где можно просмотреть исходный код элемента.
Изображение также можно увеличивать, уменьшать, для анимационного
ролика можно останавливать его воспроизведения. Полезно запомнить
следующие возможности для просмотра:
 Ctrl + мышь – увеличить изображение.
 Ctrl + Shift + мышь – уменьшить изображение.
 Ctrl + выделение мышью – растянуть выбранный фрагмент на весь
экран.

Alt + Ctrl + мышь – перетаскивание изображения.
Программы для создания SVG-графики
Полнофункциональные
графические
создавать SVG-графику:
 Adobe Illustrator CS2;
 CorelDRAW Graphics Suite 12;
 Mayura Draw 4.3;
приложения,
позволяющие
2
Специализированные пакеты для создания SVG-графики
 EvolGrafiX XStudio 6.1;
 Inkscape;
 Corel WebDraw;
 Sketsa SVG Editor 3.2.3.
SVG также может быть встроен в PDF документ. Adobe Acrobat Reader
поддерживает SVG начиная с 6-й версии. Для встраивания SVG в PDF
существует утилита для Adobe Acrobat Pro. Для мобильных устройств,
телефонов и PDA, также существует поддержка SVG. Специально для них были
разработаны варианты SVG формата: SVG Tiny (SVGT) и SVG Basic (SVGB).
Вставка SVG рисунков в HTML–страницы
Существуют четыре способа встраивания SVG–рисунков в HTML–
страницы:
1. При помощи тега<embed>:
<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">
Дополнительный атрибут pluginspage указывает адрес страницы, на
которую будет направлен пользователь в том случае, если его браузер не
поддерживает SVG–графику. Атрибут wmode делает прозрачной область
рисунка. Этот способ встраивания поддерживается многими браузерами и
допускает прямое и обратное взаимодействие при помощи скриптов между
HTML иSVG. Корпорация Adobe для своего плагина SVG Viewer рекомендует
применение именно тега embed. Но он не вполне точно соответствует самой
спецификации HTML.
2. При помощи тега <object>:
<object
type="image/svg+xml"
name="mybutterfly"
data="butterfly.svg"
height="300">
Для просмотра SVG графики Вам необходимо обновить браузер
</object>
width="500"
3
Внутри тега object помещено сообщение, которое будет отображено при
невозможности отображения браузером SVG графики. В этом случае рисунок
не содержит прозрачной области
Недостатком является отсутствие взаимодействия между HTML и SVG.
Рисунок может быть использован лишь в качестве иллюстрации или меню, в
котором будет реализована система гиперссылок в самом SVG-документе.
3. При помощи тега <iframe>:
<iframe src="butterfly.svg" width="500" height="300" name="mybutterfly"
frameborder="0" marginwidth="0" marginheight="0">
Для просмотра SVG графики Вам необходимо обновить браузер
</iframe>
Здесь также внутри тега iframe помещается информационное сообщение.
Отображаемый рисунок также не содержит прозрачной области.
4. Непосредственное встраивание кода изображения:
<?xml version="1.0" standalone="no"?>
<svg contentScriptType="text/ecmascript" width="600.0px"
xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full"
zoomAndPan="magnify" contentStyleType="text/css" height="600.0px"
preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg"
version="1.0">
<text x="172.0" y="451.0"><tspan stroke-linecap="round" display="marker" fill="#0000ff" strokelinejoin="round" stroke-dasharray="2,5" stroke="#cc0099"
xml:space="preserve">ТЕКСТ</tspan></text></svg>
Задание
1. Загрузите специализированный пакет Sketsa SVG Editor 3.2.3
http://www.kiyut.com/products/sketsa/download.php и установите его на своем
компьютере или flash-накопителе.
2. Создайте
SVG-изображение,
используя
возможности
данной
программы. Просмотрите получившийся код (меню «Окно»-> Source Editor).
3. Встройте изображение в HTML-страницу различными способами.