Пути (paths)

Основные формы

Чтобы вставить форму, нужно создать элемент в документе. Разные элементы соответствуют разным формам и требуют разные атрибуты для описания размера и положения этих форм. Некоторые немного громоздки, поскольку могут быть созданы другими формами, но для удобства они все здесь приведены и способствуют сохранению документов SVG настолько короткими и читаемыми, насколько это возможно. Все основные формы показаны на изображении справа. Код для генерации выглядит как-то так:

Замечание: Атрибуты , и описываются в руководстве далее.

Элемент rect делает как раз то, что вы и ожидаете, то есть рисует прямоугольник на экране. Существуют только 6 основных атрибутов, которые контролируют положение и форму прямоугольника на экране. Ранее показанное изображение отображает два элемента rect, которые выглядят немного лишними. Один справа имеет набор атрибутов rx и ry, которые отвечают за округлые углы. Если этого набора нет, то по умолчанию они принимаются равными 0.

x

Положение x верхнего левого угла прямоугольника.

y

Положение y верхнего левого угла прямоугольника.

width

Ширина прямоугольника

height

Высота прямоугольника

rx

Радиус x углов прямоугольника

ry

Радиус y углов прямоугольника

Как вы могли предположить, элемент circle рисует окружность на экране. Существует 3 атрибута для описания этого элемента.

r

Радиус окружности.

cx

Положение x центра окружности.

cy

Положение y центра окружности.

Ellipse — это наиболее общая форма элемента окружность, в котором можно масштабировать радиусы x и y (обычно называемые математиками половиной большой оси и половиной малой оси) окружности по отдельности.

rx

Радиус x эллипса.

ry

Радиус y эллипса.

cx

Положение x центра эллипса.

cy

Положение y центра эллипса.

Line изображает простую прямую линию. Её атрибутами являются две точки, которые определяют начальную и конечную точки линии.

x1

Положение x точки 1.

y1

Положение y точки 1.

x2

Положение x точки 2.

y2

Положение y точки 2.

Элемент polyline воспроизводит группу соединённых прямых линий. Поскольку этот список может быть довольно длинным, все точки включены в один атрибут:

точки

Список точек, каждая разделённая пробелом, запятой,  EOL, или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан: «0 0, 1 1, 2 2».

Элемент polygon очень похож на элемент polyline в том, что они образованы сегментами прямых линий, соединяющими список точек. Но для многоугольников путь автоматически возвращается к первой точке в конце, создавая тем самым замкнутую форму. Следует отметить, что прямоугольник является частным случаем многоугольника, поэтому polygon можно использовать для создания элемента в случаях, когда необходимо большая гибкость.

точки

Список точек, каждая разделённая пробелом, запятой,  EOL, или символом перевода строки. Каждая точка должна содержать два числа, координату x и координату y. Поэтому список (0,0), (1,1) и (2,2) может быть записан как: «0 0, 1 1, 2 2». Полигон замыкается финальной прямой линией от (2,2) до (0,0).

Path, вероятно, наиболее общая форма, которую можно использовать в SVG. Используя элемент path вы можете рисовать прямоугольники (с закруглёнными углами или без), окружности, эллипсы, ломанные линии и многоугольники; и по существу любые другие типы форм: кривые Безье, квадратические кривые и многое другое. По этой причине элемент path будет рассмотрен отдельно в следующей секции этого руководства, но сейчас отметим только, что существует единственный атрибут для контроля его формы.

d

Список точек и другой информации о том, как рисовать путь. Для подробной информации смотри секцию Пути.

• « Предыдущая статья
• Следующая статья »

Режим stack

Данный способ также использует именованные области просмотра, однако располагает их одну под другой, подобно слоям в Фотошопе. Каждая область скрыта по умолчанию и становится видна, при ссылке на нее через fragment idetifier

Соответственно, нам также доступны два способа использования.

Как фоновая картинка

и как обычное изображение

Ситуация с поддержкой браузерами тут немного хуже, чем в предыдущем способе. Помимо отсутствия поддержки в iOS 9, идентификаторы фрагмента не работают для фоновых изображения в Chrome по 48 версию включительно. Однако в будущем, когда ситуация с поддержкой улучшится, этот способ может стать очень популярным, потому что позволяет использовать одну и ту же иконку как для фона, так и для изображения без ограничений.

Преимущества: Аналогично предыдущему способу, но нет ограничений для изменения размера в зависимости от способа использования.

Недостатки: Проблемы с поддержкой браузерами в настоящий момент. Нет возможности смены цвета через CSS. Из-за особенностей метода все иконки скрыты по умолчанию, поэтому визуально оценить готовый спрайт затруднительно.

Усложняем задачу

Рассмотрим более сложную ситуацию — когда иконка состоит из нескольких простых svg-изображений. Например, примитивная лупа из прямоугольника и круга:

Код для кнопки с иконкой лупы будет таким:

Проблема здесь в том, что внутри svg-иконки два разных тега:

• <rect> (прямоугольник — ручка лупы)
• и <circle> (круг — ободок лупы).

Сделать как в примере с «ВКонтакте» не получится, потому что прямоугольник в нашем случае имеет заливку (fill), а круг — обводку (stroke).

Чтобы при наведении менять цвет обоих, используем два селектора. Один будет менять заливку у палочки, второй — обводку у круга:

Как видите, при наведении на кнопку мы сперва нашли rect, потом circle, то есть разделили логику.

Делить код таким образом приходится нечасто, но помнить об этой возможности полезно.

Элементы SVG по категориям

, <animateColor> (en-US), , <animateTransform> (en-US), <discard> (en-US), <mpath> (en-US), <set> (en-US)

, , , , <polyline> (en-US),

, , <glyph> (en-US), , <marker> (en-US), <mask> (en-US), <missing-glyph> (en-US), , , <switch> (en-US), <symbol> (en-US),

<desc> (en-US), <metadata> (en-US), <title> (en-US)

, <feColorMatrix> (en-US), <feComponentTransfer> (en-US), <feComposite> (en-US), <feConvolveMatrix> (en-US), <feDiffuseLighting> (en-US), <feDisplacementMap> (en-US), <feDropShadow> (en-US), <feFlood> (en-US),<feFuncA> (en-US), <feFuncB> (en-US), <feFuncG> (en-US), <feFuncR> (en-US),<feGaussianBlur> (en-US), <feImage> (en-US), <feMerge> (en-US), <feMergeNode> (en-US), <feMorphology> (en-US), <feOffset> (en-US), <feSpecularLighting> (en-US), <feTile> (en-US), <feTurbulence> (en-US)

<font> (en-US), <font-face> (en-US), <font-face-format> (en-US), <font-face-name> (en-US), <font-face-src> (en-US), <font-face-uri> (en-US), <hkern> (en-US), <vkern> (en-US)

, , , <stop> (en-US)

, , , , , , , <polyline> (en-US), , ,  

,

<feDistantLight> (en-US), <fePointLight> (en-US), <feSpotLight> (en-US) 

<clipPath> (en-US), , <hatch> (en-US), , <marker> (en-US), <mask> (en-US), , <metadata> (en-US), , , <script> (en-US), <style> (en-US), <symbol> (en-US), <title> (en-US) 

<hatch> (en-US), , , , ,  

, , , , , , , , , , <polyline> (en-US), , , <switch> (en-US), <symbol> (en-US), , <textPath> (en-US), <tspan> (en-US), ,  

, , , , , , <polyline> (en-US),

, , , <symbol> (en-US),

<altGlyph> (en-US), <altGlyphDef> (en-US), <altGlyphItem> (en-US), <glyph> (en-US), <glyphRef> (en-US), <textPath> (en-US), , <tref> (en-US), <tspan> (en-US)

<altGlyph> (en-US), <textPath> (en-US), <tref> (en-US), <tspan> (en-US)

<clipPath> (en-US), , <cursor> (en-US), <filter> (en-US), , <hatchpath> (en-US), , , <script> (en-US), <style> (en-US), <view> (en-US) 

Достоинства SVG

• Графика в формате SVG создается с использованием математических формул, которые при изменении размера изображения можно скорректировать.
  Таким образом векторные изображения масштабируются лучше, чем растровые.
• Размер векторной картинки обычно меньше, чем у сравнимых по качеству изображений в форматах JPEG, GIF или PNG.
• SVG графика имеет текстовый формат, который можно и править в блокноте, и рисовать в графических векторных редакторах Adobe Illustrator, CorelDRAW.
• Cкрипты и анимация в SVG позволяют создавать динамичную и интерактивную графику.
• Текст в графике SVG является текстом, а не изображением, поэтому он индексируется поисковыми системами.
• В SVG изображение можно добавить несколько ссылок.
• К SVG формату можно подключать внешние таблицы стилей CSS, глобальные стили внутри контейнера <style>…</style>
  или добавлять внутренние стили с помощью атрибута style в тегах фигур и путей.

Вставка SVG на Web-страницу

SVG-изображение можно вставить на Web-страницу несколькими способами. Первый из них – это простая вставка SVG-кода на страницу
(при большой картинке HTML-код страницы станет огромным и трудно читаемым). При других способах сначала надо сохранить
SVG-код в файле с расширением .svg.

Итак, способы вставки SVG-изображения на Web-страницу:

• прямая вставка кода в HTML-документ в контейнере <svg>…</svg>;
• использование SVG-файла в качестве фонового изображения;
• подключение SVG-файла в HTML-документ с помощью тегов img, embed, object и iframe;
• подключение SVG-файла в PHP-документ с помощью функции include.

SVG-теги

<svg>

Тег внедряет SVG-документ внутрь текущего документа, например, HTML. Тег имеет свои координаты X и Y, высоту и ширину, и свой уникальный id.

Вот как он может выглядеть:

<g>

Тег группирует элементы вместе и ведёт себя как контейнер для связанных графических элементов. Элемент также может содержать в себе другие элементы , которые будут вложены в него.

Вот пример тега :

<rect>

Элемент представляет собой базовую фигуру SVG — прямоугольник. Он может иметь различные атрибуты, такие как координаты, высота, ширина, цвет заливки, цвет обводки и острые или закруглённые углы.

Вот пример тега :

<use>

Элемент позволяет клонировать и повторно использовать графические элементы SVG, в том числе такие элементы, как , , а также другие элементы.

Вот пример тега :

<path>

Элемент определяет путь, состоящий из координат точек для формирования фигуры. Код с использованием может казаться магией, но не пугайтесь! В примере ниже код можно прочесть как:

1. «M150 0» — переместись на (150,0);
2. «L75 200» — нарисуй линию к (75,200) от предыдущей точки (которая имела координаты (150,0));
3. «L255 200» — нарисуй линию к (225,200) от предыдущей точки (которая имела координаты (75,200));
4. «Z» — закрой путь (нарисуй линию к начальной точке).

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

Вот пример тега :

<symbol>

И, наконец, элемент определяет символы, которые могут быть использованы повторно. Эти символы отрисовываются только при помощи тега .

Вот пример тега :

Описание гибрида и его характеристика

Сливово-вишнёвый гибрид (СВГ) — это сравнительно невысокое дерево, около 1,5–2 м в высоту с пирамидальной или стелющейся кроной и большими, зазубренными по краям листьями. Более детальное описание этих растений, в том числе и их плодов, зависит от характеристик конкретного сорта, но практически все они отличаются высокой неприхотливостью в плане выращивания.

История селекции

Первые вишнёво-сливовые сорта новой культуры стали результатом скрещивания американской вишни Бессея и японской сливы, а селекционные эксперименты проводились на территории Америки. Именно там были получены известные сорта Опата, Бета, Сапа, в то время как в России развитием культуры и выведением новых сортов вишнёво-сливовых гибридов занимался известный селекционер Н. Н. Тихонов, благодаря стараниям которого люди узнали о сортах Юта, Новинка, Авангард, полученных от скрещивания вишни Бессея и Уссурийской сливы.

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

Важно! В процессе продолжительной селекционной работы учёным удалось получить не только чистую плодовую гибридную культуру, но и подвой для деревьев семейства Сливовые, что особенно актуально при их выращивании в регионах с холодным климатом

Устойчивость гибридной культуры к заболеваниям

Чувствительность к популярным недугам плодовых деревьев, у гибрида намного ниже, чем у чистых сортов вишни и сливы, однако полностью исключать возможность поражения культуры заболеваниями нельзя. В данном случае одной из самых опасных болезней считается сливово-вишнёвый монилиоз, характеризующийся массовым засыханием и опадением листьев, цветков и даже побегов. Кроме того, нельзя исключать вероятность поражения растений дырчатой пятнистостью, которая также приводит к быстрому опаданию листьев и повреждению ветвей.

Опыление гибридов

Вишнёво-сливовые гибриды являются самобесплодными растениями, поэтому для успешного плодоношения и получения обильного урожая рядом с ними необходимо высаживать сорта-опылители. На эту роль идеально подойдёт вишня Бессея, которая стала одной из родительских форм первых экземпляров новой культуры, хотя не исключена возможность высадки других сортов вишни и сливы или же самоплодных гибридов вроде Омской ночки или Опаты.

Для чего используются файлы SVG?

Как я уже упоминал, файлы SVG лучше всего подходят для изображений, которые содержат меньше деталей, чем фотография. Это все еще довольно широко, поэтому давайте обсудим некоторые из наиболее распространенных способов использования SVG в Интернете.

Иконки

Большинство иконок хорошо переводятся в векторы, учитывая их простоту и четко очерченные границы. Иконки для таких элементов страницы, как кнопки, должны будут реагировать на различные размеры экранов, а это значит, что они должны быть идеально масштабируемыми.

Логотипы

Формат SVG особенно хорошо подходит для логотипов, которые появляются в заголовках веб-сайтов, электронных письмах и печатаются на чем угодно, от брошюр до толстовок и рекламных щитов. Опять же, логотипы, как правило, проще по дизайну, что хорошо сочетается с форматом SVG.

Иллюстрации

Векторы также хорошо подходят для нефотизуального искусства. Декоративные рисунки на веб-страницах можно легко масштабировать и экономить файловое пространство, если они добавляются в виде файлов SVG. Приведенные ниже иллюстрации, даже текстуры некоторых фигур, можно получить с помощью SVG.

Анимации и элементы интерфейса

Используя возможности CSS и JavaScript, вы можете настроить SVG так, чтобы их внешний вид изменялся динамически и запускался автоматически или после запуска какого-либо события. Анимированные SVG-файлы могут служить для добавления визуального изящества вашим страницам или их можно использовать для взаимодействия с анимацией пользовательского интерфейса:

Инфографика и визуализация данных

Будет ли на вашем сайте выгода от информационных дисплеев, таких как инфографика или иллюстрированная диаграмма? Это еще одно полезное приложение для SVG. Ваши проекты будут легко масштабироваться, а текст в файле SVG можно индексировать.

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

Вы также увидите, что SVG-файлы часто используются на информационных сайтах для визуализации данных и карт:

Базовые формы SVG

В соответствии со спецификацией мы можем рисовать несколько базовых форм: линия, полилиния, прямоугольник, круг, эллипс. Все элементы должны быть вставлены в тег . Рассмотрим базовые элементы подробно.

Линия

Для вывода линии в SVG используется элемент . Он рисует отрезок, для которого нужно определить две точки: начало и конец.

<svg>
<line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

Начало отрезка определяется атрибутами  и , а конечная точка определяется координатами в атрибутах and .

Также имеется два других атрибута ( и ) которые используются для определения цвета и ширины линии соответственно.

Основная история.[]

Стоит отметить, что с этого момента все даты синхронизированы с земной системой летоисчисления. 10 год ПБЯ равняется 2010-му году от Рождества Христова.

10-13 ПБЯ

В 10-м году ПБЯ ситский флот вышел к границе цивилизованной галактики. Вскоре на окраинах только что победившей Империю Новой Республики, начались боевые действия. Несмотря на устаревшую конструкцию, флот ситхов за считанные годы смёл не окрепшую Новую Республику. Начинается Первая Сверхгалактическая Война

К 11 ПБЯ(2011 год) половина территорий Новой Республики находилась под властью ситов. Ряд миров впустил себя ситскую армию даже без боя. Большинство староимперских военачальников убиты. Захвачена одна из ключевых имперских планет-крепостей — Бастион.

12 ПБЯ(2012 год) — На орбите Корусанта происходит битва между ситской армадой и флотом Новой Республики. Результатом битвы стал полный разгром основной новореспубликанской эскадры и захват столичной планеты. Чуть позже была оккупирована планета Мон-Каламари. Многие известные личности, такие как Хан Соло, Принцесса Лея или Люк Скайукер погибают, либо уходят в подполье и теряются из виду. Судьба большинства из них неизвестна. После битвы при Корусанте, Новая Республика распадается на множество отдельных мини-государств. Зачастую это одна-несколько планет, а иногда и несколько государств на одной планете. Почти все источники корабельного топлива и уцелевшие верфи(коих мало) контролируются Орденом Ситов. Остальные силы в галактике становятся, по сути, парализованы, не имея возможностей ни достать топливо, ни построить корабли. Позднее этот период галактической истории будет в шутку назван некоторыми исследователями новым каменным веком. Однако, это не совсем так. Это нельзя сравнивать с каменным веком, но гиперпространственные перелёты становятся привилегией только самых богатых и развитых государств. Однако, в связи с отсутствием у народных масс возможности гиперперелётов, галактика становится как бы больше, осваивать новые территории и контролировать уже захваченные становится сложнее.

13 ПБЯ(2013 год) — Мир под властью ситов. Происходит истребление недовольных, поиск адептов и лидеров разгромленных фракций. При этом во многих мирах к власти приходят молодые новые правители (кого-то поставили ситы, где-то произошла революция, где народ нового выбрал и т.д.). Все они получают одобрение Ордена Ситов, если приносят присягу и подчиняются, платят налоги. Мир живет под властью новой кровавой империи. Последние остатки сопротивления подавлены. Формально бОльшая часть галактики находится под властью ситов. Гиперпространственная технология разрешена только служащим Империи, её распространение вне Империи, для личного пользования жёстко ограничено и контролируется законом. Это почти полностью исключает возможность какого-либо серьёзного сопротивления, однако осложняет осуществление контроля над огромной галактикой. В связи с этим, на окраинах Империи народы живут, иногда вообще не имея представления о происходящем в остальной части вселенной.

К середине тринадцатого года, когда вся галактика уже была захвачена Орденом, могущественные лорды Ситов стали соперничать между собой за сферы влияния в их новой империи. Вскоре соперничество переросло в борьбу и откровенную вражду сильнейших ситских кланов.

Два объединения руководителей планет под руководством двух групп ситов станут в итоге двумя первыми сильными альянсами — ТГФ и ПТС. Первый был больше и руководили им Пузо и Консул Мик, второй поменьше, его лидером был Серг.

Сами же ситхи и сделали из них по сути альянсы, т.к. наладили между ними логистику для лучшего производства. Несмотря на жесткий контроль, лидеры общались как между собой внутри одного альянса, так и с представителями другого. Это быстро привело к тому, что они чаще подставляли самих ситхов на поле боя и в тактических моментах, чем подставлялись сами. Ведь на многих планетах еще не остыли пепелища.

Все эти события, происходившие с 10 по 13-14 ПБЯ, позже будут названы Первой Сверхгалактической Войной. Больше информации об этом периоде можно найти на отдельной странице, посвящённой этой войне. Именно Сверхгалактическая Война, точнее, её окончание, стала отправной точкой нового развития галактики и началом новой эпохи.

Стоит отметить, что 13 ПБЯ равен 2013-му году от Рождества Христова. А 18-го марта 2013-го года игра впервые увидела свет, после завершения разработки.

CSS3-анимация

SVG может быть анимирован с помощью добавления атрибута  или SVG-тегам, и последующей стилизации их в CSS. Так же, как и любой другой документ. Ниже приведён пример того, как может быть анимирован SVG.

CSS-анимация предлагает множество типов анимации, которые вы можете выбрать. Линейная анимация — это ещё один крутой атрибут SVG.

Для следующего примера я написала текст «Hi, I am Surbhi», используя инструмент «Pen» в редакторе. Затем я использовала ключевые кадры из CSS3 для создания анимации.

Обратите внимание, что каждый тег имеет уникальный идентификатор. Это связано с тем, что нам важна задержка при создании анимации для нескольких слов

Что такое файл SVG?

Файл SVG, сокращение от файла масштабируемой векторной графики, представляет собой стандартный тип графического файла, используемый для рендеринга двухмерных изображений в Интернете.

В отличие от других популярных форматов файлов изображений, формат SVG хранит изображения как векторы. Возникает вопрос: что такое векторная графика?

Растр против вектора

Сегодня в сети используется несколько форматов файлов изображений, которые мы можем разделить на две категории: растровая графика и векторная графика.

Вы, наверное, знакомы с распространенными форматами PNG и JPEG. Это форматы растровой графики, что означает, что они хранят информацию об изображении в виде сетки цветных квадратов, также называемой растровым изображением. Квадраты на этом растровом изображении объединяются, образуя связное изображение, очень похожее на пиксели на экране компьютера.

Растровая графика хорошо подходит для изображений с высокой детализацией, таких как фотографии, на которых необходимо указать точный цвет каждого пикселя. Растровые изображения имеют фиксированное разрешение, поэтому увеличение их размера снижает качество изображения.

Векторные графические форматы, такие как SVG и PDF, работают по-разному. Эти форматы хранят изображения как набор точек и линий между точками. Математические формулы определяют расположение и форму этих точек и линий и поддерживают их пространственные отношения при увеличении или уменьшении масштаба изображения. Файлы векторной графики также хранят информацию о цвете и даже могут отображать текст.

Как работают файлы SVG

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

Давайте посмотрим на несколько примеров. Начну с рисования простого круга SVG:

Когда я открываю файл этого круга в текстовом редакторе, появляется этот XML-код:

Как видите, кода здесь не так много. Нам нужна всего одна строка кода, чтобы нарисовать круг. Это потому, что XML делает за нас большую часть работы с тегами. В приведенном выше коде теги показаны розовым цветом в угловых скобках.

Чтобы нарисовать круг, XML-код определяет форму с помощью тега , его положение с помощью атрибутов и с атрибутами cx и cy, радиус с атрибутом r и цвет внутри тега . # f4795b – это шестнадцатеричный код цвета для данного оттенка оранжевого.

Когда предоставляется файл SVG, подобный этому, веб-браузер (или другое приложение) принимает эту информацию XML, обрабатывает ее и отображает на экране в виде векторного изображения. Все современные браузеры визуализируют SVG таким образом, как и специализированное программное обеспечение для редактирования графики.

Вы также заметите, что этот XML-файл написан на английском языке. SVG – это в основном текстовые файлы, что делает их доступными для чтения людьми. Это позволяет разработчикам напрямую вносить изменения в файлы XML. Например, я мог бы заменить значение заливки, чтобы изменить цвет круга:

Конечно, с векторами мы можем сделать гораздо больше, чем с простыми кругами. Давайте посмотрим на более сложное изображение, логотип звездочки HubSpot:

Этот простой значок состоит из 30 линий, соединенных 30 точками:

Откроем этот SVG-файл в текстовом редакторе:

Хорошо, здесь происходит еще кое-что. Но концепция та же. У нас все еще есть тег , который сообщает нам цвет. Вместо тега , чтобы придать нам форму, у нас есть тег . Все значения в этом теге определяют точки изображения и линии между этими точками.

Сложная траектория

Задается тегом <path>. Является самым универсальным из SVG-элементов. Позволяет создавать произвольные фигуры.
Форма фигуры задается атрибутов d, значение которого – это набор специальных команд. Эти команды могут быть и в верхнем,
и в нижнем регистре. Верхний регистр указывает на то, что применяется абсолютное позиционирование, а нижний – относительное.

Команды, определяющие траекторию и направление фигурной линии

M, m

Начальная точка Mx,y

L, l

Отрезок прямой Lx,y

H, h

Горизонтальная линия Hx,y или hx

V, v

Вертикальная линия Vx,y или vy

A, a

Дуга эллипса Arx,ry x-axis-rotation large-arc-flag,sweep-flag x,yrx,ry – радиусы дуги эллипса;x-axis-rotation – угол поворота дуги относительно оси X;large-arc-flag – если (=1), то строится большая части дуги, если (=0) – меньшая;sweep-flag – если (=1), то дуга строится по часовой стрелке, если (=0) – против часовой стрелке;x,y – координаты конечной точки дуги.

C, c

Кубическая кривая Безье Cx1,y1 x2,y2 x,yx1,y1 – координаты первой контрольной точки;x2,y2 – координаты второй контрольной точки;x,y – координаты конечной точки кривой.

S, s

Гладкая кубическая кривая Безье Sx2,y2 x,yx2,y2 – координаты второй контрольной точки;x,y – координаты конечной точки кривой.
Первая контрольная точка является зеркальным отражением второй контрольной точки.

Q, q

Квадратичная кривая Безье Qx1,y1 x,yx1,y1 – координаты контрольной точки;x,y – координаты конечной точки кривой.

T, t

Гладкая квадратичная кривая Безье Qx1,y1 x,yx,y – координаты конечной точки кривой.
Контрольная точка этой команды является зеркальным отражением контрольной точки предыдущей команды.

Z, z

Замыкание траектории

Что за формат SVG и где используется

Разработанный в 2001 году Консорциумом Всемирной паутины, формат SVG представляет собой не совсем обычный документ. В его основу положены языки разметки VML и PGML, то есть речь идет, по сути, о текстовом файле. При этом редакторы и браузеры интерпретируют SVG как изображение, которое может быть как статическим, так и анимированным. Будучи наиболее распространенным среди прочих форматов, предназначенных для хранения векторной графики, в настоящее время SVG активно используется для хранения и распространения векторных и смешанных изображений в интернете.

Как и все форматы, SVG имеет свои плюсы и минусы. К первым относятся масштабируемость без потери качества, относительно малый вес, возможность интеграции в SVG-документы PNG, GIF, JPG-изображений, редактирование (при наличии соответствующего опыта) в текстовых редакторах, индексирование поисковыми роботами, поддержка анимации и распространенность. К преимуществам формата следует также отнести хорошую сжимаемость, открытость и адаптивность.

С другой стороны SVG наследует недостатки XML со всеми вытекающими. Формат плохо подходит для создания сложных объектов, так как файлы SVG быстро «набирают» вес, если состоят из множества мелких деталей. Кроме того, для отображения картинки программам нужно читать весь документ, что затрудняет применение формата в картографических приложениях. Среди недостатков формата отмечаем относительно низкую кроссбраузерность и отсутствие хотя бы минимальной поддержки трехмерной графики.