Как работать с svg: Практическое руководство о SVG в вебе

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

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

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

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

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

Лучшие редакторы для работы с файлами SVG

Как уже было сказа

Пути (paths) — Веб-технологии для разработчиков

Элемент <path> («путь»)– наиболее мощный элемент в библиотеке основных форм SVG. С его помощью можно создавать отрезки, кривые, дуги и многое другое.

С помощью элементов <path> создают сложные формы, объединяя многочисленные прямые и кривые линии. Сложные формы из одних только прямых линий можно создавать и через элемент polyline. Хотя результаты работы обоих элементов могут быть похожи, элемент polyline отображает кривые как много маленьких прямых линий, что не очень хорошо масштабируется до больших размеров. Хорошее понимание path важно при рисовании SVG. При создании сложных paths не рекомендуется использовать XML или текстовые редакторы – понимание, как они работают, позволит установить и исправить проблемы с отображением SVG.

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

Каждая команда обозначается специальной буквой. Например, нам надо переместиться в точку с координатами (10,10).  Команда «Передвинуть к» вызывается буквой M. Когда синтаксический анализатор наталкивается на эту команду, он знает, что необходимо переместиться к указанной точке. Итак, для перемещения к точке (10,10) используется команда «M 10 10», и далее синтаксический анализатор переходит к следующей команде.

Все команды существуют в двух вариантах: вызов команды с заглавной буквы обозначает абсолютные координаты на странице, а команда со строчной буквой -относительные (например, перемещение от последней точки на 10px вверх и 7px влево).

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

Команды линии

Существуют пять команд линии для узлов <path>.  Первая команда — это «Переместиться к», или M, описанная выше. В качестве параметров она принимает координаты точки, к которой перемещается. Если курсор уже был где-либо на странице, между старым и новым местом линия не появится. Команда «Переместиться к» используется в начале элемента <path> для указания точки, откуда начнется рисование, например:

M x y

или

m dx dy

Следующий пример рисует одну только точку (10,10). Заметьте, однако, что при обычном использовании <path> она вообще не была бы видна.

<svg xmlns="http://www.w3.org/2000/svg">

  <path d="M10 10"/>

  <!-- Точки -->
  <circle cx="10" cy="10" r="2" fill="red"/>

</svg>

Существуют три команды, которые рисуют линии. Самая общая — команда «Линия к», вызываемая буквой L. Эта команда принимает два параметра — координаты точки x и y — и рисует линию от текущего положения к этой точке.

 L x y (или l dx dy)

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

 H x (или h dx)
 V y (или v dy)

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

<svg xmlns="http://www.w3.org/2000/svg">
  
  <path d="M10 10 H 90 V 90 H 10 L 10 10"/>

  <!-- Точки -->
  <circle cx="10" cy="10" r="2" fill="red"/>
  <circle cx="90" cy="90" r="2" fill="red"/>
  <circle cx="90" cy="10" r="2" fill="red"/>
  <circle cx="10" cy="90" r="2" fill="red"/>

</svg>

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

 Z (или z)

Таким образом наш путь из примера можно сократить до:

 <path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>

Точно такую же картину можно получить с помощью относительных форм этих команд. Как уже говорилось, относительные команды вызываются использованием букв нижнего регистра и перемещают курсор относительно его последнего положения, а не к точным координатам . В нашем примере, поскольку размеры нашего квадрата — 80 x 80, элемент <path> можно записать так:

 <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>

Путь начнется от точки (10,10), пойдет горизонтально на 80 точек вправо, затем 80 точек вниз, затем 80 точек влево, и затем обратно к старту.

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

Команды кривых линий

Существует три различных команды, которые вы можете использовать для создания плавных кривых линий. Две из этих кривых — кривые Безье, а третья — «дуга», или часть окружности. Вы, возможно, уже имели практический опыт с кривыми Безье, если работали с путями (paths) в программах lnkscape, Illustrator или Photoshop. Для полного описания математических понятий о кривых Безье, попробуйте пройти по ссылке на Wikipedia. Информации о кривых Безье слишком много, чтобы попытаться охватить ее здесь. Существует бесчисленное множество различных типов кривых Безье, но только две простые доступны для элементов путей: кубическая, C, и квадратная, Q.

Кривые Безье

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

 C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)

Последний набор координат (x,y) это точка, в которой заканчивается линия. Две другие — контрольные точки. (x1,y1) контрольная точка для начала вашей кривой, а (x2,y2) для конца вашей кривой. Если вы знакомы с вычислительной алгеброй, контрольные точки в описывают наклон вашей линии в каждой точке. Функция Безье создает плавную кривую, которая ведет от наклона, который вы установили в начале вашей линии к наклону на другом конце.

<svg xmlns="http://www.w3.org/2000/svg">

  <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>
  <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/>
  <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/>
  <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/>
  <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/>
  <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/>
  <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/>
  <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/>
  <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/>

</svg>

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

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

 S x2 y2, x y (or s dx2 dy2, dx dy)

Команда S задаёт тот же тип кривой, что и был, но если он следует за другой S или C командой, подразумевается, что первая контрольная точка — отражение той, что использовалась перед этим. Если команда S не следует за другой командой S или C, то подразумевается, что обе контрольные точки для кривой одинаковы. Пример синтаксиса показан ниже. В фигуре слева контрольные точки показаны красным, а подразумеваемая контрольная точка — синим.

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>
</svg>

Другой тип кривой Безье — квадратичная кривая, задаётся командой Q. Квадратичная кривая проще, чем кубическая: для неё требуется только одна контрольная точка, которая определяет наклон кривой как в начальной, так и в конечной точке. Она принимает два аргумента: контрольную точку и конец кривой.

 Q x1 y1, x y (or q dx1 dy1, dx dy)

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>
</svg>

Как и в случае кубической кривой Безье, существует сокращение для соединения нескольких квадратичных кривых Безье -T.

 T x y (or t dx dy)

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

Обратите внимание, что это работает только в том случае, если предыдущей командой была команда Q или T. Если это не так, то контрольная точка считается той же, что и предыдущая, и вы нарисуете только линии.

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>
</svg>

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

Дуги

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

 A rx ry x-axis-rotation large-arc-flag sweep-flag x y
 a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

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

Третий параметр описывает поворот дуги. См. пример ниже

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M10 315
           L 110 215
           A 30 50 0 0 1 162.55 162.45
           L 172.55 152.45
           A 30 50 -45 0 1 215.1 109.9
           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
</svg>

Пример показывает элемент path, который проходит по странице диагонально. В центре этого элемента вырезаны две эллиптические дуги (радиус x = 30, радиус y = 50). В первой дуге параметр x-asix-rotation = 0, а это означает, что эллипс, по которому проходит дуга (показан серым) расположен вертикально. Во второй дуге параметр x-asix-rotation = -45. Это поворачивает эллипс так, что направление его малой оси совпадает с направлением пути, как это видно на рисунке выше.

Четыре разных пути, упомянутых выше определяются с помощью двух аргументов-флагов. Как упоминалось ранее, есть ещё два возможных эллипса для обхода пути и два разных возможных пути на обоих эллипсах, что даёт четыре возможных пути. Первый аргумент — large-arc-flag. Он определяет, должна ли дуга быть больше или меньше 180 градусов. В конечном счёте этот флаг определяет, в каком направлении дуга будет обходить данный круг. Второй аргумент — sweep-flag. Он определяет, должна дуга двигаться по отрицательным углам или по положительным, т.е. по сути определяет по какому из двух кругов она будет идти. Пример ниже показывает все четыре возможные комбинации.

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M 10 315
           L 110 215
           A 36 60 0 0 1 150.71 170.29
           L 172.55 152.45
           A 30 50 -45 0 1 215.1 109.9
           L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/>
  <circle cx="150.71" cy="170.29" r="2" fill="red"/>
  <circle cx="110" cy="215" r="2" fill="red"/>
  <ellipse cx="144.931" cy="229.512" rx="36" ry="60" fill="transparent" stroke="blue"/>
  <ellipse cx="115.779" cy="155.778" rx="36" ry="60" fill="transparent" stroke="blue"/>
</svg>

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

Если start->end точки расположены далеко и не попадают в пределы радусов эллипсов по x и y, то в этом случае радуисы эллипсов будут увеличены до величины, нужной чтобы достичь точек start->end. Интерактивный codepen внизу этой страницы наглядно это демонстрирует. Для определения достаточны ли велики радиусы ваших эллипсов чтобы требовать увеличения, вам нужно решить систему уравнений подобную этой на wolfram alpha. Это вычислиние для non-rotated эллипса с start->end (110, 215)->(150.71, 170.29). Решенимем, (x, y), является центр эллипса(ов). Следющее вычисление для non-rotated эллипса с start->end (110, 215)->(162.55, 162.45). Решение будет мнимым если радиусы ваших эллипсов слишком малы. Решение содержит небольшой мнимый компонент потому, что эллипсы были лишь слегка расширены.

Четыре разных пути, упомянутых выше определяются с помощью двух аргументов-флагов. Как упоминалось ранее, есть ещё два возможных эллипса для обхода пути и два разных возможных пути на обоих эллипсах, что даёт четыре возможных пути. Первый аргумент — large-arc-flag. Он определяет, должна ли дуга быть больше или меньше 180 градусов. В конечном счёте этот флаг определяет, в каком направлении дуга будет обходить данный круг. Второй аргумент — sweep-flag. Он определяет, должна дуга двигаться по отрицательным углам или по положительным, т.е. по сути определяет по какому из двух кругов она будет идти. Пример ниже показывает все четыре возможные комбинации.

<svg xmlns="http://www.w3.org/2000/svg">
  <path d="M80 80
           A 45 45, 0, 0, 0, 125 125
           L 125 80 Z" fill="green"/>
  <path d="M230 80
           A 45 45, 0, 1, 0, 275 125
           L 275 80 Z" fill="red"/>
  <path d="M80 230
           A 45 45, 0, 0, 1, 125 275
           L 125 230 Z" fill="purple"/>
  <path d="M230 230
           A 45 45, 0, 1, 1, 275 275
           L 275 230 Z" fill="blue"/>
</svg>

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

Если вы переходите в SVG из Canvas`а, дуги могут быть самой трудной вещью для изучения, но они также очень мощные. Т.к. начальная и конечные точки для любого пути, обходящего круг, одно и то же место, существует бесконечное количество кругов, которые могут быть выбраны и действительный путь не определен. Возможно приблизить их, сделав начальную и конечную точку пути слегка разными и соединив их с другими сегментами пути. В этой точке, часто проще использовать настоящий круг или эллипс. Это интерактивное демо может помочь понять основные принципы SVG-дуг: http://codepen.io/lingtalfi/pen/yaLWJG (протестировано только в Хром и Файрфокс, может не работать в вашем браузере)

Как вставить svg в html. Вставляем inline svg в html-код

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<svg>
  <symbol viewBox="0 0 611.989 611.988">
    <g>
      <g>
        <g>
          <path d="M305.994,417.769c-30.85,0-55.887,25.037-55.887,55.887s25.038,55.887,55.887,55.887s55.887-25.037,55.887-55.887
                   S336.843,417.769,305.994,417.769z M605.436,222.369C530.697,133.434,421.549,82.446,305.994,82.446
                   S81.309,133.434,6.551,222.369c-9.93,11.811-8.402,29.434,3.428,39.363c5.234,4.396,11.587,6.558,17.939,6.558
                   c7.973,0,15.891-3.391,21.423-9.967c64.084-76.248,157.639-119.989,256.652-119.989c99.013,0,192.568,43.741,256.651,119.971
                   c5.533,6.576,13.45,9.967,21.424,9.967c6.353,0,12.724-2.143,17.958-6.558C613.837,251.802,615.366,234.161,605.436,222.369z
                   M305.994,194.22c-82.545,0-160.489,36.419-213.879,99.926c-9.929,11.811-8.402,29.434,3.428,39.363
                   c5.234,4.396,11.605,6.558,17.958,6.558c7.973,0,15.891-3.391,21.405-9.967c42.716-50.838,105.086-79.993,171.089-79.993
                   c66.003,0,128.372,29.155,171.107,79.993c5.533,6.595,13.45,9.967,21.404,9.967c6.353,0,12.724-2.143,17.959-6.558
                   c11.829-9.929,13.356-27.57,3.428-39.363C466.483,230.64,388.539,194.22,305.994,194.22z M305.994,305.994
                   c-49.553,0-96.331,21.852-128.335,59.948c-9.93,11.811-8.402,29.434,3.428,39.363c5.234,4.396,11.605,6.557,17.958,6.557
                   c7.973,0,15.891-3.39,21.405-9.966c21.368-25.429,52.552-40.016,85.544-40.016s64.177,14.587,85.544,40.016
                   c5.533,6.595,13.45,9.966,21.405,9.966c6.353,0,12.724-2.142,17.958-6.557c11.83-9.93,13.357-27.553,3.428-39.363
                   C402.324,327.846,355.546,305.994,305.994,305.994z"/>
        </g>
      </g>
    </g>
  </symbol>
</svg>
 
<div>
  <div>
    <svg>
      <use xlink:href="#icon1"></use>
    </svg>
  </div>
  <div>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, laudantium.
  </div>
</div>
<div>
  <div>
    <svg>
      <use xlink:href="#icon1"></use>
    </svg>
  </div>
  <div>
    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corrupti, laudantium.
  </div>
</div>

Руководство дизайнера по работе с SVG — Pt 1

Фото: Энди Филд (Полевой Офис)

Какое же дело в SVG?

Разве вы не нажали « Сохранить как SVG » в Illustrator, и у вас есть SVG?

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

Возможно, вопрос, который нужно задать: Является ли этот файл SVG более полезным, чем эквивалентный PNG или JPG?

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

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

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

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

SVG 101: Как создать SVG?

Возможно, самая крутая вещь в SVG — вам не нужно причудливое (или дорогое) программное обеспечение для их создания.Как и ваши HTML / CSS-файлы, вы можете создать SVG с не более чем надежным блокнотом, Textedit или даже VIM.

На самом деле, если вы никогда ранее не кодировали SVG вручную, попробуйте это:

• Запустите новый текстовый файл в вашем редакторе по вашему выбору.
• Добавьте следующие три строки:
  
  
  
• Сохраните файл как 000 как угодно.SVG ‘.
• Направьте свой браузер на это.

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

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

Что если мы хотим сгруппировать круг и прямоугольник в один объект?

SVG имеет удобный элемент , который можно использовать в качестве «контейнера» для группировки объектов.Думайте об этом как о DIV в HTML.

Мы могли бы сделать что-то вроде этого.

Как видите, SVG относительно прост в написании и понимании. Если вы знаете свой HTML, это должно показаться вам знакомым.

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

Итак, давайте сначала кратко (и ни в коем случае не всесторонне) рассмотрим некоторые из основных графических редакторов, которые обрабатывают SVG — и как они работают.

Inkscape

Inkscape

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

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

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

Экспорт SVG в Inkscape

Скорее всего, если вы знаете что-то об Inkscape, вероятно, Inkscape использует SVG в качестве формата по умолчанию.

Отлично, верно?

Не совсем.

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

Диалог экспорта для оптимизированных SVG в Inkscape.

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

Итак, когда вы сохраняете документ в Inkscape, вы увидите «Простой SVG» в виде формата чуть ниже «Inkscape SVG». Это намного лучше.

Более того, в этом списке форматов файлов вы увидите «Оптимизированный SVG».

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

Как этот «Оптимизированный SVG» сравнивается с форматом по умолчанию?

В качестве примера приведем очень простую буквенную форму SVG, которая составляет 2125 символов при просмотре в текстовом редакторе.

Inkscape по умолчанию SVG показывает лоты
ненужного кода

Посмотрите на разметку, и вы увидите строку за строкой свойств «inkscape» и «sodipodi», которые не имеют никакого значения за пределами Inkscape.

Тот же файл, экспортированный как «Оптимизированный SVG», становится 760 символами.

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

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

Примечание: Параметр «Оптимизированный SVG» может потребовать установки дополнительного файла библиотеки Python. Если это станет для вас камнем преткновения, «Простой SVG» по-прежнему очень хороший вариант.

Adobe Illustrator CC

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

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

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

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

Панель параметров экспорта в SVG Illustrator

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

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

Короче говоря: используйте Illustrator, но постарайтесь не слишком надумать.

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

Веб-код

Интерфейс веб-кода

— это вариант только для OS-X, который я рассмотрел несколько недель назад, поэтому здесь я не буду вдаваться в подробности.

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

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

Эскиз

Sketch — это еще один вариант только для OS-X, который, кажется, вызвал огромный резонанс у дизайнеров. Фактически, наш собственный Питер Бакакс будет рассказывать о своем опыте перехода к Sketch в отдельной статье.Я отвлекся.

С точки зрения чистых наборов инструментов, Sketch, вероятно, более тесно связан с Adobe Fireworks или даже Illustrator, чем с Photoshop. У него есть сердце векторов, а не пикселей, что является хорошим началом.

Но можно ли написать хороший SVG?

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

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

Однако, как говорится, код Sketch SVG так же чист и продуман, как и все, что я видел.

Adobe Fireworks

Хотя Fireworks так и не был разработан для написания SVG, расширение (SVG Export от Aaron Beale) успешно привносит в него сверхспособности SVG.

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

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

Что нужно остерегаться:

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

Короче говоря, если вы уже поклонник Fireworks, это действительно довольно хорошее решение.

отлично подходят для оттачивания ваших SVG

Я нашел живые «игровые площадки кода», такие как CSSDeck.com и CodePen.io, невероятно полезные при работе с SVG.

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

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

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

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

Коротко и сладко.

Другой подход заключается в том,чтобы всегда использовать атрибуты width и height в ваших SVG-элементах. Это работает,но если вам нужно изменить размер этого значка в CSS,это может быть немного сложнее.

Предварительная загрузка внешних спрайтов

В разделе «Добавление значков на ваши страницы» мы сказали,что значки с внешнего спрайта могут появляться с небольшим опозданием,отчасти из-за того,что браузер предварительно загружает сканер (или упреждающий предварительный анализатор или что-то еще),не выбирая,что <использовать xlink:href="https://fvsch.com/path/to/icons.svg#something">означает,что существует важный файл,который необходимо загрузить рано.

Что мы можем сделать с этим?

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

• Решение старой школы:добавьте в начале .

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

Выбор отдельных форм или контуров

Мы рассмотрели способы настройки заливок,обводок и т. Д. Для всех путей из <символ>и двух или более цветов из разных путей. Но что,если бы мы могли выбрать конкретные пути (возможно,используя классы) непосредственно в экземпляре из ? Является ли это возможным?

Прямо сейчас ответ:да и нет.

1. Если вы используете внешние спрайты,вы не можете выбрать отдельные пути (или другие элементы) внутри используемого <символ>.
2. Если вы встроите свой спрайт,вы можете выбрать и стилизовать элементы внутри спрайта,но эти стили будут применяться к всем экземплярам символов.

Так что даже с встроенным спрайтом вы можете сделать это:

# my-symbol .style1{/*Стили для одной группы путей*/}# my-symbol .style2{/*Стили для другого*/}

Но вы не можете сделать это:

.Кнопка MyComponent .icon .style1{/*Для 1 группы путей для этого значка в этом контексте*/}.MyComponent-button .icon .style2{/*Для другой группы*/}

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

Более двух цветов с пользовательскими свойствами CSS

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

Мы могли бы сделать это с помощью пользовательских свойств CSS (или CSS-переменных). Это требует большой подготовки со стороны SVG:

Для этой демонстрации я украл значок из превосходного Iconic,который предлагает отзывчивые,многоцветные иконки SVG (как я понимаю,работает на CSS и некоторых JS).Я попытался воспроизвести собственный многоцветный пример для этой иконки,надеюсь,они не против.

Это работает довольно хорошо в поддерживаемых браузерах. Есть только один значок:первый экземпляр не объявляет ожидаемые переменные,поэтому он возвращается к currentColor;следующие два экземпляра каждый объявляют набор значений переменных.

Как рассчитывается процент с шириной хода ?

Какой процент соответствует в ширине хода:N% ? Это ширина,высота иконы? Оказывается,это относительно диагонали,но со странной формулой (spec) (длина диагонали,деленная на квадратный корень из 2,который близок к 1.4).

Что это значит? Для квадратных иконок результат этой формулы - сторона квадрата. Таким образом,1% означает «один процент от ширины или один процент от высоты». Красиво и просто.

Для более широких или более высоких значков результат может немного измениться:

Учитывая все вышесказанное,я все же рекомендую использовать процентные значения для с шириной хода . Если вы придерживаетесь квадратной или заштрихованной иконки,вы можете использовать процентные значения,понимая,что они примерно означают «процент от ширины иконки».

Использование градиентных заливок

Мы не можем использовать CSS с линейным градиентом (…) ,потому что это,к сожалению,не может применяться к свойству SVG fill . Если нам нужны градиентные заливки,нам нужно использовать SVG-градиенты.

Практическое руководство по SVG в сети

Подготовка SVG для использования в Интернете - это простой процесс,не более сложный,чем экспорт JPEG или PNG. Работайте,как обычно,в предпочитаемом вами редакторе векторной графики (Illustrator,Sketch,Inkscape [бесплатно] и т. Д. [Или даже в Photoshop,если вы используете слои фигур)] с графикой того размера,который вы ожидаете использовать. Я объясню несколько вещей,которые я делаю с помощью Illustrator,так как это то,что я обычно использую,но те же принципы применимы к любому программному обеспечению.Вы,вероятно,захотите преобразовать любой текст в контуры,поскольку он,скорее всего,не будет отображаться правильным шрифтом,если вы не планируете стилизовать их с помощью веб-шрифта,который вы используете на странице (что вы можете сделать!). Не беспокойтесь о расширении всех ваших объектов до сплошных фигур,особенно если у вас есть обводки,поскольку вы можете манипулировать ими на странице,и при их расширении размер файла обычно не уменьшается. Любые имена,которые вы добавляете в слои/группы,будут добавлены в SVG как идентификатор этого элемента.Это может быть удобно для стилизации,но немного увеличит общий размер файла.

Чтобы экспортировать,убедитесь,что дизайн находится в области целых пикселей (то есть не 23,3 × 86,8 пикселей),в противном случае он может не быть четким,а затем обрежьте монтажную область вокруг него. Вы можете сделать это в Illustrator с помощью Объект>Артборды>Соответствие границам иллюстраций . Затем нажмите и сохраните как ,выберите SVG и используйте настройки по умолчанию. Вы можете выполнить некоторую оптимизацию здесь,но это не стоит,так как мы постобработаем их для оптимизации,и любое время,потраченное на игры с этими настройками,будет потрачено впустую.

Советы по уменьшению размера файла

(см. Ресурсы для ссылок на внешние статьи)

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

Чтобы ваши SVG были как можно меньше,вы фактически хотите удалить все ненужное.Наиболее известным и лучшим (по крайней мере,мне так кажется) инструментом для публикации SVG-процессов является SVGO. Это удаляет весь код,который не нужен. Примечание:не забывайте быть осторожным при использовании этого,если вы планируете манипулировать с помощью CSS/JS,поскольку это может иногда чрезмерно оптимизировать ваши файлы,делая их труднее делать с ними то,что вы планировали. позже. С SVGO очень удобно то,что его можно добавить в процесс сборки,чтобы он был автоматическим (или вы можете использовать GUI,чтобы сделать это самостоятельно,если хотите).

Сделав шаг вперед в «удалении чего-либо ненужного»,мы можем сделать еще кое-что в графическом редакторе.Во-первых,вы хотите убедиться,что вы используете как можно меньше путей/фигур,чтобы достичь желаемого,а также,чтобы на этих путях было как можно меньше точек. Вы хотите объединить и упростить все,что можете. Затем вы хотите удалить как можно больше точек из ваших путей. VectorScribe - это плагин Illustrator,в состав которого входит Smart Remove Brush Tool - он позволяет удалять точки,сохраняя при этом общую форму.

Предварительная оптимизация

Smart Remove Brush Tool удалена точка

Далее вы хотите увеличить.В Illustrator вы захотите включить Pixel Preview с View>Pixel Preview и посмотреть,где находятся ваши точки пути. Для файлов наименьшего размера вы хотите,чтобы они располагались на пиксельной сетке (то есть на целых значениях пикселей). Это займет немного времени,чтобы закрепить их все на месте,но стоит дополнительных усилий,так как это также обеспечивает самый четкий рендеринг (обратите внимание,как прежде вы можете получить некоторые полупиксельные области).

указывает на пиксели

Пиксель щелкнул

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

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

AddType image/svg+xml svg svgz AddOutputFilterByType DEFLATE "image / svg + xml" \ "text / css" \ "text / html" \ "Текст / JavaScript" ... и т.д 

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

оригинал:1,413b

Оптимизировано:409b

В целом это делает его на 71% меньше (и на 83% меньше,если его сжать)

ДОПОЛНЕНИЕ:Роб Стерлини отметил,что,когда повторяется «b»,вы,вероятно,можете использовать элемент ,чтобы повторить его,что может сделать его меньше - и он был совершенно прав.

Оптимизировано далее с помощью :311b

~78% меньше

Если вы сделаете это со всеми SVG на сайте,это действительно может сложиться.

новейших svg вопросов - переполнение стека

1. Товары
2. Клиенты
3. Случаи использования

1. Переполнение стека Публичные вопросы и ответы
2. Команды Частные вопросы и ответы для вашей команды
3. предприятие Частные вопросы и ответы для вашего предприятия
4. работы Программирование и связанные с ним технические возможности карьерного роста
5. Талант Нанимать технический талант