После долгого периода неприятия, я постиг, наконец, дао SVG (ну, или мне это просто кажется). К SVG нельзя относиться как к ещё-одному-формату-графического файла, вот в чём дело. SVG — это
графическая разметка. Попробую показать на примере:
https://stackoverflow.com/a/38118843/14400772
Там и сам вопрос — демонстрация правильного подхода к SVG, а уж когда приходит SVG-ниндзя и показывает, как он мыслит в терминах path-операций...
Explanation
m100,100: move to point(100,100)
h200: draw a 200px horizontal line from where we are
a20,20 0 0 1 20,20: draw an arc with 20px X radius, 20px Y radius, clockwise, to a point with 20px difference in X and Y axis
v200: draw a 200px vertical line from where we are
a20,20 0 0 1 -20,20: draw an arc with 20px X and Y radius, clockwise, to a point with -20px difference in X and 20px difference in Y axis
h-200: draw a -200px horizontal line from where we are
a20,20 0 0 1 -20,-20: draw an arc with 20px X and Y radius, clockwise, to a point with -20px difference in X and -20px difference in Y axis
v-200: draw a -200px vertical line from where we are
a20,20 0 0 1 20,-20: draw an arc with 20px X and Y radius, clockwise, to a point with 20px difference in X and -20px difference in Y axis
z: close the path
Ну и вообще, допилить готовое изображение точечными вставками какого-нибудь
stroke='white' stroke-width='0.5' или, наоборот, удалением ненужных path — умение из категории must have.
Наконец, менять код SVG можно автоматизированно, из скриптов.
Итак, ссылки.
https://icons.getbootstrap.com/ В то время, как до сих пор кто-то использует (иногда даже платные) упоротые шрифты с иконками, например, Font Awesome, Бутстрапчик предлагает неплохо нарисованные часто употребимые иконки совершенно бесплатно. Причём, предлагает в исходниках, которые можно редактировать. И в SVG, что ещё лучше.
Многим, наверно, непонятно, как правильно пользоваться SVG вместо <i class="fa/uil/whatever"></i>. Очень просто. Соберите библиотеку нужных иконок прямо в самом файле с разметкой, где-нибудь в начале страницы вставив невидимый (через visibility, через display не сработает) элемент <svg> с коллекцией <symbol>, а потом ссылайтесь на нужный прямо из текста:
<body>
<!-- SVG icons -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="template">
<defs>
<!-- Скопировано отсюда: https://icons.getbootstrap.com/icons/play-circle/ -->
<symbol id="bi-play-circle" class="bi bi-play-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z"/>
</symbol>
</defs>
</svg>
Play <svg width="16" height="16" class="inline"><use href="#bi-play-circle"></use></svg>
Чтобы иконка отображалась тем же цветом, что и текст рядом, не забудьте описать класс inline:
svg.inline
{
fill: currentColor;
display: inline-block;
}
Ну и, ещё раз, не стесняйтесь править исходники иконок. Добиться хорошего отображения иногда можно только существенно поменяв толщину линий, способ соединения, размеры и т.п.
https://vecta.io/nano Оптимизатор SVG. Прежде, чем читать код, сгенерированный, например, Inkscape, полезно почистить его от шлака. А если не читать, а просто вставлять в свою страницу — тем более.
https://www.svgrepo.com/ Библиотека SVG-изображений под разными лицензиями. Опять же, полезно рассматривать её как набор исходников, а не тупо тырить чужие картинки, но можно и просто тырить
(если лицензия позволяет, конечно). Много всего и в самых разных стилях.
https://yoksel.github.io/url-encoder/ Микроутилита для превращения SVG в CSS:
background-image: url("data:image/svg+xml
https://www.hongkiat.com/blog/svg-animations/ Просто набор красивых анимаций, построенных на базе SVG. Читая их код, я нашёл аж две идеи для своих проектов.
https://cloudconvert.com/ico-to-png При переносе старых виндовых приложений на современные рельсы, всё ещё изредка бывает нужно отконвертировать 32-битное изображение с альфа-каналом из .ico в совремненный .png.
https://brandpalettes.com/ Библиотека цветов корпоративных брендов. Например, синий Intel — это какой? А зелёный nVidia? Цвета представлены в разных форматах, и даже с названиями, так что можно больше не извлекать их пипеткой со скриншотов логотипов
https://www.imgonline.com.ua/eng/make-seamless-texture.php Полезный тул для изготовления бесшовных текстур. Конкретно в UI это может быть полезно, например, для изготовления видеобэкграундов и вообще для зацикленных анимаций. Результаты работы утилиты не всегда совершенны, но это задача из категории творческих, она вообще плохо автоматизируется.
https://www.flexclip.com/ Целый онлайн-редактор для создания видеороликов. Ценен, в первую очередь, большой библиотекой встроенных закольцованных видеобэкграундов.
https://www.videezy.com/free-video/live-wallpaper Библиотека видеобэкграундов.
