Карманное руководство по написанию svg

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Pocket Guide to Writing SVG
  • Введение
  • Глава 1. Организация документа
  • Глава 2. Базовые фигуры и контуры
  • Глава 3. Рабочая область
  • Глава 4. Заливки и обводки
  • Глава 5. Элемент <text>
  • Глава 6. Продвинутые функции: градиенты, паттерны, контуры обрезки
  • Заключение

Спасибо вам!

Этот раздел я хотела бы целиком посвятить тому, чтобы сказать «Огромное спасибо!»:

  • CSS-Tricks
  • Lincoln Loop
  • Designmodo
  • Tahoe Partners

heart

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

Введение

Масштабируемая векторная графика (SVG) – язык для описания двумерной графики в формате XML. Эта графика может состоять из путей, изображений и/или текста, который способен масштабироваться и изменять размеры без потери качества изображения.

Под встроенным SVG понимают код, написанный прямо внутри HTML, чтобы сгенерировать в браузере эту графику, о которой эта книга.

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

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

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

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

Прежде чем начать

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

Использование SVG

Есть несколько способов включить SVG в ваши проекты: как встроенный, как <img>, фоновое изображение, <object>, или в виде Data URI. Мы же с вами будем использовать именно встроенный SVG, который предполагает написание SVG-кода внутри тела правильно структурированного HTML-документа.

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

Программы для векторной графики

Векторные графические редакторы могут быть оправданным выбором, когда нужно создавать более сложную графику, которую нерационально писать вручную. Такие программы, как Adobe Illustrator, Inkscape, Sketch, iDraw или WebCode могут оказаться полезными инструментами, которые стоит добавить в вашу SVG-копилку.

Преимуществом этих инструментов является то, что вы можете экспортировать их SVG-код и встроить его прямо в ваш HTML. Мы коснёмся этого немного позже.

Встроенный SVG в вебе

Для краткости на всём протяжении этой книги SVG DOCTYPE, номер версии xmlns, и xml:space был исключён из всех примеров кода.

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

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

<!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" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"></svg>

В большинстве случаев в DOCTYPE и этих атрибутах внутри элемента <svg> нет необходимости и от них можно избавиться, существенно «почистив» ваш код.

Доступность SVG для пользователей

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

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

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

Общие замечания

Еще пара общих замечаний, прежде чем перейти к главному: шрифты, используемые в примерах во всей книге, доступны на Google Fonts. Это будет видно по значениям font-family, но соответствующий код для link или @import, получаемый с Google Font, здесь не приводится, и вам придется вставить его в документ самостоятельно.

В примерах книги используются исключительно пиксели и проценты в качестве единиц измерения. SVG поддерживает следующие единицы длины:: em, ex, px, pt, pc, cm, mm, in, и проценты.

SVG-код из этой книги можно добавить в любой текстовый редактор, а затем просмотреть в любом браузере с поддержкой встроенного SVG. Хотя в целом браузерная поддержка SVG очень хороша, для более продвинутых функций, например, градиентов, между браузерами могут возникнуть разночтения. Can I Use – прекрасное место для проверки поддержки таких особенностей, но в конечном счёте ничто не сравнится с тем, чему вы научитесь методом проб и ошибок.

Помимо сказанного, вы также можете скопировать код из примеров, вставить его в окошко «HTML» на CodePen и мгновенно увидеть вашу графику на экране. Мне не хватает лестных слов для этого инструмента, так как по сути именно он в первую очередь заставил меня полюбить SVG. Это мой любимый способ учиться: играя, экспериментируя, иногда даже совершая досадные ошибки.

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

<svg>
    <!--<путь d=<этот путь закомментирован> />-->
</svg>

Публикуется под лицензией Attribution-NonCommercial-ShareAlike 4.0

P.S. Это тоже может быть интересно:

Источник

Карманное руководство по написанию SVG. Глава 2 — CSS-LIVE

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Глава 2. Базовые фигуры и контуры

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

Базовые фигуры

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

Прямоугольник

Элемент <rect> определяет прямоугольник

<svg>
    <rect fill="#BBC42A" />
</svg>

Увидеть демо можно здесь.

Атрибуты width и height устанавливают размер прямоугольника, в то время как fill — внутренний цвет фигуры.

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

Другие атрибуты, которые могут быть добавлены – координаты x и y . Эти значения передвинут фигуру вдоль соответствующей оси согласно размерам, установленным элементом <svg> .

Также есть возможность создать закруглённые углы, указав значения в атрибутах rx и ry. К примеру, rx="5" ry="10" сгенерирует горизонтальные стороны углов с радиусом 5px, а вертикальные в 10px.

Круг

Элемент <circle> строится, основываясь на центральной точке и внешнем радиусе.

<svg>
    <circle cx="75" cy="75" r="75" fill="#ED6E46" />
</svg>

Увидеть демо можно здесь.

Координаты cx и cy определяют положение центра круга относительно размеров рабочей области, заданных элементом <svg>.

Атрибут r устанавливает размер внешнего радиуса.

Эллипс

Элемент <ellipse> описывает эллипс, который строится по центральной точке и двум радиусам.

<svg>
    <ellipse cx="100" cy="100" rx="100" ry="50" fill="#7AA20D" />
</svg>

Увидеть демо можно здесь.

В то время как значения атрибутов cx и cy помещают центральную точку на указанном расстоянии в пикселях от начала SVG-координат, значения rx и ry определяют радиус сторон фигуры.

Линия

Данный элемент определяет прямую линию с начальной и конечной точкой.

<svg>
    <line x1="5" y1="5" x2="100" y2="100" stroke="#765373" stroke-width="8"/> 
</svg>

Увидеть демо можно здесь.

Значения атрибутов x1 и y1 устанавливают координаты начала линии, а значения x2 и y2 — определяют конец линии.

Ломаная линия

<polyline> определяет набор соединённых отрезков прямой линии, что в результате даёт, как правило, незамкнутую фигуру (начало и конец точек которой не связаны).

<svg>
    <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill="white" stroke="#BBC42A" stroke-width="6" />
</svg>

Увидеть демо можно здесь.

Значения в points определяют положение фигуры по осям x и y от начала до конца фигуры и разбиты по парам x,y во всём списке значений.

Нечётное число точек является ошибкой.

Многоугольник

Элемент <polygon> определяет замкнутую фигуру состоящую из связанных линий.

<svg>
    <polygon points="50,5 100,5 125,30 125,80 100,105 50,105 25,80 25,30" fill="#ED6E46" />
</svg>

Увидеть демо можно здесь.

Вершины многоугольника заданы последовательностью из восьми пар значений х, y.

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

Элемент path

SVG-элемент path представляет собой контур фигуры. Эта фигура может быть заполнена, обведена, использована как направляющая для текста и/или как контур обрезки.

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

Данные path

Данные path содержатся в атрибуте d внутри элемента <path>

, определяя форму фигуры: <path d="<конкретные данные path>" />.

Данные, включённые в атрибут d, описывают команды для path: moveto, line, curve, arc и closepath.

Детали <path> ниже определяют особенности контура для рисунка лайма:

<svg>
    <path fill="#7AA20D" stroke="#7AA20D" stroke-width="9" stroke-linejoin="round" d="M248. 761,92c0,9.801-7.93,17.731-17.71,17.731c-0.319,0-0.617,0-0.935-0.021c-10.035,37.291-51.174,65.206-100.414,65.206 c-49.261,0-90.443-27.979-100.435-65.334c-0.765,0.106-1.531,0.149-2.317,0.149c-9.78,0-17.71-7.93-17.71-17.731 c0-9.78,7.93-17.71,17.71-17.71c0.787,0,1.552,0.042,2.317,0.149C39.238,37.084,80.419,9.083,129.702,9.083    c49.24,0,90.379,27.937,100.414,65.228h0.021c0.298-0.021,0.617-0.021,0.914-0.021C240.831,74.29,248.761,82.22,248.761,92z" />
</svg>
moveto

Команды moveto (М или м) устанавливают новые точки, как будто мы поднимаем ручку и начинаем рисовать в новом месте на листе бумаги. Строка кода, составляющего данные path, должна начинаться с команды moveto, как показано выше в примере с лаймом.

Команды moveto, которые следуют за исходной, представляют собой начало нового фрагмента контура, создавая составной контур. Заглавная М указывает, что после нее идут абсолютные координаты, тогда как строчная m указывает на относительные координаты.

closepath

Closepath (Z и z) заканчивает текущий фрагмент контура приводит к рисованию прямой линии от текущей точки до начальной.

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

И заглавная и строчная буква z здесь имеют одинаковые результаты.

lineto

Команды lineto рисуют прямые линии от текущей точки до новой.

L, l

Команды L и l рисуют линию от текущей точки до следующих предоставленных координат точки. Эта новая точка затем становится текущей точкой и так далее.

Заглавная L означает, что после неё идёт абсолютное позиционирование, в то время как после l — относительное.

H, h

Команды H и h рисуют горизонтальную линию от текущей точки.

Заглавная H означает, что после неё идёт абсолютное позиционирование, в то время как после h — относительное.

V, v

Команды V и v рисуют вертикальную линию от текущей точки.

Заглавная V означает, что после неё идёт абсолютное позиционирование, в то время как после v — относительное.

Команды для создания кривых

Для рисования кривых есть три группы команд: кубическая кривая Безье (C, c, S, s), квадратичная кривая Безье (Q, q, T, t), и дуга эллипса (A, a)..

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

Кубическая кривая Безье

Команды C и c рисуют кубическую кривую Безье от текущей точки, используя параметры (х1, y1) в качестве управляющей точки в начале кривой и (x2, y2) в качестве управляющей точки в конце, определяющих особенности формы кривой.

Команды S и s также рисуют кубическую кривую Безье, но в данном случае предполагается, что первая управляющая точка является

отражением второй (имеется в виду вторая управляющая точка предыдущей команды, см. более подробное описание ниже — прим. перев.).

Следующий код рисует базовую кубическую кривую Безье:

<svg>
    <path fill="none" stroke="#333333" stroke-width="3" d="M10,55 C15,5 100,5 100,55" />
</svg>

Увидеть демо можно здесь.

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

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

Заглавная C сигнализирует, что за ней следует абсолютное позиционирование, в то время как после строчной c — относительное. Та же самая логика применяется к S и s.

Квадратичная кривая Безье

Квадратичные кривые Безье (Q, q, T, t) похожи на кубические, но имеют всего одну управляющую точку.

Следующий код рисует базовую квадратичную кривую Безье.

<svg>
    <path fill="none" stroke="#333333" stroke-width="3" d="M20,50 Q40,5 100,50" />
</svg>

Увидеть демо можно здесь.

Управление первыми и последними наборами значений, M20,50 и 100,50 будет влиять на позиционирование начала и конца точек кривой. Центральный набор значений Q40,5 задаёт управляющую точку для кривой, определяя ее форму.

Q и q рисуют кривую от начальной точки до конечной, используя (x1,y1) в качестве управляющей точки. T и t рисуют кривую от начальной точки до конечной, предполагая, что управляющая точка является отражением управляющей точки предыдущей команды относительно начальной точки новой команды T или t.

Заглавная Q сигнализирует, что за ней следует абсолютное позиционирование, в то время как после строчной q относительное. Та же самая логика применяется к T и t.

Дуга эллипса

Дуга эллипса (A, a) определяет часть эллипса. Эти части создаются с помощью команд A или a, которые создают дугу путем указания начальной и конечной точки, радиусов x и y, вращение и направление.

Взгляните на код для базовой дуги эллипса:

<svg>
    <path fill="none" stroke="#333333" stroke-width="3" d="M65,10 a50,25 0 1,0 50,25" />
</svg>

Первые и последние наборы значений внутри этого контура, M65,10 и 50,25 представляют начальные и конечные координаты, а вторые наборы значений определяют два радиуса. Значения 1, 0 (large-arc-flag и sweep-flag) определяют то, как будет отрисована дуга, поскольку для этого есть четыре различных возможных варианта.

Следующая диаграмма показывает четыре варианта выбора дуги и то, как влияют значения large-arc-flag и sweep-flag на конечное отображение отрезка дуги.

Увидеть демо можно здесь.

Копирование из векторных редакторов

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

После того, как графика готова, сгенерированный XML-код, который может быть достаточно длинным в зависимости от сложности, может быть скопирован и встроен в HTML. Разбивка каждого раздела SVG и наличие правильных организационных элементов может значительно помочь в навигации и понимании этих, казалось бы, сложных и многословных документов.

Здесь представлен SVG-код для изображения нескольких вишенок с добавлением классов для расширенной навигации:

<svg viewBox="0 0 215 274">
    <g>
        <path fill="none" stroke="#7AA20D" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" d="M54.817,169.848c0,0,77.943-73.477,82.528-104.043c4.585-30.566,46.364,91.186,27.512,121.498" />
        <path fill="#7AA20D" stroke="#7AA20D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M134.747,62.926c-1.342-6.078,0.404-12.924,5.762-19.681c11.179-14.098,23.582-17.539,40.795-17.846 c0.007,0,22.115-0.396,26.714-20. 031c-2.859,12.205-5.58,24.168-9.774,36.045c-6.817,19.301-22.399,48.527-47.631,38.028 C141.823,75.784,136.277,69.855,134.747,62.926z" />
    </g>
    <g>
        <path fill="#ED6E46" stroke="#ED6E46" stroke-width="12" d="M164.836,193.136 c1.754-0.12,3.609-0.485,5.649-1.148c8.512-2.768,21.185-6.985,28.181,3.152c15.076,21.845,5.764,55.876-18.387,66.523 c-27.61,12.172-58.962-16.947-56.383-45.005c1.266-13.779,8.163-35.95,26.136-27.478   C155.46,191.738,159.715,193.485,164.836,193.136z" />
        <path fill="#ED6E46" stroke="#ED6E46" stroke-width="12" d="M55.99,176.859 c1.736,0.273,3.626,0.328,5.763,0.135c8.914-0.809,22.207-2.108,26.778,9.329c9.851,24.647-6.784,55.761-32.696,60.78 c-29.623,5.739-53.728-29.614-44.985-56.399c4.294-13.154,15.94-33.241,31.584-20.99C47.158,173.415,50.919,176.062,55.99,176.859z" />
    </g>
</svg>

Атрибуты в элементе svg определяют рабочую область или «холст» для графики. Листочек и черешки находятся в одном элементе <g> (группе), а вишенки в другом. Строка числовых значений определяет контур графики, а атрибуты fill и stroke устанавливают цвет для фона и границ.

Прежде чем поместить этот код в HTML, его можно скопировать и пропустить через SVG-оптимизатор, который в свою очередь поможет устранить лишний код, пробелы и значительно сократить размер файла. SVG-оптимизатор Питера Коллингриджа или SVGO — очень полезные в этом плане инструменты.

Публикуется под лицензией Attribution-NonCommercial-ShareAlike 4.0

P.S. Это тоже может быть интересно:

SVG-фигуры и трансформации • Про CSS

← Начало про SVG

Писать SVG руками довольно просто. Используем фигуры: rect, polygon, circle, ellipse, а также line, polyline и path.
Задаем выбранную фигуру, определяем её размеры и координаты, затем добавляем фон и обводку.

Следует отметить, что писать код руками совершенно не обязательно: с этим гораздо лучше справятся векторные редакторы, например, мощный, но платный Adobe Illustrator, бесплатный, но не такой удобный Inkscape, немного платный, но довольно симпатичный Sketch. Но имеет смысл хотя бы попробовать, потому что это а) интересно, б) полезно: навыки могут пригодиться, если надо нарисовать что-то простое, подправить код в отсутствие векторного редактора или вы хотите взаимодействовать с SVG через JavaScript.

Размеры и координаты задаются для разных фигур по-разному, а вот фон и обводка — одинаковы для всех:

fill — заливка. Можно задать цвет любым способом. Прозрачность — none или transparent. Цвет по умолчанию — черный;

stroke — цвет обводки;

stroke-width — толщина обводки, по умолчанию — 1. Без stroke не работает.

Больше параметров можно найти в спецификации w3.org/TR/SVG/painting. html#StrokeProperties.

Ниже можно увидеть примеры простых SVG-фигур и трансформации, которые к ним можно применить.

Rect

<svg>
  <rect x="5" y="5"
    fill="skyblue" stroke="steelblue" stroke-width="5"
  />
</svg>

x,y — координаты левого верхнего угла фигуры; width, height — ширина и высота прямоугольника.

Закругленные уголки задаются параметрами rx и ry. Если задан только один из параметров, скругление по вертикали и по горизонтали будет одинаковым:

<svg>
  <rect x="5" y="5" rx="20"
    fill="yellowgreen" stroke="green" stroke-width="5"
  />
</svg>

Если заданы оба параметра (и они таки разные), радиус скругления будет разным:

<svg>
  <rect x="5" y="5" rx="10" ry="50"
    fill="khaki" stroke="darkkhaki" stroke-width="5"
  />
</svg>

Polygon

<svg>
  <polygon points="5,135 115,5 225,135"
    fill="violet" stroke="purple" stroke-width="5"
  />
</svg>
<svg>
  <polygon
    points="70,5 90,41 136,48 103,80 111,126 70,105 29,126 36,80 5,48 48,41"
    fill="turquoise" stroke="lightseagreen" stroke-width="5"
  />
</svg>

В points задаются x,y-координаты вершин фигуры, через пробел.

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

Circle

<svg>
  <circle r="65" cx="70" cy="70"
    fill="orangered" stroke="crimson" stroke-width="5"
  />
</svg>

r — радиус круга; cx, cy — координаты центра круга.

<svg>
  <ellipse rx="110" ry="60" cx="115" cy="70"
    fill="gold" stroke="orange" stroke-width="5"
  />
</svg>

rx, ry — горизонтальный и вертикальный радиусы эллипса; cx, cy — координаты центра эллипса.

Более сложные фигуры можно сделать из сочетания простых:

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

<svg>
  <g fill="#333">
    <ellipse rx="45" ry="37" cx="55" cy="60" transform="rotate(-45, 55, 55)"/>
    <ellipse rx="45" ry="37" cx="190" cy="60" transform="rotate(45, 190, 55)"/>
    <circle r="67" cx="122" cy="125"/>
  </g>
</svg>

Также можно рисовать простыми линиями.

Line

<svg>
  <line
    x1="220" y1="10" x2="20" y2="130"
    stroke="violet" stroke-width="5"
  />
</svg>

x1, y1, x2, y2 — координаты начала и конца линии.

Polyline

<svg>
  <polyline
    points="5,135 30,5 55,135 80,5, 105,135 130,5, 155,135 180,5, 205,135 230,5, 255,135"
    fill="none" stroke="orangered" stroke-width="5"
  />
</svg>

В points задаются x,y-координаты точек, каждая точка через пробел.

Для более сложных линий и фигур существует тег path, но эту тему стоит рассмотреть отдельно.

Transform

SVG-фигуры можно видоизменять с помощью свойства transform.

Возможные значения: translate, scale, rotate, skewX, skewY, matrix.

Пример:

<svg>
  <ellipse rx="110" ry="30" cx="115" cy="70"
    fill="gold" stroke="orange" stroke-width="5"
    transform="rotate(-23 115 70)"/> 
</svg>

Можно задавать несколько трансформаций через запятую или через пробел.

translate(tx [ty])

Если второй параметр не задан, он равен 0.

scale(

sx [sy])

Если второй параметр не задан, он равен первому.

rotate(rotate-angle [cx cy])

Если координаты центра поворота не заданы, они равны 0 0 — это левый верхний угол SVG-изображения.

skewX(

skew-angle), skewY(skew-angle)

matrix(a b c d e f)

6 бесплатных онлайн SVG-редакторов: сравнение

От автора: SVG-изображения не так распространены, как наши любимые растровые форматы PNG и JPG, однако преимущества векторной графики привлекают все больше дизайнеров. Дизайнеры все чаще используют векторную графику в своих проектах. Раньше нам нужно было скачивать десктопные приложения типа Adobe Illustrator и Inkscape, но в 2017 проектировать векторную графику можно, не выходя из браузера. Если вы искали бесплатный SVG-редактор, то можете начать с этих шести бесплатный инструментов.

Vectr

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

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

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Если в онлайн версии нет нужных вам функций, можно скачать десктоп версию приложения. Редактор доступен для Windows, Mac, Linux и Chromebook.

Возможно, самая крутая функция в Vectr – вы можете делать ссылки и вставлять изображения прямо с сайта Vectr, что делает его эффективным хостингом для SVG. Множество сервисов блокируют загрузку SVG файлов, поэтому это серьезный плюс. Вы можете показывать SVG изображения из Vectr на удаленных сайтах типа WP, Medium, Tumblr и т.д., которые блокируют прямую загрузку SVG, но разрешают ее показ по удаленке.

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

С этой целью Vectr недавно выпустили версию редактора в виде плагина для WP.

RollApp

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

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

После авторизации откроется следующая страница:

Inkscape во всей красе! Без сомнения, RollApp – самое богатое на функционал приложение из списка. Вы буквально используете Inkscape в браузере! Я не сравнивал все до мелочей, но на вид в этом приложении есть ВСЕ фукнции Incscape, такие как слои, объекты, текст, пути, фильтры, эффекты, расширения и т.д.

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

BoxySVG

Если вы давно читаете SitePoint, вам должен быть знаком редактор BoxySVG, потому что за последние 12 месяцев мы уже рассказывали про него. Не буду делать детальный обзор, так как это уже сделано в этой статье.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Что важно, со времен обзора от Alex в BoxySVG добавили инспектор кода, что делает его одним из самых актуальных SVG инструментов для веб-разработчиков.

Janvas

Пару лет назад Janvas был очень популярным SVG-редактором. К сожалению, последнее время данный редактор не разрабатывается, но даже так он до сих пор работает. Веб движется вперед, а Janvas стоит на месте, поэтому интерес к нему угас. Alex с сайта SitePoint работал с этим инструментом немного в 2013-14 (в том числе с платной версией) и даже отвечал на вопросы некоторое время на странице Google+. Janvas был довольно мощным инструментом.

Главная проблема Janvas – он немного устарел. Браузеры развиваются, а приложения, которые не следуют за браузерами, с каждым днем становятся все менее стабильными. В Janvas множество функций: фигуры, текст, инструменты рисования, пути, маски и слои. Однако пользователи на форумах говорят, что множество этих функций не приносят желаемого результата.

Есть хорошая новость – выйдет новая версия в виде Chrome-приложения. Надеемся, они пофиксят проблемы.

DrawSVG

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

С помощью DrawSVG можно рисовать, изменять и рендерить объекты. Рисовать можно простые фигуры, есть кривые Безье, прямой и изогнутый текст, множество стилей обводок и заливок и т. д. Также SVG можно экспортировать в PNG.

SVG-edit

SVG-edit – дедушка онлайн редакторов векторной графики, появился в середине 2000-х. Серверного функционала нет, все работает в браузере. Сохранить свою работу без добавления своего собственного функционала нельзя.

Тем не менее, для редактора, чья жизнь началась с сильно ограниченной и незаметной программы для рисования векторной графики, функционал SVG-edit постоянно улучшался.

С помощью SVG-edit можно рисовать простые фигуры (линии, прямоугольники, круги, многоугольники, линии от руки и т.д.), использовать пути, слои, градиенты, можно просматривать и редактировать SVG-исходники, экспортировать в PNG, JPEG, BMP, WEBP и т.д.

Заключение

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

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

PS: также можно попробовать Figma. Это больше инструмент для создания UI, а не SVG-редактор. Тем не менее, он имеет отличный набор инструментов и генерирует хорошо оптимизированный код SVG.

Автор: Ada Ivanoff

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Хотите узнать, что необходимо для создания сайта?

Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!

Смотреть

Как работать с форматом SVG: руководство для начинающих…

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

Зачем использовать SVG

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

Масштабирование изображения с сохранением качества pixel perfect

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

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

Сравнение качества растровых и векторных изображений

Возможность модификации

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

Небольшой «вес» файлов

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

Файлы в формате JPG чуть «легче» картинок в PNG, но всё равно они слишком «тяжёлые». А изображения SVG представляют собой код, поэтому они «весят» очень мало. Поэтому смело используйте этот формат для создания иконок, логотипов и других элементов интерфейса.

Доступность

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

Использование SVG: распространённые практики

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

Логотипы и иконки в SVG

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

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

Инфографика

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

Визуальные эффекты

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

Анимация

SVG можно использовать для создания CSS-анимации, поэтому фронтенд-разработчикам не придётся изучать дополнительные техники. Также можно воспользоваться SMIL SVG — инструментом анимации векторных изображений. SMIL обеспечивает разработчикам даже больше возможностей, чем обычная CSS-анимация.

Иллюстрации и рисунки

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

Интерфейсы и приложения

SVG используются для создания сложных интерфейсов, которые интегрируются с насыщенными интернет-приложениями (RIA, rich internet application). Благодаря свойствам формата элементы интерфейса получаются лёгкими, при необходимости анимированными и привлекательными.

Далее речь пойдёт о том, как правильно добавлять файлы SVG на сайт.

Изучайте вёрстку на Хекслете

В рамках профессии «Верстальщик» вы изучите HTML5 и CSS3, научитесь пользоваться Flex, Grid, Sass, Bootstrap. В процессе обучения сверстаете несколько полноценных лендингов и добавите их в портфолио. Базовые курсы в профессии доступны бесплатно.

Использование SVG в HTML и CSS

Файлы в формате SVG можно добавлять на страницы сайта средствами HTML и CSS.

Тег img

Первый способ — URL изображения можно указать в атрибуте src тега img. В этом случае вы работает с форматом так же, как с картинками jpg, png и так далее.

<img src="circle.svg" alt="a red circle" />

Это привычный для большинства разработчиков способ работы с изображениями. Одно из преимуществ — возможность дополнительно использовать тег <a>. С его помощью к изображению можно добавить гиперссылку.

Если вы добавляете изображение через тег img, его можно стилизовать с помощью CSS. Но вы не можете манипулировать элементами изображения с помощью JavaScript и внешних стилей. При этом можно использовать CSS инлайн для изменения кода SVG.

Использование SVG в CSS

Изображения в формате SVG можно указывать в свойстве background-image, как фото в других форматах. Ниже пример кода.

.element { background-image: url(/images/image.svg); }

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

Инлайн SVG в HTML

Файл SVG можно открыть в любом текстовом редакторе, скопировать код и добавить его в HTML-разметку страницы. Это называется использованием SVG инлайн. Пример ниже.

<svg>
  <circle cx="50" cy="50" r="40"stroke="black" 
  stroke-width="4"fill="red" />
</svg>

Такой подход уменьшает количество http-запросов и сокращает время загрузки страницы. В тегах <svg> можно указывать классы и id и использовать их для изменения стилей элемента с помощью CSS.

Использование SVG в формате кода

В SVG-файлах используется основанный на XML язык, который описывает векторные изображения. Как и HTML, это язык разметки. Но код SVG позволяет манипулировать элементами, например, применять к ним эффекты.

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

<svg version="1.1"
     baseProfile="full"
    
     xmlns="http://www.w3.org/2000/svg">
  <rect fill="black" />
  <circle cx="150" cy="100" r="90" fill="blue" />
</svg>

Подробнее о работе с простыми фигурами ниже.

Рисуем с помощью SVG: круг

Чтобы нарисовать круг, необходимо указать три атрибута:

  • Радиус круга — r.
  • Позицию центра круга по оси x — cx.
  • Позицию центра круга по оси y — cy.

Код, с помощью которого можно нарисовать круг, можно посмотреть ниже. Цвет линии и фона можно указывать инлайн или отдельно.

<svg>
  <circle cx="400" cy="300" r="200" stroke="red" fill="transparent" stroke-width="5"/>
</svg>

Круг нарисован с использованием обсуждаемого формата

Рисуем с помощью SVG: прямоугольник

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

<rect x="100" y="100" stroke="black" fill="transparent" stroke-width="5"/>

Прямоугольник нарисован с помощью SVG

Рисуем с помощью SVG: линия

Чтобы нарисовать линию, нужно указать координаты по осям x и y двух точек. Также можно указать цвет и толщину линии. Код ниже наверняка выглядит понятнее объяснения словами.

<line x1="100" x2="500" y1="110" y2="450" stroke="orange" stroke-width="5" />

Прямая линия

Рисуем с помощью SVG: звезда

С помощью SVG можно рисовать звёзды и другие многоугольники. Для этого достаточно указать координаты точек углов фигуры. Пример кода ниже.

<polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30, 180, 45 180"/>

Сложный многоугольник в формате SVG

Рисуем с помощью SVG: пути

С помощью элемента можно рисовать ломаные кривые. Они позволяют создавать объекты разной формы. С помощью атрибута d определяется путь или координаты ломаной линии. Команда M используется для абсолютного позиционирования, а m — для относительного. С помощью команды L определяются координаты новой точки.

Вот пример использования path:

<path d="M 10,10 L 250,250" fill=“transparent" stroke=“black"/>

А это пример нескольких линий, созданных с помощью path:

<path d="M 10,10 L 250,250 30,100 150, 50" fill="transparent" stroke="black"/>

Пути (path) в SVG

Рисуем с помощью SVG: кривые

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

<path d="M50 50 C 50 50, 150 100, 250 50" stroke="black" fill="transparent"/>

С помощью команды S можно объединять кривые и создавать сложные формы.

<path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>

Кривая линия

Читайте также

Когда роботы заменят верстальщиков на рынке труда: большая обзорная статья о профессии с комментариями экспертов.

Как работать с текстом с помощью SVG

Формат SVG позволяет работать с текстом. Для этого применяется тег <text> Пример ниже.

<text x="10" y="10">This is text.</text>

Обычный текст создан с помощью SVG

С помощью свойства stroke можно задать цвет шрифта. Позиция текста на странице определяется координатами x и y. В свойствах stroke и fill можно использовать градиенты.

Как управлять свойствами шрифта с помощью svg

SVG позволяет управлять следующими свойствами шрифта:

  • font-family.
  • font-style.
  • font-weight.
  • font-variant.
  • font-stretch.
  • font-size.
  • font-size-adjust.
  • kerning.
  • letter-spacing.
  • word-spacing.
  • text-decoration.

С помощью тега <tspan> можно выбрать одно или несколько слов в тексте и изменить их свойства.

<text>
  This is <tspan font-weight="bold" fill="red">bold and red</tspan>
</text>

Также SVG позволяет переворачивать текст, менять цвет линии и заполнения букв и выполнять другие трансформации. Ниже пример создания контура текста, написанного справа налево. Последнее определено с помощью свойств direction и unicode-bidi.

<text x="350" y="50">This is text</text>

Перевёрнутый текст

С помощью <textPath> можно связывать текст с путями. Это делается с помощью атрибута xlink:href. Пример кода ниже.

<path d="M 40,40 C 200,100 10,100 520,200" 
fill="transparent" />
<text>
  <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path">
    This Text is Curved
  </textPath>
</text>

Как использовать CSS в SVG

Код CSS можно указывать инлайн в коде SVG. Смотрите пример.

<svg>
 <text>
   This is <tspan font-weight="bold" fill="red">bold and red</tspan>
 </text>
 <style><![CDATA[
  text{
 dominant-baseline: hanging; font: 28px Verdana, Helvetica, Arial, sans-serif;
 }
 ]]></style>
</svg>

Также можно писать CSS в отдельных файлах и применять стили к элементам SVG. Например, в SVG можно указать класс.

<svg viewBox="0 0 400 400">
 <rect x="0" y="0" fill="#56A0D3" />
</svg>

В CSS можно работать с этим классом.

.box { fill: red; }

Вместо заключения: как дела с SVG 2.0

SVG 2.0 активно разрабатывается. Продукт находится в стадии предварительной версии (Candidate Recommendation). Браузеры не полностью поддерживают SVG 2.0. В новой версии добавлены некоторые возможности HTML 5 и WOFF (web open font format). Следить за стадиями разработки SVG 2.0 можно на сайте W3C.

Адаптированный перевод статьи All you need to know about SVG on the web by Richard Mattka. Мнение автора оригинальной публикации может не совпадать с мнением администрации «Хекслета».

python — рисование SVG в Python с путями, а не фигурами или преобразовать их

Я делаю генератор фильтров для микроскопов, сначала он рисует изображения SVG, затем они преобразуются в 3D для 3D-печати.

Я использовал ‘svgwrite’

Однако эта библиотека генерирует SVG с формами (линия, круг и т. Д.), В то время я не знал, но каждая библиотека или программное обеспечение 3D-преобразования нуждается в SVG, чтобы содержать путь.

Есть ли библиотека, которая генерирует SVG-файлы с путем (но позволяет мне в скрипте легко рисовать круги, линии и т. Д.?)

Или есть способ преобразовать эти фигуры SVG в SVG путь?

Пример моего текущего svg с формой:

<?xml version="1.0" encoding="utf-8" ?>
<svg baseProfile="tiny" version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs />
<circle cx="270" cy="270" fill="white" r="135.0" stroke="black" stroke-width="10" />
<circle cx="270" cy="270" r="25.0" />
<line stroke="black" stroke-width="10" x1="270" x2="270" y1="270" y2="135.0" />
<line stroke="black" stroke-width="10" x1="270" x2="405.0" y1="270" y2="347.9423" />
<line stroke="black" stroke-width="10" x1="270" x2="135.0" y1="270" y2="347.9423" />
</svg>

Спасибо.

PS: обратите внимание, что я должен сделать это программно, потому что я намерен создать много фильтров.

11

sliders_alpha
26 Авг 2016 в 14:29

2 ответа

Лучший ответ

Я уже написал кое-что для своих собственных нужд, чтобы обработать некоторые подобные задачи с элементами SVG, такие как оценка ограничивающих рамок, преобразований и так далее. Таким образом, эта задача кажется относительно простой для реализации такого преобразования. Все, что вам нужно для этого, — это только знание того, из чего состоит атрибут пути «d» — на самом деле есть список линий, эллиптических дуг и кривых Безье (вам даже не нужны самые сложные решетки). Смотрите этот полезный учебник, если вы заинтересованы в его настройке — http: //tutorials.jenkov .com / SVG / путь — element.html

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

Он доступен с помощью «pip install svgpathtools» (см. Руководство там) — https://pypi.python.org / PyPI / svgpathtools /

Итак, вы можете изначально создавать высокоуровневые объекты, такие как

Line(start, end)
Arc(start, radius, rotation, large_arc, sweep, end) 
# See docstring for a detailed explanation of these parameters, 
# but you're definetely able to create cirlces that way

А потом просто сделайте из них высокоуровневый объект Path

path = Path(*segemnts)  # segments are decribed above - Line(), Arc(), etc

Теперь вы можете получить строку path.d () и просто создать представление XML, используя нужные атрибуты (обводку, ширину обводки и т. Д.), Поскольку основные данные svg-path хранятся именно в атрибуте «d», значение которого у вас уже есть

Кроме того, указанная вами svgwrite lib также уже предоставляет способ построения представления XML

svgwrite.path.Path(d=path.d(), stroke='black', **extra)  
# **extra is every other common SVG attribute as keyword arguments

Вероятно, даже у svgpathtools он есть (я пока не понял всех его преимуществ)

Спросите меня в комментарии, пожалуйста, если что-то все еще остается без ответа.

3

Nikolay Prokopyev
2 Сен 2016 в 20:57

Линия и Круг имеют прямой перевод к сущности Path, используя MoveTo / LineTo / EllipticalArc.

Это не должно быть много, просто заменить эти строки в исходном коде Xml и сохранить все остальное, самодельным сценарием.

0

Yves Daoust
29 Авг 2016 в 12:35

rect, circle, ellipse, line, polyline, polygon, path — Примеры

Рассмотрены основные фигуры SVG [w3.org]: прямоугольник, круг, эллипс, отрезок, ломанная линия, многоугольник и контур path (команды M (m), Z (z), L (l), H (h), V (v), Q (q), T (t), C (c), S (s), A (a))

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

rect

<svg>
  <rect x="0" y="0" rx="0" ry="0" />
</svg>

Поддерживаемые единицы измерения

Если в вышеназванных атрибутах элемента rect значением является число, то такая запись соответствует числу, указанному в px [w3.org]

В атрибутах width, height, x, y, rx, ry поддерживаются

em равен font-size родителя
ex высота буквы «x»
px пиксели
cm сантиметры
mm миллиметры
in дюймы
pc 1/6 дюйма
pt 1/72 дюйма
% проценты 
<svg>
  <rect/>
</svg>

SVG круг

circle

<svg>
  <circle r="50" cx="0" cy="0" />
</svg>

Поддерживаемые единицы измерения

Если в вышеназванных атрибутах элемента circle значением является число, то такая запись соответствует числу, указанному в px

В атрибутах r, cx, cy поддерживаются

em равен font-size родителя
ex высота буквы «x»
px пиксели
cm сантиметры
mm миллиметры
in дюймы
pc 1/6 дюйма
pt 1/72 дюйма
% проценты 
<svg>
  <circle r="5mm" cx="5mm" cy="5mm" />
</svg>

SVG эллипс

ellipse

<svg>
  <ellipse rx="50" ry="25" cx="0" cy="0" />
</svg>

Поддерживаемые единицы измерения

Если в вышеназванных атрибутах элемента ellipse значением является число, то такая запись соответствует числу, указанному в px

В атрибутах rx, ry, cx, cy поддерживаются

em равен font-size родителя
ex высота буквы «x»
px пиксели
cm сантиметры
mm миллиметры
in дюймы
pc 1/6 дюйма
pt 1/72 дюйма
% проценты 
<svg>
  <ellipse rx="100%" ry="100%" cx="100%"/>
</svg>

SVG отрезок line

<svg>
  <line x1="10" y1="10" x2="90" y2="90" stroke="black" />
</svg>

Поддерживаемые единицы измерения

Если в вышеназванных атрибутах элемента line значением является число, то такая запись соответствует числу, указанному в px

В атрибутах x1, y1, x2, y2 поддерживаются

em равен font-size родителя
ex высота буквы «x»
px пиксели
cm сантиметры
mm миллиметры
in дюймы
pc 1/6 дюйма
pt 1/72 дюйма
% проценты

SVG ломанная линия polyline и многоугольник polygon

<svg>
  <polyline points="10,10 50,100 100,100 140,10" stroke="red" stroke-width="3" />
</svg>

<svg>
  <polygon points="10,10 50,100 100,100 140,10" stroke="red" stroke-width="3" />
</svg>

Онлайн-сервис в тему: генератор точек-координат

SVG path

d контур фигуры

moveto | M или m | начальная точка черты

Команда Имя Параметры Расшифровка Пример
M (абсолютная) moveto x,y координаты точки M10,10
m (относительная) m10,10 
<svg>
  <path d="M 10 10 100 10" stroke="black"/>
</svg>



<svg>
  <path d="M 10,10 100,10" stroke="black"/>
</svg>

<svg>
  <path d="M 10,10 L 100,10" stroke="black"/>
</svg>


<svg>
  <path d="M10,10L100,10" stroke="black"/>
</svg>

<svg>
  <path d="m10,10L100,10" stroke="black"/>
</svg>



<svg>
  <path d="m10,10 90,0" stroke="black"/>
</svg>

<svg>
  <path d="m10,10l90,0" stroke="black"/>
</svg>

<svg>
  <path d="M10,10l90,0" stroke="black"/>
</svg>

Координаты относительных команд рассчитываются не относительно области SVG (40,40 ≠ 40%,40%), а относительно точки начала фрагмента линии (она же стоящая до команды точка)

020406080100ось X020406080100ось Y

<svg>
    <path d="M40,40 100,80" stroke="red"/>
</svg>

<svg>
    <path d="m40,40 60,40" stroke="red"/>
</svg>

количество команд M

<svg>
  <path d="M10,10 50,10M50,50 90,50M90,90 130,90M130,130 170,130" stroke="black" fill="none"/>
</svg>

closepath | Z или z | соединение предшествующей точки с точкой команды M

Команда Имя Параметры Расшифровка Пример
Z closepath отсутствуют Z
z z 
<svg>
  <path d="M10,10 50,100 100,100 140,10" stroke="red" stroke-width="10" />
</svg>

<svg>
  <path d="M10,10 50,100 100,100 140,10z" stroke="red" stroke-width="10" />
</svg>

lineto | L или l, H или h, V или v | соединение прямой линией текущей точки с предшествующей (аналог polyline)

Команда Имя Параметры Расшифровка Пример
L (абсолютная) lineto x,y координаты конца отрезка L50,100
l (относительная) l40,90
H (абсолютная) horizontal lineto x координата конца отрезка по оси X (по оси Y координата такая же как у предыдущей точки) h250
h (относительная) h200
V (абсолютная) vertical lineto y координата конца отрезка по оси Y (по оси X координата такая же как у предыдущей точки) V50
v (относительная) v-50 
<svg>
  <path d="M10,10 50,100 150,100 150,50" stroke="red" stroke-width="3" />
</svg>

<svg>
  <path d="M10,10L50,100L150,100L150,50" stroke="red" stroke-width="3" />
</svg>

<svg>
  <path d="M10,10L50,100H150V50" stroke="red" stroke-width="3" />
</svg>

<svg>
  <path d="m10,10 40,90 100,0 0,-50" stroke="red" stroke-width="3" />
</svg>


<svg>
  <path d="m10,10 40,90 100,0 0-50" stroke="red" stroke-width="3" />
</svg>

<svg>
  <path d="m10,10l40,90l100,0l0-50" stroke="red" stroke-width="3" />
</svg>

<svg>
  <path d="m10,10l40,90h100v-50" stroke="red" stroke-width="3" />
</svg>

quadratic Bézier curveto | Q или q | квадратичная кривая Безье

Команда Имя Параметры Расшифровка Пример
Q (абсолютная) quadratic Bézier curveto x1,y1 x,y координаты управляющей точки 1 и координаты конца кривой Q50,25 190,70
q (относительная) q40-45 180,0 

<svg>
  <path d="M10,70Q50,25 190,70" stroke="red" stroke-width="3"/>
</svg>

<svg>
  <path d="M10,70q40-45 180,0" stroke="red" stroke-width="3"/>
</svg>

<svg>
  <path d="M10,50Q50,5 40,50Q80,5 70,50Q110,5 100,50Q140,5 130,50Q170,5 160,50Q200,5 190,50" stroke="red" stroke-width="3" fill="none"/>
</svg>

<svg>
  <path d="M10,50Q50,5 40,50 80,5 70,50 110,5 100,50 140,5 130,50 170,5 160,50 200,5 190,50" stroke="red" stroke-width="3" fill="none"/>
</svg>

<svg>
  <path d="M10,50q40-45 30,0q40-45 30,0q40-45 30,0q40-45 30,0q40-45 30,0q40-45 30,0" stroke="red" stroke-width="3" fill="none"/>
</svg>

<svg>
  <path d="M10,50q40-45 30,0 40-45 30,0 40-45 30,0 40-45 30,0 40-45 30,0 40-45 30,0" stroke="red" stroke-width="3" fill="none"/>
</svg>

shorthand/smooth quadratic Bézier curveto | T или t | гладкая квадратичная кривая Безье

Команда Имя Параметры Расшифровка Пример
T (абсолютная) shorthand/smooth quadratic Bézier curveto x,y координаты конца кривой T290,150
t (относительная) t140,0 

<svg>
  <path d="M10,150Q50,105 150,150T290,150" stroke="red" stroke-width="3"/>
</svg>

<svg>
  <path d="M10,150Q50,105 150,150t140,0" stroke="red" stroke-width="3"/>
</svg>

<svg>
  <path d="M10,50Q50,5 40,50T70,50T100,50T130,50T160,50T190,50" stroke="red" stroke-width="3" fill="none"/>
</svg>

<svg>
  <path d="M10,50Q50,5 40,50T70,50 100,50 130,50 160,50 190,50" stroke="red" stroke-width="3" fill="none"/>
</svg>

<svg>
  <path d="M10,50Q50,5 40,50t30,0t30,0t30,0t30,0t30,0" stroke="red" stroke-width="3" fill="none"/>
</svg>

<svg>
  <path d="M10,50Q50,5 40,50t30,0 30,0 30,0 30,0 30,0" stroke="red" stroke-width="3" fill="none"/>
</svg>

<svg>
  <path d="M10,70T50,25T190,70" stroke="red" stroke-width="3"/>
</svg>

<svg>
  <path d="M10,70T50,25 190,70" stroke="red" stroke-width="3"/>
</svg>

<svg>
  <path d="M10,70t40,-45t140,45" stroke="red" stroke-width="3"/>
</svg>

<svg>
  <path d="M10,70t40,-45 140,45" stroke="red" stroke-width="3"/>
</svg>

curveto | C или c | кубическая кривая Безье

Команда Имя Параметры Расшифровка Пример
C (абсолютная) curveto x1,y1 x2,y2 x,y координаты управляющей точки 1, координаты управляющей точки 2 и координаты конца кривой C60,10 140,10 190,70
c (относительная) c50-60 130-60 180,0 

<svg>
  <path d="M10,70C60,10 140,10 190,70" stroke="red" stroke-width="3"/>
</svg>

<svg>
  <path d="M10,70c50-60 130-60 180,0" stroke="red" stroke-width="3"/>
</svg>
<svg>
  <g stroke="red" stroke-width="3">
    <path d="M10,50C10,10 140,10 140,50"/>
    <path d="M180,50C150,10 300,10 270,50"/>
    <path d="M10,120C140,90 10,90 140,120"/>
    <path d="M160,120C300,90 150,150 290,120"/>
    <path d="M10,190C120,190 150,120 130,190"/>
    <path d="M160,190C150,220 300,160 290,190"/>
  </g>
</svg>

shorthand/smooth curveto | S или s | гладкая кубическая кривая Безье

Команда Имя Параметры Расшифровка Пример
S (абсолютная) shorthand/smooth curveto x2,y2 x,y координаты управляющей точки 2 и координаты конца кривой S240,195 290,150
s (относительная) s90,45 140,0 

<svg>
  <path d="M10,150C60,105 100,105 150,150S240,195 290,150" stroke="red" stroke-width="3"/>
</svg>

<svg>
  <path d="M10,150C60,105 100,105 150,150s90,45 140,0" stroke="red" stroke-width="3"/>
</svg>



<svg>
  <path d="M10,50S50,5 40,50S80,5 70,50S110,5 100,50S140,5 130,50S170,5 160,50S200,5 190,50" stroke="red" stroke-width="3" fill="none"/>
</svg>

<svg>
  <path d="M10,50S50,5 40,50 80,5 70,50 110,5 100,50 140,5 130,50 170,5 160,50 200,5 190,50" stroke="red" stroke-width="3" fill="none"/>
</svg>

<svg>
  <path d="M10,50s40-45 30,0s40-45 30,0s40-45 30,0s40-45 30,0s40-45 30,0s40-45 30,0" stroke="red" stroke-width="3" fill="none"/>
</svg>

<svg>
  <path d="M10,50s40-45 30,0 40-45 30,0 40-45 30,0 40-45 30,0 40-45 30,0 40-45 30,0" stroke="red" stroke-width="3" fill="none"/>
</svg>

elliptical arc | A или a | дуга (часть) эллипса

Команда Имя Параметры Расшифровка Пример
A (абсолютная) elliptical arc rx ry x-axis-rotation large-arc-flag sweep-flag x y радиус горизонтальной дуги, радиус вертикальной дуги, угол поворота относительно оси X, внутренняя или внешняя дуга, верхняя или нижняя дуга и координаты конца кривой A40,50 0 0,0 150,150
a (относительная) a40,50 0 0,0 50,0 

<svg>
  <path d="M100,150 A40,50 0 0,0 150,150" stroke="red" stroke-width="3"/>
</svg>

<svg>
  <path d="M100,150 a40,50 0 0,0 50,0" stroke="red" stroke-width="3"/>
</svg>


<svg>
  <g stroke="blue" stroke-width="2">
    <path d="M110,70 h-50 a50,50 0 1,0 50-50z" fill="red"/>
    <path d="M100,60 v-50 a50,50 0 0,0-50,50z" fill="yellow"/>
  </g>
</svg>

P.S. сложные фигуры стоит рисовать в SVG редакторах. Полученный код можно оптимизировать (убрать ненужные пробелы). Для этого также разработаны специальные программы. Так как дизайн и я вещи довольно несовместимые, то в SVG меня интересуют в первую очередь простые динамические отзывчивые фигуры: посетитель нажал на элемент, тот изменил свой цвет, форму, что-то ещё. С помощью него их проще сделать, чем с помощью только HTML+CSS.

[Учебное пособие по серии SVG] Рисование прямоугольника SVG

Один<rect>Элемент представляет собой прямоугольник SVG. С помощью этого элемента вы можете рисовать прямоугольники разной ширины, разной высоты, с разными штрихами и разными цветами заливки. В то же время он также может рисовать прямоугольники с прямыми или закругленными углами.

 Простой пример прямоугольника SVG

Ниже рисунокПрямоугольник SVGПростой пример.

<svg xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10"
        style="stroke:#006600; fill: #00cc00"/>
</svg>

Положение прямоугольника SVG определяетсяxс участиемyРешение о собственности. Помните, что это положение относительно положения любого ближайшего к нему родительского элемента.

Размер прямоугольника SVG определяетсяwidthс участиемheightРешение о собственности.

styleСвойства позволяют задать дополнительные стили для прямоугольника, например цвет обводки, ширину обводки и цвет заливки.

На следующем рисунке показан результат, возвращаемый приведенным выше кодом:

 

Прямоугольник с закругленными углами

Мы также можем рисовать прямоугольники SVG со скругленными углами.rxс участиемryАтрибут используется для определения размера скругленных углов прямоугольника.rxАтрибут определяет ширину скругленных углов,ryАтрибут определяет высоту скругления. В приведенном ниже примере для скругленных углов трех прямоугольников установлено значение 5 пикселей, 10 пикселей и 15. Обратите внимание на изменения в размерах соответствующих скругленных углов.

<svg xmlns="http://www.w3.org/2000/svg">
 
    <rect x="10" y="10"
          rx="5" ry="5"
         />
    <rect x="70" y="10"
          rx="10" ry="10"
         />
    <rect x="130" y="10"
          rx="15" ry="15"
         />
</svg>                 

Результат возврата приведенного выше кода выглядит следующим образом:

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

В следующих двух примерахrxУстановлены на 10 пикселей, ноryЗначения установлены на 5 пикселей и 15 пикселей соответственно. Эти два примера показывают ситуацию, когда ширина и высота скругленных углов прямоугольника различны.

<svg xmlns="http://www.w3.org/2000/svg">
 
    <rect x="10" y="10"
          rx="10" ry="5"
         />
    <rect x="130" y="10"
          rx="10" ry="15"
         />
</svg>

Результат возврата приведенного выше кода выглядит следующим образом:

Обводка прямоугольника

ты можешь использоватьstrokeСвойство для установки свойств границы прямоугольника SVG. В следующем примере устанавливается зеленая граница прямоугольника, а ширина границы составляет 3 пикселя.

Результат возврата приведенного выше кода выглядит следующим образом:

Вы также можете использоватьstroke-dasharrayСвойство устанавливает границу прямоугольника в виде пунктирной линии. Взгляните на следующий пример:

Результат возврата приведенного выше кода выглядит следующим образом:

 Закрашенный прямоугольник

ты можешь использоватьfillАтрибут заливки прямоугольника SVG цветом. Например, залить цвет прямоугольника какnone。

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

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

Наконец, вы можете использоватьfill-opacityСвойство для установки прозрачности закрашенного прямоугольника. В следующем примере два предложения частично наложены, а для верхнего прямоугольника задана 50% прозрачность заливки.

<rect x="20" y="20"
     
        />
<rect x="50" y="50"
     
        />

Результат возврата приведенного выше кода выглядит следующим образом:

SVG Учебник

SVG — это масштабируемая векторная графика.

SVG определяет векторную графику в формате XML.

Примеры в каждой главе

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

SVG, пример

Мой первый SVG

Попробуй сам »

Что вы уже должны знать

Прежде чем продолжить, вы должны иметь некоторое общее представление о следующем:

Если вы хотите сначала изучить эти предметы, найдите уроки на нашем
Домашняя страница.

Что такое SVG?

  • SVG — это масштабируемая векторная графика

    • .

  • SVG используется для определения векторной графики для Интернета
  • SVG определяет графику в формате XML
  • Каждый элемент и каждый атрибут в файлах SVG можно анимировать
  • SVG — это рекомендация W3C
  • SVG интегрируется с другими стандартами W3C, такими как DOM и XSL

SVG — это рекомендация W3C

SVG 1.0 стал Рекомендацией W3C 4 сентября 2001 г.

SVG 1.1 стал Рекомендацией W3C 14 января 2003 г.

SVG 1.1 (второе издание) стал рекомендацией W3C 16 августа 2011 года.

Преимущества SVG

Преимущества использования SVG по сравнению с другими форматами изображений (например, JPEG
и GIF):

  • Изображения SVG можно создавать и редактировать с помощью любого текстового редактора
  • изображений SVG можно искать, индексировать, создавать сценарии и сжимать
  • изображения SVG масштабируются
  • изображений SVG можно распечатать с высоким качеством при любом разрешении
  • изображения SVG можно масштабировать
  • SVG графика НЕ ​​теряет качества при увеличении или изменении размера
  • SVG — это открытый стандарт
  • файлы SVG — это чистый XML

Создание изображений SVG

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

Масштабируемая векторная графика: основы рисования

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

Если вы новичок в SVG, возможно, сначала будет полезно прочитать следующие статьи:

Координатная сетка SVG

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

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

  • a viewBox из 0,0 от до 200,100 с линией от 0,0 до 100,50
  • a viewBox из 0,0 до 300,150 с линией от 0,0 до 150,75
  • a viewBox из 0,0 от до 30,15 с линией от 0,0 до 15,7.5 (допускаются доли единицы)

В отличие от математических графиков, система координат SVG начинается в верхнем левом углу (обычно 0,0 ) с осью X, направленной вправо, и осью Y, направленной вниз. Следовательно, точка 100,200 представляет 100 единиц справа от левого края и 200 единиц вниз от верхнего края.

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

SVG XML-документ

Изображение SVG — это документ XML, который следует строгим соглашениям (закрывающие теги, атрибуты в кавычках и т. Д.). Когда в 1999 году были впервые разработаны SVG, файлы требовали объявления XML и DOCTYPE в верхней части документа над корневым элементом :

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

Атрибут xmlns является обязательным.Большинство браузеров позволяют опускать его, когда SVG встроен непосредственно в HTML, хотя это может привести к проблемам, если вы захотите позже манипулировать изображением:

К корневому элементу можно применить множество необязательных атрибутов, но наиболее часто используются следующие:

  • viewBox для установки размеров.

    Прямоугольная область координат задается как "minX minY width height" . например, viewBox = "0 0 600 400" — это блок шириной 600 на 400 с координатами в верхнем левом углу 0,0 .Помните, что это абстрактное пространство; это не относится к пикселям, и ваши элементы рисунка не ограничиваются этими координатами.

  • preserveAspectRatio определяет, как масштабируется окно просмотра.

    Есть много вариантов. Например, preserveAspectRatio = "xMidYMid meet" гарантирует, что середина окна просмотра SVG выровнена с серединой окна просмотра (окно браузера или элемент HTML, содержащий SVG), а изображение соответствует доступному пространству, сохраняя при этом соотношение сторон.

  • высота и ширина задают внутренний размер изображения.

    Например, установка width = "300" будет использовать изображение по умолчанию 300 на 200 пикселей, если его размер не был задан с помощью CSS. Если ширина и высота заданы без установки viewBox , предполагается, что количество SVG-блоков соответствует этому размеру, то есть viewBox = "0 0 300 200" .

За корневым элементом может следовать необязательный заголовок и описание, определенные с помощью элементов title и desc .Базовый документ:

  
   Моя первая масштабируемая векторная графика 
   Экспериментальный SVG от SitePoint.com

Группировка элементов

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

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

Одна группа может иметь любое количество внутренних групп с вложенностью по мере необходимости.

Строки

Одинарная линия между двумя точками рисуется с использованием линии элемент:

  <строка x1 = "10" y1 = "10" x2 = "100" y2 = "200"
stroke = "# 999" stroke-width = "5" stroke-linecap = "round" />

Атрибут stroke-linecap определяет эффект конца строки и принимает значения butt (по умолчанию), round , square или наследовать :

Источник изображения: w3.org

Полилинии

Полилинии определяют набор соединенных отрезков прямых линий:

  <точки ломаной = "580,10 560,390 540,200 520,390 400,390"
stroke = "# c00" stroke-width = "5" stroke-linecap = "round"
stroke-linejoin = "round" fill = "none" />

Атрибут штрих-соединение определяет эффект соединения линий и принимает значения miter (по умолчанию), round , bevel или наследовать :

Источник изображения: w3.org

Полигоны

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

Прямоугольники

Квадратные или закругленные прямоугольники определяются с помощью элемента rect :

Атрибуты x и y определяют верхний левый угол. rx и ry определяют скругление углов по горизонтали и вертикали.

Круги

Круги определяются с помощью центральной точки и радиуса:

  <круг cx = "100" cy = "300" r = "80"
stroke = "# 909" stroke-width = "10" fill = "# f6f" />

Эллипсы

Эллипсы определяются с помощью центральной точки и двух значений радиуса:

  <эллипс cx = "450" ​​cy = "50" rx = "80" ry = "30"
stroke = "# 0cc" stroke-width = "10" fill = "# 0ff" />

Текст

Базовый текст может быть добавлен с помощью элемента текста :

   SVG

Атрибуты x и y определяют левую нижнюю координату первого символа в строке, хотя атрибуты text-anchor и dominant-baseline предлагают больший контроль над размещением.

Пути

Наконец, есть элемент path , который может имитировать любой из вышеперечисленных базовых элементов. Обратитесь к разделу «Как создавать сложные пути в SVG» для получения более подробной информации.

Результат

Наш последний документ SVG содержит следующие элементы:

  
   Моя первая масштабируемая векторная графика 
   Экспериментальный SVG от SitePoint.com 
  
    

    

    

    

    

    

     SVG

Приведенный выше код выглядит так:

Вы можете скачать файл SVG здесь.

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

Вам редко нужно рисовать SVG вручную, поскольку проще использовать графический пакет, такой как Illustrator, Inkscape, SVG-edit или Method Draw. Однако понимание того, как работают основные элементы SVG, может помочь вам оптимизировать изображения или создавать потрясающие изображения на сервере или в JavaScript.

Дополнительные ресурсы:

браузерных редакторов SVG | CSS-уловки

Одна из самых крутых особенностей SVG заключается в том, что, несмотря на все возможности, которые он может делать, это все еще читаемый код. Хотите нарисовать прямоугольник? Это не причудливая цепочка бессмысленных символов, это:

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

Идея, что SVG — это просто разметка, очень нравится некоторым разработчикам.

Вы можете буквально выучить даже тупой на первый взгляд синтаксис SVG . Это просто координаты! С инструкциями, объясняющими, как перейти от координаты к координате. Хотите нарисовать знак плюса? Его можно уменьшить до:

Или получайте удовольствие от препроцессоров, создающих SVG из циклов!

Это заставляет задуматься определенного типа разработчика … Эй! Я мог бы создать приложение, которое помогает создавать и редактировать SVG! Да, конечно, можно.В JavaScript есть все необходимые инструменты. Он с удовольствием выкладывает координирующую информацию о том, где вы щелкаете и еще много чего, и даже перетаскивание стало вещью. Объедините подобные идеи, и вы сможете представить себе полноценное браузерное приложение для создания и редактирования SVG.

Прелесть Интернета в том, что, поскольку вы определенно

можете создать визуальное приложение для создания и редактирования SVG, у многих людей есть .

Возможно, как и следовало ожидать, есть даже довольно много вариантов! Совершенно верно, совершенно бесплатные браузерные инструменты редактирования на основе SVG (вектор).

Я думаю, что многие из нас считали такой инструмент, как Adobe Illustrator, королем замка для векторного редактирования. Или, возможно, это братья с открытым исходным кодом Inkscape. Хотя это по-прежнему отличные инструменты, если вам нужно редактирование SVG, вы можете получить некоторую скорость и сэкономить деньги, проверив эти параметры.

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

Это заслуживает небольшого пояснения. Возможно, вы слышали о Inkscape. Давняя альтернатива программному обеспечению Adobe с открытым исходным кодом, особенно Adobe Illustrator. Обычно Inkscape не требует места в этом списке, поскольку он не основан на браузере. Но оказывается, может быть!

RollApp — это служба, которая помогает запускать Inkscape (и множество других приложений) как всплывающее окно браузера.

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

Я могу сказать вам то, чему я определенно доверяю, — другому браузеру для разработки дизайна под названием Figma. Это несколько из другой категории, поскольку оно больше предназначено для полноценной дизайнерской работы, чем просто редактирования SVG, но это определенно приложение с возможностью работы с векторной графикой.Я буквально усердно поработал в Figma, и она отлично работает. Еще один рассмотреть? Invision Studio, когда она будет открыта для всех.

Карманное руководство

по написанию SVG

Спасибо!

Я хотел бы занять весь этот раздел, чтобы сказать особенное «Большое вам спасибо!» Кому:

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

Scalable Vector Graphics (SVG) — это язык для описания двумерной графики в XML.Эта графика может состоять из контуров, изображений и / или текста, которые можно масштабировать и изменять без потери качества изображения.

Inline SVG относится к встроенному коду, написанному в HTML, для генерации этой графики в браузере, которому и будет посвящена эта книга.

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

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

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

От мелких деталей мазка до начала работы с созданными вручную узорами — это руководство призвано стать универсальным справочником при написании SVG.

Прежде чем начать

Хотя это «Карманное руководство» предназначено для тех, кто уже кое-что знает о HTML и CSS, есть несколько дополнительных вещей, которые будет полезно знать, прежде чем погрузиться в код SVG в вашем любимом браузере, например: информация нужный
внутри фрагмента SVG для правильного рендеринга, как сделать вашу графику максимально доступной, а также знать, как и когда использовать программное обеспечение для векторной графики.

Использование SVG

Есть несколько способов включить SVG в ваши проекты: встроенный, , фоновое изображение,

Источник

Pocket Guide to Writing SVG

Table of Contents

  • Introduction
    • Before You Begin
      • Using SVG
      • Vector Graphic Software
      • Inline SVG
      • SVG User Accessibility
      • General Notes
  • Section 1: Document Organization
    • Organization & Semantics
      • svg Element
      • g Element
      • use Element
      • defs Element
      • symbol Element
    • Stacking Order
  • Section 2: Basic Shapes & Paths
    • Basic Shapes
      • Rectangle
      • Circle
      • Ellipse
      • Line
      • Polyline
      • Polygon
    • The path Element
      • path data
        • moveto
        • closepath
        • lineto
          • L, l
          • H, h
          • V, v
        • Curve Commands
          • Cubic Bézier
          • Quadratic Bézier
          • Elliptical Arc
    • Embeds From Vector Software
  • Section 3: Workspace
    • viewport
    • viewBox
      • preserveAspectRatio
    • Coordinate System Transforms
      • translate
      • rotate
      • scale
      • skew
  • Section 4: Fills & Strokes
    • fill Properties
      • fill-rule
      • fill-opacity
    • stroke Attributes
      • stroke
      • stroke-width
      • stroke-linecap
      • stroke-linejoin
        • stroke-miterlimit
      • stroke-dasharray
      • stroke-dashoffset
      • stroke-opacity
  • Section 5: The text Element
    • Basic Attributes
      • x, y, dx, dy
      • rotate
      • textLength & lengthAdjust
    • The tspan Element
    • Spacing Properties
      • kerning & letter-spacing
      • word-spacing
    • text-decoration
    • text Along a Path
      • textPath Element
      • xlink:href
      • startOffset
  • Section 6: Advanced Features
    • Gradients
      • Linear Gradients
        • stop Nodes
        • x1, y1, x2, y2
        • gradientUnits
        • spreadMethod
        • gradientTransform
        • xlink:href
      • Radial Gradients
      • cx, cy, r
      • fx, fy
    • Patterns
      • Basic Attributes
        • x, y, width, height
        • patternUnits
        • patternContentUnits
      • Nested Patterns
    • Clipping Path
  • Conclusion

Introduction

Scalable Vector Graphics (SVG) is a language for describing two-dimensional graphics in XML. These graphics can consist of paths, images, and/or text that are able to be scaled and resized without losing image quality.

Inline SVG refers to the embedded code written within HTML to generate these graphics in a browser, which will be the focus of this book.

There are many advantages to using SVG this way, including having access to all the graphic’s individual parts for interactivity purposes, generating searchable text, DOM access for direct edits, and promoting user accessibility.

Starting with basic organization and simple shapes, we’ll then continue on to describe the SVG coordinate system or «canvas», painting a graphic’s interior and/or border, transforms, and using and manipulating graphical text. We’ll wrap up by touching on more advanced features such as gradients and patterns.

This guide is meant to provide a quick but thorough introduction to building SVG inline, and while it in no way covers all the available features, it should prove helpful in getting you started. It’s intended for designers and developers looking to add SVG to their workflow in the most accessible way possible.

From small stroke details to getting started with hand crafted patterns, this guide is intended to be an all around “go-to” reference for writing SVG.

Before You Begin

While this «Pocket Guide» is intended for those that already know a thing or two about HTML and CSS, there are a few additional things that will be helpful to know before diving into SVG code in your favorite browser, such as: the information needed within the SVG fragment for proper rendering, how to make your graphics as accessible as possible, and knowing how and when to use vector graphic software.

Using SVG

There are a number of ways to include SVG in your projects: inline, an <img>, a background-image, an <object>, or as Data URI’s. We will be specifically addressing the use of SVG inline which involves writing SVG code within the body of a properly structured HTML document.

So while we will only be addressing inline SVG here, there may be instances where another method may be more appropriate. For example, if you do not need editing abilities of the graphic itself or access to its individual parts, using it as an <img> may better suit your project.

Vector Graphic Software

Vector graphic software options can be useful when looking to create more complex graphics that wouldn’t be reasonable to write «by hand». Software such as Adobe Illustrator, Inkscape, Sketch, iDraw, or WebCode can be useful tools to add to your SVG bag of tricks.

The advantage to these types of tools is that you can export their SVG code and embed it right into your HTML. We’ll touch on that a bit later.

Inline SVG on the Web

For the sake of brevity throughout this book the SVG DOCTYPE, version number, xmlns, and xml:space have been excluded from all code samples.

These attributes specify the version of SVG being used and the namespace of the document. The main thing to remember at this point is that you will generally not need to include these attributes to successfully render your graphic in the browser.

Let’s take a look at these attributes now, in an example of SVG code generated by Illustrator, to ensure this doesn’t take you by surprise when getting started:

<!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" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve">
</svg>

In most instances the DOCTYPE and attributes here within the <svg> element are not necessary and can be eliminated, substantially «cleaning up» your code.

SVG User Accessibility

Utilizing SVG accessibility features is a great habit to form, but again for the sake of brevity, descriptions and titles will not be included within the code throughout the book.

Once you become more experienced writing SVG including these elements is going to make your graphics more accessible to users. For instance, content within the <desc> element allows you to provide a detailed description of a graphic to users with screen readers.

SVG text also provides a huge advantage over traditional raster-based images in terms of accessibility because SVG text is detected and read, and can easily be resized to accommodate specific reading preferences.

General Notes

A couple more general notes before diving in: the fonts used for the demos throughout the book are available through Google Fonts. While you will see this spelled out through font-family here, what you will not see, and will have to include in your document, is the correlating link or @import obtained from Google Fonts.

The examples throughout strictly use pixels and percentages as unit identifiers. Supported length units for SVG are: em, ex, px, pt, pc, cm, mm, in, and percentages.

The SVG code in this book can be added to any text editor and then viewed in any browser that supports inline SVG. While browser support is very strong for SVG in general, this support can become much less consistent with more advanced features like gradients, for example. Can I Use is a great place to check on support for these types of features, but ultimately nothing will beat what you learn through trial and error.

All that being said, you can also copy the code as is, place it into the HTML section of a pen over at CodePen, and instantly see your graphic on the screen. I cannot say enough great things about this tool as it was essentially what got me interested in SVG in the first place. It’s my favorite way to learn: playing, tinkering, and sometimes even failing miserably.

Finally, some examples will have portions of a graphic’s code commented out to minimize the size of the block of code when that particular portion is not related to the topic at hand.

<svg>
	<!--<path d=<this path is commented out> />-->
</svg>

Section 1. Document Organization

SVG details reside within a <svg> element. This element contains several attributes which permit the customization of your graphic’s «canvas». While these attributes are not completely necessary to render an image, omitting them may leave more complex graphics vulnerable when performing across browsers and make them susceptible to not rendering as intended.

As mentioned, inline graphics can be written «by hand», or embedded by accessing the XML code generated by vector graphic software. Either way, proper organization and structure is crucial to writing efficient SVG code, primarily because the order of these graphical elements determines their stacking order.

Organization & Semantics

An SVG document fragment is made up of any number of SVG elements contained within the <svg> element. Organization within this document is crucial. Content within the document can expand rapidly, and proper organization promotes accessibility and efficiency throughout, benefitting both the author and users.

This section will introduce the key to writing SVG — the <svg> element — and review some common attributes that aid in the initial document setup.

svg Element

The <svg> element is classified as both a container and a structural element, and can be used to nest a standalone SVG fragment inside the document. This fragment establishes its own coordinate system.

The attributes used within this element, such as width, height, preserveAspectRatio and viewBox define the canvas for the graphic being written.

When obtaining SVG code from certain vector software there is a lot of additional info within the <svg> element, such as the SVG version number (indicates the SVG language version being used) and DOCTYPE. As I’ve mentioned, that information will not be included in examples throughout this guide, and their exclusion will not prevent your graphics from rendering on the screen.

g Element

The g element is a container element for grouping related graphics together. Utilizing this element in conjunction with description and title elements provides information about your graphic, and aids in organization and accessibility by grouping related graphical components together.

Also, by grouping related elements together you can manipulate the group as a whole versus the individual parts. This is especially handy when animating these elements, for example, as the animation can be applied to the group.

Any element that is not contained within a g is assumed to be its own group.

use Element

The <use> element allows you to reuse elements throughout a document. There are additional attributes that can be included within this element, such as x, y, width, and height, which define the mapping location details of the graphic within the coordinate system.

Using the xlink:href attribute here enables you to call on the element to be reused. For example, if there was a <g> with an id of “apple” containing the image of an apple that needed to be reused this image can be referenced by <use>: <use x="50" y="50" xlink:href="#apple" />.

This element can be a significant time saver and help minimize required code.

defs Element

While <use> permits the reuse of a graphic already rendered, graphics within a <defs> element are not rendered onto the canvas, but are able to be referenced and then rendered through the use of xlink:href.

Graphics are defined within <defs> and can then be used throughout the document by referencing the id of that graphic.

For example, the following code draws a very simple gradient within a rectangle:

	<svg>
		<defs>
  			<linearGradient id="Gradient-1">
    			<stop offset="0%" stop-color="#bbc42a" />
    			<stop offset="100%" stop-color="#765373" />
  			</linearGradient>
		</defs>
		<rect x="10" y="10" width="200" height="100" fill= "url(#Gradient-1)" stroke="#333333" stroke-width="3px" />
	</svg>

The contents of the <defs> has no visual output until called on by referencing its unique id, which in this instance is being done through the fill attribute of the rectangle.

symbol Element

The <symbol> element is similar to <g> as it provides a way to group elements, however, elements within <symbol> have no visual output (like <defs>) until called on with the <use> element.

Also unlike the <g> element, <symbol> establishes its own coordinate system separate from the viewport it’s rendered in.

SVG viewport and viewBox, which establish the coordinate system for the graphics being mapped, will be addressed further in a different section.

Stacking Order

The stacking order of SVG cannot be manipulated by z-index in CSS as other elements within HTML can. The order in which SVG elements are stacked depends entirely on their placement within the document fragment.

The grapes and watermelon below are within the same <svg> element. The watermelon appears in front of the grapes because the group containing the paths that make up the watermelon is listed after the grapes in the document.

<svg>
	<g class="grapes">
		<!--<path <stem path> />-->
		<!--<path <grapes path> />-->
		<!--<path <leaf path> />-->
	</g>
	<g class="watermelon">
		<!--<path <outside path> />-->
		<!--<path <inside path> />-->
		<!--<path <seeds path> />-->
	</g>
</svg>

Stacked watermelon and grapes, watermelon on top

If the group containing the grapes was moved to the end of the document it would then appear in front of the watermelon.

<svg>
	<g class="watermelon">
		<!--<path <outside path> />-->
		<!--<path <inside path> />-->
		<!--<path <seeds path> />-->
	</g>
	<g class="grapes">
		<!--<path <stem path> />-->
		<!--<path <grapes path> />-->
		<!--<path <leaf path> />-->
	</g>
</svg>

Stacked watermelon and grapes, grapes on top

This method of determining stacking order also applies to the individual elements within the group. For example, moving the path of the stem in the grapes image to the end of the group will result in the stem being on top.

Stem on top of grapes

Section 2. Basic Shapes and Paths

Basic SVG shapes can be written by hand in HTML but you may eventually experience the need to use a much more complex graphic inline. These more complex graphics can be created with vector software, but for now let’s look at the basics that can easily be hand coded.

Basic Shapes

SVG contains the following set of basic shape elements: rectangles, circles, ellipses, straight lines, polylines, and polygons. Each element requires a set of attributes before it renders, like coordinates and size details.

Rectangle

The <rect> element defines a rectangle.

	<svg>
		<rect width="200" height="100" fill="#BBC42A" />
	</svg>

Rectangle

The width and height attributes establish the size of the rectangle, while fill sets the interior color for the shape. The numerical values default to pixels and fill would default to black when left unspecified.

Other attributes that can be included are x and y coordinates. These values will move the shape along the appropriate axis according to the dimensions set by the <svg> element.

It is also possible to create rounded corners by specifying values within rx and ry attributes. For example, rx="5" ry="10" will produce horizontal sides of corners that have a 5px radius, and vertical sides of corners that have a 10px radius.

Circle

The <circle> element is mapped based on a center point and an outer radius.

	<svg>
		<circle cx="75" cy="75" r="75" fill="#ED6E46" />
	</svg>

Line

The cx and cy coordinates establish the location of the center of the circle in relation to the workplace dimensions set by the <svg>.

The r attribute sets the size of the outer radius.

Ellipse

An <ellipse> element defines an ellipse that is mapped based on a center point and two radii.

	<svg>
		<ellipse cx="100" cy="100" rx="100" ry="50" fill="#7AA20D" />
	</svg>

Ellipse

While the cx and cy values are establishing the center point based on pixel distance into the SVG coordinate space, the rx and ry values are defining the radius of the sides of the shape.

Line

The <line> element defines a straight line with a start and end point.

	<svg>
		<line x1="5" y1="5" x2="100" y2="100" stroke="#765373" stroke-width="8"/>
	</svg>

Line

Together the x1 and y1 values establish the coordinates for the start of the line, while the x2 and y2 values establish the end of the line.

Polyline

The <polyline> element defines a set of connected straight line segments, generally resulting in an open shape (start and end points that do not connect).

	<svg>
		<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill="white" 			stroke="#BBC42A" stroke-width="6" />
	</svg>

Polyline

The values within points establish the shape’s location on the x and y axis throughout the shape and are grouped as x,y throughout the list of values.

An odd number of points here is an error.

Polygon

A <polygon> element defines a closed shape consisting of connected lines.

	<svg>
		<polygon points="50,5 100,5 125,30 125,80 100,105 50,105 25,80 25,30" 					fill="#ED6E46" />
	</svg>

Polygon

The points of the polygon shape are defined through a series of eight grouped x,y values.

This element can also produce other closed shapes depending on the number of defined points.

The path Element

SVG paths represent the outline of a shape. This shape can be filled, stroked, used to navigate text, and/or used as a clipping path.

Depending on the shape this path can get very complex, especially when there are many curves involved. Gaining a basic understanding of how they work and the syntax involved, however, will help make these particular paths much more manageable.

path data

The path data is contained in a d attribute within a <path> element, defining the outline for a shape: <path d="<path data specifics>" />.

This data included within the d attribute spell out the moveto, line, curve, arc and closepath instructions for the path.

The <path> details below define the path specifics for a graphic of a lime:

<svg width="258px" height="184px">
	<path fill="#7AA20D" stroke="#7AA20D" stroke-width="9" stroke-linejoin="round" d="M248.761,92c0,9.801-7.93,17.731-17.71,17.731c-0.319,0-0.617,0-0.935-0.021c-10.035,37.291-51.174,65.206-100.414,65.206 c-49.261,0-90.443-27.979-100.435-65.334c-0.765,0.106-1.531,0.149-2.317,0.149c-9.78,0-17.71-7.93-17.71-17.731 c0-9.78,7.93-17.71,17.71-17.71c0.787,0,1.552,0.042,2.317,0.149C39.238,37.084,80.419,9.083,129.702,9.083	c49.24,0,90.379,27.937,100.414,65.228h0.021c0.298-0.021,0.617-0.021,0.914-0.021C240.831,74.29,248.761,82.22,248.761,92z" />
</svg>

Lime's path

moveto

The moveto commands (M or m) establish a new point, as lifting a pen and starting to draw in a new location on paper would. The line of code comprising the path data must begin with a moveto command, as shown in the above example of the lime.

moveto commands that follow the initial one represent the start of a new subpath, creating a compound path. An uppercase M here indicates absolute coordinates will follow, while a lowercase m indicates relative coordinates.

closepath

The closepath (Z or z) ends the current subpath and results in a straight line being drawn from that point to the initial point of the path.

If the closepath is followed immediately by a moveto, these moveto coordinates represent the start of the next subpath. If this same closepath is followed by anything other than moveto, the next subpath begins at the same point as the current subpath.

Both an uppercase or lowercase z here have identical outcomes.

lineto

The lineto commands draw straight lines from the current point to a new point.

L, l

The L and l commands draw a line from the current point to the next provided point coordinates. This new point then becomes the current point, and so on.

An uppercase L signals that absolute positioning will follow, while a lowercase l is relative.

H, h

The H and h commands draw a horizontal line from the current point.

An uppercase H signals that absolute positioning will follow, while a lowercase h is relative.

V, v

The V and v commands draw a vertical line from the current point.

An uppercase V signals that absolute positioning will follow, while a lowercase v is relative.

Curve Commands

There are three groups of commands that draw curved paths: Cubic Bézier (C, c, S, s), Quadratic Bézier (Q, q, T, t), and Elliptical arc (A, a).

The following curve sections will introduce the basic concept behind each curve command, review the mapping details, and then provide a diagram for further understanding.

Cubic Bézier

The C and c Cubic Bézier commands draw a curve from the current point using (x1,y1) parameters as a control point at the beginning of the curve and (x2,y2) as the control point at the end, defining the shape details of the curve.

The S and s commands also draw a Cubic Bézier curve, but in this instance there is an assumption that the first control point is a reflection of the second control point.

Cubic Bézier

The following code draws a basic Cubic Bézier curve:

<svg>
	<path fill="none" stroke="#333333" stroke-width="3" d="M10,55 C15,5 100,5 100,55" />
</svg>

Manipulating the first and last sets of values for this curve will impact its start and end location, while manipulating the two center values will impact the shape and positioning of the curve itself at the beginning and end.

The S and s commands also draw a Cubic Bézier curve, but in this instance there is an assumption that the first control point is a reflection of the last control point for the previous C command. This reflection is relative to the start point of the S command.

S Command Reflection

An uppercase C signals that absolute positioning will follow, while a lowercase c is relative. This same logic applies to S and s.

Quadratic Bézier

Quadratic Bézier curves (Q, q, T, t) are similar to Cubic Bézier curves except that they only have one control point.

Quadratic Bézier

The following code draws a basic Quadratic Bézier curve:

<svg>
	<path fill="none" stroke="#333333" stroke-width="3" d="M20,50 Q40,5 100,50" />
</svg>

Manipulating the first and last sets of values, M20,50 and 100,50, impacts the positioning of the beginning and end points of the curve. The center set of values, Q40,5, define the control point for the curve, establishing its shape.

Q and q draw the curve from the initial point to the end point using (x1,y1) as the control. T and t draw the curve from the initial point to the end point by assuming that the control point is a reflection of the control on the previously listed command relative to the start point of the new T or t command.

T Command Control Point

An uppercase Q signals that absolute positioning will follow, while a lowercase q is relative. This same logic applies to T and t.

Elliptical Arc

An Elliptical Arc (A, a) defines a segment of an ellipse. These segments are created through the A or a commands which create the arc by specifying the start point, end point, x and y radii, rotation, and direction.

Here is a look at the code for a basic Elliptical Arc:

<svg>
	<path fill="none" stroke="#333333" stroke-width="3" d="M65,10 a50,25 0 1,0 50,25" />
</svg>

The first and last sets of values within this path, M65,10 and 50,25 represent initial and final coordinates, while the second set of values define the two radii. The values of 1,0 (large-arc-flag and sweep-flag) determine how the arc is drawn, as there are four different options here.

The following diagram shows the four arc options and the impact that large-arc-flag and sweep-flag values have on the final rendering of the arc segment.

Elliptical Arc

Embeds From Vector Software

Vector graphics software allows for the generation of more complex shapes and paths while producing SVG code that can be taken, used, and manipulated elsewhere.

Once the graphic is complete, the generated XML code, which can be quite lengthy depending on the complexity, can be copied and embedded into HTML. Breaking down each section of the SVG and having the right organizational elements in place can greatly help in navigating and understanding these seemingly complex and wordy documents.

Here is the SVG code for an image of some cherries with added classes for enhanced navigation:

	<svg width="215px" height="274px" viewBox="0 0 215 274">
		<g>
			<path class="stems" fill="none" stroke="#7AA20D" stroke-width="8" stroke-linecap="round" stroke-linejoin="round" d="M54.817,169.848c0,0,77.943-73.477,82.528-104.043c4.585-30.566,46.364,91.186,27.512,121.498" />
			<path class="leaf" fill="#7AA20D" stroke="#7AA20D" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" d="M134.747,62.926c-1.342-6.078,0.404-12.924,5.762-19.681c11.179-14.098,23.582-17.539,40.795-17.846 c0.007,0,22.115-0.396,26.714-20.031c-2.859,12.205-5.58,24.168-9.774,36.045c-6.817,19.301-22.399,48.527-47.631,38.028 C141.823,75.784,136.277,69.855,134.747,62.926z" />
		</g>
		<g>
			<path class="r-cherry" fill="#ED6E46" stroke="#ED6E46" stroke-width="12" d="M164.836,193.136 c1.754-0.12,3.609-0.485,5.649-1.148c8.512-2.768,21.185-6.985,28.181,3.152c15.076,21.845,5.764,55.876-18.387,66.523 c-27.61,12.172-58.962-16.947-56.383-45.005c1.266-13.779,8.163-35.95,26.136-27.478	C155.46,191.738,159.715,193.485,164.836,193.136z" />
			<path class="l-cherry" fill="#ED6E46" stroke="#ED6E46" stroke-width="12" d="M55.99,176.859 c1.736,0.273,3.626,0.328,5.763,0.135c8.914-0.809,22.207-2.108,26.778,9.329c9.851,24.647-6.784,55.761-32.696,60.78 c-29.623,5.739-53.728-29.614-44.985-56.399c4.294-13.154,15.94-33.241,31.584-20.99C47.158,173.415,50.919,176.062,55.99,176.859z" />
		</g>
	</svg>

Cherries

The attributes within the svg element define the workspace, or “canvas” for the graphic. The leaf and the stems are within one <g> (group), while the cherries are in another. The string of numerical values define the path the graphic will take and the fill and stroke attributes set the color for the backgrounds and borders.

Once this code is copied it can be run through an SVG optimizer before being placed in HTML, which will help eliminate unnecessary code and spacing and in turn greatly reduce the file size. Peter Collingridge’s SVG Optimiser or SVGO are tools that are very helpful in this regard.

Section 3. The Workspace

Perhaps the most important aspect of SVG, after understanding its general structure and how to create basic shapes, is getting a grasp of the workspace in use, or in other words, the coordinate system to which the graphics will be mapped.

Understanding the workspace of SVG is helpful in properly rendering your artwork, but becomes crucial once you get into more advanced SVG features. For example, the mapping of gradients and patterns relies heavily on the established coordinate system. This workspace is defined by the dimensions of the viewport and viewBox attributes.

This pear, happily, has a matching viewport and viewBox:

	<svg width="115" height="190" viewBox="0 0 115 190">
		<!--<path <pear's drawing path> />-->
	</svg>

Pear

The entire pear is visible in the browser and will scale accordingly when the viewport dimensions are changed.

viewport

The viewport is the visible section of an SVG. While SVG can be as wide or as high as you wish, limiting the viewport will mean that only a certain section of the image can be visible at a time.

The viewport is set through height and width attributes within the <svg>.

If these values are not defined, the dimensions of the viewport will generally be determined by other indicators within the SVG, like the width of the outermost SVG element. However, leaving this undefined leaves our artwork susceptible to being cut off.

viewBox

The viewBox allows for the specification that a given set of graphics stretch to fit a particular container element. These values include four numbers separated by commas or spaces: min-x, min-y, width, and height that should generally be set to the bounds of the viewport.

The min values represent at what point within the image the viewBox should start, while the width and height establish the size of the box.

If we choose not to define a viewBox the image will not scale to match the bounds set by the viewport.

If 50px were taken off the width and height of the pear image viewBox, the portion of the pear that is visible is reduced, but then what is left visible will scale to fit to the bounds of the viewport.

	<svg width="115px" height="190px" viewBox="0 0 65 140">
		<!--<path <pear's drawing path> />-->
	</svg>

Pear

The min values within the viewBox define the origin of the viewBox within the parent element. In other words, the point within the viewBox at which you want it to begin matching up the viewport. In the above pear image, the min values are set to 0,0 (top left). Let’s change these to 50, 30: viewBox="50 30 115 190".

	<svg width="115" height="190" viewBox="50 30 115 190">
		<!--<path <pear's drawing path> />-->
	</svg>

Pear

The viewBox now starts 50px in from the x axis and 30px in from the y axis. In altering these values the section of the pear that is focused on has changed.

preserveAspectRatio

If the viewport and viewBox do not have the same width to height ratio, the preserveAspectRatio attribute directs the browser how to display the image.

preserveAspectRatio takes two parameters, <align> and <meetOrSlice>. The first parameter takes two parts and directs the viewBox‘s alignment within the viewport. The second is optional and indicates how the aspect ratio is to be preserved.

preserveAspectRatio="xMaxYMax meet"

These values will align the bottom right corner of the viewBox to the bottom right corner of the viewport. meet preserves the aspect ratio by scaling the viewBox to fit within the viewport as much as possible.

There are three <meetOrSlice> options: meet (default), slice, and none. While meet ensures complete visibility of the graphic (as much as possible), slice attempts to fill the viewport with the viewBox and will then slice off any part of the image that does not fit inside the viewport after this scaling. none results in no preserved aspect ratio and a potentially distorted image.

Perhaps the most straightforward value here is «none», which establishes that uniform scaling should not be applied. If we then increase the pixel values of the viewport, the below image of cherries will stretch non-uniformly and look distorted.

	<svg width="500" height="400" viewBox="0 0 250 600" preserveAspectRatio="none">
		<!--<path <cherry drawing path> />-->
	</svg>

Cherries

The preserveAspectRatio for the image below is set to xMinYMax meet which is aligning the bottom left corner of the viewBox to the bottom left corner of the viewport (which is now outlined). meet is ensuring the image is scaling to fit inside the viewport as much as possible.

	<svg width="350" height="150" viewBox="0 0 300 300" preserveAspectRatio="xMinYMax meet" style="border: 1px solid #333333;">
		<!--<path <cherry drawing path> />-->
	</svg>

Cherries

Here are the same cherries when meet is changed to slice:

	<svg width="350" height="150" viewBox="0 0 300 300" preserveAspectRatio="xMinYMax slice" style="border: 1px solid #333333;">
		<!--<path <cherry drawing path> />-->
	</svg>

Cherries

Note that the alignment values do not have to correlate.

	<svg width="350" height="150" viewBox="0 0 300 300" preserveAspectRatio="xMinYMid slice" style="border: 1px solid #333333;">
		<!--<path <cherry drawing path> />-->
	</svg>

Cherries

The above example has a preserveAspectRatio of xMinYMid slice; the cherries are now aligned along the middle of the y axis of the viewport.

Coordinate System Transforms

SVG enables the additional altering of graphics such as rotation, scaling, moving, and skewing through the use of transforms. The SVG author can apply transforms to individual elements or to an entire group of elements.

These functions are included within the element to be manipulated and reside within the <transform> attribute. Multiple transforms can be used by including several functions inside this attribute, for example: transform="translate(<tx>,<ty>) rotate(<rotation angle>)" />.

Something important to keep in mind when transforming SVG is that it will impact your coordinate system, or workspace. This is because transforms create a new user space by essentially copying the original and then placing the transformation on the new system itself.

The following image demonstrates the coordinate system transform that takes place when placing a translation of (100,100) on the group containing the graphic:

Translated coordinate system

The coordinate system itself has been translated and the image of the lime and lemon has maintained its original positioning within this system. The new user coordinate system has its origin at location (100,100) in the original coordinate system.

Because of this relationship with the coordinate system, many of these functions will move the graphic even if you are not directly setting a translation on it. For example, attempting to triple an image’s size by including a scale value of «3» is multiplying the x and y coordinates by «3» and the image is scaling along with it, moving it across the screen in the process.

In the case of nested transforms the effects are cumulative, so the final transform on a child element will be based on the accumulation of the transforms before it.

translate

The translate function specifies the details of moving a shape, and the two numerical values included here direct movement along both the x and y axis: transform="translate(<tx>,<ty>)". These values can be separated by either whitespace or commas.

The y value here is optional and if omitted a value of «0» is assumed.

rotate

A value within rotate will specify the shape’s rotation at its point of origin (in degrees), which for SVG is 0,0 (top left): transform="rotate(<rotation angle>)".

There is also an option here to include x and y values: transform=rotate(<rotation angle> [<cx>,<cy>]). If supplied, these values establish a new center of rotation other than what is defaulted to (which is 0,0).

Here is an apple before and after having a 20 degree rotation applied: transform="rotate(20)".
Note that this image does not reflect the coordinate change this transform makes.

Rotated apple

scale

Scaling allows the resizing of SVG elements through the use of the scale function. This function accepts one or two values which specify horizontal and vertical scaling amounts along the appropriate axis: transform="scale(<sx> [<sy>])".

The sy value is optional and if omitted it is assumed to be equal to sx to ensure consistent resizing.

A scale value of «.5» would render a graphic half the size it was originally, while a value of «3» would triple this initial size. A value of «4,2» would scale a graphic four times its original width, and two times its original height.

skew

SVG elements can be skewed, or made crooked, through the use of the skewX and skewY functions. The value included within these functions represents a skew transformation in degrees along the appropriate axis.

Here is a look at an apple before and after adding a skewX value of «20»: transform="skewX(20)". Note that this image does not reflect the coordinate change this transform makes.

Skewed apple

Section 4. Fills and Strokes

fill and stroke allow us to paint to the interior and border of SVG.

«Paint» refers to the action of applying colors, gradients, or patterns to graphics through fill and/or stroke.

fill Properties

The fill attribute paints the interior of a specific graphical element. This fill can consist of a solid color, gradient, or pattern.

The interior of a shape is determined by examining all subpaths and specifications spelled out within the fill-rule.

When filling a shape or path, fill will paint open paths as if the last point of the path connected with the first, even though a stroke color on this section of the path would not render.

fill-rule

The fill-rule property indicates the algorithm to be used in determining which parts of the canvas are included inside the shape. This is not always straightforward when working with more complex intersecting or enclosed paths.

The accepted values here are nonzero, evenodd, inherit.

nonzero

A value of nonzero determines the inside of a point on the canvas by drawing a line from the area in question through the entire shape in any direction and then considering the locations where a segment of the shape crosses this line. This starts with zero and adds one each time a path segment crosses the line from left to right and subtracts one each time a path segment crosses the line from right to left.

If the result is zero after evaluating and counting these intersections then the point is outside the path, otherwise it is inside.

nonzero fill-rule

Essentially, if the interior path is drawn clockwise it will be considered as «inside», but if drawn counter-clockwise it will be considered «outside» and therefore be excluded from painting.

evenodd

A value of evenodd determines the inside of an area on the canvas by drawing a line from that area through the entire shape in any direction and counts the path segments that the line crosses. If this results in an odd number the point is inside, if even the point is outside.

evenodd fill-rule

Given the specific algorithm of the evenodd rule, the drawing direction of the interior shape in question is irrelevant, unlike with nonzero, as we are simply counting the paths as they cross the line.

While this property is not generally necessary, it will allow for greater fill control of a complex graphic, as mentioned.

inherit

A value of inherit will direct the element to take on the fill-rule specified by its parent.

fill-opacity

The fill-opacity value refers to the opacity level of the interior paint fill. A value of «0» results in complete transparency, «1» applies no transparency, and values in between represent a percentage-based level of opacity.

Stroke Attributes

There are a number of stroke-related attributes within SVG that allow for the control and manipulation of stroke details. The abilities of these attributes provide for greater control of hand-coded SVG, but also prove convenient when needing to make edits to an existing embedded graphic.

The following examples use an inline SVG of grapes. The attributes being used reside directly within the correlating shape’s element.

stroke

The stroke attribute defines the “border” paint of particular shapes and paths.

The following grapes image has a purple stroke: stroke="#765373".

Grapes

stroke-width

The stroke-width value establishes the width of the grape’s stroke, which is set to 6px on the grapes image.

The default value for this attribute is 1. If a percentage value is used, the value is based on the dimensions of the viewport.

stroke-linecap

stroke-linecap defines which shape the end of an open path will take and there are four acceptable values: butt, round, square, inherit.

Grapes

A value of inherit will direct the element to take on the stroke-linecap specified by its parent.

The stem in the following image has a stroke-linecap value of square:

<svg>
	<!--<path <path for grapes> />-->
	<!--<path stroke-linecap="square" <path for stem> />-->
	<!--<path <path for leaf> />-->
</svg>

Grapes

stroke-linejoin

stroke-linejoin defines how the corners of strokes will look on paths and basic shapes.

Grapes

Here is a look at the grapes with a stroke-linejoin of "bevel":

<svg>
	<!--<path stroke-linejoin="bevel" <path for grapes> />-->
	<!--<path <path for stem> />-->
	<!--<path <path for leaf> />-->
</svg>

Grapes

stroke-miterlimit

When two lines meet at a sharp angle and are set to a stroke-linejoin="miter", the stroke-miterlimit attribute allows for the specification of how far this joint/corner extends.

The length of this joint is called the miter length, and it is measured from the inner corner of the line join to the outer tip of the join.

This value is a limit on the ratio of the miter length to the stroke-width.

1.0 is the smallest possible value for this attribute.

The first grape image is set to stroke-miterlimit="1.0", which creates a bevel effect. The stroke-miterlimit on the second image is set to 4.0.

Grapes

stroke-dasharray

The stroke-dasharray attribute turns paths into dashes rather than solid lines.

Within this attribute you can specify the length of the dash as well as the distance between the dashes, separated with commas or whitespace.

If an odd number of values are provided, the list is then repeated to produce an even number of values. For example, 8,6,4 becomes 8,6,4,8,6,4 as shown in the second grapes image below.

Placing just one number within this value results in a space between the dashes that is equal to the length of a dash.

Grapes

The first grapes image here shows the impact that an even number of listed values has on the grape’s path: stroke-dasharray="20,15,10,8".

stroke-dashoffset

stroke-dashoffset specifies the distance into the dash pattern to start the dash.

<svg>
	<!--<path stroke-dasharray="40,10" stroke-dashoffset="35" <path for grapes> />-->
	<!--<path <path for stem> />-->
	<!--<path <path for leaf> />-->
</svg>

Grapes

In the example above, there is a dash set to be 40px long, and a dashoffset of 35px. At the starting point of the path the dash will not become visible until 35px in to the first 40px dash, which is why the first dash appears significantly shorter.

stroke-opacity

The stroke-opacity attribute allows for a transparency level to be set on strokes.

The value here is a decimal number between 0 and 1, with 0 being completely transparent.

Section 5. The text Element

The <text> element defines a graphic consisting of text. There are a number of attribute options for customization of this text, and gradients, patterns, clipping paths, masks, or filters can also be applied.

Writing and editing <text> in SVG provides a very powerful ability to create scalable text as graphics that can be easily changed and edited within the SVG code.

Remember to be mindful of viewport dimensions when working through the examples in this section. The viewport, as mentioned, will determine the visible portion of the SVG and it may be necessary to change the viewport depending on the alteration specifics.

Basic Attributes

SVG text attributes reside within the <text> element, which resides inside the <svg> element. Through these attributes we can control some basic styling for our text as well as completely spell out its mapping details on the canvas, enabling full control of its placement on the screen.

x, y, dx, dy

The first letter within a <text> element is rendered according to the established x and y values. While the x value determines where to start the text along the x axis, the y value determines the horizontal location of the bottom of the text.

While x and y establish coordinates in an absolute space, dx and dy establish relative coordinates. This is especially handy when used in conjunction with the <tspan> element, which will be discussed further in an upcoming section.

	<svg width="620" height="100">
		<text x="30" y="90" fill="#ED6E46" font-size="100" font-family="'Leckerli One', cursive">Watermelon</text>
	</svg>

Watermelon Text

The above text starts 30px into the viewport of the SVG, and the bottom of the text is set 90px in from the top of this viewport: x="30" y="90".

rotate

A rotation can be placed on the individual letters/symbols, and/or on the element as a whole.

A single value within the rotate attribute results in each glyph rotating at that value. A string of values can also be used to target and assign a different rotation value to each letter. If there are not enough values to match the number of letters, the last value sets the rotation for the remaining characters.

The text below has a rotation set on the entire graphic through the transform element, but also a value for each glyph: rotate="20,0,5,30,10,50,5,10,65,5".

	<svg width="600" height="250">
		<text x="30" y="80" fill="#ED6E46" font-size="100" rotate="20,0,5,30,10,50,5,10,65,5" transform="rotate(8)" font-family="'Leckerli One', cursive">Watermelon</text>
	</svg>

Watermelon Text

textLength & lengthAdjust

The textLength attribute specifies the length of the text. The length of the text will adjust to fit the length specified within this attribute by altering the space between the provided characters.

The following example has a textLength value of 900px. Notice that the spacing between the characters has increased to fill this space.

	<svg width="950" height="100">
		<text x="30" y="90" fill="#ED6E46" font-size="100" textLength="900" font-family="'Leckerli One', cursive">Watermelon</text>
	</svg>

Watermelon Text

When used in conjunction with the lengthAdjust attribute, it can be specified that both the letter spacing and glyph size should adjust to fit to these new length values.

A value of "spacing" results in an image that resembles the example above where the spacing between the characters has expanded to fill the space: ‘lengthAdjust=”spacing”’.

A value of "spacingAndGlyphs" directs both the spacing and the glyph size to adjust accordingly: lengthAdjust="spacingAndGlyphs".

Watermelon Text

The tspan Element

The <tspan> element is significant because SVG does not currently support automatic line breaks or word wrapping. <tspan> allows us to draw multiple lines of text by singling out certain words or characters to then be manipulated independently.

Instead of defining a new coordinate system for these additional lines, the <tspan> element positions these new lines of text in relation to the previous line of text.

The <tspan> element has no visual output on its own, but by specifying more details within the elements we can single out this particular text and have more control over its design and positioning.

In the example below «are» and «delicious» are located within separate <tspan> elements within the <text> element. By using dy within each of these spans, we are positioning the word along the y axis in relation to the word before it.

While «are» is positioned -30px from «Watermelons», «delicious» is positioned 50px from «are».

	<svg width="775" height="500">
		<text x="15" y="90" fill="#ED6E46" font-size="60" font-family="'Leckerli One', cursive"> Watermelons
  			<tspan dy="-30" fill="#bbc42a" font-size="80">are</tspan>
  			<tspan dy="50">delicious</tspan>
		</text>
	</svg>

Watermelon Text

You can also move each glyph individually through a list of values, as shown in the example below. The letter/symbol is then moved according to the position of the letter/symbol before it, and «delicious» is now positioned according to the «e» in «are».

Watermelon Text

The tspan containing “are” has the following list of dy values: dy="-30 30 30".

Spacing Properties

There are a number of properties available when using the <text> element within inline SVG that control the spacing of words and letters, similar to the capabilities of vector graphic software.

Understanding how to use these properties helps ensure graphics are displayed exactly as intended.

kerning & letter-spacing

Kerning refers to the process of adjusting the spacing between characters. The kerning property allows us to adjust this space based on the kerning tables that are included in the font being used, or set a unique length.

A value of auto indicates that the inter-glyph spacing should be based on the kerning tables that are included in the font being used.

The example below has a kerning value of auto, which in this instance has no visual impact since it is the default value.

	<svg width="420" height="200">
		<text x="2" y="50%" fill="#ef9235" font-size="100" font-family="'Raleway', sans-serif" font-weight="bold" kerning="auto">Oranges</text>
	</svg>

Oranges Text

Adjusting the length between these characters can be done by simply including a numerical value: kerning="30".

Oranges Text

A value of inherit is also valid.

letter-spacing has value options of normal, <length>, or inherit. A numerical value here will have the same impact on the spacing as kerning. The letter-spacing property is intended to be used as supplemental spacing to any spacing already in effect from kerning.

word-spacing

Th word-spacing property specifies the spacing between words.

<svg width="750" height="200">
	<text x="2" y="50%" fill="#ef9235" font-size="70" font-family="'Raleway', sans-serif" word-spacing="30">Oranges are Orange</text>
</svg>

Oranges Text

Other valid values here are normal (default), and inherit.

text-decoration

The text-decoration property permits the use of underline, overline, and line-through in SVG text.

While drawing order does not always have an impact on visual output in SVG, the order does matter in regards to text-decoration. All text decoration values, except line-through, should be drawn before the text is filled and/or stroked; this renders the text on top of the decorations.

line-through should be drawn after the text is filled and/or stroked, rendering the decoration on top of the text.

Here is a look at text-decoration="underline" and text-decoration="line-through".

Pears Text

text Along a Path

As mentioned, inline SVG provides us with advanced customization options that are similar to the capabilities of vector graphic software. Within the SVG code itself we can position text exactly as we want it to render on the screen.

In taking this manipulation even further, SVG <text> can be set to follow a given <path> element.

The textPath Element

The textPath element is where all the magic of this feature resides. While SVG text would generally reside within a <text> element, it will now reside within a <textPath> element within the <text> element.

This <textPath> will then call on the chosen path’s id which is hanging out in a <defs> element waiting to be used.

The basic syntax:

<svg>
	<defs>
		<path id="testPath" d="<....>"/>
    </defs>
   <text>
  		<textPath xlink:href="#testPath">Place text here</textPath>
   </text>
</svg>

Here is a look at the vector path to be used in the code below:

Simple path

After generating this path in vector graphic software the SVG <path> element code itself (which will not include color like shown above) can be copied and placed within the <defs> element in the <svg>, which is also shown in the code above.

Simple path with text

<svg width="620" height="200">
	 <defs>
		<path id="testPath" d="M3.858,58.607 c16.784-5.985,33.921-10.518,51.695-12.99c50.522-7.028,101.982,0.51,151.892,8.283c17.83,2.777,35.632,5.711,53.437,8.628 c51.69,8.469,103.241,11.438,155.3,3.794c53.714-7.887,106.383-20.968,159.374-32.228c11.166-2.373,27.644-7.155,39.231-4.449" />
     </defs>
 	 <text x="2" y="40%" fill="#765373" font-size="30" font-family="'Lato', sans-serif">
 		<textPath xlink:href="#testPath">There are over 8,000 grape varieties worldwide.</textPath>
 	 </text>
</svg>
xlink:href

The xlink:href attribute in a <textPath> allows us to reference the path to which the text will be rendered on.

startOffset

The startOffset attribute represents a text offset length from the start of the path. A value of «0%» indicates the start point of the path, while «100%» indicates the end point.

The example below has a startOffset of «20%» which pushes the text to begin 20% in along the path. The font size has been decreased to prevent it from rendering out of the viewport when moved.

Adding color to the path’s stroke via the <use> element can aid in understanding what exactly is happening here.

	<svg width="620" height="200">
 		<defs>
			<path id="testPath" d="M3.858,58.607 c16.784-5.985,33.921-10.518,51.695-12.99c50.522-7.028,101.982,0.51,151.892,8.283c17.83,2.777,35.632,5.711,53.437,8.628 c51.69,8.469,103.241,11.438,155.3,3.794c53.714-7.887,106.383-20.968,159.374-32.228c11.166-2.373,27.644-7.155,39.231-4.449" />
		</defs>
		<use xlink:href="#testPath" fill="none" stroke="#7aa20d" stroke-width="2"/>
		<text x="2" y="40%" fill="#765373" font-size="20" font-family="'Lato', sans-serif">
  			<textPath xlink:href="#testPath" startOffset="20%">There are over 8,000 grape varieties worldwide.
  			</textPath>
		</text>
	</svg>

Simple path with text

Section 6. Advanced Features: Gradients, Patterns, Clipping Paths

Gradients

There are two types of SVG gradients: linear and radial. Linear gradients are generated in a straight line, while radial gradients are circular.

A very simple linear gradient is structured like this:

<svg>
	<defs>
    	<linearGradient id="gradientName">
        	<stop offset="<%>" stop-color="<color>" />
        	<stop offset="<%>" stop-color="<color>" />
    	</linearGradient>
	</defs>
</svg>

The <svg> contains a <defs> element which allows us to create reusable definitions to be called on later. These definitions have no visual output until they are referenced using their unique ID within the stroke and/or fill attributes for SVG shapes or <text>. These shapes and/or text will also reside within the <svg> element, but outside of the <defs> element.

Once a gradient is built and assigned an ID, it can be called through the fill and/or stroke attributes within the SVG. For example, fill= "url(#gradientName)".

Linear Gradients

Linear gradients change color evenly along a straight line and each point (stop) defined on this line will represent the correlating color within the <linearGradient> element. At each point the color is at 100% saturation, and the space in between expresses a transition from one color to the next.

stop Nodes

<stop> nodes can also accept an opacity with stop-opacity="<value>"

Below is the code for a simple linear gradient with two color stops applied to a rectangle:

	<svg width="405" height="105">
		<defs>
  			<linearGradient id="Gradient1" x1="0" y1="0" x2="100%" y2="0">
    			<stop offset="0%" stop-color="#BBC42A" />
    			<stop offset="100%" stop-color="#ED6E46" />
  			</linearGradient>
		</defs>
		<rect x="2" y="2" width="400" height="100" fill= "url(#Gradient1)" stroke="#333333" stroke-width="4px" />
	</svg>

Basic Gradient

offset informs the gradient at what point to assign the correlating stop-color.

x1, y1, x2, y2

The x1, y1, x2, and y2 attribute values represent the start and end points onto which the gradient stops (color changes) are mapped. These percentages will map the gradients respectively along the appropriate axis.

A y value of “100%” and an x value of “0” will produce a horizontal gradient, while the reverse will produce a vertical one. Having both values set at “100%” (or any value outside of 0) will render an angled gradient.

gradientUnits

The gradientUnits attribute defines the coordinate system for the x1, x2, y1, y2 values. The two value options here are ‘userSpaceOnUse’ or ‘objectBoundingBox’. userSpaceOnUse sets the gradient coordinating system in absolute units, while objectBoundingBox (default) establishes this system within the bounds of the SVG shape itself, the target.

spreadMethod

The spreadMethod attribute’s value specifies how the gradient will spread out through the shape if it starts or ends inside the bounds of the target. If the gradient is set to not fill the shape, spreadMethod determines how the gradient should go about covering that empty space. There are three options here: ‘pad’, ‘repeat’, or ‘reflect’.

A value of pad (default) directs the first and last colors of the gradient to spread out over the remainder of the uncovered target region. A value of repeat directs the gradient to repeat the pattern from the beginning continuously. A value of reflect will reflect the gradient pattern alternating from start-to-end, end-to-start continuously.

The start and end point for the gradient below is: x1=»20%» y1=»30%» x2=»40%» y2=»80%».

Spread method

gradientTransform

The gradientTransform attribute is optional and allows for further transformation of the gradient before it is mapped, like adding a rotation.

xlink:href

The xlink:href attribute allows you to call on the ID of another gradient to inherit its details, but you can also include different values.

	<linearGradient id="repeat" xlink:href="#Gradient-1” spreadMethod="repeat" />

This gradient inherits the details of the first gradient from the beginning of this section, but has an alternate spreadMethod value.

Radial Gradients

Most of the attributes for a <radialGradient> are the same as those of <linearGradient> except there is a different set of coordinates to work with.

cx, cy, r

The cx, cy, and r attributes define the outermost section of the circle and the 100% stop-color of the gradient will be mapped to the perimeter of this value. cx and cy define the center coordinate, while r sets the radius of the gradient.

fx, fy

The fx, fy attributes represent the coordinates for the gradient’s focal point, or innermost circle. Essentially, the center of the gradient does not have to also be its focal point, which can be altered with these values.

While by default the focal point of the radial gradient would be centered, the focal point attributes can change this. The focal point values for the image below are fx="95%" fy="70%".

	<svg width="850px" height="300px">
		<defs>
  			<radialGradient id="Gradient2" cy="60%" fx="95%" fy="70%" r="2">
    			<stop offset="0%" stop-color="#ED6E46" />
    			<stop offset="10%" stop-color="#b4c63b" />
    			<stop offset="20%" stop-color="#ef5b2b" />
    			<stop offset="30%" stop-color="#503969" />
    			<stop offset="40%" stop-color="#ab6294" />
    			<stop offset="50%" stop-color="#1cb98f" />
    			<stop offset="60%" stop-color="#48afc1" />
    			<stop offset="70%" stop-color="#b4c63b" />
    			<stop offset="80%" stop-color="#ef5b2b" />
    			<stop offset="90%" stop-color="#503969" />
    			<stop offset="100%" stop-color="#ab6294" />
  			</radialGradient>
		</defs>
		<text x="20%" y="75%" fill= "url(#Gradient2)" font-family= "'Signika', sans-serif" font-size="200">Cherry</text>
	</svg>

Focal point

In this example, the focal point shifts to the bottom right of the image.

Patterns

Patterns are generally considered one of the more complex paint options available to color the fills and strokes of SVG. Establishing a foundation and understanding the basic syntax can make these seemingly more complex patterns much more obtainable.

Here is a look at the syntax for a basic pattern applied to a rectangle:

	<svg width="220" height="220">
		<defs>
  			<pattern id="basicPattern" x="10" y="10" width="40" height="40" 								patternUnits="userSpaceOnUse">
   				<circle cx="20" cy="20" r="20" fill= "#BBC42A" />
			</pattern>
		</defs>
		<rect x="10" y="10" width="200" height="200"
  		stroke="#333333" stroke-width="2px" fill="url(#basicPattern)" />
	</svg>

Basic pattern

Basic Attributes

The attributes and values for patterns define the «canvas», the design, and overall positioning. Patterns can consist of paths and/or shapes, can paint text, and can even be nested within another pattern.

x, y, width, height

The x and y attributes within the <pattern> element define how far into the shape the pattern will start. Width and height used within the <pattern> element define the actual width and height of the allotted pattern space.

The “basicPattern” referenced above contains the following values: x="10" y="10" width="40" height="40". The pattern will start 10px in from the start of the x axis, 10px in from the start of the y axis, and essentially create a “canvas” that is 40px wide, and 40px high.

patternUnits

The patternUnits attribute defines the coordinates for which x, y, width, and height are referenced. The two options here are userSpaceOnUse and objectBoundingBox (default).

userSpaceOnUse results in a pattern coordinate system that is determined by the coordinate system for the element referencing the <pattern>, while objectBoundingBox establishes the mapping coordinate system as the bounding box of the element to which the pattern is applied.

patternContentUnits

The patternContentUnits attribute values are the same as the values for patternUnits, except the coordinate system is now being defined for the contents of the pattern itself.

This value, unlike patternUnits, defaults to userSpaceOnUse, which means that unless one or both of these attributes are specified the shapes drawn within the <pattern> are being drawn in a different coordinate system than the <pattern> element is using.

Defining patternUnits="userSpaceOnUse" within the <pattern> element simplifies this process and ensures a consistent workspace.

Nested Patterns

Patterns can also be nested to create a much more unique and detailed design.

Here is a look at the structure of a basic nested pattern:

<svg width="204" height="204">
	<defs>
		<pattern id="circlePattern"
         x="4" y="4" width="75" height="75"
         patternUnits="userSpaceOnUse">
  			<circle cx="12" cy="12" r="8"
        stroke="#ed6e46" stroke-width="3" fill="#765373" />
		</pattern>
		<pattern id="rectPattern"
         x="10" y="10" width="50" height="50"
         patternUnits="userSpaceOnUse">
  			<rect x="2" y="2" width="30" height="30"
          stroke="#bbc42a" stroke-width="3" fill="url(#circlePattern)" />
		</pattern>
	</defs>
	<rect x="2" y="2" width="200" height="200"
  stroke="#333333" stroke-width="3" fill="url(#rectPattern)" />
</svg>

The <defs> element contains both patterns. Within <defs>, the pattern for the rectangle is calling on the circle pattern via fill and the main rectangle is then calling on the rectangle pattern also via fill, painting the interior of the main shape with a nested pattern.

Nested pattern

Clipping Path

The clipping path restricts the region to which paint will be applied to the SVG. Any region drawn outside of the bounds set by the clipping path will not be rendered.

To demonstrate the abilities of this feature, let’s use a clipping path consisting of «Apples» text being applied over a tomato colored rectangle and a green circle.

Below are the shapes without the clipping path applied, set to stretch beyond the viewport.

Shapes before clipping

Now, here’s a look at the code to apply the «Apples» text to this «canvas».

<svg width="400px" height="200px">
	<clipPath id="clip-text">
  		<text x="0" y="50%" fill="#f27678" font-size="120px" font-family=" 'Signika', sans-serif">Apples</text>
	</clipPath>
	<rect x="0" y="0" width="200" height="200" fill="#ed6e46" clip-path="url(#clip-text)" />
	<circle cx="310" cy="100" r="135" fill="#bbc42a" clip-path="url(#clip-text)" />
</svg>

Text clipping path

The clipping path is defined within the <clipPath> element and then called on by both shapes by referencing its unique id.

Conclusion

Writing inline SVG enables very useful editing powers and lets us as the author have complete access to all the graphical elements individually. Within this code we are generating graphics that scale without losing image quality, are searchable, and enhance accessibility.

It will most likely take some time tinkering to get comfortable with your SVG writing abilities, but once you do I would recommend working on making your code as short and efficient as possible, exploring SMIL animations, and experimenting with styling SVG elements with CSS.

Hopefully this guide acts as both a valuable reference, and an inspiration in terms of understanding the powerful potential of building and manipulating inline SVG.

If you have any questions or comments in regards to the book I can be reached on Twitter.

The End

  • Введение
  • Глава 1. Организация документа
  • Глава 2. Базовые фигуры и контуры
  • Глава 3. Рабочая область
  • Глава 4. Заливки и обводки
  • Глава 5. Элемент <text>
  • Глава 6. Продвинутые функции: градиенты, паттерны, контуры обрезки
  • Заключение

Масштабируемая векторная графика (SVG) – язык для описания двумерной графики в формате XML. Эта графика может состоять из путей, изображений и/или текста, который способен масштабироваться и изменять размеры без потери качества изображения.

Под встроенным SVG понимают код, написанный прямо внутри HTML, чтобы сгенерировать в браузере эту графику, о которой эта книга.

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

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

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

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

Прежде чем начать

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

Использование SVG

Есть несколько способов включить SVG в ваши проекты: как встроенный, как <img>, фоновое изображение, <object>, или в виде Data URI. Мы же с вами будем использовать именно встроенный SVG, который предполагает написание SVG-кода внутри тела правильно структурированного HTML-документа.

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

Программы для векторной графики

Векторные графические редакторы могут быть оправданным выбором, когда нужно создавать более сложную графику, которую нерационально писать вручную. Такие программы, как Adobe Illustrator, Inkscape, Sketch, iDraw или WebCode могут оказаться полезными инструментами, которые стоит добавить в вашу SVG-копилку.

Преимуществом этих инструментов является то, что вы можете экспортировать их SVG-код и встроить его прямо в ваш HTML. Мы коснёмся этого немного позже.

Встроенный SVG в вебе

Для краткости на всём протяжении этой книги SVG DOCTYPE, номер версии xmlns, и xml:space был исключён из всех примеров кода.

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

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

<!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" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"></svg>

В большинстве случаев в DOCTYPE и этих атрибутах внутри элемента <svg> нет необходимости и от них можно избавиться, существенно «почистив» ваш код.

Доступность SVG для пользователей

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

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

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

Общие замечания

Еще пара общих замечаний, прежде чем перейти к главному: шрифты, используемые в примерах во всей книге, доступны на Google Fonts. Это будет видно по значениям font-family, но соответствующий код для link или @import, получаемый с Google Font, здесь не приводится, и вам придется вставить его в документ самостоятельно.

В примерах книги используются исключительно пиксели и проценты в качестве единиц измерения. SVG поддерживает следующие единицы длины:: em, ex, px, pt, pc, cm, mm, in, и проценты.

SVG-код из этой книги можно добавить в любой текстовый редактор, а затем просмотреть в любом браузере с поддержкой встроенного SVG. Хотя в целом браузерная поддержка SVG очень хороша, для более продвинутых функций, например, градиентов, между браузерами могут возникнуть разночтения. Can I Use – прекрасное место для проверки поддержки таких особенностей, но в конечном счёте ничто не сравнится с тем, чему вы научитесь методом проб и ошибок.

Помимо сказанного, вы также можете скопировать код из примеров, вставить его в окошко «HTML» на CodePen и мгновенно увидеть вашу графику на экране. Мне не хватает лестных слов для этого инструмента, так как по сути именно он в первую очередь заставил меня полюбить SVG. Это мой любимый способ учиться: играя, экспериментируя, иногда даже совершая досадные ошибки.

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

<svg>
    <!--<путь d=<этот путь закомментирован> />-->
</svg>

Публикуется под лицензией Attribution-NonCommercial-ShareAlike 4.0

Карманное руководство по написанию SVG. Введение — CSS-LIVE

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Спасибо вам!

Этот раздел я хотела бы целиком посвятить тому, чтобы сказать «Огромное спасибо!»:

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

Введение

Масштабируемая векторная графика (SVG) – язык для описания двумерной графики в формате XML. Эта графика может состоять из путей, изображений и/или текста, который способен масштабироваться и изменять размеры без потери качества изображения.

Под встроенным SVG понимают код, написанный прямо внутри HTML, чтобы сгенерировать в браузере эту графику, о которой эта книга.

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

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

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

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

Прежде чем начать

Хотя это «Карманное руководство» предназначено для тех, кто уже немного разбирается в

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

Использование SVG

Есть несколько способов включить SVG в ваши проекты: как встроенный, как <img>, фоновое изображение, <object>, или в виде Data URI. Мы же с вами будем использовать именно встроенный SVG, который предполагает написание SVG-кода внутри тела правильно структурированного HTML-документа.

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

<img> может лучше подойти для вашего проекта.

Программы для векторной графики

Векторные графические редакторы могут быть оправданным выбором, когда нужно создавать более сложную графику, которую нерационально писать вручную. Такие программы, как Adobe Illustrator, Inkscape, Sketch, iDraw или WebCode могут оказаться полезными инструментами, которые стоит добавить в вашу SVG-копилку.

Преимуществом этих инструментов является то, что вы можете экспортировать их SVG-код и встроить его прямо в ваш HTML. Мы коснёмся этого немного позже.

Встроенный SVG в вебе

Для краткости на всём протяжении этой книги SVG DOCTYPE, номер версии xmlns, и xml:space был исключён из всех примеров кода.

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

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

<!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" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"></svg>

В большинстве случаев в DOCTYPE и этих атрибутах внутри элемента <svg> нет необходимости и от них можно избавиться, существенно «почистив» ваш код.

Доступность SVG для пользователей

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

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

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

Общие замечания

Еще пара общих замечаний, прежде чем перейти к главному: шрифты, используемые в примерах во всей книге, доступны на Google Fonts. Это будет видно по значениям font-family, но соответствующий код для link или @import, получаемый с Google Font, здесь не приводится, и вам придется вставить его в документ самостоятельно.

В примерах книги используются исключительно пиксели и проценты в качестве единиц измерения. SVG поддерживает следующие единицы длины:: em, ex, px, pt, pc, cm, mm, in, и проценты.

SVG-код из этой книги можно добавить в любой текстовый редактор, а затем просмотреть в любом браузере с поддержкой встроенного SVG. Хотя в целом браузерная поддержка SVG очень хороша, для более продвинутых функций, например, градиентов, между браузерами могут возникнуть разночтения. Can I Use – прекрасное место для проверки поддержки таких особенностей, но в конечном счёте ничто не сравнится с тем, чему вы научитесь методом проб и ошибок.

Помимо сказанного, вы также можете скопировать код из примеров, вставить его в окошко «HTML» на CodePen и мгновенно увидеть вашу графику на экране. Мне не хватает лестных слов для этого инструмента, так как по сути именно он в первую очередь заставил меня полюбить

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

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

<svg>
    <!--<путь d=<этот путь закомментирован> />-->
</svg>

Публикуется под лицензией Attribution-NonCommercial-ShareAlike 4.0

P.S. Это тоже может быть интересно:

css-live.ru

Учебник по HTML графике — Список SVG элементов

<a> Создает ссылку вокруг SVG элемента xlink:show
xlink:actuate
xlink:href
target
<altGlyph> Предоставляет контроль над символами (глифами), используемыми для отображения специальных символьных данных x
y
dx
dy
rotate
glyphRef
format
xlink:href
<altGlyphDef> Определяет подстановочный набор символов (глифов) id
<altGlyphItem> Определяет вариантный набор символов (глифов) подстановки id
<animate> Определяет поведение атрибута элемента во времени attributeName=»имя атрибута»
by=»относительное смещение»
from=»начальное значение»
to=»конечное значение»
dur=»длительность»
repeatCount=»сколько раз применяется анимация»
<animateMotion> Заставляет указанный элемент двигаться по заданной траектории calcMode=»метод интерполяции. Принимает значение ‘discrete’, ‘linear’, ‘paced’ или ‘spline’»
path=»траектория движения»
keyPoints=»как далеко по траектории движения должен сдвигаться объект за заданный отрезок времени»
rotate=»задает трансформацию поворота»
xlink:href=»ссылка URI на элемент <path>, который определяет траекторию движения»
<animateTransform> Анимирует атрибут трансформации на заданном элементе. Это позволяет анимации контролировать трансляцию, масштабирование, поворот и/или перекос by=»относительное значение сдвига»
from=»начальное значение»
to=»конечное значение»
type=»тип трансформации. Может быть ‘translate’, ‘scale’, ‘rotate’, ‘skewX’, ‘skewY’»
<circle> Определяет круг cx=»x-координата центра круга»
cy=»y-координата центра круга»
r=»радиус круга». Обязательный.
+ презентационные атрибуты:
Color, FillStroke, Graphics
<clipPath> Обрезка состоит в том, чтобы скрыть из вида то, что в обычных условиях прорисовывается. Шаблон, который определяет, что рисовать, а что нет, называется контур обрезки clip-path=»контур обрезки, на который ссылаются, пересекается с ссылающимся контуром обрезки»
clipPathUnits=»Может быть ‘userSpaceOnUse’ или ‘objectBoundingBox’. Второе значение делает дочерние элементы частью ограничивающего объект блока, использующего маску (по умолчанию: ‘userSpaceOnUse’)»
<color-profile> Определяет описание цветового профиля (когда стили документа определяются при помощи CSS) local=»уникальный ID сохраненного локально цветового профиля»
name=»»
rendering-intent=»auto | perceptual | relative-colorimetric | saturation | absolute-colorimetric»
xlink:href=»URI на ICC ресурс профиля»
<cursor> Определяет платформо-независимый пользовательский курсор x=»x-координата верхнего левого угла курсора (по умолчанию 0)»
y=»y-координата верхнего левого угла курсора (по умолчанию 0)»
xlink:href=»URI изображения, используемого как курсор»
<defs> Контейнер для элементов, на которые будут ссылаться другие элементы
<desc> Текстовое описание для контейнерных или графических элементов в SVG (пользовательские программы могут выводить данный текст как всплывающую подсказку)
<ellipse> Определяет эллипс cx=»x-координата центра эллипса»
cy=»y-координата центра эллипса»
rx=»длина радиуса по оси x». Обязательный параметр.
ry=»длина радиуса по оси y». Обязательный параметр.
+ презентационные атрибуты:
Color, FillStroke, Graphics
<feBlend> Совмещает два объекта в соответствии с заданным режимом смешивания mode=»режим смешивания изображений: normal | multiply | screen | darken | lighten»
in=»определяет ввод для заданного примитива фильтра: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>»
in2=»вводная второго изображения для операции смешивания»
feColorMatrix SVG фильтр. Применяет матричную трансформацию
feComponentTransfer SVG фильтр. Выполняет покомпонентную модификацию данных
feComposite SVG фильтр.
feConvolveMatrix SVG фильтр.
feDiffuseLighting SVG фильтр.
feDisplacementMap SVG фильтр.
feDistantLight SVG фильтр. Определяет источник света
feFlood SVG фильтр.
feFuncA SVG фильтр. Подэлемент для feComponentTransfer
feFuncB SVG фильтр. Подэлемент для feComponentTransfer
feFuncG SVG фильтр. Подэлемент для feComponentTransfer
feFuncR SVG фильтр. Подэлемент для feComponentTransfer
feGaussianBlur SVG фильтр. Выполняет размытие изображения по Гауссу
feImage SVG фильтр.
feMerge SVG фильтр. Создает слои изображений друг над другом
feMergeNode SVG фильтр. Подэлемент для feMerge
feMorphology SVG фильтр. Выполняет «утолщение» (fattening) или «утончение» (thinning) текущего графического объекта
feOffset SVG фильтр. Сдвигает изображение относительно его текущей позиции
fePointLight SVG фильтр.
feSpecularLighting SVG фильтр.
feSpotLight SVG фильтр.
feTile SVG фильтр.
feTurbulence SVG фильтр.
filter Контейнер для фильтров
font Определяет шрифт
font-face Описывает характеристики шрифта
font-face-format
font-face-name
font-face-src
font-face-uri
foreignObject
<g> Группирует элементы id=»имя группы»
fill=»цвет заливки для группы»
opacity=»прозрачность для группы»
+ презентационные атрибуты:
Все
glyph Определяет графику для заданного символа (глифа)
glyphRef Определяет допустимый для использования символ (глиф)
hkern
<image> Определяет изображение x=»x-координата верхнего левого угла изображения»
y=»y-координата верхнего левого угла изображения»
width=»ширина изображения». Обязательный параметр.
height=»высота изображения». Обязательный параметр.
xlink:href=»путь к изображению». Обязательный параметр.
+ презентационные атрибуты:
Color, Graphics, Images, Viewports
<line> Определяет линию x1=»x начала линии»
y1=»y начала линии»
x2=»x конца линии»
y2=»y конца линии»
+ презентационные атрибуты:
Color, FillStroke, Graphics, Markers
<linearGradient> Определяет линейный градиент. Линейный градиент заполняет объект, используя вектор направления, и может быть горизонтальным, вертикальным или угловым id=»уникальный идентификатор. Требуется для обращения к этому шаблону»
gradientUnits=»‘userSpaceOnUse’ или ‘objectBoundingBox’. Используйте область видимости или объект, чтобы определить относительную позицию точек вектора. (по умолчанию ‘objectBoundingBox’)»
gradientTransform=»трансформация, применяемая к градиенту»
x1=»x начальной точки вектора градиента (число или % — 0% по умолчанию)»
y1=»y начальной точки вектора градиента (0% по умолчанию)»
x2=»x конечной точки вектора градиента (100% по умолчанию)»
y2=»y конечной точки вектора градиента (0% по умолчанию)»
spreadMethod=»‘pad’ или ‘reflect’ или ‘repeat’»
xlink:href=»ссылка на другой градиент, чьи атрибуты используются как атрибуты по умолчанию. Работает рекурсивно»
<marker> Маркеры устанавливаются в вершинах прямых и ломаных линий, многоугольников и контуров. Этим элементам можно задавать атрибуты «marker-start», «marker-mid» и «marker-end», которые по умолчанию наследуются, либо установить им значение ‘none’, либо прописать в них URI определенного маркера. Прежде, чем ссылаться через URI маркера, его нужно определить. Любой тип графической фигуры можно помещать внутри маркера. Маркеры рисуются наверху элемента, к которому они прикреплены markerUnits=»‘strokeWidth’ или ‘userSpaceOnUse’. Если используется значение ‘strokeWidth’, то маркер равен ширине прорисовки. В обратном случае маркер не масштабируется и использует то же поле видимости, что и ссылающийся на него элемент (по умолчанию ‘strokeWidth’)»
refx=»позиция, где маркер присоединяется к вершине (по умолчанию 0)»
refy=»позиция, где маркер присоединяется к вершине (по умолчанию 0)»
orient=»‘auto’ или угол, под которым буде показываться маркер. При значении ‘auto’ угол будет рассчитываться таким образом, чтобы ось x проходила по касательной к вершине фигуры (по умолчанию 0)»
markerWidth=»ширина маркера (по умолчанию 3)»
markerHeight=»высота маркера (по умолчанию 3)»
viewBox=»точки «видимости» в этой SVG области рисования. 4 значения, разделенных пробелом или запятой. (мин x, мин y, ширина, высота)»
+ презентационные атрибуты:
Все
<mask> Наложение маски это комбинирование значений прозрачности и обрезки. Как и с обрезкой, чтобы определять секции маски, можно использовать формы, текст или контур. По умолчанию состояние маски полностью прозрачное, что противоположно проекции обрезки. Графический объект в маске устанавливает, какие части маски будут непрозрачными maskUnits=»‘userSpaceOnUse’ или ‘objectBoundingBox’. Устанавливает, будет ли маска считаться относительно всей области видимости или только объекта (по умолчанию ‘objectBoundingBox’)»
maskContentUnits=»Устанавливает, будет ли содержимое маски считаться относительно всей области видимости или только объекта. ‘userSpaceOnUse’ или ‘objectBoundingBox’ (по умолчанию ‘userSpaceOnUse’)»
x=»проекция маски (по умолчанию -10%)»
y=»проекция маски (по умолчанию -10%)»
width=»проекция маски (по умолчанию 120%)»
height=»проекция маски (по умолчанию 120%)»
metadata Задает метаданные
missing-glyph
mpath
<path> Определяет контур d=»набор команд, определяющих контур»
pathLength=»если задан, контур будет масштабирован таким образом, что вычисленная длина точек контура будет равняться этому значению»
transform=»список трансформаций»
+ презентационные атрибуты:
Color, FillStroke, Graphics, Markers
<pattern> Определяет паттерн. Сначала задаются координаты и размер показываемой области видимости. Затем в паттерн добавляются графические фигуры. Когда достигается край области видимости, паттерн повторяется id=»уникальный идентификатор паттерна.» Обязателен.
patternUnits=»‘userSpaceOnUse’ или ‘objectBoundingBox’. Задает систему координат паттерна. Первое значение определяет координаты относительно всей области видимости, второе относительно объекта, использующего паттерн.»
patternContentUnits=»Устанавливает систему координат содержимого паттерна. ‘userSpaceOnUse’ или ‘objectBoundingBox’»
patternTransform=»позволяет добавить трансформацию паттерна»
x=»положение паттерна относительно верхнего левого угла по горизонтали (по умолчанию 0)»
y=»положение паттерна относительно верхнего левого угла по горизонтали (по умолчанию 0)»
width=»ширина паттерна (по умолчанию 100%)»
height=»высота паттерна (по умолчанию 100%)»
viewBox=»указывает «видимую область» в области рисования SVG. 4 значения, разделенные пробелом или запятой. (мин x, мин y, ширина, высота)»
xlink:href=»ссылка на другой паттерн, значения атрибутов которого нужно унаследовать. Рекурсивный»
<polygon> Определяет многоугольник — графическую фигуру, у которой есть по меньшей мере три стороны. points=»вершины многоугольника. Число вершин должно быть четным». Обязателен.
fill-rule=»часть презентационных атрибутов заливки»
+ презентационные атрибуты:
Color, FillStroke, Graphics, Markers
<polyline> Определяет ломанную линию points=»узлы ломанной линии». Обязателен.
+ презентационные атрибуты:
Color, FillStroke, Graphics, Markers
<radialGradient> Определяет радиальный градиент. Радиальные градиенты создаются следующим образом: накладывается круг и плавно меняются значения между градиентными точками остановки от точки фокуса к внешнему радиусу. gradientUnits=»‘userSpaceOnUse’ или ‘objectBoundingBox’. Используйте область видимости или объект, чтобы определить относительную позицию точек вектора. (по умолчанию ‘objectBoundingBox’)»
gradientTransform=»трансформация, применяемая к градиенту»
cx=»x центра градиента (число или % — по умолчанию 50%)»
cy=»y центра градиента (по умолчанию 50%)»
r=»радиус градиента (по умолчанию 50%)»
fx=»x точки фокуса градиента (по умолчанию 0%)»
fy=»y точки фокуса градиента (по умолчанию 0%)»
spreadMethod=»‘pad’ или ‘reflect’ или ‘repeat’»
xlink:href=»ссылка на другой градиент, чьи атрибуты используются как атрибуты по умолчанию. Работает рекурсивно»
<rect> Определяет прямоугольник x=»x верхнего левого угла»
y=»y верхнего левого угла»
rx=»x радиуса (чтобы скруглить элемент)»
ry=»y радиуса (чтобы скруглить элемент)»
width=»ширина прямоугольника». Обязательный атрибут.
height=»высота прямоугольника». Обязательный атрибут.
+ презентационные атрибуты:
Color, FillStroke, Graphics
script Контейнер для скриптов (например, ECMAScript)
set Устанавливает значение атрибута на заданную длительность
<stop> Точка остановки градиента offset=»смещение точки остановки (от 0 до 1 или от 0% до 100%)». Обязательный атрибут.
stop-color=»цвет точки остановки»
stop-opacity=»прозрачность точки остановки (от 0 до 1)»
style Позволяет подключать каскадные таблицы стилей непосредственно внутри содержимого SVG
<svg> Создает фрагмент SVG документа x=»x верхнего левого угла (по умолчанию 0)»
y=»y верхнего левого угла (по умолчанию 0)»
width=»ширина svg фрагмента (по умолчанию 100%)»
height=»высота svg фрагмента (по умолчанию 100%)»
viewBox=»точки «видимости» в этой SVG области рисования. 4 значения, разделенных пробелом или запятой. (мин x, мин y, ширина, высота)»
preserveAspectRatio=»‘none’ или любая из 9 комбинаций вида ‘xVALYVAL’, где VAL это ‘min’, ‘mid’ или ‘max’. (по умолчанию xMidYMid)»
zoomAndPan=»‘magnify’ или ‘disable’. Значение ‘magnify’ позволяет пользователям панаромировать и увеличивать файл (по умолчанию magnify)»
xml=»внешний <svg> элемент должен устанавливать SVG и свое пространство имен: xmlns=»http://www.w3.org/2000/svg» xmlns:xlink=»http://www.w3.org/1999/xlink» xml:space=»preserve»»
+ презентационные атрибуты:
Все
switch
symbol
<text> Определяет текст x=»список координат по оси x. N-e количество x-координат соответствует n-му количеству символов текста. Если есть дополнительные символы, которые идут после того, как позиции закончились, то они ставятся после последнего символа. 0 по умолчанию»
y=»список координат по оси y. (см. x). 0 по умолчанию»
dx=»список длин по оси x, сдвигающие символы относительно абсолютной позиции последнего нарисованного глифа. (см. x)»
dy=»список длин по оси y, сдвигающие символы относительно абсолютной позиции последнего нарисованного глифа. (см. x)»
rotate=»список значений разворотов. N-e количество разворотов соответствует n-му количеству символов текста. Дополнительным символам не дается последнее значение разворота»
textLength=»конечная длина текста, в которую средства просмотра SVG будут пытаться уместить текст, изменяя расстояние между символами и их размеры. (по умолчанию стандартная длина текста)»
lengthAdjust=»указывает средствам просмотра, чем манипулировать, пробелами и символами или только пробелами, для того, чтобы сделать текст нужной длины, если задана конечная длина текста. Принимает значения ‘spacing’ и ‘spacingAndGlyphs’»
+ презентационные атрибуты:
Color, FillStroke, Graphics, FontSpecification, TextContentElements
textPath
title Текстовое описание для SVG элементов. Не отображается как часть графики, но программы просмотра могут показывать этот текст как всплывающие подсказки
<tref> Ссылается на элемент <text> в SVG документе и повторно использует его Идентичны элементу <text>
<tspan> Идентичен элементу <text>, но при этом может быть вложен в тег <text> и в сам себя Идентичны элементу <text>
+ дополнительно:
xlink:href=»ссылка на элемент <text>»
<use> Использует URI, чтобы ссылаться на теги <g>, <svg> или другие графические элементы с уникальным атрибутом id и копировать его. Копия будет только ссылкой на оригинал, таким образом существовать в документе будет только оригинал. Любые изменения в оригинале будут отражаться во всех его копиях. x=»координата x верхнего левого угла клонированного элемента»
y=»координата y верхнего левого угла клонированного элемента»
width=»ширина клонированного элемента»
height=»высота клонированного элемента»
xlink:href=»URI ссылка на клонированный элемент»
+ презентационные атрибуты:
Все
view
vkern

msiter.ru

Карманное руководство по написанию SVG. Глава 1 — CSS-LIVE

Перевод книги Pocket Guide to Writing SVG, c разрешения автора — Джони Трайтел.

Глава 1. Организация документа

Все детали SVG находятся в элементе <svg>. Этот элемент содержит несколько атрибутов, которые позволяют настроить ваш графический «холст». Хотя отрисовать изображение можно и без этих атрибутов, но если их не указывать, то более сложная графика может остаться уязвимой к особенностям браузеров и риск, что она в них не отобразится как надо, будет выше.

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

Организация и семантика

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

Этот раздел будет знакомством с основами написания SVG – элементом <svg> и обзором некоторых общих атрибутов, которые помогают в начальной установке документа.

Элемент svg

Элемент <svg> является и контейнером, и структурным элементом, и может быть использован для вложения отдельного SVG-фрагмента внутрь документа. Этот фрагмент устанавливает свою собственную систему координат.

Атрибуты, используемые внутри элемента, такие как width, height, preserveAspectRatio и viewBox определяют холст для создаваемой графики.

При получении SVG-кода из определённых графических программ, внутрь элемента <svg> добавляется много информации, такой как номер SVG-версии (указывает используемую версию языка SVG) и DOCTYPE. Как я упоминала, эта информация не будет включена в примеры на всём протяжении этого руководства, и их исключение не помешает вашей графике отобразиться на экране.

Элемент g

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

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

Любой элемент, который не содержится внутри g, рассматривается как группа из него одного.

Элемент use

Элемент <use> позволяет повторно использовать элементы в любом месте документа. К этому элементу можно добавить такие атрибуты, как x, y, width и height, которые определяют подробности положения элемента в системе координат.

Атрибут xlink:href здесь позволяет обратиться к элементу, чтобы использовать его повторно. Например, если у нас есть элемент <g> с идентификатором «apple», содержащий изображение яблока, то на это изображение можно ссылаться с помощью <use>: <use x="50" y="50" xlink:href="#apple" />.

Этот элемент может существенно сэкономить время и помочь минимизировать требуемый код.

Элемент defs

Если <use> позволяет повторно использовать отображённую графику, графика внутри элемента <defs> не отображается на холсте, но на нее можно ссылаться и затем отображать ее посредством xlink:href.

Графика определяется внутри <defs> и затем может быть использована во всём документе с помощью привязки по id.

Например, следующий код рисует очень простой градиент внутри прямоугольника:

<svg>
    <defs>
        <linearGradient>
            <stop offset="0%" stop-color="#bbc42a" />
            <stop offset="100%" stop-color="#765373" />
        </linearGradient>
    </defs>   
    <rect x="10" y="10" fill= "url(#Gradient-1)" stroke="#333333" stroke-width="3px" />
</svg>

Содержимое <defs> визуально никак не отображается, пока на него не сошлются по уникальному id, в данном случае с помощью атрибута fill прямоугольника

Элемент symbol

Элемент <symbol> похож на <g>, так как предоставляет возможность группировать элементы, однако, элементы внутри <symbol>; не отображаются визуально (как и в <defs>) до тех пор, пока не будут вызваны с помощью элемента <use>.

Также, в отличие от элемента <g>, <symbol> устанавливает свою собственную систему координат, отдельно от области просмотра, в которой он отображается.

Область просмотра SVG и viewBox, которые устанавливают систему координат для графики, преобразуемой для вывода, будут рассмотрены далее в другом разделе.

Порядок наложения

Порядок наложения SVG не может управляться через z-index в CSS, как другие элементы внутри HTML. Порядок, в котором раскладываются SVG-элементы, полностью зависит от их размещения внутри фрагмента документа.

Виноград и арбуз ниже находятся внутри одного и того же элемента <svg>. Арбуз располагается впереди винограда, так как группа, содержащая пути, из которых в итоге получается арбуз, следует в документе после винограда.

<svg>
    <g>
        <!--<path <путь для черешка> />-->
        <!--<path <путь для винограда> />-->
        <!--<path <путь для листочка> />-->
    </g>
    <g>
        <!--<path <путь для корки> />-->
        <!--<path <путь для мякоти> />-->
        <!--<path <путь для семечек> />-->
    </g>
</svg>

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

<svg>
    <g>
        <!--<path <путь для корки> />-->
        <!--<path <путь для мякоти> />-->
        <!--<path <путь для семечек> />-->
    </g>
    <g>
        <!--<path <путь для черешка> />-->
        <!--<path <путь для винограда> />-->
        <!--<path <путь для листочка> />-->
    </g>
</svg>

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

Публикуется под лицензией Attribution-NonCommercial-ShareAlike 4.0

P.S. Это тоже может быть интересно:

css-live.ru

« SVG / Справочник SVG атрибутов »

SVG элементы

A B C D E F G H I J K L M N O P Q R S T U V — Z

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

Элементы анимации

<animate>, <animateColor>, <animateMotion>, <animateTransform>, <discard>, <mpath>, <set>

Базовые фигуры

<circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect>

Контейнеры

<a>, <defs>, <glyph>, <g>, <marker>, <mask>, <missing-glyph>, <pattern>, <svg>, <switch>, <symbol>, <unknown>

Элементы описания

<desc>, <metadata>, <title>

Фильтры

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

Элементы шрифта

<font>, <font-face>, <font-face-format>, <font-face-name>, <font-face-src>, <font-face-uri>, <hkern>, <vkern>

Градиентные элементы

<linearGradient>, <meshgradient>, <radialGradient>, <stop>

Графические элементы

<circle>, <ellipse>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <text>, <use> 

Элементы ссылки на графику

<mesh>, <use>

Источники света

<feDistantLight>, <fePointLight>, <feSpotLight> 

Непрозрачные элементы

<clipPath>, <defs>, <hatch>, <linearGradient>, <marker>, <mask>, <meshgradient>, <metadata>, <pattern>, <radialGradient>, <script>, <style>, <symbol>, <title> 

Элементы сервера печати

<hatch>, <linearGradient>, <meshgradient>, <pattern>, <radialGradient>, <solidcolor> 

Отличительные элементы

<a>, <circle>, <ellipse>, <foreignObject>, <g>, <image>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>, <svg>, <switch>, <symbol>, <text>, <textPath>, <tspan>, <unknown>, <use> 

Элементы формы

<circle>, <ellipse>, <line>, <mesh>, <path>, <polygon>, <polyline>, <rect>

Структурные элементы

<defs>, <g>, <svg>, <symbol>, <use>

Элементы текстового контента

<altGlyph>, <altGlyphDef>, <altGlyphItem>, <glyph>, <glyphRef>, <textPath>, <text>, <tref>, <tspan>

Текстовые контентные дочерние элементы

<altGlyph>, <textPath>, <tref>, <tspan>

Некатегоризированные элементы

<clipPath>, <color-profile>, <cursor>, <filter>, <foreignObject>, <hatchpath>, <meshpatch>, <meshrow>, <script>, <style>, <view> 

Смотрите также

developer.mozilla.org

Введение — Веб-технологии для разработчиков

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

SVG берёт свое начало в 1999 году, когда после некоторой конкуренции форматов был включен в W3C, но не был полностью ратифицирован. SVG поддерживается всеми наиболее популярными браузерами. Недостатком использования является медленная загрузка SVG. При этом SVG предлагает некоторые преимущества, такие как наличие соответствующего DOM interface, и отсутствие необходимости в стороннем расширении. Использовать данное решение или нет, часто зависит от конкретного случая применения.

Базовые компоненты

В HTML имеются элементы для определения заголовков, параграфов, таблиц и т.п. В SVG, с другой стороны, имеются элементы для кругов, прямоугольников, и простых и сложных кривых. Простой SVG документ состоит из корневого элемента <svg> и нескольких основных форм, которые вместе обеспечивают построение рисунка.  Кроме того, есть элемент <g>, который используется для группировки нескольких основных форм вместе.

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

До начала работы

Существует ряд приложений для рисования, такие как Inkscape, которые распространяются бесплатно и используют SVG в качестве их родного файлового формата. Однако, это руководство полагается только на надежный XML или текстовый редактор (на ваш выбор). Идея в том, чтобы обучить основам SVG тех, кто хочет понять его, и это лучше всего сделать, самостоятельно поработав с разметкой. При этом вы должны знать свою конечную цель. Не все программы просмотра SVG одинаковы, и поэтому существует высокий шанс того, что написанное для одного приложения не будет отображаться таким же образом в другом, просто потому что они поддерживают разные уровни SVG детализации или другую детализацию, которую вы используете наряду с SVG (такую как, JavaScript или CSS).

SVG поддерживается во всех современных браузерах и даже, в некоторых случаях, паре устаревших версий. Вполне полная таблица поддерживающих браузеров может быть найдена в Can I use. Firefox поддерживает некоторый контент SVG, начиная с версии 1.5, и этот уровень поддержки растет с каждым новым выпуском.  К счастью, наряду с этим руководством, MDN может помочь разработчикам не отставать от изменений между Gecko и некоторыми другими основными реализациями.

Перед тем как начать,  вы должны иметь основное понимание XML или другого языка разметки, такого как HTML. Если вы не очень знакомы с XML, ниже имеются некоторые рекомендации, которые следует иметь ввиду:

  • Элементы и атрибуты SVG должны быть все введены в указанном регистре, поскольку XML обладает чувствительностью к регистру (в отличии от HTML).
  • Значения атрибутов в SVG должны быть помещены внутри кавычек, даже если они являются цифрами.

SVG имеет довольно большую спецификацию. Это руководство охватывает только основы. После ознакомления с ними, тебе следует использовать Element Reference и Interface Reference,  чтобы найти что-либо еще при необходимости.

Особенности SVG

Начиная с рекомендации 2003 года, самой свежей «полной» версией SVG является версия 1.1. Она построена на SVG 1.0, но содержит также больше модулязаций для упрощения реализации. Второй выпуск SVG 1.1 стал Рекомендацией в 2011 году. «Полная» версия SVG 1.2 стала следующим главным выпуском SVG. Ей пришла на смену развивающаяся SVG 2.0, которая сейчас усиленно разрабатывается и следует схожему с CSS 3 подходу, в котором она разделяет компоненты в несколько свободно связанных специфирований.

Кроме полных рекомендаций SVG, рабочая группа при W3C ввела SVG Tiny и SVG Basic в 2003 году. Эти две версии нацелены главным образом на мобильные устройства. Первый, SVG Tiny, должен выдавать графические примитивы для небольших устройств с низкими возможностями. SVG Basic имеет много общего с полным SVG, но не включает те компоненты, что трудны для реализации или являются тяжелыми для воспроизведения (как анимации). В 2008, SVG Tiny 1.2 стала Рекомендацией W3C.

Существовали планы для специфирования SVG Print, которая имела бы поддержку для множества страниц и улучшенное управление цветом. Эта работа была прекращена.

developer.mozilla.org

SVG и CSS — Веб-технологии для разработчиков

На этой странице показано, как использовать CSS со специальным языком для создания графики: SVG.

Вы сделаете небольшой пример, которые можно будет запустить в любом браузере с поддержкой SVG.

Это вторая секция Части II Руководство по CSS.
Предыдущая секция: JavaScript
Следующая секция: Данные XML

Общая информация: SVG

SVG (Scalable Vector Graphics) является подмножеством языка XML и предназначен для создания графики.

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

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

Кроме того, таблицы стилей, которые вы используете в других языках разметки документов, могут содержать ссылку на SVG графику, в тех местах, где необходимо изображение. Например, в таблице стилей, для вашего HTML документа, можно указать ссылку (URL) на SVG графику в свойстве background.

Немного подробностей

На момент написания статьи (середина 2011года), большинство современных браузеров имеет базовую поддержку SVG, в том числе Internet Explorer 9 и выше. Некоторые дополнительные возможности SVG не поддерживаются, либо поддерживаются лишь частично, в определенных браузерах. Для более подробной информации о текущей поддержке SVG, см. SVG tables on caniuse.com, либо в таблицах совместимости SVG element reference, для информации о поддержке отдельных элементов.

В остальные версии можно добавить поддержку SVG, установив дополнительный плагин, например, предоставленный компанией Adobe.

Более подробная информация о SVG в Mozilla, представлена на станице SVG в этой wiki.

За дело: Демонстрация SVG

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

<?xml version="1.0" standalone="no"?>

<?xml-stylesheet type="text/css" href="style8.css"?>

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg viewBox="-300 -300 600 600"
  xmlns="http://www.w3.org/2000/svg" version="1.1"
  xmlns:xlink="http://www.w3.org/1999/xlink">

<title>SVG demonstration</title>
<desc>Mozilla CSS Getting Started - SVG demonstration</desc>

<defs>
  <g>
    <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z"/>
    <path d="M0,-200 a40,40 0 0,0 -62,10"/>
    </g>
  <g>
    <use xlink:href="#segment"/>
    <use xlink:href="#segment" transform="rotate(18)"/>
    <use xlink:href="#segment" transform="rotate(36)"/>
    <use xlink:href="#segment" transform="rotate(54)"/>
    <use xlink:href="#segment" transform="rotate(72)"/>
    </g>
  <g>
    <use xlink:href="#quadrant"/>
    <use xlink:href="#quadrant" transform="rotate(90)"/>
    <use xlink:href="#quadrant" transform="rotate(180)"/>
    <use xlink:href="#quadrant" transform="rotate(270)"/>
    </g>
  <radialGradient cx="0" cy="0" r="200"
      gradientUnits="userSpaceOnUse">
    <stop offset="33%"/>
    <stop offset="95%"/>
    </radialGradient>
  </defs>

<text x="-280" y="-270">
  SVG demonstration</text>
<text  x="-280" y="-250">
  Move your mouse pointer over the flower.</text>

<g>
  <circle cx="0" cy="0" r="200"
    stroke="none" fill="url(#fade)"/>
  <use xlink:href="#petals"/>
  <use xlink:href="#petals"
    transform="rotate(9) scale(0.33)"/>
  </g>

</svg>

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

/*** SVG demonstration ***/

/* page */
svg {
  background-color: beige;
  }

#heading {
  font-size: 24px;
  font-weight: bold;
  }

#caption {
  font-size: 12px;
  }

/* flower */
#flower:hover {
  cursor: crosshair;
  }

/* gradient */
#fade-stop-1 {
  stop-color: blue;
  }

#fade-stop-2 {
  stop-color: white;
  }

/* outer petals */
#outer-petals {
  opacity: .75;
  }

#outer-petals .segment-fill {
  fill: azure;
  stroke: lightsteelblue;
  stroke-width: 1;
  }

#outer-petals .segment-edge {
  fill: none;
  stroke: deepskyblue;
  stroke-width: 3;
  }

#outer-petals .segment:hover > .segment-fill {
  fill: plum;
  stroke: none;
  }

#outer-petals .segment:hover > .segment-edge {
  stroke: slateblue;
  }

/* inner petals */
#inner-petals .segment-fill {
  fill: yellow;
  stroke: yellowgreen;
  stroke-width: 1;
  }

#inner-petals .segment-edge {
  fill: none;
  stroke: yellowgreen;
  stroke-width: 9;
  }

#inner-petals .segment:hover > .segment-fill {
  fill: darkseagreen;
  stroke: none;
  }

#inner-petals .segment:hover > .segment-edge {
  stroke: green;
  }

Откройте документ в вашем браузере с поддержкой SVG. Переместите указатель мыши на изображение.

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

Примечания к демонстрации:

  • Документ SVG привязывается к таблице стилей общепринятым способом.
  • SVG содержит собственные свойства CSS и их значения. Некоторые из них похожи на значения CSS для HTML.

Задание

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

Посмотреть решение к этому заданию.

Что дальше?

В этой демонстрации, ваш браузер с поддержкой SVG уже знает, как отображать элементы  SVG. Таблица стилей всего лишь некоторым образом меняет отображение. То же самое происходит с документами HTML и XUL. Однако CSS можно использовать для любых документов XML, в которых нет предусмотренного по умолчанию способа отображения элементов. Данный пример продемонстрирован на следующей странице: Данные XML

developer.mozilla.org

SVG: основы векторной графики в HTML

26.12.2014

Векторная графика широко используется в печатном деле. Но и для веб сайтов мы можем использовать её с помощью SVG (Scalable Vector Graphic — масштабируемая векторная графика). В соответствии соспецификацией W3.org SVG определяется как:

Язык для описания двумерной графики в XML. SVG допускает использование трех типов объектов: векторные графические формы (наппример, пути, состоящие из прямых линий и кривых), изображения и текст.

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

Преимущества SVG

Независимость разрешения

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

Уменьшение количества запросов HTTP

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

Стили и скрипты

Встраивание с помощью тега svg также позволяет легко определять стили для графики с помощью CSS. Можно изменять свойства объекта, такие как цвет фона, прозрачность, рамки и так далее. Подобным же образом можно манипулировать графикой с помощью JavaScript.

Легко редактировать и анимировать

Объекты SVG можно анимировать с помощью CSS или JavaScript. Также объекты SVG можно модифицировать с помощью текстового редактора.

Меньший размер файла

SVG имеет меньший размер файла по сравнению с растровой графикой.

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

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

Линия

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

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

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

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

 

Прямоугольник

Прямоугольник выводится с помощью элемента <rect>. Нужно определить ширину и высоту.

  <svg>
  <rect fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
  </svg>

Круг

Для вывода круга используем элемент <circle>. В следующем примере мы создаем круг с радиусом 100, который определяется в атрибуте r:

  <svg>
  <circle cx="102" cy="102" r="100" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
  </svg>

Первый два атрибута cx и cy определяют координаты центра. В выше приведенном примере мы установили значение 102 для обеих координат. По умолчанию используется значение 0.

Эллипс

Для вывода эллипса используем элемент <ellipse>. Он работает так же, как и круг, но мы можем специально задавать радиусы по оси x и y с помощью атрибутов rx и ry:

  <svg>
  <ellipse cx="100" cy="50" rx="100" ry="50" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
  </svg>

Использование редактора для векторной графики

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

Но вы можете воспользоваться любым редактором для векторной графики (например, Adobe Illustrator илиInkscape) для создания объектов. Если вы владеете подобным инструментом, рисовать  в них нужные объекты существенно проще, чем кодировать графику в теге HTML.

Можно копировать команды для векторной графики из файла в документ HTML. Или можно встраивать файл.svg с помощью одного из следующих элементов: embed, iframe и object.

  <object data="images/ipod.svg" type="image/svg+xml"></object>

Результат будет одинаковым.

Поддержка в браузерах

SVG имеет хорошую поддержку в большинстве современных браузеров, за исключением IE версии 8 и более ранних. Но задачу можно решить с помощью библиотеки JavaScript Raphael.js. Для облегчения работы можно воспользоваться инструментом ReadySetRaphael.com для конвертации кода SVG в формат Raphael.

Сначала загружаем и включаем библиотеку Raphael.js в документ HTML. Затем загружаем файл .svg, копируем и вставляем полученный код в функцию после загрузки:

  window.onload=function() { 
           // Код Raphael размещается здесь
  }

В теге body размещаем следующий элемент div с идентификатором rsr.

  <div></div>

И все готово.

Источник

mortwood.by

Источник

Подскажите какой-нибудь хороший материал по изучению SVG?
Желательно на русском.
Какой редактор необходимо будет изучить и использовать?

Alexandr_TT's user avatar

Alexandr_TT

109k23 золотых знака111 серебряных знаков371 бронзовый знак

задан 12 фев 2018 в 17:04

Sinevik's user avatar

0

Книг на русском по svg очень мало, но они есть:

  1. Вадим Дунаев «Основы SVG»
    Для начала изучения вполне достаточно. Чувствуется, что писал книгу сильный практик. Кратко, но ёмко всё изложено. Множество примеров, показывающих самую суть. Объем книги небольшой, но всё основное, что нужно есть. От простого к сложному. Практически сразу вместе с книгой можно начинать писать свои примеры.
    Книга в формате pdf, легко найти, через поисковики.
  2. SVG Essentials J. David Eisenberg есть перевод на русский
    Вот эта книга,- настоящая библия SVG. Есть всё. Изложено очень доступно и коротко. Это основной источник для копирования контента на других ресурсах посвященных теории и практике SVG. Эта книга на русском онлайн.
  3. Интуит лекции 1-12 Очень солидный материал по SVG от А до Я. Много примеров.
  4. Сайт svg-art.ru — теория, практика, много примеров по анимации svg
  5. Сайт yoksel.ru — Статьи уже для разработчиков SVG. Некоторые разделы очень глубоко и творчески проработаны: например маски, паттерны, viewBox, анимация.
    Автор Юлия Бухвалова (Yulya Buhvalova), сейчас преподает в html академии.

Инструменты разработки

К сожалению ничего, такого, специализированного нет. Да в принципе и не нужно особо.
Так как svg легко правится в текстовом редакторе, например: Notepad++
Рисовать сложные фигуры можно в векторных редакторах: Inkscape, Adobe Illustrator.

Оптимизаторы кода SVG

  • SVGOMG — автор Jake Archibald
  • SVG Editor — автор Peter Collingridge
  • SVGO-GUI — автор GreLI

ответ дан 12 фев 2018 в 18:12

Alexandr_TT's user avatar

Alexandr_TTAlexandr_TT

109k23 золотых знака111 серебряных знаков371 бронзовый знак

1

svg-art.ru

webmaster.alexanderklimov.ru

developer.mozilla.org

youtube.com

Чуть не забыл, еще есть SVG_Chat

Но лучшим ресурсом можно назвать сей сайт… Где можно всегда найти ответ на вопрос. Только не забудьте правильно и внятно оформить вопрос, который должен содержать код, который вы питались реализовать, пояснения в чем именно у вас возникла проблема и описание конечного результата….

ответ дан 12 фев 2018 в 17:52

Air's user avatar

AirAir

14.5k6 золотых знаков33 серебряных знака70 бронзовых знаков

Введение в SVG, статьи и книги для изучения SVG с самых основ.

  1. Карманное руководство по написанию SVG. css-live.ru
  2. SVG Tutorial (на русском). developer.mozilla.org/ru (если после перехода по ссылке попадёте на англоязычную статью, то высока вероятность что можно будет перейти на русскую версию по выбору языка в меню). Или прямо с первой статьи на руссоком – Введение.
  3. Учебник HTML5 графики – SVG. msiter.ru
  4. Интуит. Введение в SVG. intuit.ru
  5. SVG Руководство. w3ii.com
  6. SVG Essentials (перевод книги). xiper.net

Рессурсы по SVG

  1. css.yoksel.ru (Страница с полезными ссылками по SVG, а так же много статей по SVG и CSS)
  2. svg-art.ru
  3. css-live.ru
  4. Наиболее адекватный рессурс по всему что поддерживают браузеры, раздел по SVG — developer.mozilla.org/ru

ответ дан 5 апр 2018 в 18:03

Дмитрий Полянин's user avatar

Дмитрий ПолянинДмитрий Полянин

13.6k1 золотой знак20 серебряных знаков50 бронзовых знаков

ответ дан 24 июн в 19:53

Антон Вощенков's user avatar

Источник

Русский вариант обложки книги Джони Трайтел «Карманное руководство по написанию SVG»

Display the source blob

Display the rendered blob


Raw


pocket-guide-to-writing-svg.cover.ru.svg

Sorry, something went wrong. Reload?

Sorry, we cannot display this file.

Sorry, this file is invalid so it cannot be displayed.

Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment

Источник

Понравилась статья? Поделить с друзьями:
  • Инструкция auraton 2005 на русском языке
  • Gigabyte b450 aorus pro мануал
  • Газпромбанк санкт петербург руководство
  • Бак сет беби инструкция для грудничков
  • Препарат натрия тетраборат инструкция по применению