path svg что это

SVG. Руководство по синтаксису

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

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

Для начала мы можем переформатировать его, чтоб он имел какой-то смысл (код все еще валидный):

Буквы – это команды. Цифры – значения для команд. Все команды опциональны (могут быть пропущены).

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

М – это всего лишь одна команда из многих. По моим подсчетам, их 18.

Многие из них (но не все) идут в паре. У них есть ПРОПИСНАЯ версия и строчная версия. ПРОПИСНАЯ версия – абсолютная, строчная – относительная. Для примера используем команду М:

У многих команд тот же смысл. Строчные версии влияют на ручку относительно ее текущего положения.

Давайте посмотрим на две абсолютные команды:

А после них относительная команда:

Так же как M и m, команды L и l принимают две цифры: абсолютные или относительные координаты. Есть еще четыре команды, которые, по сути, являются упрощенными версиями линейной команды. Они тоже рисуют линию, но принимают только одно значение: по горизонтали или по вертикали. Когда мы использовали команду l 25,0, мы могли бы написать h 25, что означает «нарисовать линию вправо на 25 от текущего положения». Более лаконично. Старший брат H, как можно догадаться, означает рисовать линию к абсолютной горизонтальной координате 25. V и v двигается вертикально абсолютно и относительно, как вы, конечно, уже догадались.

Посмотрите это демо Криса Нагера (Chris Nager), в котором он рисует крест с помощью малого количества кода, благодаря относительным координатам:

Видите последний символ, который использовал Крис? Z (или z, не важно) «закрывает» path. Эта команда опциональна, как и другие. Это простой способ нарисовать прямую линию к точке, где последний раз была установлена ручка (вероятно, к последней команде М или м). То есть вам не нужно повторять эту первую локацию и использовать линию, чтобы вернуть к ней.

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

До этого мы рассматривали только прямые линии. Path – это идеально подходящий для этого элемент и синтаксис, хотя прямолинейные формы, такие как

, могли бы иметь более простой синтаксис.

Суперсила path – это кривые! Их существует довольно много разных типов.

Помните первый пример кода, который мы смотрели? Там используется много C и c команд. Это кривые Безье, для них нужно больше данных.

Команда C учитывает три точки. Первые две – это управляющие точки кривой Безье. Наверное, концепт такой же, как у инструмента Pen в Adobe Illustrator:

Последняя из трех точек – это конец кривой. Точка, где кривая должна закончиться. Вот иллюстрация:

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

Команда S (или s) дружит с командой С, поэтому ей нужно только 2 точки, так как предполагается, что её первая точка – это отражение последней точки предыдущей кривой С или S.

Команды Q – одна из самых простых, так как ей нужно только две точки. Кривая Безье стремится к «квадратному» расположению контрольных точек и их рукояток. А в случаи с кривой Q, рукоятки стартовой и конечной контрольных точек сходятся в одной, общей точке.

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

Команда А, наверное, самая сложная. Ну или, по крайней мере, требует больше всего данных. Ей нужна информация о ширине и высоте овалов и о том, как эти овалы повернуты относительно конечной точки. И еще немного информации о том, какая кривая этих овалов вам нужна. Из MDN (Mozilla Developer Network):

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

График Джони Тритхола (Joni Trythall) довольно ясно объясняет команду А.

Ниже письменное объяснение всех этих команд:

Хотите увидеть несколько примеров? Ок:

Если ваш браузер был недавно обновлен и у вас есть мышка, то вы можете увидеть анимацию при наведении! Оказывается, сейчас можно помещать path прямо в CSS. К примеру…

Хотите узнать больше о SVG? Я написал целую книгу о нем. Она называется «Practical SVG» и она не очень дорогая.

Перевод отрывка из 6 главы книги «Practical SVG» можно почитать вот здесь.

Источник

Элемент «path» документа SVG

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

Элемент «path» имеет два атрибута:

Атрибут d элемента «path» может содержать инструкции moveto, line, curve, arc, closepath.

Должен получиться такой треугольник

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

Команда «moveto»

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

Команда «moveto» не имеет параметров.

Команда «closepath»

Команда ’closepath’ (Z или z) завершает текущий подэлемент элемента «path» и автоматически создает прямую линию, соединяющую текущую точку с точкой начала подэлемента элемента «path». Если «closepath» следует сразу после «moveto», то «moveto» становится точкой начала для следующего подэлемента. Если «closepath» следует за какой-то другой командой, то точкой начала нового подэлемента становится точка начала текущего подэлемента.

Команда «closepath» не имеет параметров.

Команда «lineto»

Команда «lineto» рисует линию из текущей точки в новую точку.

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

Всего три группы команд для рисования кривых:

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

Ниже представлен простой пример использования

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

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

Примеры кривой Безье на одиночном сегменте

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

Нижеследующий пример демонстрирует использование квадратичной кривой Безье.

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

Дуга эллипса

Дуга эллипса

Команда A или a рисует сегмент эллипса, который имеет некоторые ограничения

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

Четыре типа дуги

Источник

Синтаксис SVG «path»: иллюстрированное руководство

Эта статья является вольным переводом статьи Криса Койера «The SVG `path` Syntax: An Illustrated Guide».

Это пример кода средней сложности:

Мы можем слегка его причесать, для удобства понимания (это всё ещё валидный код):

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

К примеру, первая команда, «M». Она говорит «перенеси перо на координаты 213.1,6.7». Ничего не рисуй, а просто перенести перо к этим координатам. Если теперь будет команда рисовать, то она начнёт именно с этих координат.

«M» — это одна из многих команд. По моим подсчётам, их около 18.

Многие (но не все) команды имеют пару: есть ПРОПИСНЫЕ и строчные версии команд. Прописная команда — абсолютная (absolute) версия, строчная — относительная (relative). Давайте разберём на примере команды «M»:

Давайте посмотрим на две абсолютные команды:

Теперь добавим относительную команду:

Как и команды «M» и «m», «L» и «l» принимают два типа значений: абсолютные и относительные. Есть ещё две пары команд, которые являются упрощёнными способами рисования линий. Вместо «l 25,0» мы могли бы использовать «h 25», что означает «нарисуй линию от текущей позиции на 25 пикселей вправо». Его старший брат, «H», как вы могли догадаться, означает нарисовать точную горизонтальную линию к координатам 25. Команды «V» и «v» делают то же самое, но по вертикали.

Посмотрите демонстрацию Chris Nager, в которой он умещает крест в небольшой кусочек кода, с помощью задания относительных координат.

Видите последнюю команду, которую использовал Крис? «Z» (или «z», неважно) закрывает path. Эта команда, как и любая другая, необязательна. Это простой и быстрый способ вернуть перо туда, где оно находилось (возможно, эта позиция указана «M» или «m»).

Давайте посмотрим на команды, которые мы рассмотрели до этого:

Видите последнюю команду, которую использовал Крис? «Z» (или «z», неважно) закрывает path. Эта команда, как и любая другая, необязательна. Это простой и быстрый способ вернуть перо туда, где оно находилось (возможно, эта позиция указана «M» или «m»).

До сих пор мы рассматривали только прямые линии. «Path» — неплохой элемент с хорошим синтаксисом, хотя можно утверждать, что с помощью «polygon» можно нарисовать прямые проще, хоть и чуть ограничено.

Но суперсила path-а в кривых! И есть довольно много их типов.

Вспомните первый кусок кода, который мы рассматривали. В нём было много команд «C» и «c». Это Кривые Безье и им нужно больше значений, чтобы сделать что-то.

Команда «C» имеет три точки. Первые два значения определяют где находятся управляющие точки. Возможно, вам это знакомо по инструменту «Перо» в Adobe Illustrator.

Последняя точка обозначает место, где кривая заканчивается. Вот иллюстрация:

Строчная команда «c» работает так же, за исключением того, что координаты относительные.

Команда «S» (или «s») является родственной к «C», но она требует только два значения, так как считает, что первая точка кривой — это отражение последней, указанной в последней команде «S» или «C».

Команда «Q» одна из самых простых и она тоже требует только два значения. Первая точка, которую она требует, — это точка квадратичной кривой Безье. Это значит, что начальная и конечная точки кривой управляются из одной управляющей точки. Вторая точка — точка конца кривой.

Как и «S» дя «C», так и команда «T» является родственной к «Q». Как и в случае с командой «S», «T» считает управляющую точку отражением предыдущей. Поэтому вам нужно передавать в эту команду только одно значение — конечную точку.

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

Схема Джони Тритхолла из его статьи про SVG неплохо объясняет это:

А теперь объяснения для каждой команды кривых в таблице:

Хотите увидеть кучу примеров? Вот они:

Если вы смотрите на это через браузер на базе Blink, то вы можете увидеть анимацию, при наведении на элементы. Это говорит нам о том, что вы можете в CSS создавать пути. Например:

Источник

Path svg что это

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

Фигура, образуемая объектом Path, состоит из прямых и кривых линий или дуг, которые строятся последовательно, от точки к точке.

Существуют специальные команды для рисования.

Координаты объекта задаются следующим образом:

Здесь d – атрибут, определяющий path. Далее устанавливается опорная точка – M 15,15. От этой опорной точки проводится линия к точке с координатами 185, 15. Команда Z завершает рисование объекта – при этом происходит возврат к опорной точке.

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

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

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

К атрибуту d применимы правила для сокращения размера кода.:

Пробелы могут быть опущены:

Запятые, отделяющие пары координат, могут быть опущены:

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

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

В начале задаётся опорная точка M15,15. От неё проводится линия в точку с координатами L185,15. Далее добавляются еще две линии – L185,85 и L15,85. Команда Z завершает объект path, соединяя отрезком точку 15, 185 с опорной точкой.

Перепишем пример с применением относительных координат.

В начале задается опорная точка M15,15. От неё проводится линия в точку с той же самой ординатой и лежащей правее на 170 пикселей при помощи относительной команды l170,0. Далее при помощи абсолютной команды L185,85 добавляется линия. Точка с координатами 185,85 становится точкой начала отсчета. От нее проводится линия в точку, с той же самой ординатой и лежащей левее на 170 пикселей. Следовательно, теперь команда будет принимать отрицательную абсциссу l-170,0. Относительная команда z завершает объект path, соединяя отрезком последнюю точку с опорной.

Нарисуем с помощью других команд.

В начале задается опорная точка M15,15. От неё проводится горизонтальная линия в точку 185,15 при помощи команды H185, причем в качестве ординаты берется соответствующее значение опорной точки. Далее устанавливается новая опорная точка M185,15 и от неё проводится вертикальная линия V85, теперь в качестве абсциссы берется соответствующее значение новой опорной точки. Снова добавляется опорная точка M185,85, проводится горизонтальная линия H15. Наконец, добавляется последняя опорная точка M15,85 и вертикальная линия V15 соединяет её с исходной точкой.

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

При использовании относительных команд каждая добавляемая опорная точка становится началом отсчета. В этом примере четыре пары «опорная точка – относительная команда»:

Нарисуем звёздочку. Сначала задаётся опорная точка M 100,10. Далее один раз указывается команда L – последующие пары координат по умолчанию относятся к команде этого типа.

Рисуем шестиугольник. В начале задаётся опорная точка M100,10. Далее один раз указывается команда L – последующие пары координат по умолчанию относятся к команде этого типа. Для завершения фигуры добавляется команда Z.

Часть фигур можно нарисовать с помощью готовых объектов.

Команда A/a (arc)

Эллиптические кривые представляют собой фрагменты эллипсов (дуги).

Рисование эллиптической кривой от опорной точки (mx, my) до заданной (x,y). Размер и ориентация эллипса задается двумя радиусами (rx, ry) и параметром x-axis-rotation, который определяет расположение эллипса как единого целого относительно оси X текущей координатной системы. Центр эллипса вычисляется автоматически на основании задаваемых координат точек и радиусов. Параметры large-arc-flag и sweep-flag определяют внешний вид эллипса.

Рисуем 3/4 эллипса. Значения пары large-arc-flag, sweep-flag: 1,0. Для формирования представления о размерах самого SVG документа добавлена рамка.

Значения параметров, описывающих кривую, совпадают в точности со значениями первого примера за исключением пары large-arc-flag, sweep-flag, которая здесь равна 0,1.

Значения параметров, описывающих кривую, совпадают в точности со значениями первого примера за исключением пары large-arc-flag, sweep-flag, которая здесь равна 0,0.

Значения параметров, описывающих кривую, совпадают в точности со значениями первого примера за исключением пары large-arc-flag, sweep-flag, которая здесь равна 1,1.

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

Команда C/c (curveTo)

Рисование кубической кривой Безье (Cubic Bezier Curve) от текущей точки (mx, my) до заданной (x,y) с начальной контрольной точкой (x1, y1) и конечной (x2, y2).

В начале задается опорная точка M 25,75. Далее указываются две контрольные точки 25,15 и 175,15, а затем конечная точка 175,75. Вспомогательные фигуры добавлены для отображения построения кривой.

Вариант с относительными координатами.

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

Кривая с параллельными отрезками, соединяющими опорные и контрольные точки.

Команды Q/q (quadratic) и T/t

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

Рисование квадратичной кривой Безье от текущей точки (mx, my) до заданной (x,y) с контрольной точкой (x1, y1).

Простейшая квадратичная кривая Безье. Контрольная точка равноудалена от опорных.

Фигура с использованием относительных координат. Для команды q75,-50 150,0 началом отсчета является первая опорная точка, для команды t 150,0 – вторая опорная точка кривой, которую можно рассматривать как первую опорную точку уже новой кривой.

При рисовании кривых с повторяющимися фрагментами удобно использовать команду T для упрощения кода. В данном примере все команды используют первую опорную точку M 25, 75.

Источник

Структура SVG-файла

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

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

Минимальный код может быть таким.

В первой строке размещается корневой элемент svg с указанием пространство имён. Далее внутри него идут различные теги. XML позволяет создавать любые теги, но «непонятные» будут игнорироваться. Содержимое файла должно находиться в Unicode-кодировке, но браузер знает об этом, поэтому эту информацию можно убрать из файла (см. первый пример).

Файл поддерживает комментарии, как и HTML-код. Вы также их можете удалять для уменьшения размера.

DOCTYPE также можно убрать по желанию. Мы так и сделали.

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

За свою историю SVG поменяла несколько версий, начиная с номера 1.0 в 1999 году, затем в 2001 появилась версия 1.1. Некоторые редакторы могут использовать другие версии, которые является частью версии 1.1. Лучше удалить эту информацию, чтобы браузер сам определял версию по умолчанию.

Атрибут id добавлен иллюстратором. Он может пригодится, если вы используете CSS и JavaScript. В других случаях можно удалить.

Атрибуты x и y также нам не понадобятся. Удаляем.

Атрибут enable-background служит для указания фона, но браузер не поддерживает его. Поэтому можно удалить.

Атрибуты width и height также можно удалить в большинстве случаев.

Атрибут xml:space=»preserve» не поддерживается браузерами. Значит и его удаляем.

Последние версии Illustrator и Sketch создают достаточно чистый SVG. У Inkscape при сохранении также есть опция Plain SVG в выпадающем списке поддерживаемых форматов.

Поговорим о других важных атрибутах.

Выше уже упоминалось о пространстве имён, которое указывается в атрибуте xmlns. Данный атрибут позволяет избежать конфликта с языком разметки HTML или другими XML-документами. В частности, SVG может использовать собственные теги title, который используется в HTML только один раз в области head. Адрес http://www.w3.org/2000/svg, указанный в пространстве имён является идентификатором для браузера, в реальности такого адреса нет.

Также указывается ещё одно пространство имён xmlns:xlink=»http://www.w3.org/1999/xlink» для избежания конфликта с ссылками HTML href.

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

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

Векторные редакторы могут вставлять свои собственные пространства имён. Например, Inkscape вставляет следующее.

Для использования на веб-странице эти записи можно удалить для уменьшения размера файла.

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

Разрабатывается новая версия SVG 2, где произошли некоторые изменения. В частности можно использовать чистые ссылки HTML.

Но на данный момент браузеры не поддерживают новую версию, поэтому применять ещё рано.

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

ViewBox

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

В примере помимо общей группы для всей птички (id=»bird») выделены также подгруппы, определяющие отдельно голову и тело (id=»body», ).

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

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

Так, в случае со сгруппированной птицей можно масштабировать её всего одной строкой CSS:

Теги и

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

Элемент принимает в качестве атрибутов координаты x и y, высоту (height), ширину (width) и ссылку на исходный элемент (xlink:href). В качестве ссылки выступает идентификатор объекта.

Допустим, у нас есть SVG-элемент с заданным идентификатором.

С помощью данный элемент можно скопировать:

В корневом SVG-элементе необходимо объявить пространство имен xlink, чтобы ссылка работала.

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

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

Но в копию вполне можно добавить новый атрибут, которого нет в оригинале:

Дубликат так и останется красного цвета, но у него появится зелёный контур.

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

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

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

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

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

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

При этом принцип работы системы координат может показаться несколько неожиданным. Она также масштабируется. Если исходный элемент был спозиционирован в 100 пикселях от края изображения, то такая его копия будет расположена в 50 пикселях от края. На задаваемые x и y это тоже распространяется. Таким образом, слова о расположении копии относительно исходного элемента не совсем верны.

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

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

Всё, что описано в теге defs, не будет отрисовано в SVG; заданные элементы будут показываться только через ссылки. Теперь добавим клону атрибуты, которых нет у оригинала:

Мы создали первый видимый круг. Радиус круга равен 20, что унаследовано от оригинала, но в то же время у него своя позиция и цвет. Можно создать еще один дубликат, просто скопировав тег use:

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

К отдельно взятому элементу можно применять SVG трансформации:

Источник