Сообщение Немного полезных ссылок от 14.08.2022 18:30
Изменено 15.08.2022 0:47 Shtole
Немного полезных ссылок
SVG
После долгого периода неприятия, я постиг, наконец, дао 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>, а потом ссылайтесь на нужный прямо из текста:
Play <svg width="16" height="16" class="inline"><use href="#bi-play-circle"></use></svg>Чтобы иконка отображалась цветом из CSS, не забудьте описать класс 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+xmlhttps://www.hongkiat.com/blog/svg-animations/ Просто набор красивых анимаций, построенных на базе SVG.
Misc
- 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.videezy.com/free-video/live-wallpaper Целый онлайн-редактор для создания видеороликов. Ценен, в первую очередь, большой библиотекой встроенных закольцованных видеобэкграундов.
Немного полезных ссылок
SVG
После долгого периода неприятия, я постиг, наконец, дао 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>, а потом ссылайтесь на нужный прямо из текста:
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+xmlhttps://www.hongkiat.com/blog/svg-animations/ Просто набор красивых анимаций, построенных на базе SVG.
Misc
- 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.videezy.com/free-video/live-wallpaper Целый онлайн-редактор для создания видеороликов. Ценен, в первую очередь, большой библиотекой встроенных закольцованных видеобэкграундов.