SVG (
scalable vector graphics) это векторный формат графики подобно EPS, анимации и интерактива с пользователем, разрабатываемый в W3C. Внутри файл не бинарный а обычный XML, описывающий объекты, их эффекты и поведение. Векторная графика в общем нужна при изменении размера изображения без потери качества, например в полиграфии. В web я это вижу в резиновых сайтах, где размеры блоков установлены в %, размер шрифтов в em, а лого — в SVG. Пересели на более хороший монитор — всё изменилось пропорционально. Практические примеры —
иконки, графики, карты, логотипы, интерфейсы. Ниже я привожу пример такого Pie-chart'а.
Интеграция
HTML — Inline
Поскольку SVG по сути XML, то его можно сразу inline-стилем описывать в XHTML-структуре. Однако как я уже убедился, XHTML1.1 doctype подразумевает что MIME документа уже не text-plain. А «ослик» IE6 не понимает XHTML в принципе, с другой стороны Firefox использует два парсера, и если MIME не application/xhtml+xml, то inline SVG не будет распознан. Это палка с двумя концами — IE и FF.
/>
Второй способ и наиболее практичный — ссылаться на существующий файл через object-тэг. Для
уменьшения траффика, файл можно сжать и получить SVGZ архив.
CSS и Javascipt
Как вы увидите ниже — поскольку SVG очень тесно связан с HTML/XML, то естественно что на графические объекты можно не только описывать при помощи CSS, но и писать Javascript-функции на всевозможные onclick и тп. event'ы (отсюда и интерактивность).
/> Конвертирование и редакторы
Конвертировать SVG можно и в png/jpeg, но для этого фактически надо проделать работу обработчика. В PHP этим занимается
PEAR XML_svg2image библиотека. Ещё есть
сервис по конвертированию растрового изображения в векторный (правда там EPS). Из редакторов — есть
Inkscape и Adobe Illustrator, Corel Draw.
Графика
Примитивы
Всякое рисование начинается с определения пространства (двумерного), разделения на координаты (в единицах с плавающей точкой или процентах) и введения примитивных конструкций:
- line — прямая линия. x1, y1, x2, y2 — координаты
- polyline — ломанная линия. points — перечисление координат точек
- rect — прямоугольник. x,y, width, height, rx, ry — верхний левый угол, размеры, радиусы углов
- polygone — многоугольник. Похож на polyline. points — координаты точек
- circle — круг. cx, cy, r — координаты центра и радиус
- ellipse. cx, cy, rx, ry — координаты центра и радиусы
- text — текстовая надпись. Очень неудобная, потому что без переноса строк и с абсолютным позиционированием. x,y, font-family, font-size
- tspan — может описывать слова внутри text-элемента. Например сдвигать или раскрашивать
- tref — повторное использование text-элемента с указанным id
Простой текст
<tref xlink:href="#myText" x="50" y="50">
textPath — текст на path-кривой, связанный по id
/>
<textPath xlink:href="#myPath" startOffset="50%">Водка Vinogradoffimage — растровое изображение
<image image-rendering="optimizeSpeed" xlink:href"background.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" filter="url(#blurpane)"/>Параметры и стили
Как и в html, одни линии мало кому нужны — их надо закрашивать, указывать цвета, и всё это делается параметрами
- fill, fill-rule — заливка. Например «none»,blue, indigo.
- stroke, stroke-linecap, stroke-linejoin, stroke-dasharray, stroke-dashoffset, stroke-width — граница, аналог border. Вместе stroke-width.
- font-family, font-size, font-style, font-weight — шрифты для text-элементов
- text-anchor
Для заливки используются тэги:
- pattern
- linearGradient
- radialGradient
Эти параметры можно все объединить в один аналог CSS и записать в inline-стиле:
style="stroke-width:1; stroke:blue; fill:none"Группы и кривые Безье
Элементы можно и нужно группировать друг в друга. Кроме того что
tspan устанавливаетсявнутрь
text-элемента, группирование происходи благодаря элементу.Кривые Безье это плавные переходные линии, задающиеся по точкам. В SVG для этого существует элемент path, у которого подобно ломанной линии указываются координаты. Рядом с координатами могут стоять буквы, обозначающие свойства линии. Большие буквы говорят об абсолютном позиционировании, маленькие об относительном
- M — начало кривой (x,y)
- Z — конец кривой (без координат)
- L -прямая линия (x,y)
- H — горизонтальная линия
- V — вертикальная линия
- Q — квадратичная кривая по одной точке
- T — продолжение кривой с отражением предыдущей точки — упрощает рисование повторяющихся ритмов
- С — собственно кривая Безье третьего порядка по двум точкам
- S — упрощённая версия C
- A — эллиптическая кривая (радиусы, поворот)
Трансформации и возможности
Объекты в SVG пожно искажать, крутить и перемещать при помощи фильтров, которые указываются в качестве параметров:
- translate — перенос объекта
- rotate -вращение
- scale — масштабирование
- scewX, scewY — искажение
- matrix — смешанная трансформация
SVG поддерживает фильтры с эффектами освещения. А кроме статичных изображени есть возможность, анимации и интерактивности с пользователем. Например
тетрис или нашумевший Microsoft Table и Silverlight реализован
программно в SVG, причём при большом желании — заработало и видео (формата
Ogg Theora=SVGT). Конечно последние возможности ещё не реализованы во всех браузерах, но
первооткрыватели типа Opera имеются.
Тортовый график на SVG и PHP/DB
Несомненно
Google API — очень удобная штука. Но не стоит забывать что всё-таки это внешний сервис, пусть и надёжный. Коммерческие разработки не любят рисковать, поэтому генерация графиков всё-таки должно быть локальным (если они не статические).Генерировать изображение я буду с помощью php, на основе полученных из
БД данных для отображения результатов опроса (poll). Поскольку GD-библиотека хоть и понимает размер SWF,
генерирует только бинарные файлы. Поэтому генерировать прийдётся XML:
header("Content-Type: image/svg+xml"); Посмотрим к чему надо стремится (пока без
крутой анимации)…
Начнём с резинового расположения двух эллипсов? Сектора видимо идут в порядке убывания по часовой стрелке, что-бы уменьшить количество градиента на мелких участках. Цвет сектора видимо расчитывается пропорционально числу кусочков — тут то и возникает проблема. Как оказывается, сектор нельзя просто-так залить с двумя линиями и существующим эллипсом — фигура должна быть точно очерчена, поэтому надо
рисовать всё по отдельности при помощи
path, а
ellipse нам не понадобится.
Тригонометрия цвета
Для вычисления в цикле координат path-элемента необходимо вспомнить немного математики. Поскольку
окружность — частный случай эллипса то в формулах есть много схожего, что нам очень пригодится:
x=cos(angle)*radius; y=sin(angle)*radius; //circle
x=cos(angle)*rx; y=sin(angle)*ry; //ellipse
Для эллипса же радиус просто заменяется на большую и малую полуось соответсвенно. Дальше создаём цикл, где вычисляем процентное распределение данных, градус длясектора с
path. Вчисляем координаты для арки, для этого используем «сдвиг градуса» что-бы отрисовка всех секторов шла вплотную.RGB куб, можно по разному резать, делать проекции и вводить свои системы
координат типа CMYK и HSL. Разные оттенки выбранной оранжевой заливки получаются при разбиении отрезка между выбранной точкой-цветом и вершиной белого цвета (255,255,255).
if ($intTotalValue) // если сумма значений голосования больше нуля то можно делить и рисовать
foreach((array) $Data as $key=>$recEntry){
$Data[$key]->percent=$recEntry->value/$intTotalValue;
$Data[$key]->color[0]=round($graph->fill[0]+($key/count($Data)*(255-$graph->fill[0])));
$Data[$key]->color[1]=round($graph->fill[1]+($key/count($Data)*(255-$graph->fill[1])));
$Data[$key]->color[2]=round($graph->fill[2]+($key/count($Data)*(255-$graph->fill[2])));
$Data[$key]->degree=360*$Data[$key]->percent;
$Data[$key]->start['x']=$graph->cx+round(cos(deg2rad($intDegreeShift)) * $graph->rx,3);
$Data[$key]->start['y']=$graph->cy+round(sin(deg2rad($intDegreeShift)) * $graph->ry,3);
$Data[$key]->end['x']=$graph->cx+round(cos(deg2rad($intDegreeShift+$Data[$key]->degree)) * $graph->rx,3);
$Data[$key]->end['y']=$graph->cy+round(sin(deg2rad($intDegreeShift+$Data[$key]->degree)) * $graph->ry,3);
$intDegreeShift+=$Data[$key]->degree; //increase degree shift
$boolIsLargeArc=$Data[$key]->degrees>180? 1 : 0;
echo "\n".'/>';
}
Если посмотреть на график внимательно, то видно что объёмность делается
при помощи градиента, который в SVG мы сначала зальём в качестве фона,
а поверх будем накладывать уже конкретные цвета сектора с прозрачностью:
/>
/>
/>
Основные проблемы
Но проблема остаётся и с закрашиванием пограничных секторов — закрашивать переднюю область поверх градиента надо только у тех областей, которые до половины торта идут. К этому этапу картинка выглядит так:
Абсолютный текст
Кроме того вопрос возникает как располагать текстовые описания секторов? Google попросту ведёт линии с середин секторов, даже если текст не умещается в одну строчку. В SVG позиционировать текст надо от верхнего левого угла — что уже проблема, поскольку ширины мы не знаем. Выхода два — отказаться от относительного позиционирования текста и сделать выноски цветом, либо использовать текст с фиксированной шириной (monospace, Courier) и на этой основе
расчитывать длину в пикселях и положение на лету. Благо я
наткнулся на параметр
text-anchor:end, который странным образом развернул текст как надо.
Интерактивность и будущее
Благодаря интеграции с javascript'ом, можно соответсвенно в реальном времени при помощи AJAX'а
обновлять изображение. В моём случае это необходимо когда пользователь голосует и надо обновить распределение голосов на графике.
Читайте также:
Оригинал статьи с иллюстрациями и
пример использования 
С интересом почитывая то, как Boomburum описывает различные забавные штукенции, тем не менее, ни разу не поймал себя на мысли, что мне хочется потратить свои жалкие гроши на одну из рассматриваемых железяк.
Один из самых популярных и динамично развивающихся OpenSource проектов для электронной коммерции — OpenCart выпустил новую версию v1.5.0 RC1 для финального тестирования. Я беглым взглядом пробежался по меню настройки и выделил изменения по сравнению с версией 1.4.x.
После трёх лет работы со студийным светом я думал, что знаю про накамерную вспышку если не всё, то очень много. Три недели назад я попал в гости к одному особо опытному стробисту, который рассказал и показал столько, что я сразу понял, что надо садиться и делать перепись грабель, а потом тестить, тестить и ещё раз тестить. 
