SVG Filter Effects

Серия статей, посвященных использованию SVG-фильтров: от общего описания до конкретных примеров.

👉 SVG Filters 101
Что представляют из себя SVG-фильтры и как ими пользоваться.

👉 Outline Text with feMorphology
Морфинг объектов с примитивом feMorphology.

👉 Poster Image Effect with feComponentTransfer
👉 Duotone Images with feComponentTransfer
Контроль над цветовыми каналами с примитивом feComponentTransfer.

👉 Conforming Text to Surface Texture with feDisplacementMap
Смещение контента с примитивом feDisplacementMap.

👉 Creating Texture with feTurbulence
Генерация шума Перлина (облака, дым, мрамор) с примитивом feTurbulence.

👉 Moving Forward
Полезные ресурсы и примеры использования SVG-фильтров

#svg

Секреты правильной растяжки: адаптивные графики в вебе без клиентского JavaScript

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

Узнать подробнее: https://prglb.ru/5bcel

#tools #svg #library

Адаптивная комикс-панель с CSS Clip-Path

Верстаем симпатичный блок с нестандартным дизайном с помощью SVG и CSS Clip-Path.

Смотреть: https://prglb.ru/wm0e

#css #svg #snippets

Оптимизация SVG для веба

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

Читать: https://css-irl.info/optimising-svgs-for-the-web/

#svg #performance

Добавление SVG-фильтров из CSS

Пошаговый туториал по добавлению крутых SVG-эффектов: https://prglb.ru/3vjlw

#svg #css #effects

​SVG-редакторы в браузере

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

Есть множество инструментов для работы с SVG, в том числе браузерные:

👉 editor.method.ac
👉 SVG edit
👉 Vector Paint
👉 Drawing SVG
👉 Vecteezy Editor
👉 Vectr
👉 Janvas
👉 Boxy SVG
👉 RollApp

Подробный список с описаниями: https://prglb.ru/5gefr

#tools #svg

Руководство по работе с SVG

Огромный гайд по работе с векторной графикой в Adobe Illustrator, Sketch и Figma.

https://prglb.ru/4wn1v

#svg #tools

​SVG-фавикон для темной и светлой темы

Изменяющийся фавикон с помощью SVG и prefers-color-scheme

Ссылка: https://prglb.ru/510g5

#design #css #svg

Погружение в чудесный мир SVG-фильтров смещения

Разбор примитива feDisplacementMap с множеством примеров: https://proglib.io/w/681ac697

#svg