SVG

Юлия — Fri, 29 Jun 2007 19:58:29 +0400

Что такое SVG? Замена Flash? Совсем нет. Это графика для тех, кому нужна графика в формате XML - векторная, интерактивная и масштабируемая, поддерживаемая основными браузерами (правда, каждый браузер, поддерживает SVG по-своему) и даже PDF.

Зачем? для графического представления XML данных (для ваших данных вы просто пишете XSLT и преобразовываете XML в SVG, т.е. в картинку)

А еще можно искать внутри картинки! Так как текст в SVG - это действительно текст, а не изображение.

И настраивать внешний вид, например диаграмм, с помощью CSS.

Что такое SVG

Элементарный SVG

1.svg

Размер этой GIF: 1 853 байт

Размер соответствующей SVG: 554 байт

SVG (Scalable Vector Graphics, в переводе масшатбируемая векторная графика) - это язык для описания двухмерной графики в XML. SVG предусматривает три типа графических объектов:

- векторная графика (напр. линии, кривые)
- изображения (растрорвая графика)
- текст

SVG принят в качестве рекомендации консорциумом W3C 14 января 2003 Спецификацию SVG 1.1 можно найти на сайте w3c: Scalable Vector Graphics (SVG) 1.1 Specification

Пример svg-кода:

<?xml version="1.0"?>

<svg width="175" height="145" >
<g style="stroke:black; fill:red" >
<polygon points="  5, 50,  5, 81, 12, 64" />
<polygon points="  5, 45, 41,116, 41, 73" />
<polygon points=" 44, 76, 44,119, 61,115" />
<polygon points=" 46, 73, 75,140,105, 73" />
</g>
<g stroke="black" fill="black">
<polygon points="107, 76,106,119, 89,115" />

<polygon points="144, 45,109,116,109, 73" />
<polygon points="145, 41,167,  4,109, 71" />
<polygon points=" 66, 72, 75, 63, 84, 72" />
</g>
</svg>

это простое изображение журавлика - см. справа на картинке.

Возможности SVG

SVG с анимацией

anima.svg

Для просмотра SVG установите Adobe SVG Viewer и кликните на картинке :)

Графические объекты могут быть сгруппированы, трансформированы, для них может быть определен стиль. SVG графика может быть интерактивной и динамической. Анимация может быть как декларативной (т.е. встроенные элементы SVG анимации в SVG контент), так и определенной с помощью скрипта.

Что еще может SVG?

Поддержка прозрачности
Мягкие градиенты
Сглаженный текст
Специальные эффекты как в Photoshope (используются фильтры)
Точно определенное размещение объектов в пикселах
Анимация и скрипт
Применение стилей (CSS)
Встраиваемая растровая графика, символы и Font Glyphs

SVG - это формат для двухмерной векторной графики - так определено в спецификации, но с помощью добавления скрипта (а именно JavaScript) внутрь SVG файла можно создавать трехмерные анимированные изображения, вот пример трехмерного SVG:3D.svg, созданного с помощью Batik SVG Toolkit.

В SVG может быть встроено растровое изображение, к которому как и к любому другому объекту в SVG может быть применена трансформация, прозрачность и т.д.

Если важен размер изображения, SVG могут быть сохранены с помощью gzip компрессии (расширение SVGZ). Так как SVG - это XML, сжатые SVG могут становиться существенно меньше.

Поддержка SVG браузерами и другими приложениями

SVG и PDF

us_population.pdf

PDF документ со встроенной внутрь интерактивной SVG графикой, поддерживается Adobe Acrobat Pro и Adobe Reader (начиная с 6-й версии).

Использование SVG в веб находится сейчас на стадии младенчества. На сайтах, где используется SVG, обычно изображения автоматически преобразуются в растровый формат с помощью такой библиотеки как, например, ImageMagick (язык C) - быстрая, но не полностью поддерживающая SVG или такой как Batik (java), которая обеспечивает практически полную поддержку SVG, но медленнее.

Для просмотра SVG существуют как самостоятельные (stand-along) SVG просмотрщики, так и плагины для браузеров. Самым распространенным сейчас, пожалуй, является плагин для браузеров Adobe SVG Viewer, который можно бесплатно скачать с сайта Adobe (был выпущен в сентябре 2003 года и с тех пор не обновлялся)

Существует также плагин от Corel: Corel SVG Viewer. Но очень часто SVG, которые может показывать Adobe Viewer, не воспроизводятся Corel SVG Viewer и наоборот.

Что касается браузеров - без дополнительных плагинов SVG могут показывать Mozilla и Opera c 8-й версии. Для этого SVG графика может быть встроена непосредственно в разметку HTML, т.к. является XML форматом.

Во всех остальных браузерах необходима установка соответствующего плагина и SVG включается в разметку из внешнего файла с помощью тега embed, например <embed xsrc="graph.svgz" mce_src="graph.svgz" width="625.5" height="393" type="image/svg+xml">

SVG также может быть встроен в PDF документ. Adobe Acrobat Reader поддерживает SVG начиная с 6-й версии. Для встраивания SVG в PDF существует плагин для Adobe Acrobat Pro.

Для мобильных устройств, телефонов и PDA, также существует поддержка SVG. Специально для них были разработаны варианты SVG формата: SVG Tiny (SVGT) and SVG Basic (SVGB). Кроме того, конкурент SVG - Macromedia Flash Lite частично поддерживает SVG Tiny начиная с версии 1.1.

На сайте w3c можно найти официальный список программного обеспечения для SVG.

Как создавать и редактировать SVG

SVG и 3D

3D.svg

Трехмерная анимированная SVG картинка, созданная с помощью Batik SVG Toolkit

Основной инструмент редактирования SVG - обычный текстовый редактор, например, замечательный UltraEdit, так как SVG является подмножеством XML и представляет собой обыкновенный текстовый документ с разметкой, аналогично документу HTML.

Возможно автоматизированное создание SVG на основе XML данных с помощью преобразования XSLT.

Для визуального редактирования (рисования) SVG подойдет Adobe Illustrator версии не ниже 9.0, его преимущество в том, что он не боится больших объемов. С помощью Illustratora можно создавать и редактировать сложные SVG большого размера, добавляя необходимый скрипт с помощью специальной палитры Illustratora - SVG interactivity pallete. Однако AI экспортирует SVG с большим колличеством лишнего кода, якобы оптимизируя SVG под Adobe SVG Viewer.

Cуществует также несколько самостоятельных SVG редакторов как платных, так и бесплатных, которые позволяют визуально редактировать картинку, добавлять анимацию и интерактивность, а также вручную писать необходимый скрипт.

В некоторых графических пакетах, например Corel Draw, как и в Adobe Illustrator включена возможность экспорта графики в SVG.

К сожалению, ни одного качественного приложения, которое бы обеспечивало возможность простого быстрого визуального создания динамических и интерактивных SVG (так как, например, в Macromedia Flash) я не нашла.

На Java существует открытая (бесплатная) библиотека Batik SVG Toolkit для генерации, отображения и манипулирования SVG графикой. Библиотека практически полностью поддерживает формат SVG 1.1.

Почему SVG? 10 причин

Еще один интересный пример SVG

eyechart.svg

Интерактивный SVG

Легко редактирвать - SVG - это простой текст в легкочитаемом XML и CSS формате;
Контент, в котором можно искать - внутри графики можно осуществлять поиск, в том числе и с помощью поисковых машин;
Локализация - легко переводить графический текст на различные языки;
Открытый стандарт;
Растровые эффекты для векторной графики - применимы real-time эффекты как в photoshope (тень, прожектор, размытие, выдавливание...);
Обработка данных - создание графики на лету с помощью скриптов;
Богатые возможности работы с текстом - встраивание шрифтов или выбранного символа;
Точно определенное размещение объектов в пикселах;
Error Handling - используется "zero-tolerance" XML; может указываться номер строки и колонки для SVG ошибок.

Чем Flash лучше?

Больше подходит для анимации (существует удобный инструмент для создания анимации во Flash);
Плагин для браузера установлен почти у всех пользователей Windows;
ActiveX плагин для браузера менее 400КБ (Adobe SVG Viewer около 2.3 МБ);
Популярность Flash у дизайнеров и наличие нескольких удобных инструментов для создания Flash-роликов.

Применение SVG

SVG слайд-шоу

web-services.svg

Простые, масштабируемые иллюстрации
Карты
Финансовые, и не только, диаграммы
Проектные и технические схемы
Анимация
Обмен, пересылка данных
Презентации в виде слайд-шоу

Вот еще несколько, пожалуй самых интересных примеров SVG графики - и опять от Adobe:

Интерактивные диаграммы

CML, XSL, JavaScript and SVG

ViJu - SVG - Комментарии

SVG