Содержание

Карманное руководство по написанию 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дюймы
pc1/6 дюйма
pt1/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дюймы
pc1/6 дюйма
pt1/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дюймы
pc1/6 дюйма
pt1/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дюймы
pc1/6 дюйма
pt1/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 (абсолютная)movetox,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

КомандаИмяПараметрыРасшифровкаПример
ZclosepathотсутствуютZ
zz
<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 (абсолютная)linetox,yкоординаты конца отрезкаL50,100
l (относительная)l40,90
H (абсолютная)horizontal linetoxкоордината конца отрезка по оси X (по оси Y координата такая же как у предыдущей точки)h250
h (относительная)h200
V (абсолютная)vertical linetoyкоордината конца отрезка по оси 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 curvetox1,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 curvetox,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 (абсолютная)curvetox1,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 curvetox2,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 arcrx 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 пикселя.

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

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

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

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

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

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

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

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

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

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

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

Наконец, вы можете использовать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 в ваши проекты: встроенный, , фоновое изображение, или как URI данных. Мы будем уделять особое внимание использование встроенного SVG, которое включает в себя написание кода SVG в теле правильно структурированного HTML-документа.

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

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

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

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

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

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

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

Давайте теперь рассмотрим эти атрибуты на примере кода SVG, сгенерированного Illustrator, чтобы убедиться, что это не удивит вас, когда вы начнете:

В большинстве случаев DOCTYPE и атрибуты здесь в элементе не являются необходимыми и могут быть удалены, существенно «очистив» ваш код.

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

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

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

Текст

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

Общие примечания

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

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

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

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

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

  
     /> ->

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

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

Организация и семантика

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

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

Элемент svg

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

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

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

г Элемент

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

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

Предполагается, что любой элемент, не входящий в состав г , является отдельной группой.

используйте элемент

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

Использование здесь атрибута xlink: href позволяет вам вызвать элемент, который будет повторно использован. Например, если было с идентификатором «яблоко», содержащее изображение яблока, которое необходимо было повторно использовать, это изображение можно ссылаться на : .

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

defs Элемент

Хотя разрешает повторное использование уже визуализированной графики, графика в элементе не отображается на холсте, но на нее можно ссылаться и затем визуализировать с помощью xlink: href .

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

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

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

Символ
Элемент

Элемент аналогичен элементу , поскольку он обеспечивает способ группировки элементов, однако элементы в пределах не имеют визуального вывода (например, ) до тех пор, пока не будут вызваны с помощью в элемент .

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

Окно просмотра

SVG и viewBox , которые устанавливают систему координат для отображаемой графики, будут рассмотрены далее в другом разделе.

Порядок укладки

Порядок наложения SVG не может быть изменен с помощью z-index в CSS, как это могут делать другие элементы в HTML. Порядок расположения элементов SVG полностью зависит от их размещения во фрагменте документа.

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

  
    
         /> ->
         /> ->
         /> ->
    
    
         /> ->
         /> ->
         /> ->

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

  
    
         /> ->
         /> ->
         /> ->
    
    
         /> ->
         /> ->
         /> ->

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

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

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

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

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

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

Посмотреть демонстрацию можно здесь.

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

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

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

Круг

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

Посмотреть демонстрацию можно здесь.

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

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

Эллипс

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

Посмотреть демонстрацию можно здесь.

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

Строка

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

Посмотреть демонстрацию можно здесь.

Вместе значения x1 и y1 определяют координаты начала строки, а значения x2 и y2 определяют конец строки.

Полилиния

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

Посмотреть демонстрацию можно здесь.

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

Нечетное количество баллов здесь — ошибка.

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

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

Посмотреть демонстрацию можно здесь.

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

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

Элемент пути

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

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

данные пути

Данные пути содержатся в атрибуте d в элементе , определяющем контур для фигуры: .

Эти данные, включенные в атрибут d , составляют инструкции для пути moveto , line , curve , arc и closepath .

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

moveto

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

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

ближний путь

Ближний путь (Z или z) завершает текущий дополнительный путь, и в результате от этой точки до начальной точки пути проводится прямая линия.

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

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

линето

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

л, л

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

Верхний регистр L указывает на то, что последует абсолютное позиционирование, а нижний регистр — относительный.

H, h

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

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

В, в

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

Прописная буква V указывает на то, что последует абсолютное позиционирование, а строчная буква v является относительной.

Кривые команды

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Эллиптическая дуга

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

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

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

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

Посмотреть демонстрацию можно здесь.

встраивается из векторного программного обеспечения

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

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

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

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

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

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

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

Эта груша, к счастью, имеет соответствующее окно просмотра и viewBox :

  
     /> ->

Посмотреть демонстрацию можно здесь.

Вся груша видна в браузере и будет соответственно масштабироваться при изменении размеров области просмотра.

окно просмотра

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

Область просмотра устанавливается с помощью атрибутов высота и ширина в пределах .

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

viewBox

viewBox позволяет указать, что данный набор графики растягивается, чтобы соответствовать определенному элементу контейнера. Эти значения включают четыре числа, разделенных запятыми или пробелами: мин-x , мин-y , ширина , и высота , которая обычно должна быть установлена ​​в пределах области просмотра.

Значения min представляют, в какой точке изображения должен начинаться viewBox, а значения width и height определяют размер окна.

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

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

  
     /> ->

Посмотреть демонстрацию можно здесь.

Значения min в пределах viewBox определяют источник viewBox в родительском элементе. Другими словами, точка в viewBox , с которой вы хотите, чтобы он начал согласование с окном просмотра. На приведенном выше изображении груши значения мин установлены на 0,0 (вверху слева).Давайте изменим их на 50, 30: viewBox = "50 30 115 190" .

  
     /> ->

Посмотреть демонстрацию можно здесь.

viewBox теперь начинается на расстоянии 50 пикселей от оси x и 30 пикселей от оси y . При изменении этих значений изменилась часть груши, на которой делается акцент.

сохранить соотношение сторон

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

preserveAspectRatio принимает два параметра: и . Первый параметр состоит из двух частей и направляет выравнивание viewBox внутри области просмотра. Второй не обязателен и указывает, как должно сохраняться соотношение сторон.

preserveAspectRatio = "xMaxYMax meet"

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

Есть три варианта : встретить (по умолчанию), срез и нет. В то время как meet обеспечивает полную видимость графики (насколько это возможно), slice пытается заполнить область просмотра viewBox и затем отрежет любую часть изображения, которая не помещается внутри области просмотра после этого масштабирования. . нет приводит к отсутствию сохраненного соотношения сторон и потенциально искаженному изображению.

Возможно, самым простым значением здесь является «none», которое устанавливает, что не следует применять равномерное масштабирование. Если затем мы увеличим значения пикселей в области просмотра, изображение вишен ниже будет неравномерно растягиваться и выглядеть искаженным.

  
     /> ->

Посмотреть демонстрацию можно здесь.

Для preserveAspectRatio для изображения ниже установлено значение xMinYMax meet , которое выравнивает нижний левый угол viewBox по нижнему левому углу области просмотра (которая теперь выделена контуром). meet обеспечивает масштабирование изображения, чтобы максимально уместить его в окне просмотра.

  
     /> ->

Посмотреть демонстрацию можно здесь.

Вот те же вишенки, когда meet заменяется на slice :

  
     /> ->

Посмотреть демонстрацию можно здесь.

Обратите внимание, что значения выравнивания не должны коррелировать.

  
     /> ->

Посмотреть демонстрацию можно здесь.

В приведенном выше примере есть preserveAspectRatio из xMinYMid срез ; вишни теперь выровнены по середине оси y окна просмотра.

Преобразование системы координат

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

Эти функции включены в элемент, которым нужно управлять, и находятся в атрибуте .Можно использовать несколько преобразований, включив в этот атрибут несколько функций, например: transform = "translate (, ) rotate (<угол поворота>)" /> .

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

На следующем изображении показано преобразование системы координат, которое происходит при помещении перевода (100,100) в группу, содержащую графику:

Сама система координат была переведена, и изображение лайма и лимона сохранило свое исходное положение в этой системе.Новая пользовательская система координат имеет начало в местоположении (100,100) в исходной системе координат.

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

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

перевести

Функция translate определяет детали перемещения фигуры, и два числовых значения, включенные здесь, направляют перемещение по осям x и y : transform = "translate (, )" . Эти значения могут быть разделены пробелами или запятыми.

Значение y здесь является необязательным, и если оно опущено, предполагается значение «0».

повернуть

Значение в пределах rotate будет указывать поворот фигуры в ее исходной точке (в градусах), который для SVG равен 0,0 (вверху слева): transform = "rotate (<угол поворота>)" .

Здесь также есть возможность включить значения x и y : transform = rotate (<угол поворота> [, ]) .Если предоставлено, эти значения устанавливают новый центр вращения, отличный от установленного по умолчанию. к (что составляет 0,0).

Вот яблоко до и после применения поворота на 20 градусов: transform = "rotate (20)" . Обратите внимание, что это изображение не отражает изменение координат, которое делает это преобразование.

масштаб

Масштабирование позволяет изменять размер элементов SVG с помощью функции масштабирования .Эта функция принимает одно или два значения, которые определяют величину горизонтального и вертикального масштабирования вдоль соответствующей оси: transform = "scale ( [])" .

Значение sy является необязательным, и, если оно опущено, предполагается, что оно равно sx для обеспечения согласованного изменения размера.

Масштаб Значение «.5» визуализирует графику вдвое меньшего размера, чем был изначально, а значение «3» утроило бы этот первоначальный размер. Значение «4,2» приведет к масштабированию изображения в четыре раза его исходной ширины и в два раза его исходной высоты.

перекос

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

Вот изображение яблока до и после добавления skewX значения "20": transform = "skewX (20)" . Обратите внимание, что это изображение не отражает изменение координат, которое делает это преобразование.

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

«Краска» относится к действию применения цветов, градиентов или узоров к графике через заливку и / или штрих .

Свойства заливки

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

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

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

правило заполнения

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

Допустимые значения: ненулевое значение , четное , нечетное , наследует .

ненулевое значение

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

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

По сути, если внутренний путь нарисован по часовой стрелке, он будет считаться «внутренним», но если нарисован против часовой стрелки, он будет считаться «внешним» и, следовательно, будет исключен из рисования.

даже нечетное

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

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

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

наследовать

Значение наследовать заставит элемент взять на себя правило заполнения , указанное его родителем.

заливка, непрозрачность

Значение fill-opacity относится к уровню непрозрачности внутренней заливки краской. Значение «0» приводит к полной прозрачности, «1» не применяет прозрачность, а значения между ними представляют процентный уровень непрозрачности.

Атрибуты обводки

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

В следующих примерах используется встроенный SVG-файл винограда. Используемые атрибуты находятся непосредственно в элементе коррелирующей фигуры.

ход

Атрибут штриха определяет окраску «границы» определенных форм и контуров.

На следующем изображении винограда обводка фиолетового цвета: stroke = "# 765373" .

Посмотреть демонстрацию можно здесь.
ширина хода

Значение ширины штриха устанавливает ширину штриха винограда, которая установлена ​​на 6 пикселей на изображении винограда.

Значение по умолчанию для этого атрибута - 1.Если используется процентное значение, значение основывается на размерах области просмотра.

колпачок

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

Значение inherit будет указывать элементу на выполнение stroke-linecap , указанную его родителем.

Стержень на следующем изображении имеет штрих-колпачок значение квадрат :

  
     /> ->
     /> ->
     /> ->

Посмотреть демонстрацию можно здесь.
штрих-линия

объединение штрихов и линий определяет, как углы штрихов будут выглядеть на контурах и основных фигурах.

Вот виноград с гребнем стык со скосом :

  
     /> ->
     /> ->
     /> ->

Посмотреть демонстрацию можно здесь.
предел хода

Когда две линии встречаются под острым углом и для них установлено значение stroke-linejoin = "miter" , атрибут stroke-miterlimit позволяет указать, насколько далеко простирается это соединение / угол.

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

Это значение является ограничением отношения длины скоса к ширине штриха .

1.0 - наименьшее возможное значение для этого атрибута.

Для первого изображения винограда установлено значение stroke-miterlimit = "1.0" , что создает эффект скоса. Предел угла наклона на втором изображении установлен на 4.0 .

Посмотреть демонстрацию можно здесь.
инсульт-дашаррей

Атрибут stroke-dasharray превращает контуры в тире, а не в сплошные линии.

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

Если предоставлено нечетное количество значений, список затем повторяется для получения четного количества значений. Например, 8,6,4 превращается в 8,6,4,8,6,4 , как показано на втором изображении винограда ниже.

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

Посмотреть демонстрацию можно здесь.

Первое изображение винограда здесь показывает влияние четного числа перечисленных значений на путь винограда: stroke-dasharray = "20,15,10,8" .

штрих-тире смещение

stroke-dashoffset задает расстояние в шаблоне штрихов до начала штриха.

  
     /> ->
     /> ->
     /> ->

Посмотреть демонстрацию можно здесь.

В приведенном выше примере длина тире составляет 40 пикселей, а значение - смещение - 35 пикселей. В начальной точке пути штрих не станет видимым до тех пор, пока не войдет 35 пикселей в первый штрих в 40 пикселей, поэтому первый штрих появляется значительно. короче.

непрозрачность мазка

Атрибут непрозрачность обводки позволяет установить уровень прозрачности обводки.

Значение здесь - десятичное число от 0 до 1, где 0 полностью прозрачен.

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

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

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

Основные атрибуты

Атрибуты текста

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

x, y, dx, dy

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

В то время как x и y устанавливают координаты в абсолютном пространстве, dx и dy устанавливают относительные координаты. Это особенно удобно при использовании вместе с элементом , который будет обсуждаться далее в следующем разделе.

  
     Арбуз

Посмотреть демонстрацию можно здесь.

Приведенный выше текст начинается на 30 пикселей в области просмотра SVG, а нижняя часть текста устанавливается на 90 пикселей от верха этого окна просмотра: x = "30" y = "90" .

повернуть

Вращение может быть выполнено на отдельных буквах / символах и / или на элементе в целом.

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

В приведенном ниже тексте задано вращение всей графики с помощью элемента преобразования , а также значение для каждого глифа: rotate = "20,0,5,30,10,50,5,10,65,5 «.

  
     Арбуз

Посмотреть демонстрацию можно здесь.
textLength & lengthAdjust

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

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

  
     Арбуз

Посмотреть демонстрацию можно здесь.

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

Значение «интервал» приводит к изображению, которое напоминает приведенный выше пример, где интервал между символами увеличился, чтобы заполнить пространство: «lengthAdjust =» spacing »’.

Значение "spacingAndGlyphs" предписывает как интервал, так и размер глифа отрегулировать соответствующим образом: lengthAdjust = "spacingAndGlyphs" .

Посмотреть демонстрацию можно здесь.

Элемент tspan

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

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

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

В приведенном ниже примере «are» и «delicious» расположены внутри отдельных элементов внутри элемента . Используя dy в каждом из этих интервалов, мы позиционируем слово вдоль оси y. по отношению к слову перед ним.

В то время как «are» находится на -30 пикселей от «арбузов», «вкусный» располагается на расстоянии 50 пикселей от «are».

  
     Арбузы
         
         вкусно

Посмотреть демонстрацию можно здесь.

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

Посмотреть демонстрацию можно здесь.

tspan , содержащий «are», имеет следующий список значений dy : dy = "- 30 30 30" .

Свойства расстояния

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

Понимание того, как использовать эти свойства, помогает обеспечить точное отображение графики.

кернинг и межбуквенный интервал

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

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

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

  
     Апельсины

Регулировку длины между этими символами можно выполнить, просто включив числовое значение: kerning = "30" .

Также допустимо значение , наследование .

межбуквенный интервал имеет варианты значений нормальный , <длина> или наследование . Числовое значение здесь будет иметь такое же влияние на интервал, как , кернинг . Свойство letter-spacing предназначен для использования в качестве дополнительного интервала к любому интервалу, уже действующему от кернинга .

межсловный интервал

Th word-spacing Свойство определяет интервал между словами.

  
     Апельсины оранжевые

Другие допустимые значения здесь: нормальный (по умолчанию), а наследует .

оформление текста

Свойство text-decoration разрешает использование подчеркивания , надстрочного и сквозного в тексте SVG.

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

Линия до должна быть нарисована после того, как текст заполнен и / или обведен, визуализируя украшение поверх текста.

Вот посмотрите на text-decoration = "underline" и text-decoration = "line-through" .

текст по пути

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

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

Элемент textPath

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

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

Базовый синтаксис:

  
    
        <путь d = "<....> "/>
    
    <текст>
         Поместите здесь текст

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

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

  
    
        <путь 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 "/>
    
    
         Во всем мире существует более 8000 сортов винограда.
xссылка: href

Атрибут xlink: href в позволяет нам ссылаться на путь, по которому будет отображаться текст.

startOffset

Атрибут startOffset представляет длину смещения текста от начала пути . Значение «0%» указывает начальную точку пути , а «100%» указывает конечную точку.

В приведенном ниже примере для startOffset установлено значение «20%», которое подталкивает текст к началу 20% вдоль пути. Размер шрифта был уменьшен, чтобы он не отображался за пределами области просмотра при перемещении.

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

  
    
        
    
    <используйте xlink: href = "# testPath" fill = "none" stroke = "# 7aa20d" stroke-width = "2" />
    
         Во всем мире существует более 8000 сортов винограда.

Посмотреть демонстрацию можно здесь.

Градиенты

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

Очень простой линейный градиент имеет такую ​​структуру:

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

После построения градиента и присвоения ему идентификатора его можно вызвать с помощью атрибутов fill и / или stroke в SVG. Например, fill = "url (#gradientName)" .

Линейные градиенты

Линейные градиенты изменяют цвет равномерно вдоль прямой линии, и каждая точка (остановка), определенная на этой линии, будет представлять коррелирующий цвет в элементе . В каждой точке цвет имеет 100% насыщенность, а цвет пространство между ними выражает переход от одного цвета к другому.

узлов остановки

узлы также могут принимать непрозрачность с stop-opacity = ""

Ниже приведен код простого линейного градиента с двумя цветовыми ограничителями, примененными к прямоугольнику:

Посмотреть демонстрацию можно здесь.

смещение сообщает градиенту, в какой точке назначить коррелирующий стоп-цвет .

х1, у1, х2, у2

Значения атрибутов x1, y1, x2 и y2 представляют начальную и конечную точки, на которые отображаются остановки градиента (изменения цвета). Эти проценты будут отображать градиенты соответственно вдоль соответствующей оси.

Значение y , равное «100%», и значение x , равное «0», создадут горизонтальный градиент, а обратное значение - вертикальное.Если оба значения установлены на «100%» (или любое значение за пределами 0), будет отображаться наклонный градиент.

градиент Единицы

Атрибут gradientUnits определяет систему координат для значений x1, x2, y1, y2. Здесь есть два варианта значений: userSpaceOnUse или objectBoundingBox. userSpaceOnUse устанавливает систему координации градиента в абсолютном единиц, а objectBoundingBox (по умолчанию) устанавливает эту систему в пределах самой фигуры SVG, target.

метод распространения

Значение атрибута spreadMethod определяет, как градиент будет распространяться по фигуре, если он начинается или заканчивается внутри границ цели. Если градиент настроен так, чтобы не заполнять форму, spreadMethod определяет, как градиент должен покрывать это пустое пространство. Здесь есть три варианта: «проложить», «повторить» или «отразить».

Значение pad (по умолчанию) направляет первый и последний цвета градиента для распределения по оставшейся части непокрытой целевой области.Значение repeat указывает градиенту на непрерывное повторение шаблона с самого начала. Значение отражает будет отражать градиентный узор, непрерывно чередующийся от начала до конца и от начала до конца.

Начальная и конечная точки для градиента ниже: x1 = "20%" y1 = "30%" x2 = "40%" y2 = "80%".

gradientTransform

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

xссылка: href

Атрибут xlink: href позволяет вам вызывать идентификатор другого градиента, чтобы унаследовать его детали, но вы также можете включать другие значения.

Этот градиент наследует детали первого градиента из начала этого раздела, но имеет альтернативное значение spreadMethod.

Радиальные градиенты

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

cx, cy, r

Атрибуты cx , cy и r определяют крайнюю часть круга, и 100% стоп-цвет градиента будет отображаться на периметр этого значения. cx и cy определяют координату центра, а r задают радиус градиента.

FX, FY

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

Хотя по умолчанию точка фокусировки радиального градиента будет центрирована, атрибуты точки фокусировки могут это изменить. Значения фокусной точки для изображения ниже: fx = "95%" fy = "70%" .

  
    
        
            <смещение остановки = "0%" stop-color = "# ED6E46" />
            
            
            
            
            
            
            
            
            
            
        
    
     Вишня

Посмотреть демонстрацию можно здесь.

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

Узоры

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

Вот синтаксис базового шаблона, применяемого к прямоугольнику:

Посмотреть демонстрацию можно здесь.
Основные атрибуты

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

x, y, ширина, высота

Атрибуты x и y в элементе определяют, насколько далеко в форме будет начинаться узор. Ширина и высота, используемые в элементе , определяют фактическую ширину и высоту выделенного шаблона. космос.

Упомянутый выше «basicPattern» содержит следующие значения: x = «10» y = «10» . Узор будет начинаться на 10 пикселей от начала оси x, на 10 пикселей от начала оси y и, по сути, создаст «холст». то есть 40 пикселей в ширину и 40 пикселей в высоту.

Узор
, шт.

Атрибут patternUnits определяет координаты, для которых указываются x, y, ширина и высота. Здесь есть два варианта: userSpaceOnUse и objectBoundingBox (по умолчанию).

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

шаблонContentUnits

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

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

Определение patternUnits = "userSpaceOnUse" в элементе упрощает этот процесс и обеспечивает согласованное рабочее пространство.

Вложенные шаблоны

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

Вот структура базового вложенного шаблона:

  
    
        <шаблон
                 x = "4" y = "4"
                 patternUnits = "userSpaceOnUse">
            <круг cx = "12" cy = "12" r = "8"
                stroke = "# ed6e46" stroke-width = "3" fill = "# 765373" />
        
        <шаблон
                 x = "10" y = "10"
                 patternUnits = "userSpaceOnUse">

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

Посмотреть демонстрацию можно здесь.

Обтравочный контур

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

Чтобы продемонстрировать возможности этой функции, давайте воспользуемся обтравочным контуром, состоящим из текста «Яблоки», нанесенного на прямоугольник цвета помидора и зеленый круг.

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

Теперь посмотрим на код для применения текста «Яблоки» к этому «холсту».

  
    
         Яблоки

Посмотреть демонстрацию можно здесь.

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

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

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

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

Для получения новостей и обновлений посетите сайт книги, а если у вас есть какие-либо вопросы или комментарии относительно книги, со мной можно связаться в Twitter или по электронной почте [email protected].

31 отличный бесплатный и платный редактор SVG для UX-дизайнеров

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

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

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

Создавайте интерактивные прототипы из файлов SVG с Justinmind

Скачать бесплатно

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

Для создания файлов SVG и работы с ними вам понадобится редактор векторной графики. Вот 20 потрясающих бесплатных и платных редакторов SVG для Windows, Mac, Linux, Web, iOS и Android. Еще больше возможностей в сочетании лучшего редактора с подходящим инструментом для создания прототипов, поэтому давайте подберем для вас наиболее подходящий вариант.

15 эффективных онлайн-редакторов SVG

1. Vecteezy Editor

Бесплатно - веб-приложение

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

2. Бокси SVG

9,99 $ - доступно для Windows, macOS, Chrome OS и в виде веб-приложения

Boxy SVG - это действительно красиво оформленный редактор SVG, предназначенный как для профессиональных веб-дизайнеров и разработчиков, так и для нетехнических пользователей, которые только начинают работать с графикой SVG. Поскольку он использует систему рендеринга на основе Chromium, он отображает документы SVG точно так же, как ваш браузер Chrome для настольных компьютеров или мобильных устройств.Он содержит множество дополнительных функций, включая интеграцию с Google Fonts, интеграцию с открытой библиотекой клипов, и вы даже можете бесплатно опробовать его в Интернете.

3. Gravit Designer

Бесплатно (платная версия Pro: 99 евро в год) - доступно для Windows, macOS, Linux, Chrome OS и в виде веб-приложения

Corel's Gravit Designer - это мощный редактор SVG с множеством дополнительных функций по сравнению с некоторыми другими вариантами на рынке. Направленный непосредственно на дизайнеров, он идеально подходит для создания иллюстраций, экранов, презентаций, анимации и высококачественных значков.Его даже можно использовать для создания трехмерных симуляций.

4. Вектор

Бесплатно - доступно для Windows, Linux, Chrome OS и в виде веб-приложения. Платная версия в пути.

Vectr - бесплатный графический редактор, упрощающий создание векторной графики. За простым дизайном пользовательского интерфейса скрывается удивительно мощное и в то же время простое в использовании программное обеспечение. Работайте с различными формами, контурами и текстовыми инструментами, чтобы создавать простые векторные изображения и значки. Как и некоторые другие приложения, его также можно попробовать в Интернете в виде веб-приложения.

5. Метод розыгрыша

Бесплатно - веб-приложение

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

6. Vecta

Бесплатно - доступно онлайн

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

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

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

7. Янвас

10 $ в месяц - доступно онлайн

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

Подходящие как для профессионалов, так и для новичков, их панели геометрических и графических свойств помогут вам как проверять ваши SVG-файлы, так и даже изменять их свойства. Кроме того, у вас также есть панель слоев, как в Photoshop, Illustrator и Sketch, с параметрами блокировки или скрытия слоев в дополнение к важной функции привязки, которая поможет вам точно позиционировать объекты на холсте.

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

8. Нарисуйте SVG

Бесплатно - доступно онлайн

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

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

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

9. Обычный узор

Бесплатно - доступно онлайн

Если вам нужно создать шаблоны для фона веб-сайта или изображений, то нет более простого и бесплатного онлайн-решения, чем Plain Pattern.

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

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

10. SVG-Edit

Бесплатно - доступно онлайн

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

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

11. Векторизатор

12 $ в месяц - доступно онлайн

Vectorizer - это инструмент, который не позволяет редактировать SVG как таковые, а скорее конвертирует растровые изображения, такие как JPEG, PNG и BMP, в наши любимые масштабируемые векторные изображения. При цене около 12 долларов в месяц Vectorizer является относительно дешевым и обеспечивает качество, которое намного выше, чем у многих других инструментов, которые утверждают, что делают то же самое.

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

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

12. DesignEvo

Единовременный платеж 25 $ - доступно онлайн

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

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

Самое замечательное в этом редакторе SVG заключается в том, что он уже поставляется с тысячами шаблонов логотипов, которые на 100% настраиваются и разделены на разные категории, такие как Право и политика, Искусство и развлечения, Уход за детьми и образование, чтобы назвать несколько примеров.

13. Необработанные графики

Бесплатно, с открытым исходным кодом - доступно онлайн

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

Он работает путем преобразования простой таблицы данных в любую диаграмму или график, который вы хотите, а затем дает вам возможность экспортировать его в виде файла SVG. Для этой цели вы можете загрузить свои собственные файлы CSV, TSV, JSON или DSV.Как только вы попадаете на их домашнюю страницу, у вас есть возможность опробовать их редактор SVG, загрузив образец собственных данных или выбрав из их образцов данных.

Конечно, использование этого редактора SVG требует как минимум минимальных знаний в области визуализации данных, то есть вы должны знать свой x по оси y! Если вы так много знаете, все остальное они сделают за вас.

14. Флатикон

12 $ в месяц - доступно онлайн

Flaticon - это редактор SVG, принадлежащий компании freepikcompany, которой принадлежат домены freepik и слайды.Он делает то, что следует из названия: позволяет создавать значки. Это также дает вам доступ к тому, что они называют самой большой в мире базой данных иконок! Если вам нужен очень конкретный значок SVG для конкретной цели, не будет сомнений, что в этом редакторе SVG он будет. Просто найдите нужный значок в соответствующей категории, а затем вы сможете редактировать его по своему усмотрению с помощью бесплатного инструмента редактора SVG.

Это идеально подходит для опробования, и если вы хотите затем загрузить созданные вами значки, вы можете это сделать, но чтобы использовать их в коммерческих целях, вам необходимо указать авторство.Чтобы использовать без указания авторства, вам нужно будет заплатить ежемесячную абонентскую плату в размере 12 долларов США.

15. Фоны SVG

8 $ в месяц - доступно онлайн

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

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

16 редакторов SVG только для настольных ПК для Mac, Windows и Linux

1. Inkscape

Free - доступно для Windows, macOS, Linux

Inkscape - действительно популярный редактор SVG, который можно использовать бесплатно и кроссплатформенный. Inkscape идеально подходит для иллюстраторов, дизайнеров и веб-дизайнеров. В нем есть мощные инструменты для создания объектов и управления ими.Inkscape позволяет работать от руки, с фигурами и текстом, а также поддерживает ряд выходных форматов, включая PNG, OpenDocument, DXF, PDF, EPS, sk1 и другие.

2. Редактор SVG Sketsa

Free - доступно для Windows, macOS, Linux

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

3. Эскиз

99 $ / год - доступно для macOS

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

4.Inkpad

6,99 $ - доступно для iPad

Рисование на iPad становится все лучше и лучше, поэтому мы подумали, что добавим пару редакторов SVG для iPad. Inkpad - это инструмент для создания векторной графики на вашем iPad. Inkpad - это полноценный профессиональный редактор SVG, который можно носить с собой куда угодно, с неограниченным количеством слоев, гибкими эффектами типографики и широким набором параметров импорта и экспорта. Кроме того, он отлично работает с Apple Pencil на iPad Pro.

5.iDesign

7,99 $ - доступно для iPhone и iPad

Разработанный специально для рисования пальцем, iDesign упрощает создание двухмерной векторной графики на iPad или iPhone. Его специально разработанные ручки со смещением помогают перемещать и размещать объекты, не загораживая обзор пальцем. iDesign включает логические операции с фигурами и автоматическое сглаживание контуров, чтобы немного упростить жизнь.

6. Adobe Illustrator Draw

Бесплатно (покупка в приложении для облачного хранилища) - доступно для iPad, iPhone и Android

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

7. Affinity Designer

64,55 $ - доступно для Windows, Mac и iPad

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

В дополнение к этим функциям Affinity Design позволяет работать с тысячами изображений одновременно без каких-либо задержек. Он также позволяет вам организовывать различные слои в группы и даже использовать цветовую маркировку - теперь это новаторский подход!

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

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

8. CorelDRAW

843,94 $ - доступно для Windows и Mac

Еще один популярный редактор SVG, о котором мы постоянно слышим, - это CorelDRAW Graphics Suite 2020. Corel позволяет создавать и редактировать векторные иллюстрации, а также поставляется с инструментом для редактирования фотографий.

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

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

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

9. Xara Designer Pro

299 $ - доступно для Windows, Mac, iPad и планшета

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

Используя Xara, вы сможете легко и быстро настроить прозрачность векторов и градиентную заливку. Как и в таких инструментах, как Sketch и Illustrator, вы можете воспользоваться простой функцией перетаскивания, чтобы импортировать файлы SVG в инструмент для редактирования.

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

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

10. macSVG

Бесплатно - доступно для Windows, Mac, Linux, Android и iOS

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

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

11. Chartist.Js

Бесплатно - доступно для Windows и Mac

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

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

Самое лучшее? Любые диаграммы, которые вы создаете с помощью этого редактора, на 100% адаптируются!

12. Vectornator

Бесплатно - редактор SVG для Mac

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

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

13. SaviDraw

Единовременный платеж 20 $ - Windows SVG Editor

SaviDraw - дешевый и относительно неизведанный редактор SVG, доступный для Windows.Это простой, быстрый и мощный инструмент, позволяющий быстро и легко рисовать новые векторные изображения для добавления в файлы Microsoft Office, такие как документы Word и PowerPoints, но, конечно, вы также можете использовать их для веб-дизайна.

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

14. Крита

Free - редактор SVG для всех платформ

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

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

15. EasyDraw

Бесплатно до 30 изображений или 20 долларов в течение 9 месяцев - Mac SVG Editor

EasyDraw предназначен исключительно для Mac OS и специально предназначен для создания высококачественных векторных иллюстраций и значков приложений. Посетите веб-сайт, и он выглядит как что-то из нулевых, но загрузите редактор SVG, и вы увидите, что в инструментах векторного рисования нет недостатка. Он также доступен для светлого и темного режима, чтобы дать усталым глазам отдохнуть или поднять настроение.

SVG

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

16. Карбон

Free - редактор SVG для всех платформ

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

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

Заключение

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

путей - SVG 2

путей - SVG 2

Содержание

    1. 9.1. Введение
    2. 9.2. Элемент «путь»
    3. 9.3. Данные пути
      1. 9.3.1. Общая информация о данных пути
      2. 9.3.2. Указание данных пути: свойство «d»
      3. 9.3.3. "moveto" управляет
      4. 9.3.4. Команда "closepath"
        1. 9.3.4.1. Завершающая сегмент операция закрытия пути
      5. 9.3.5. "lineto" управляет
      6. 9.3.6. Кубическая кривая Безье дает команду
      7. 9.3.7. Квадратичная кривая Безье дает команду
      8. 9.3.8. Эллиптическая дуга управляет
      9. 9.3.9. Грамматика данных пути
    4. 9.4. Направленность трассы
    5. 9.5. Примечания по реализации
      1. 9.5.1. Параметры эллиптической дуги вне допустимого диапазона
      2. 9.5.2. Отраженные контрольные точки
      3. 9.5.3. Сегменты пути нулевой длины
      4. 9.5.4. Обработка ошибок в данных пути
    6. 9.6. Расстояние по трассе
      1. 9.6.1. Атрибут pathLength
    7. 9.7. Интерфейсы DOM
      1. 9.7.1. Интерфейс SVGPathElement

9.1. Введение

Путь представляет собой контур фигуры, которую можно заливать или погладил. Путь также можно использовать в качестве обтравочного контура для описания анимация или расположение текста. Путь может использоваться более чем для одного из эти функции одновременно.(Видеть Серверы заливки, обводки и покраски, Обрезка и маскирование, Анимация ('animateMotion'), и текст на пути.)

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

Пути представляют собой геометрию контура объекта, определяется в терминах перейти к (установить новую текущую точку), lineto (начертить прямую), curveto (нарисовать кривая с использованием кубической кривой Безье), дуга (эллиптическая или дуги окружности) и closepath (замкнуть текущую shape, подключившись к последним командам moveto ).Составные пути (т. Е. Путь с несколькими подпутьями) являются можно разрешить такие эффекты, как «дырки от бублика» в объектах.

В этой главе описываются синтаксис, поведение и DOM. интерфейсы для путей SVG. Различные примечания по реализации для SVG пути можно найти в реализации элемента «path» Заметки.

Путь определяется в SVG с помощью элемента «path».

Все основные формы описаны с точки зрения их эквивалентный путь , который является какова их форма как тропинка.(Эквивалентный путь Элемент «path» - это просто сам путь.) Чтобы определить основные формы как эквивалентные пути, определена завершающая сегмент операция замыкания пути, который в настоящее время не может быть представлен в синтаксисе основного пути.

9.2. Элемент «путь»

' path '

Категории:
Графический элемент, визуализируемый элемент, элемент формы
Модель содержимого:
Любое количество следующих элементов в любом порядке: clipPath, маркер, маска, скрипт, стиль
Атрибуты:
  • атрибуты aria - 'aria-activedescendant', 'aria-atomic', 'aria-autocomplete', 'aria-busy', 'aria-checked', 'aria-colcount', 'aria-colindex' , 'aria-colspan', 'aria-controls', 'aria-current', 'aria -hibitedby', 'aria-details', 'aria-disabled', 'aria-dropeffect', 'aria-errormessage', ' aria-extended, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria- labelledby ',' aria-level ',' aria-live ',' aria-modal ',' aria-multiline ',' aria-multiselectable ',' aria-Ориентация ',' aria-own ',' aria-placeholder ' , 'aria-posinset', 'aria-press', 'aria-readonly', 'aria-related', 'aria-required', 'aria-roledescription', 'aria-rowcount', 'aria-rowindex', 'aria-rowspan', 'aria-selected', 'aria-setsize', 'aria-sort', 'aria-valuemax', 'aria-valuemin', 'aria-valuenow', 'aria -valuetext ',' role '
  • атрибутов условной обработки -' requiredExtensions ',' systemLanguage '
  • основных атрибутов -' id ',' tabindex ',' lang ',' xml: space ',' class ',' style '
  • глобальные атрибуты событий - oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown ',' onkeypress ',' onkeyup ',' onload ',' onloadeddata ',' onloadedmetadata ',' onloadstart ',' onmousedown ',' onmouseenter ',' onmouseleave ',' onmousemove ',' onmouseout ',' onmouseover ', onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeke d ',' onseeking ',' onselect ',' onshow ',' onstalled ',' onsubmit ',' onsuspend ',' ontimeupdate ',' onggle ',' onvolumechange ',' onwaiting '
  • атрибуты событий элемента документа -' oncopy ',' oncut ',' onpaste '
  • графические атрибуты событий -' onfocusin ',' onfocusout '
  • атрибуты презентации -
  • ' pathLength '
Свойства геометрии:
Интерфейсы DOM:

Контур формы для элемента «путь» задается с помощью d имущество.См. Данные о пути ниже.

9.3. Данные пути

9.3.1. Общая информация о данных пути

Путь определяется включением «пути» элемент, для которого свойство d указывает данные пути. Данные пути содержат moveto , lineto , curveto (кубическая и квадратичный Безье), arc и closepath инструкции.

Пример треугольника01 указывает путь в форме треугольника. (В M обозначает переход от к , L s обозначают лин до s, а z обозначает ближний путь ().

 

   Пример треугольника01 - простой пример "пути" 
   Путь, изображающий треугольник

Пример треугольника01

Просмотреть этот пример как SVG (только для браузеров с поддержкой SVG)

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

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

  • Все инструкции выражаются одним символом (например, moveto выражается как M ).

  • Избыточный пробел и разделители (например, запятые) могут быть устраненным; например, следующее содержит ненужные мест:

    м 100100 л 200200

    Более компактно это можно выразить как:

    M100 100L200 200

  • Буква команды может быть удалена, если идентичная команда в противном случае ему предшествовало бы письмо; например, следующие содержит ненужную вторую команду "L":

    М 100200 л 200100 л -100-200

    Более компактно это можно выразить как:

    M 100200 L 200100-100-200

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

Синтаксис данных пути представляет собой префиксную нотацию (т. Е. Команды за которыми следуют параметры).Единственная допустимая десятичная точка - это Юникод U + 0046 FULL STOP (".") Символ (также называемый в Юникоде как PERIOD, точка и десятичная точка) и никаких других разделителей разрешены символы [UNICODE]. (Например, следующее недопустимое числовое значение в потоке данных пути: «13,000,56». Вместо этого скажите: «13000,56».)

Для относительных версий команд все координаты значения относятся к текущей точке в начале команда.

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

  • (): группировка параметров
  • +: требуется 1 или несколько заданных параметров

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

9.3.2. Указание данных пути: свойство «d»

Имя: д
Значение: нет |
Начальное: нет
Применимо к: «путь»
Унаследовано: нет
процентов: НЕТ
Медиа: визуал
Вычисленное значение: как указано
Анимация: да

Свойство d используется для определения формы элемента «путь».

Значение none указывает, что нет данные пути для элемента. Для элементов «path» это означает, что элемент не отображает и не влияет на ограничивающую рамку предка элементы контейнера.

Путь состоит из нескольких сегментов, и каждая команда, либо явная или неявно, кроме moveto или closepath, определяет один сегмент пути .

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

Значение задает форму, используя строку данных пути. Содержание Значение должно соответствовать svg-path Грамматика EBNF определена ниже, и ошибки в строке обрабатываются в соответствии с правила в разделе Обработка ошибок данных пути. Если строка данных пути не содержит допустимых команд, то поведение то же самое, что и значение none.

Для анимации два значения свойства d могут быть только гладко интерполируется, когда строки данных пути содержат та же структура, (т.е. точно такое же количество и типы данных пути команды, расположенные в том же порядке). Если указана анимация и списки команд данных пути имеют разную структуру, тогда значения должны быть интерполированный с помощью дискретный тип анимации.

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

Решено, что "d станет атрибутом презентации (без имени изменить) со строкой данных пути в качестве значения "в Лондон Встреча редакторов.

В следующих разделах перечислены команды, которые можно использовать. в строках данных пути. Те что рисовать отрезки прямых линий, включая команды lineto ( л , л , H , h , V и v ) и команды закрытия пути ( Z и z ). Эти три группы команд рисуют кривые:

  • Кубический Команды Безье ( C , c , S и с ).Кубический отрезок Безье определяется по начальной, конечной и двум контрольным точкам.
  • Квадратичная Команды Безье ( Q , q , T и т ). Квадратичный отрезок Безье - это определяется начальной точкой, конечной точкой и одним элементом управления точка.
  • Эллиптический команды arc ( A и a ). Сегмент эллиптической дуги рисует сегмент эллипса.

9.3.3.

"moveto" команд

Команды "moveto" ( M или м ) необходимо установить новую начальную точку и новая текущая точка.Эффект такой, как если бы «перо» подняли и переместили в новое место. Сегмент данных пути (если он есть) должен начинаться с "moveto". команда. Последующие команды "moveto" (т. Е. Когда "moveto" не первая команда) представляют собой начало нового подпуть :

Команда Имя Параметры Описание
M (абсолютное)
m (относительное)		 moveto (х у) + Начните новый дополнительный путь с заданными координатами (x, y). M (верхний регистр) означает, что абсолютное координаты последуют; м (строчные) указывает, что последуют относительные координаты. Если moveto за которыми следуют несколько пар координат, последующие пары рассматриваются как неявные команды lineto. Следовательно, неявный lineto команды будут относительными, если moveto является относительным, и absolute, если moveto является абсолютным. Если относительный ход ( м ) появляется как первый элемент пути, тогда он рассматривается как пара абсолютных координат.В этом случае последующие пары координат рассматриваются как относительные даже если начальное движение интерпретируется как абсолютное движение.

Когда используется относительная команда m , позиция перемещена в ( cpx + x , копий + y ).

9.3.4.

"closepath" команда

"Ближний путь" ( Z или z ) завершает текущий подпуть, возвращая его в исходную точку.Автоматический от текущей точки к начальной проводится прямая линия текущего подпути. Этот сегмент пути может быть нулевым длина.

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

Когда подпуть заканчивается «закрытым путем», он отличается по поведению. из того, что происходит, когда "вручную" закрывает подпуть через команда "lineto" в способе соединения "штрих-линия" и «штрих-линейный колпачок».С "closepath" конец последнего сегмента подпути "соединяется" с началом начального сегмент подпути, использующий текущее значение «stroke-linejoin». Если вместо этого вы "вручную" закроете подпуть через "lineto" команда, начало первого сегмента и конец последнего сегменты не соединяются, а вместо этого каждый закрывается с помощью текущее значение «stroke-linecap». В конце команды новая текущая точка устанавливается на начальная точка текущего подпути.

Команда Имя Параметры Описание
Z или
z 		closepath (нет) Закройте текущий подпуть, подключив его обратно к текущему начальная точка подпути (см. выше). Поскольку Z и z Команды не принимают параметров, они имеют идентичный эффект.

Замкнутый подпуть должен быть закрыт команда "closepath", она "соединяет" первый и последний сегменты пути.Любой другой путь - это открытый подпуть .

Закрытый подпуть отличается по поведению из открытого подпути, конечная координата которого является начальной точкой подпути. Первый и последний сегменты открытого подпути не будут соединены, даже если конечной координатой последнего сегмента пути является начальная точка подпути. Это приведет к первому и последнему сегменты контура ограничиваются текущим значением stroke-linecap вместо того, чтобы соединяться с использованием текущего значения stroke-linejoin.

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

9.3.4.1. Завершающая сегмент операция закрытия пути

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

Завершающая сегмент операция закрытия пути объединяет с предыдущей командой пути, с двумя эффектами:

  • Это гарантирует, что конечная точка координат предыдущей команды точно совпадает начальная точка текущего подпути.
  • Он соединяет конечную и начальную точки подпути, делая его замкнутым подпутьем.

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

9.3.5.

"линето" команд

Различные команды "lineto" рисуют прямые линии от от текущей точки к новой:

Команда Имя Параметры Описание
L (абсолютное)
l (относительное)		 линето (х у) + Проведите линию от текущей точки до заданной (x, y) координата, которая становится новой текущей точкой. L (верхний регистр) указывает, что абсолютное координаты последуют; л (строчные буквы) указывает, что последуют относительные координаты. Число пары координат могут быть указаны для рисования ломаной линии. В конце команды новая текущая точка устанавливается на предоставленный окончательный набор координат.
H (абсолютное)
h (относительное)		 горизонтальная линия х + Рисует горизонтальную линию от текущей точки. H (верхний регистр) указывает что последуют абсолютные координаты; ч (нижний регистр) указывает, что относительные координаты будут следить. Может быть указано несколько значений x (хотя обычно это не имеет смысла). H или h команда эквивалентна L или l команда с 0 указанным для координаты y. В конце команды новая текущая точка берется из окончательного значения координаты.
V (абсолютное)
v (относительное)		 вертикальная линия г + Рисует вертикальную линию от текущей точки. V (верхний регистр) означает, что последуют абсолютные координаты; в (нижний регистр) указывает, что относительные координаты будут следить. Может быть указано несколько значений y (хотя обычно это не имеет смысла). A В или В команда эквивалентна L или l команда с 0 указанным для координаты x.В конце команды новая текущая точка берется из окончательного значения координаты.

Когда используется относительная команда l , конечная точка линии ( cpx + x , копий + y ).

Когда используется относительная команда h , конечная точка линии ( cpx + x , копий ). Это означает что команда h с положительным x value рисует горизонтальную линию в направлении положительной оси x.

Когда используется относительная команда v , конечная точка линии - ( cpx , копий + y ).

9.3.6. Кубическая кривая Безье дает команду

Кубические команды Безье следующие:

Команда Имя Параметры Описание
C (абсолютный)
c (относительный)		 кривой до (х1 у1 х2 у2 х у) + Рисует кубическую кривую Безье по текущему указать на (x, y), используя (x1, y1) в качестве контрольной точки в начало кривой и (x2, y2) в качестве контрольной точки в конец кривой. C (прописные) указывает, что последуют абсолютные координаты; c (нижний регистр) указывает, что относительный координаты последуют. Несколько наборов координат могут указать, чтобы нарисовать полибезье. В конце команда, новая текущая точка становится последней (x, y) пара координат, используемая в полибезье.
S (абсолютный)
s (относительный)		 сокращение / плавная кривая до (x2 y2 x y) + Рисует кубическую кривую Безье по текущему указать на (x, y).Предполагается, что первая контрольная точка отражение второй контрольной точки на предыдущей команду относительно текущей точки. (Если нет предыдущая команда или если предыдущая команда не была C, c, S или s, предположим, что первая контрольная точка совпадает с текущей точкой.) (x2, y2) - второй элемент управления точка (т. е. контрольная точка в конце кривой). S (верхний регистр) означает, что абсолютное координаты последуют; с (строчные буквы) указывает, что последуют относительные координаты.Несколько наборы координат могут быть указаны для рисования полибезье. В конце команды новый текущая точка становится последней используемой парой координат (x, y) в полибезье.

При родственнике c или s используется команда, каждая из относительных пар координат вычисляется так же, как и в команде m . Например, конечная контрольная точка кривой обе команды: ( cpx + x , копий + y ).

Пример cubic01 показывает некоторые простое использование кубических команд Безье в пути. В пример использует внутреннюю таблицу стилей CSS для назначения стиля характеристики. Обратите внимание, что контрольной точкой для команды "S" является вычисляется автоматически как отражение контрольной точки для предыдущей команды "C" относительно начальной точки Команда "S".

 

   Пример cubic01 - кубические команды Безье в данных пути 
   Изображение, показывающее простой пример данных пути
        используя команды "C" и "S",
        вместе с аннотациями, показывающими контрольные точки
        и конечные точки 
  

  

  
  
  
  
  
  <круг cx = "100" cy = "200" r = "10" />
  <круг cx = "250" cy = "200" r = "10" />
  <круг cx = "400" cy = "200" r = "10" />
  <круг cx = "100" cy = "100" r = "10" />
  <круг cx = "250" cy = "100" r = "10" />
  <круг cx = "400" cy = "300" r = "10" />
  <круг cx = "250" cy = "300" r = "9" />
   M100,200 C100,100 250,100 250,200 
   S400,300 400,200

Пример cubic01

Просмотреть этот пример как SVG (только браузеры с поддержкой SVG)

На следующем рисунке показано, как кубический Безье кривые меняют свою форму в зависимости от положения контрольные точки.Первые пять примеров иллюстрируют один кубический отрезок пути Безье. Пример внизу справа показана команда «C», за которой следует команда «S».

Просмотр этот пример как SVG (только браузеры с поддержкой SVG)

9.3.7. Квадратичная кривая Безье дает команду

Квадратичные команды Безье следующие:

Команда Имя Параметры Описание
Q (абсолютный)
q (относительный)		 квадратичная кривая Безье до (x1 y1 x y) + Строит квадратичную кривую Безье по текущему укажите на (x, y), используя (x1, y1) в качестве контрольной точки. Q (верхний регистр) указывает, что абсолютное координаты последуют; q (строчные буквы) указывает, что последуют относительные координаты. Несколько наборы координат могут быть указаны для рисования полибезье. В конце команды новый текущая точка становится последней используемой парой координат (x, y) в полибезье.
T (абсолютное)
t (относительное)		 Сокращение / гладкая квадратичная кривая Безье до (х у) + Строит квадратичную кривую Безье по текущему указать на (x, y).Контрольной точкой считается отражение контрольной точки на предыдущей команде относительно текущей точки. (Если нет предыдущего команда или если предыдущая команда не была Q, q, T или t, предположим, что контрольная точка совпадает с текущей точки.) T (верхний регистр) означает, что последуют абсолютные координаты; т (нижний регистр) указывает, что относительные координаты будут следить. В конце команды новая текущая точка становится последней парой координат (x, y), используемой в полибезье.

При родственнике q или t используется команда, каждая из относительных пар координат вычисляется так же, как и в команде m . Например, конечная контрольная точка кривой обе команды: ( cpx + x , копий + y ).

Пример quad01 показывает некоторые простое использование квадратичных команд Безье внутри контура. Обратите внимание, что контрольная точка для команды "T" вычисляется автоматически как отражение контрольной точки для предыдущая команда "Q" относительно начальной точки "T" команда.

 

   Пример quad01 - квадратичные команды Безье в данных пути 
   Изображение, показывающее команду "Q" или "T",
        вместе с аннотациями, показывающими контрольные точки
        и конечные точки 
  

  
  
  
    <круг cx = "200" cy = "300" r = "10" />
    
    <круг cx = "1000" cy = "300" r = "10" />

Пример quad01

Просмотреть этот пример как SVG (только для браузеров с поддержкой SVG)

9.3.8. Команды кривой эллиптической дуги

SVG 2 Требование: Упростите рисование дуг в синтаксисе пути SVG.
Разрешение: Упростите создание дуг в путях.
Назначение: Чтобы облегчить авторам запись данных пути с дугами вручную.
Владелец: Кэмерон (ACTION-3151)

Команды эллиптической дуги следующие:

Команда Имя Параметры Описание
A (абсолютный)
a (относительный)		 эллиптическая дуга (rx ry x-axis-rotation big-arc-flag sweep-flag x г) + Рисует эллиптическую дугу от текущей точки до ( x , y ).Размер и ориентация эллипса определяется двумя радиусами ( RX , Ry ) и x-axis-rotation , которая указывает, как эллипс в целом поворачивается в градусах относительно текущего система координат. Центр ( cx , г. cy ) эллипса вычисляется автоматически, чтобы удовлетворить ограничения, налагаемые другие параметры. флаг с большой дугой и развертка-флаг способствует автоматическому расчеты и помогают определить, как нарисована дуга.

Когда используется относительная команда , конечная точка дуги составляет ( cpx + x , копий + y ).

Пример arcs01 показывает некоторые простое использование команд дуги внутри контура.

 

   Пример arcs01 - команды дуги в данных пути 
   Изображение круговой диаграммы с двумя секторами и
        изображение линии с метками по дуге

Пример arcs01

Просмотреть этот пример как SVG (только для браузеров с поддержкой SVG)

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

  • дуга начинается в текущей точке
  • дуга заканчивается в точке ( x , л )
  • эллипс имеет два радиуса ( rx , ry )
  • ось абсцисс эллипса поворачивается на x-axis-вращение градусов относительно x-оси текущая система координат.

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

  • Из четырех возможных свипов дуги два будут представлять размах дуги не менее 180 градусов ( "большая дуга"), а два будут представлять длину дуги менее чем или равный 180 градусам («малая дуга»).Если флаг с большой дугой - это '1', затем один из двух будут выбраны более крупные развертки дуги; в противном случае, если флаг с большой дугой - это «0», один из меньших будут выбраны развертки дуги,
  • Если sweep-flag равен «1», то дуга будет быть нарисованным в направлении "положительного угла" (т. е. эллипс формула x = cx + rx * cos (тета) и y = cy + ry * sin (theta) равно оценивается так, что тета начинается под углом, соответствующим текущей точке и увеличивается положительно, пока дуга достигает (x, y)).Значение 0 заставляет дугу рисовать направление "отрицательный угол" (т. е. тета начинается под углом значение, соответствующее текущей точке, и уменьшается до тех пор, пока дуга достигает (x, y)).

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

где "?,?" заменяется на «0,0» «0,1» «1,0» и «1,1» на сгенерируйте четыре возможных случая.

Просмотр этот пример как SVG (только браузеры с поддержкой SVG)

См. Раздел Параметры эллиптической дуги, выходящие за пределы допустимого диапазона. подробные примечания по реализации для команды эллиптической дуги данных пути.

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

9.3.9. Грамматика для данных пути

Данные пути SVG соответствуют следующей грамматике EBNF.

svg_path :: = wsp * moveto? (перейти к drawto_command *)?

drawto_command :: =
    двигаться
    | близкий путь
    | Lineto
    | horizontal_lineto
    | vertical_lineto
    | кривая
    | smooth_curveto
    | quadratic_bezier_curveto
    | smooth_quadratic_bezier_curveto
    | эллиптическая_ дуга

moveto :: =
    ("M" | "m") wsp * последовательность_координат

closepath :: =
    ("Z" | "z")

lineto :: =
    ("L" | "l") wsp * последовательность_координат

horizontal_lineto :: =
    ("H" | "h") wsp * последовательность_координат

vertical_lineto :: =
    ("V" | "v") wsp * последовательность_координат

curveto :: =
    ("C" | "c") wsp * curveto_coordinate_sequence

последовательность_координат_кривой :: =
    Coordin_pair_triplet
    | (тройка_координат запятая? последовательность_координат_координат)

smooth_curveto :: =
    ("S" | "s") wsp * smooth_curveto_coordinate_sequence

smooth_curveto_coordinate_sequence :: =
    Coordinate_pair_double
    | (Coordinate_pair_double comma_wsp? smooth_curveto_coordinate_sequence)

quadratic_bezier_curveto :: =
    ("Q" | "q") wsp * quadratic_bezier_curveto_coordinate_sequence

quadratic_bezier_curveto_coordinate_sequence :: =
    Coordinate_pair_double
    | (пара_координат_двойная запятая_wsp? quadratic_bezier_curveto_coordinate_sequence)

smooth_quadratic_bezier_curveto :: =
    ("T" | "t") wsp * последовательность_координат

эллиптическая_дуга :: =
    ("A" | "a") wsp * elliptical_arc_argument_sequence

elliptical_arc_argument_sequence :: =
    elliptical_arc_argument
    | (эллиптическая_дуга_аргумент запятая_всп? эллиптическая_дуга_аргумент_последовательность)

эллиптический_дуговой_аргумент :: =
    число comma_wsp? число comma_wsp? число comma_wsp
    флаг comma_wsp? флаг comma_wsp? Coordin_pair

двойной_координат :: =
    ordin_pair comma_wsp? Coordin_pair

Coordin_pair_triplet :: =
    Coordin_pair comma_wsp? Coordin_pair comma_wsp? Coordin_pair

последовательность_пар_координат :: =
    Coordin_pair | (пара_координат, запятая_wsp? последовательность_пар_координат)

последовательность_координат :: =
    координата | (координата запятая? последовательность_координат)

пара_координат :: = координата comma_wsp? координировать

координата :: = знак? номер

знак :: = "+" | "-"
число :: = ([0-9]) +
flag :: = ("0" | "1")
comma_wsp :: = (wsp + ","? wsp *) | ("," wsp *)
wsp :: = (# x9 | # x20 | #xA | #xC | #xD)

Обработка EBNF должна потреблять как можно больше заданного Производство EBNF по мере возможности, останавливаясь в момент, когда встречается персонаж, который больше не удовлетворяет производство.Таким образом, в строке «М 100-200» первая координата для "moveto" потребляет символы "100" и останавливается при встрече со знаком минус, потому что знак минус не может следовать за цифрой при производстве «координаты». В в результате первая координата будет "100", а вторая координата будет «-200».

Аналогично для строки «M 0.6.5» первая координата "moveto" потребляет символы "0,6" и останавливается на встречает вторую десятичную точку, потому что производство «координата» допускает только одну десятичную точку.Результат что первая координата будет "0,6", а вторая координата будет ".5".

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

Если данные пути не соответствуют грамматике, значит, данные пути ошибочны. (см. Обработка ошибок).

9.4. Направленность пути

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

Направление пути в указанном расстояние по пути определяется следующим образом:

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

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

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

Направление в начале сегмента пути определяется следующим образом:

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

Направление в конце пути сегмент определяется следующим образом:

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

9,5. Примечания по реализации

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

9.5.1. Параметры эллиптической дуги вне допустимого диапазона

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

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

  • Если rx или ry равно 0, тогда эта дуга рассматривается как отрезок прямой ("lineto"), соединяющий конечные точки.

  • Если rx или ry имеют отрицательные знаки, они опущены; вместо этого используется абсолютное значение.

  • Если rx , ry и x-axis-rotation таковы, что нет решения (в основном эллипс недостаточно большой, чтобы дотянуться до от текущей точки до новой конечной точки) затем эллипс увеличивается равномерно, пока не будет ровно одно решение (пока эллипс как раз достаточно большой).

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

Это снисходительное, но последовательное обращение с выходом за пределы допустимого диапазона values ​​гарантирует, что:

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

9.5.2. Отраженные контрольные точки

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

Если текущая точка ( curx , cury ) и конечная контрольная точка предыдущего отрезка пути ( oldx2 , oldy2 ), затем отраженная точка (т.е.е., ( новыйx1 , newy1 ), первая контрольная точка текущего сегмента пути):

(newx1, newy1) = (curx - (oldx2 - curx), cury - (oldy2 - любопытный))
               = (2 * curx - старыйx2, 2 * cury - oldy2)

9.5.3. Сегменты тракта нулевой длины

Сегменты пути с нулевой длиной недействительны, и повлияет на рендеринг в следующих случаях:

  • Если указаны маркеры, то маркер рисуется на каждую применимую вершину, даже если данная вершина конечная точка отрезка пути нулевой длины и даже если Команды moveto следуют друг за другом.
  • Как указано в Stroke Properties, заглушки должны быть окрашены для подпути нулевой длины, когда stroke-linecap имеет значение круглый или квадратный.

9.5.4. Обработка ошибок в данных пути

Нераспознанное содержимое в потоке данных пути (т. Е. содержимое, не являющееся частью грамматики данных пути) является ошибка. В таком случае необходимо использовать следующие правила обработки ошибок:
  • Общее правило обработки ошибок в данных пути: что пользовательский агент SVG должен отображать элемент «путь» вверх к (но не включая) команду пути, содержащую первая ошибка в спецификации данных пути.Это будет предоставить пользователю или разработчику визуальную подсказку о где ошибка может быть в спецификации данных пути. Это правило сильно препятствует созданию недействительных Данные пути SVG.
  • Если команда данных пути содержит неверный набор параметры, то отображается заданная команда данных пути до последнего правильно определенного сегмента пути включительно, даже если этот сегмент пути является подкомпонентом команда данных составного пути, например "lineto" с несколько пар координат.Например, для пути строка данных 'M 10,10 L 20,20,30', есть нечетное количество параметров для команды "L", которая требует четного количество параметров. Пользовательский агент требуется для рисования строка от (10,10) до (20,20), а затем выполнить ошибку отчет с 'L 20 20' это последний правильно определенный сегмент спецификации данных пути.
  • По возможности, все пользовательские агенты SVG должны сообщать все ошибки пользователю.

9.6.Расстояние по тропе

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

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

Операция "moveto" в элементе "path" определяется как нулевая длина. Только различные "lineto", "curveto" и "arcto" команды участвуют в расчетах длины пути.

9.6.1. Атрибут "pathLength"

Имя Значение Начальное значение Анимационный
длина пути <номер> (нет) да

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

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

Отрицательное значение - ошибка (см. Обработка ошибок).

«pathLength» не влияет на процент расчет расстояния вдоль пути.

9.7. DOM интерфейсы

9.7.1. Интерфейс SVGPathElement

Объект SVGPathElement представляет «путь» в DOM.

 [Exposed = Window]
interface  SVGPathElement : SVGGeometryElement {
};

Vector Paint - редактор SVG

Эффект
Наполнять
Шаблон

Ширина Высота

Инсульт
_______________..............................- - - - - - - - - - - - - - -. -. - -. -. - -. -. - .. - .. - .. - .. - .. - ..

Присоединение к линии MiterRoundBevel Заглушка линии ПопкиКруглыйПлощадь Смещение тире Внутренность ZeroEven

Непрозрачность

Эффект
Предупреждение: может быть медленным Нет эффекта

Путь клипа
Путь клипа
Маска
Маска

Текст
Цвет
Размер B я
Семейство шрифтов ГрузияПалатино LinotypeTimes New RomanArialArial BlackComic Sans MSУдар, УгольLucida Без ЮникодаТахомаTrebuchet MSVerdanaКурсивФэнтезиCourier NewLucida ConsoleГрузияПалатино LinotypeTimes New RomanArialArial BlackComic Sans MSУдар, УгольLucida Без ЮникодаТахомаTrebuchet MSVerdanaCursiveFantasyCourier NewКонсоль Lucida

Межбуквенное расстояние
Интервал между словами
Высота линии

Путь
Переориентировать Редактировать Открыто закрыто Продолжить путь Прямой изогнутый Маркер начала Без маркера Средний маркер Без маркера Конечный маркер Без маркера

Полилиния
Плавный путь

прямоугольник
Округлость
Преобразовать в путь

Эллипс / Линия
Преобразовать в путь

Эллипс
Радиус

Круг
Радиус

Фон
ясно

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

Изображение
Изменить изображение Строка штрих-кода Кодирование CODE128 (B) EAN (13) UPC-A

.

No related posts.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *