Архив рубрики: SVG теги

Почему SVG теги опубликованы на сайте теги HTML

Файлы SVG формата могут самостоятельно располагаться на сайтах в сети Интернет. Их подключают к страницам используя тег img или через css свойство  background-image блочных тегов.

Но, с появлением HTML5 графику формата SVG можно интегрировать непосредственно в тело страницы. Об этом говорится во введении от w3c.

А вот и маленький пример от консорциума:

<!doctype html> 
<title>SVG in text/html</title> 
   <p> A green circle: 
     <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>  
   </p>

SVG. Масштабируемая векторная графика. Часть 4

Градиенты и текстуры.
А как же градиенты, спросите вы, но я отвечу — это тоже просто. В спецификации определено два типа градиента: линейный и радиальный.
Градиенты положено помещать внутрь тэга контейнера <defs> (от англ. definitions — определения), это говорит о том, что содержимое предназначено для многократного применения. Линейный градиент определен парным тэгом <linearGradient>, (а что же должно быть внутри?) который включает в себя тэги <stop />. В спецификации об этом сказано: «Буйство красок, чтобы использовать в градиенте определено элементами ‘stop’, которые являются дочерними элементами ‘linearGradient’ элемента или ‘radialGradient’ элемента.» Разберем вышесказаное на примере градиента для нашего первого элемента (прямоугольника с фоном):
<defs>
        <linearGradient id="sky_n_water">
                <stop offset="0%" stop-color="#09f" />
                <stop offset="35%" stop-color="#9ff" />
                <stop offset="36%" stop-color="#fff" />
                <stop offset="100%" stop-color="#09f" />
        </linearGradient>
</defs>
Вот они наши запланированые переходы в верхней части от темно-синего к светло-синему, а ниже от белого к темно-синему изображающие небо и воду.
Рекомендую, для проектирования градиентов использовать Фотошоп и для этого несколько причин. Во-первых в «Редакторе градиентов» мы видим удобную шкалу на которой размещаем наши контрольные точки (тэги <stop />) и offset атрибут мы видим в поле «Позиция», что можно считать вторым плюсом, а в третьих на «Палитре цветов» поставив галочку в «Только Web-цвета» мы в поле «#» видим код RGB 0099ff, который можно смело сокращать до трех цифр 09f и писать их в stop-color атрибут.

Вот так легко и просто, но на практике мы получим прямоугольник с градиентом идущим слева-направо, вместо желанного сверху-вниз. Градиент надо повернуть и нам поможет атрибут gradientTransform = «rotate(90)», который необходимо указать в тэге <linearGradient>.
Применим теперь наш первый градиент на практике:
<defs>
        <linearGradient id="sky_n_water"  gradientTransform="rotate(90)">
          <stop offset="0%" stop-color="#09f" />
          <stop offset="35%" stop-color="#9ff" />
          <stop offset="36%" stop-color="#fff" />
          <stop offset="100%" stop-color="#09f" />  
        </linearGradient>
        </defs>
        <style type="text/css"><![CDATA[
          #bg {fill:url(#sky_n_water) #09f; stroke="none"}
        ]]></style>
<rect id="bg" width="100%" height="100%"/>

А вот и новые свойства для нашей «кочки»:

<linearGradient id="grass">
    <stop offset="0" stop-color="#6c0" />
    <stop offset="1" stop-color="#9f3" />
</linearGradient>

.grass {fill:url(#grass) #6c0; stroke:#090; stroke-width:1}
Обратите внимание, на этот раз для параметра offset я использовал не проценты (0 и 1 соответствуют 0% и 100%, а если бы нам понадобилась середина мы написали бы 0.5 вместо 50%).
Радиальный градиент для цветка сделать тоже не сложно. Отличается только тэг обрамляющий наши точки остановки цвета, вместо linearGradient используется radialGradient
<radialGradient id="flower">
   <stop stop-color="#f00" offset="0"/>
   <stop stop-color="#f00" offset="0.3"/>
   <stop stop-color="#fff" offset="0.3"/>
   <stop stop-color="#fff" offset="1"/>
</radialGradient>
.flower {stroke:#ccc; stroke-width:0.01; fill:url(#flower) #f00}
Текстуры в нашем проекте не используются, хотя их успешно можно было бы применить для раскрашивания наших «кочек». Дело в том, что в SVG для текстурирования используются не только растровые текстуры, но и векторные (что важнее). И наши цветочки можно было бы вынести из основного рисунка и поместить в определения <defs> заключив их в тэге <pattern>. Таким образом присвоив текстуре (паттерну) идентификатор мы сможем использовать ее для заливки. Обязательно попробуйте эту методику в ваших проектах — не пожалеете.

Трансформации

Спецификацией предусмотренно несколько видов трансформации — это перемещение (translate), масштабирование (scale), поворот (rotate), наклон по оси Х (skewX), наклон по оси Y (skewY) и matrix, которая в своих шести параметрах может включать сумму нескольких трансформаций. Но поскольку тема матричного представления двумерного пространства выходит за рамки данной статьи примем как факт, что те из вас кто изучал «Высшую математику» разберутся с матричными трансформациями сами, а те кто не изучал либо будут использовать последовательность простых трансформаций, либо найдут учебник по вышке и изучат матрицы самостоятельно. (заранее огорчу — к Морфиусу, Тринити и Нэо наши матрицы отношения не имеют, а их изучение скучнее просмотра одноименного фильма).
Вот матричные трансформации для цветков. Каждая, из них, увеличивает цветок в десять раз и переносит на новое место.
transform="matrix(10,0,0,10,45,75)"
 transform="matrix(10,0,0,10,125,60)"
 transform="matrix(10,0,0,10,160,85)"
Заменить ее обычными можно так:
transform = “scale(10) translate(45,75)”
Важно помнить, что последовательность трансформаций имеет важное значение. Поясню почему… Ось вращения для объекта всегда совпадает с 0,0 и если сначала его переместить, а затем повернуть, то результат будет сильно отличаться от того, который получиться при повороте с последующим перемещением. Тоже касается и масштабирования, так как при увеличении уже перемещенного объекта увеличится и расстояние его перемещения.

В проекте мы не применяем трансформацию «skewX» или «skewY» предназначенные для наклона объекта по горизонтали или вертикали, но они возможно вам пригодятся для проектов реализующих псевдо3D.Например, из трех прямоугольников можно создать куб, как показано на рисунке.
Для «кочек» я выбрал следующие значения [(3,0,0,3,1000,500), (4,0,0,4,480,410), (6,0,0,6,-150,260)] и получил очередной файл SVG. Да, эта картина грубовата и не сглажена фильтрами и спецэффектами Фотошоп, но я нахожу другой факт более важным — наш SVG весит 7,5 кБ, а этот JPEG с размером 400*250 и качеством 60% уже 18 кБ (а если пытаться сохранить в полном кач-ве и с полным разрешением, то вышло бы — 300 кБ). Еще один плюс — SVG сам масштабируется под разрешение экрана и размер рабочей области браузера, а под растр нам пришлось бы придумывать ухищрения.
И у нас в SVG есть простор для совершенствования, постаравшись мы можем еще уменьшить размер файла, добавив несколько атрибутов изменить стиль линий. Да и визуальные фильтры разработаны W3C, но пока, правда, реализованы не во всех браузерах. Мой любимый Google Chrome в числе передовиков и полностью поддерживает все спецификации консорциума W3C.

Визуальные фильтры.

Не углубляясь в подробности сразу показываю код визуального фильтра:
<filter id="BlurFar"><feGaussianBlur stdDeviation="1.5" /></filter>
<filter id="BlurNear"><feGaussianBlur stdDeviation="0.5" /></filter>
<filter id="BlurSmall"><feGaussianBlur stdDeviation="0.1" /></filter>

  <g transform="matrix(3,0,0,3,1000,500)" filter="url(#BlurFar)">
  <g transform="matrix(4,0,0,4,480,410)" filter="url(#BlurNear)">
   <path d="m0,100 q100,-100 200,0z" filter="url(#BlurSmall)" /> 
Вот такие, незначительные, изменения привносят в наш пейзаж немного реалистичности, за счет DOF (от англ. depth of field — на русский переведу, как глубина резкости). Парный тэг <filter> как и градиенты располагают внутрь контейнера <defs>, и он (в свою очередь) содержит один и более тэгов описывающих фильтры. Я применил тэг <feGaussianBlur> для размытия по Гауссу, а другие фильтры вы без труда отыщите в спецификации. Применять определенный в «defs» фильтр можно и к группам и к отдельным объектам указав им атрибут «filter».
Быстро и просто мы разобрали на практике большую часть современного SVG. Пока что за бортом остались связанные и интегрированные растры, текстовые объекты, шрифты, анимация и использование сценариев.

SVG. Масштабируемая векторная графика. Часть 3

Область просмотра, клиппирование.
Клиппирование — это обрезка объектов выходящих за рамки области просмотра (любой другой области). Зачем нам это нужно? Внутрь тэга <svg> я добавил атрибуты viewBox=»0 0 1440 800″ preserveAspectRatio=»xMidYMax slice». ViewBox ограничивает область просмотра и гарантирует нам, что «горизонт» окажется в одной и той же Y координате на разных браузерах. PreserveAspectRatio срежет лишнее по краям и скроет верх изображения если пропорции экрана не позволят все показать.
Таким образом, мы ограничили область просмотра нашего пейзажа окном с размерами 1440 на 800 единиц, которые будут пересчитываться в реальные пиксели уже в браузере и если пропорции его окна просмотра не будут соответствовать заявленным нами, то он возьмет нижний край пейзажа, расположит его снизу и срежет верх, либо обрежет боковые края. Обе ситуации станут понятнее если вы посмотрите на картинку.
Еще один важный момент, который должны помнить те, кто планирует писать файлы SVG своими руками (без применения графических редакторов).Начало координатной плоскости лежит в левом верхнем углу и оси направлены слева-направо и сверху-вниз.

Графические примитивы и их свойства.

Теперь давайте снова вернемся к основной цели данной статьи — написание пейзажа для интернет страницы. У нас уже есть структура документа, а точнее схема по которой мы будем добавлять графические примитивы. Мы разобрались как эти примитивы описывать в файле и нам осталось разобраться со свойствами которыми обладают наши примитивы, а также трансформацией объектов и групп размещающей их на холсте в конечном виде.
Начнем со свойств, таких как толщина линии обводки, ее цвет, а так же заливкой, и сразу приведу маленький пример:
<rect width="1198" height="398" fill="none" stroke="blue" stroke-width="1" />
Тут у нас прямоугольник без заливки, но с бордюром синего цвета в 1 единицу толщиной. Эти свойства указаны в атрибутах тэга, что не всегда удобно. И W3C находит выход — свойства можно описать в парном тэге <style> в манере CSS как это делается в HTML документах и тогда написав:
.blueBorder {fill:none; stroke:blue; stroke-width:1}
мы можем задать те же свойства не только вышеописанному прямоугольнику, но и любому другому примитиву указав атрибут для тэга примитива например:
<circle cx="600" cy="200" r="100" />
Ну что же, теперь мы во всеоружии и можем приступать к написанию нашего пейзажа… Для начала расставим «заглушки» обозначив блоки, которые будем постепенно заполнять:
<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
        <style type="text/css"><![CDATA[
                /* Стили */
        ]]></style>
          <defs>
                /* Градиенты */
        </defs>
        <g>
                /* Группы и примитивы */
      </g>
 </svg>
Тут ненавязчиво появились еще тэги требующие пояснения для новичка. <!DOCTYPE — это еще один из заголовочных обязательных тэгов указывающий на тип документа с которым будет иметь дело браузер его разбирающий. «Ноги» в данном случае растут из древнего SGML, предшественника XML, в котором тип документа описывался файлом .dtd и такой файл для SVG имеется на сервере W3C, в чем мы уверены указывая его в ссылке. Еще один непонятный тэг <![CDATA[ и его пара ]]> ограничивают «неродную» для SVG таблицу стилей написаную в манере CSS, о чем сказано в атрибуте type=»text/css» тэга <style>.
Добавим наш фон (прямоугольник) и получим:
<?xml version="1.0" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 800" preserveAspectRatio="xMidYMax slice">
        <g>
           <rect id="bg" width="100%" height="100%" />
        </g>
 </svg>
Красным я выделил то, что добавил, и далее буду писать только те куски кода которые будут добавляться. Теперь вы можете увидеть наш первый результат. Надеюсь он вас вдохновил, а чтение не сильно утомило отбив желание изучать SVG.
Что же у нас дальше по плану? Ах да, «кочки». И мы приступаем к рисованию обещанной основы из контура состоящего из ДВУХ точек. Почему их всего две спросят некоторые из вас, а потому, что у нашей кривой Безье только начало и конец, а обратно в начало браузер пройдет кратчайшим путем (по прямой). Мы воспользуемся квадратичной кривой, хотя возможно больше подошла бы кубическая (проверим).
<path d="m0,0 q100,-100 200,0z" />
Вот, вполне приемлемая кочка. Но она пока что черная и стоит не на своем месте. Зададием ей линию обводки. Получим, к примеру:
.grass {stroke:#090; stroke-width:1; fill:#0f0;}

<path d="m0,100 q100,-100 200,0z" />
Нарисуем тропинку. Ее опишет следующий путь — «m50,0 q50,-10 70,-47 0,50 -20,47z» или «m50,0 q10, -50 70,-47 -50,0 -20,47z», обратите внимание — точки в обоих случаях одни и те же, изменяются только опорные пункты путей (нам нужны оба вида «тропинок», чтобы отличать первую и вторую «кочки»), а стиль у них будет такой «fill:#cc9; stroke:#990; stroke-width:2″ назовем его footPath.
.footPath {fill:#cc9; stroke:#990; stroke-width:2}

<path d="m50,0 q10,-50 70,-47 -50,0 -20,47z" />
Переходим к цветочкам. Точнее, нарисуем контур одного цветка, а затем создадим несколько трансформированных копий этого цветка. Путь я «выдернул» из оптимизированного SVG сгенерированного в Inkscape — «m0.54688,-0.11829 c-0.37472,-0.43643 -0.25072,1.0885, 0.04856,0.59722, 0.29928,-0.49124 -1.1127,0.09791-0.55298,0.23074, 0.55967,0.13283, -0.43695,-1.0279 -0.39033,-0.45461, 0.046622,0.57333, 0.84261,-0.73321, 0.31175,-0.51171 -0.53086,0.22151, 0.95771,0.57479, 0.583,0.13836z» для свойств используем радиальный градиент (как его сделать вы узнаете в следующей части статьи) и тонкую серую обводку. «Кочка» почти готова, но она пока еще не на своем месте, как и цветочки, которых хоть и три, но они пока что маленькие и наложены друг на друга.
.flower {stroke:#ccc; stroke-width:0.01}

<path d="m0.5468 .. 0.1383z" />
<path d="m0.5468 .. 0.1383z" />
<path d="m0.5468 .. 0.1383z" />
Объединяем элементы описывающие «Кочку» тэгом контейнером <g> в группу, дважды «копипастим» (дублируем) получая таким образом три «Кочки», как и было задуманно вначале. В первой группе оставляем только цветок в середине, а в средней удаляем первый цветок (их перекроют другие объекты, поэтому они лишние). Меняем путь в тропинке средней «Кочки», а в передней вообще его удаляем. Таким образом мы получаем три группы расположенные одна над другой и нам осталось только указать для каждого тэга <g> атрибут transform=»matrix()», дабы разместить их на холсте с нужным масштабом и в нужных координатах, но об этом речь пойдет в следующей части статьи.
«Облака и островок справа». Три контура: Белое облако с голубой обводкой, голубое облако без обводки и »пролесок» темно-зеленый без обводки объеденены в группу, котораябудет перемещена в правую часть горизонта. Здесь вы можете посмотреть на контуры. Затем была создана копия этой группы, чтобы «отразиться» в воде. Этой группе добавлен атрибут opacity (прозрачность).
<g>
 <path d="m..z" fill="#fff" stroke-width="1" stroke="#09f" />
 <path d="m..z" fill="#3cf" />
 <path d="m..z" fill="#060" />
</g>
<g opacity="0.5">
 <path d="m..z" fill="#fff" stroke-width="1" stroke="#09f" />
 <path d="m..z" fill="#3cf" />
 <path d="m..z" fill="#060" />
</g>
Код приведен не полностью. Немного поразмыслив я не стал придумывать новые контуры для облаков слева, а решил воспользоваться новыми трансформациями для той же группы, что только что была разработана. Пришлось просто убрать контур изображающий «пролесок».
Файл уже весит 7,5 кБ, но мы то помним, что Jpeg с таким разрешением и количеством оттенков весит как минимум в десять раз больше. Остались мелочи: два облачка посреди небосвода и два деревца на двух «кочках».
Сначала деревца. Здесь можно взглянуть на контуры. Крона сформирована из трех клонов одного и того же контура. Думаю вы уже достаточно попрактиковались и сразу заметили, что применением атрибута opacity для среднего контура кроны мы достигаем эффекта при котором создается впечатление, что контуров больше и используется не 3, а 5 оттенка зеленого.
Первое дерево мы вставляем в группу «левой кочки». Дерево на второй «кочке» появляется за счет матричной трансформации и на этот раз я кроме масштабирования и переноса буду использовал отражение по вертикали. Добавляем эту группу к средней «кочки» и, само собой разумеется, она получит «в наследство» размытие, которое в литературе принято называть DOF, которое будет реализовано визуальным фильтром рассматриваемым в следующей части статьи.
Облака посреди небосвода мы сделаем не два, а четыре. Одна пара будет иметь четкий хотя и тонкий контур, а вторая (находящаяся под ней) этого контура лишена, зато будет размыта фильтром. Не стану приводить отдельно контуры этих облаков, а лучше сразу покажу конечный результат к которому мы стремимся.

SVG. Масштабируемая векторная графика. Часть 2

Пишем файл SVG своими руками.
В прошлой части статьи мы уже выяснили, что файлы SVG текстовые, а стало быть фраза «написать пейзаж» приобрела второй, более привычный простому обывателю смысл. Итак минимальная заготовка файла SVG включает в себя следующий код:
<?xml version=»1.0″ encoding=»UTF-8″ standalone=»no»?>
<svg xmlns=»http://www.w3.org/2000/svg» version=»1.1″>
<!— Content —>
</svg>
Здесь в первой строке стандартный для всех файлов семейства XML пролог (лат.: — вступление). Ведь для вас не секрет, что файлы SVG из этого семейства. Во второй строке парный тэг <svg> ограничивающий тело документа и это для вас очевидный факт, ведь в последней строке вы видите его «хвост» — закрывающий тэг </svg>. Надеюсь, что стандартный комментарий (в третьей строке) указывающий куда мы будем писать дальше, тоже никого не напугал. Тем же, для кого все вышесказанное — «темный лес», а желание освоить материал все-таки присутствует рекомендую отыскать на просторах интернета толковый учебник по XML 1.0
С теми, кто все еще в строю, едем дальше… Разработаем схему нашего рисунка, а для начала найдем себе референсы в сети, либо нарисуем от руки, то что хотим увидеть в итоге. Я применил оба подхода и накопав кучу малоприемлемых картинок нарисовал (по аналогии с одним из понравившихся) свой:

Вот так, наскоро набросав ручкой на листке, отсканировав и разукрасив в Фотошопе я получил растровый эскиз будущего векторного рисунка.

Начнем со схемы документа и структура SVG файла «нам в помощь». Ведь то, что находится на заднем плане должно идти вначале, а то, что будет указано в файле в последнюю очередь отобразиться на рисунке в верхнем (наружном) слое, т.е. на переднем плане. И не будем забывать об оптимизации кода, о его минимализации. Итак, подложкой на нашей картине станет прямоугольник закрашенный сложным градиентом, где в верхней части мы переходим от темно-синего к светло-синему, а ниже от белого к темно-синему изображая, таким образом, небо и воду (еще не решил что это — море или озеро) эффектно выделив горизонт. Затем у нас будут идти три сгруппированных объекта, которые мы назовем «кочки» или «островки», кому как больше понравиться. Почему мы говорим о группах? Да просто, так мы нарисовав один сложный (составной) объект можем скопировав его и слегка трансформировав получить новый. Таким образом, сначала рисуется правая (на рисунке) «кочка», затем она увеличивается и переносится немного влево, затем сделаем еще одну копию и повторим увеличение и перенос.
Два деревца на двух передних «кочках» это тоже клоны для которых применена трансформация «масштаб+перенос». Облака отражающиеся в воде, это тоже пары, где клон имеет масштаб равный « 1″ по оси Y и «+1″ по оси Х, что приводит к отражению Y координат относительно оси Х (эффект «зеркала»). То же касается и пролеска, который виден вдали (может это островок, а может противоположный берег залива, решайте сами). Ну и в последнюю очередь идут облака которые мирно висят посреди нашего неба и не имеют отражений.
Теперь «копнем поглубже» и поговорим о группах — сложных объектах состоящих из нескольких контуров. На моей картинке я вижу таких несколько: это «кочки» о которых мы уже говорили, а так же отражающиеся облака и деревья. С облаками все просто, тут по два контура, где на заднем плане (напоминаю, что в файле он будет идти впереди/вначале) контур с белым фоном, ближе контур залитый голубой краской. Чуть больше работы предстоит с деревьями, ведь тут у нас крона из трех контуров с разными оттенками зеленого, но вперед мы изобразим ствол дерева в виде контура залитого коричневой краской (простите, забыл покрасить в Фотошопе) и тогда крона идущая в файле следом за ним накроет его на картине. И наконец, «высший пилотаж», наши «островки-кочки»… Здесь залитая градиентом от темно-зеленого к светлому основа представленная контуром ограниченному ДВУМЯ точками, но об этом позже. На первом и втором клоне добавлены тропинки, чтобы картинка не получилась совсем уж скучной пав жертвой моего желания оптимизировать/минимизировать. И цветочки повсюду, что может быть чудесней, один контур и градиент по схеме красный-красный-белый-белый, т.е. нам не нужно рисовать серединку и лепестки отдельно, а выделить этот факт цветом. К тому же сделав несколько вариантов градиента для цветов мы сможем сделать красивые и пестрые газончики.
Ну вот, первый этап нами уже пройден и мы можем начертить схему документа, который будем писать на SVG. Формат SVG являясь членом семейства XML наследует от него важный признак — древовидную структуру, которую мы и отображаем в нашей схеме:

Файл который мы напишем лишь слегка отличается, дополняя ее нюансами реализации.

В своем проекте мы будем использовать только два графических примитива — это прямоугольник и контур, но для «общего развития» сообщу, что в спецификации SVG описаны еще несколько, это: круг, овал, линия, полилиния и полигон (многоугольник), и еще (чуть не забыл) текст.
Начнем вникать в тонкости описания примитивов. С прямоугольником, который представлен тэгом <rect />, что вполне естественно, никаких сложностей быть не может. Тут среди прочих нам важны четыре атрибута, два на позицию (положение на холсте — Х и Y) и два на размер (ширина и высота). Гораздо сложнее примитив «контур» — тэг <path /> у которого есть атрибут под названием «d» (от англ. data — данные) — это и есть собственно путь по которому пойдет перо рисуя наш контур. Давайте подробнее разбираться, ведь в спецификации этой теме посвящена вся восьмая глава…
Итак, про атрибут «d» в спецификации сказано, что он — «определяет контур фигуры». Осталось выяснить как он это делает. Читаем спецификацию дальше и находим вот что: «атрибут ?d? содержит инструкции для перемещения, рисования линии, дуги, кривой Безье (и квадратичной и кубической), а также закрытия (замыкания).». Эти инструкции (команды) записываются латинскими буквами и ниже я привожу таблицу с их определением:
M или m (x, y)
Начинает новый подконтур в заданных (x, y) координатах. М. (прописная буква) указывает, что далее следуют абсолютные координаты; м. (строчная) указывает, что координаты относительные. Если эта команда сопровождается многократными парами координат, следующие пары это неявные команды рисования линий (L / l). Следовательно, неявные команды будут относительны, если команда перемещения пера относительна, и абсолютны, в противном случае. Если (m) появляется как первый элемент контура, то эту команду принимают как (М) с парой абсолютных координат, но в этом случае, все последующие пары координат считаются относительными несмотря на то, что начальная команда интерпретируется как перенос пера в абсолютной системе координат.
Z или z без параметров
Закрывает текущий контур, рисуя прямую линию от текущей точки до начальной точки текущего подконтура. Так как Z и z не берут никакие параметры, они имеют идентичный эффект.
L или l (x, y)
Рисует линию от текущей точки до заданной (x, y) координатами, которые становятся новой текущей точкой. L (прописная буква) указывает, что далее следуют абсолютные координаты; l (строчная) указывает, что будут следовать относительные координаты. Множество пар координат может быть определено, чтобы рисовать «ломаную» линию. В конце команды, новая текущая точка устанавливается на заключительный набор координат.
H или h (x)
Рисует горизонтальную линию от текущей точки (cpx, cpy) к (x, cpy). H (прописная буква) указывает, что будут следовать абсолютные координаты; h (строчная) указывает, что будут следовать относительные координаты. «x» можно указать многократно (хотя обычно это не имеет смысла). В конце команды, новой текущей точкой становится (x, cpy) в последнем x.
V или v (x)
Рисует вертикальную линию от текущей точки (cpx, cpy) к (срx, y). V (прописная буква) указывает, что будут следовать абсолютные координаты; v (строчная) указывает, что будут следовать относительные координаты. «x» можно указать многократно (хотя обычно это не имеет смысла). В конце команды, новой текущей точкой становится (cpx, y) в последнем y.
C или с (x1, y1, x2, y2, x, y)
Рисует кубическую кривую Безье от текущей точки до (x, y) используя (x1, y1) как контрольный пункт в начале кривой и (x2, y2) как контрольный пункт в конце кривой. C (прописная буква) указывает, что абсолютные координаты будут следовать; c (строчная) указывает, что относительные координаты будут следовать. Могут быть определены многократные наборы координат, чтобы рисовать полилинию Безье. В конце команды, новой текущей точкой становится последняя (x, y) пара координат, используемая в полилинии Безье.
S или s (x2, y2, x, y)
Рисует кубическую кривую Безье от текущей точки до (x, y). Первым контрольным пунктом (вначале кривой) считается отражение второго контрольного пункта на предыдущей команде относительно текущей точки. (Если нет никакой предыдущей команды или если предыдущая команда не была C, c, S или s, считается, что первый контрольный пункт совпадает с текущей точкой.) (x2, y2) — второй контрольный пункт (то есть, контрольный пункт в конце кривой). S (прописная буква) указывает, что абсолютные координаты будут следовать; s (строчная) указывает, что относительные координаты будут следовать. Многократные наборы координат могут быть определены, чтобы рисовать полилинию Безье. В конце команды, новой текущей точкой становится последняя (x, y) пара координат, используемая в полилинии Безье.
Q или q (x1, y1, x, y)
Рисует квадратичную кривую Безье от текущей точки до (x, y) используя (x1, y1) как контрольный пункт. Q (прописная буква) указывает, что абсолютные координаты будут следовать; q (строчная) указывает, что относительные координаты будут следовать. Многократные наборы координат могут быть определены, чтобы рисовать полилинию Безье. В конце команды, новой текущей точкой становится последняя (x, y) пара координат, используемая в полилинии Безье.
T или t (x, y)
Рисует квадратичную кривую Безье от текущей точки до (x, y). Контрольный пункт принят, чтобы быть отражением контрольного пункта на предыдущей команде относительно текущей точки. (Если нет никакой предыдущей команды или если предыдущая команда не была Q, q, T или t, предполагется, что контрольный пункт совпадает с текущей точкой.) T (прописная буква) указывает, что абсолютные координаты будут следовать; t (строчная) указывает, что относительные координаты будут следовать. В конце команды, новой текущей точкой становится последняя (x, y) пара координат, используемая в полилинии Безье.
A или а (rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y)
Рисует краткую дугу от текущей точки до (x, y). Размер и ориентация эллипса определяют два радиуса (rx, ry) и угол x-axis-rotation, который указывает, как эллипс в целом вращается относительно текущей системы координаты. Центр (cx, cy) эллипса рассчитан автоматически, чтобы удовлетворить ограничениям, наложенным другими параметрами. large-arc-flag и sweep-flag вносят вклад в автоматические вычисления, и помогают определить, как дуга оттянута.
У нас готово почти все чтобы начать писать файл с нашим пейзажем, а пока «лирическое отступление»…
Перед началом самостоятельной работы с SVG я рекомендую почитать файлы сгенерированые графическими редакторами. Ничего (к сожалению) не могу сказать о Adobe Illustrator’e, потому что им я никогда не пользовался. Знаю Corel Draw экспортирует, но он является продуктом коммерческим и не каждый осилит его приобретение только для того, чтобы поэкспериментировать с экспортом в SVG. Я рекомендую скачать редактор векторной графики Inkscape с одноименного сайта http://www.inkscape.org. Этот редактор распространяется бесплатно, и что самое главное, SVG его родной формат. Сохраняйте файлы в режиме «Оптимизированный SVG» и открывайте их «Блокнотом» (любым текстовым редактором). В режиме оптимизации мы видим минимум «мусора» в коде файла и если вам лень «просчитывать» ваши рисунки можете использовать Inkscape как основной инструмент для создания SVG файлов.
В следующей части статьи мы просчитаем контуры наших объектов, научимся их трансформировать и размещать на холсте, затем приступим к заполнению нашего файла-болванки.

SVG. Масштабируемая векторная графика. Часть 1

CG.

 

Компьютерная графика (CG от англ. - Computer Graphics), в привычном на сегодняшний день понимании, развивается с момента появления первых графических операционных систем. И начиная с первых их реализаций она разделилась на два основных направления: графика растровая и векторная. Для этих направлений разработано и применяется великое множество форматов файлов, редакторов и просмотровщиков. Для того, чтобы понять в чем основное отличие растровой и векторной картинки давайте посмотрим на пример показанный ниже.

Здесь мы видим смайлик, который при масштабе 1х1 будет выглядеть одинаково и для растровой и для векторной графики. Различия проявляются при масштабировании. При увеличении в десять раз мы на растровой картинке, которая показана в центре видим, что точки превратились в квадратики, а на векторной картинке (справа) край области изображающей глаз смайлика остался гладким.
Так будет всегда и это справедливо для любых типов файлов. Для примера отмечу, что BMP, JPEG, PNG относятся к растровым, а EMF, AI, CDR к векторным. И если опуститься до уровня кода этих файлов, то можно говорить о том, что файлы растровой графики содержат информацию о цвете пикселей (точек) располагающихся в виде прямоугольной матрицы, а файлы графики векторной информацию об объектах картины, которыми могут быть простые фигуры, как прямоугольник, круг, овал, и т.п., а так же их свойствах (размер, положение, цвет обводки и заливки).
В данной статье речь пойдет о SVG (от англ. - Scalable Vector Graphics) масштабируемой векторной графике предназначенной для сети Интернет.

Интернет.

Возможно не всем известно, но глобальная сеть и связанные с ней технологии не живут сами по себе, а развиваются под чутким надзором организации под названием World Wide Web Consortium(сокр. W3C). Эта организация, далее консорциум, состоит из представителей крупнейших фирм имеющих отношение к компьютерной индустрии. Представители таких фирм как IBM, Canon, Adobe, Opera, Google и т.д. собираются вместе и объединяются в рабочие группы, чтобы определить каким Интернет будет завтра.
Результаты своей деятельности представители консорциума выкладывают в сети по адресу http://www.w3.org и там вы всегда можете просмотреть документы на которые обязаны опираться разработчики программного обеспечения, например, браузеров.
Одна из рабочих групп консорциума занимается разработкой спецификаций SVG. Сформировалась эта группа в теперь уже далеком 1998 году. Возглавил ее Джон Феррайола (более подробную информацию о котором можно найти на страничке http://jonferraiolo.sys-con.com), тогда представитель от Adobe, а ныне член команды IBM. 29 октября 98 года он опубликовал требования к формату SVG и рабочая группа преступила к разработкам.
В составе группы опубликовавшей 11 февраля 1999 года первый черновик спецификации были: по два представителя от Microsoft, IBM, Netscape, Adobe, Corel и по одному отAutodesc, SUN, Apple, Xerox, Visio, HP, Macromedia, Quark,CCLRC, Inso; всего 20 человек. С тех пор состав рабочей группы конечно же несколько раз менялся, но работы велись непрерывно и о своей деятельности команда регулярно отчитывалась как на сайте консорциума, так и в Твиттере под ником @svgwg.
4 сенября 2001 года была опубликована первая спецификация - SVG 1.0, что дало возможность авторам (cg–художникам) быть уверенными в том, что результат их творчества будет одинаково передаваться конечному потребителю браузерами и редакторами.
Потом публиковались различные рекомендации, были сформированы требования для передачи формата SVG мобильными устройствами, особенности применения с нестандартными кодировками и т. п.
И наконец 16 августа 2011 года вышла вторая редакция спецификации — SVG 1.1

Отличия SVG от других векторных форматов.

Забегая вперед, заглянем внутрь файла SVG. Нам сразу становится ясно, что это обычный текстовый файл и объекты описаны в нем языком, который и определен спецификацией W3C, чего нельзя сказать, к примеру, о файлах EMF.
Векторная графика SVG легко правится любым текстовым редактором и нет необходимости прибегать к помощи графического редактора. Напротив файлы других форматов для редактирования требуют применения, тех или иных программных средств, большая часть из которых являются платными.
Более того, формат SVG относится к категории открытых и это означает, что мы всегда сможем узнать о том, как он устроен, чего нельзя сказать о фирменных форматах AI (Adobe) и CDR(Corel), которые разрабатываются производителями графических редакторов. И это еще один плюс рассматриваемого формата, но есть у него и минусы, о которых мы поговорим далее…

Минусы формата SVG.

Формат SVG задумывался, кроме всего прочего, и для экономии трафика в сети Интернет. Всегда ли такая экономия имеет место? Я отвечу — Нет. Дело в том, что для изображений маленьких размеров гораздо выгоднее применять растровую графику (к примеру PNG).
Кроме того, есть у SVG и проблемы с интеграцией на web страницах. Несмотря на то, что Microsoft входит в состав рабочей группы SVG полноценная поддержка формата браузером Internet Explorer не обеспечена до сих пор, а частичная начинается только с, последней на сегодняшний день, девятой версии этого браузера. ВерсииIE ниже девятой отображали файлы SVG только с применением плагина. Это обусловлено, с моей точки зрения, извечным желанием компании Билла Гейтса «перетянуть одеяло на себя».
Браузер Mozilla и некоторые другие отображают графику из файлов SVG, но не могут использовать их в качестве фоновых в связи с тем, что размер изображения может быть опущен (не указан в файле), а вычисление реальных координат объектов вызывает трудности. И только Google Chrome с легкостью обращается с файлами SVG.
Основную конкуренцию формату сегодня составляет графика интегрированная в новый, пока еще, формат гипертекста HTML5. Теперь картинки можно описывать прямо в тексте страницы выделив этот фрагмент кода парным тэгом <CANVAS>.
Анимация и интерактивность, которые также предусмотрены в формате SVG, гораздо лучше проработаны во Flash и даже несмотря на то, что он требует установки плагина (Flash Player) на большинстве браузеров, он пользуется гораздо большей популярностью. Напомню, что формат Flash был создан и разрабатывался компанией Macromedia, а в последующем перешел к Adobe и развивается ею по сей день.
И все же, минусы рассмотренные в данном параграфе нисколько не уменьшают силу формата SVG, который стоит изучить хотя бы для того, чтобы в последующем лучше и легче разбираться в векторной графике в целом.

Содержание спецификации SVG 1.1

Давайте для ознакомления с форматом SVG рассмотрим содержание спецификации. В первых двух главах мы видим введение и концепцию языка. В третьей главе речь идет о модели представления, т.е. о том, как программы предназначенные для отображения файлов SVG должны их читать. Затем в четвертой главе рассматриваются базовые типы и интерфейсы, а следом в пятой главе рассмотрена структура файлов (документов) SVG. Глава 6 посвящена стилизации объектов рисунка. Седьмая глава рассматривает систему координат, трансформации и единицы измерения. В восьмой главе говорится о кривых, а в следующей 9 главе остальных базовых фигурах, отдельно в 10 главе рассмотрен объект «Текст». Далее в 11 главе речь идет о заливке объектов, их обводке и маркерах. Глава 12 посвящена краскам, тринадцатая глава расскажет об альтернативных способах заливки, таких как градиент и текстура. В главе 14 говориться об обрезке, маскировании и композиционировании. Пятнадцатая глава посвящена визуальным фильтрам. Главы 16,17 и 18 сообщат нам соответственно об интерактивности, связывании и использовании сценариев. Следующая 19 глава расскажет об анимации, 20-я о шрифтах, 21-я о метаданных, 22-я об обратной совместимости, 23-я о расширяемости. Затем в спецификации приведены приложения в количестве 17-ти штук, которые окончательно перекрывают все вопросы связанные с форматом SVG.
Последняя спецификация пока еще не переведена на русский язык, а стало быть для многих сложна в освоении. Цель данной статьи, в цикле из нескольких частей, донести читателю основные положения спецификации на примере написания файла SVG изображающего пейзаж.
Порядок освоения будет отличаться от предложенного содержанием спецификации, что обусловлено нарастающей сложностью рассматриваемого материала.