worldwide open-source software

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

===== Редакторы=====

Вы можете создать свои собственные многоцветные значки SVG для своей веб-страницы «ДокуВики», используя любой **редактор путей SVG** по вашему выбору. Существуют бесплатные онлайн-версии и устанавливаемые. Вот хорошее введение и обзор, где я нашел несколько первых подсказок:
  * https://css-tricks.com/tools-visualize-edit-svg-paths-kinda/

Я рекомендую следующий онлайн-генератор/редактор путей SVG для создания новых значков:
  * https://yqnn.github.io/svg-path-editor/

===== Example =====

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

<code>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="red" d="M 4 4 L 4 20 L 20 20 L 20 4 Z"/>
<path fill="white" d="M 5 5 L 5 15 L 15 15 L 15 5 Z"/>
<path fill="red" d="M 8 8 L 8 12 L 12 12 L 12 8 Z"/>
<path fill="transparent" stroke="blue" stroke-width="1px" d="M 7 8 L 10 13 L 14 7"/>
</svg>

</code>

Пути в этом контексте означают непрерывную последовательность всех команд пути (координат) из всех **[[https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d|атрибутов d]]** **[[https://www.w3schools.com/graphics/svg_path.asp|элемента пути]]** из одного файла SVG (здесь из примера SVG выше):
<code>

M 4 4 L 4 20 L 20 20 L 20 4 Z
M 5 5 L 5 15 L 15 15 L 15 5 Z
M 8 8 L 8 12 L 12 12 L 12 8 Z
M 7 8 L 10 13 L 14 7

</code>

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

===== Рабочий процесс =====

==== Редактирование пути ====

Что в основном понимают редакторы путей SVG, так это непрерывная последовательность строк пути. Итак, на основе приведенного выше примера SVG-файла приведенная выше последовательность строк пути — это то, что вы можете вставить в редактор по вашему выбору. Если вы **загружаете файлы SVG** с намерением изменить их, вам, возможно, придется разделить, очистить, отсортировать и закрыть строки открытого пути, прежде чем их можно будет редактировать каким-либо удобным способом. Некоторая очистка может выполняться редактором путей автоматически при импорте строк пути. Однако, чтобы иметь возможность эффективно работать со своим значком, рекомендуется отделять каждый отдельный графический элемент вашего значка как новую строку пути, начинающуюся с буквы M, и закрывать каждую строку пути буквой Z, чтобы отслеживать их. начала и окончания графического элемента во всей последовательности путей в вашем редакторе. (Единственным исключением являются открытые штрихи, подобные последнему в примере.) Для всех вариантов создания контуров и манипуляций с ними существует множество онлайн-руководств и видеороликов на YouTube.

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


==== Редактирование SVG ====

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

==== SVG-стиль ====

Если вы оставите цвет заливки для элементов пути необъявленным, «ДокуВики» может установить определенный цвет, например, для конкретного меню. Но когда вы объявляете цвет заливки, цвета «ДокуВики» по умолчанию будут переопределены. С другой стороны, если ни «ДокуВики», ни вы не определите цвет, по умолчанию он будет черным (браузером), что не всегда красиво. Таким образом, в большинстве случаев вам будет лучше объявить цвета путей для каждого пути в соответствии с вашими дизайнерскими идеями. Вы также можете объявить цвета, используя обозначение RGB, здесь для красного:
 <code>fill="rgb(255,0,0)"</code>
Если на вашем значке есть белый символ на цветном фоне, рекомендуется объявить белый цвет заливки или обводки для пути этого переднего символа. Потому что, если вы оставите его бесцветным или прозрачным, белый цвет фона веб-страницы может не просвечивать ни при каких обстоятельствах (например, в темном режиме браузера). Итак, опять же, в большинстве случаев вам лучше явно объявить белый цвет вашего выдающегося символа.

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

<code>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" style="transform: rotate(90deg) scale(0.5) translate(-10%, -10%);">

</code>

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

**Примечание**. Конечно, все это можно сделать и с помощью [[https://inkscape.org/release|Inkscape]], который имеет открытый исходный код, но это более сложный рабочий процесс со своими плюсами и минусами. (самый большой плюс — функция преобразования контура в траекторию для автоматического создания траектории)

===== References =====

  * https://css-tricks.com/tools-visualize-edit-svg-paths-kinda/
  * https://yqnn.github.io/svg-path-editor/
  * https://www.w3schools.com/graphics/svg_path.asp
  * https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/d
  * https://inkscape.org/release

----
--- [[user>Chris75|Chris75]] //2023-03-17//