Реклама мешает? Идти Без рекламы Сегодня 

Генератор эффектов фильтров SVG

ЦветРазработчикИзображение

Реклама · УДАЛИТЬ?

ВХОД

Автоматический процесс

Тип фильтра

Фильтр

ID фильтра

Используется как ID SVG фильтра и ссылка в CSS url()

Настройки размытия

stdDeviation (пиксели): 4

Настройки поворота оттенка

Угол (град): 90

Настройки насыщенности

Количество (0 = серый, 1 = оригинальный): 1.6

Турбулентность и искажение

Основная частота: 0.04

Октавы: 3

Тип шума

Масштаб смещения: 25

Настройки тени

Смещение X (px): 4

Смещение Y (px): 4

Радиус размытия (px): 6

Цвет тени

Прозрачность тени: 0.6

Настройки эмбосса

Стиль

Целевой объект просмотра

Показывать на

ВЫХОД

Клиентская сторона

Живой просмотр

SVG фильтр XML

Использование в CSS

Реклама · УДАЛИТЬ?

Гид

Проектирование SVG-эффектов фильтров визуально. Выберите примитив фильтра — гауссовое размытие, варианты матрицы цвета (поворот оттенка, насыщенность, яркость в альфа),

Генератор эффектов фильтров SVG

Проектирование SVG <filter> визуально. Выберите примитив фильтра — гауссовое размытие, варианты матрицы цвета (поворот оттенка, насыщенность, яркость в альфа), турбулентность с смещением, тень или шаблон свертки (эмбосс, врезка, острое усиление, обнаружение краев) — и настройте его параметры с помощью ползунков, наблюдая за живым предварительным просмотром на тексте, фигурах или вашем загруженном фото. Скопируйте сгенерированный <filter> блок XML и готовый фрагмент для вставки в CSS.

Как использовать

Выберите примитив фильтра из Фильтр списка.
Установите уникальный ID фильтра — он становится id на элементе и целевым объектом для <filter> Настройте параметры, которые появляются для выбранного примитива (ползунки, выбор цвета, тип шума и т.д.). url(#…).
Переключайте
между текстом, фигурами или фото — загрузите свое изображение, чтобы увидеть эффект на реальном контенте. Целевой объект просмотра вставьте в свою страницу (он может находиться в любом месте — даже внутри скрытого элемента с нулевыми размерами SVG).
Скопируйте сгенерированный SVG фильтр XML Примените его в CSS с помощью включенного фрагмента: либо сокращенной формы (если доступна), либо с
Семь примитивов фильтров filter: url(#filterId) Как область селектора влияет на CSS-переменную?

Возможности

— гауссовое размытие, поворот оттенка, насыщенность, яркость в альфа, турбулентность с смещением, тень и шаблоны матрицы свертки (эмбосс, врезка, острое усиление, обнаружение краев). — мгновенная визуальная обратная связь при перемещении ползунков; нет этапа пересоздания, нет мигания.
Живой SVG-превью Три целевых объекта просмотра
— применение к четкому тексту, простым фигурам или загруженным вами фотографиям, чтобы увидеть, как фильтр ведет себя на реальном контенте. Два выхода
— полный блок XML (готовый к вставке в любой SVG) и фрагмент для использования в CSS с сокращенной формой, если доступна. <filter> Тень с прозрачностью
— объединяет , которые не могут быть выражены с помощью сокращенной формы CSS. feDropShadow с flood-opacityОчищенные идентификаторы фильтров
— сохраняет ваши значения безопасными для id Что отличает CSS-фильтр от SVG-фильтра? url(#…) ссылок.

 Часто задаваемые вопросы

Сокращенные формы CSS-фильтров (размытие, поворот оттенка, тень и т.д.) — это фиксированный каталог эффектов, который браузер отображает в виде встроенных примитивов SVG фильтров. SVG дает вам прямой доступ к этим примитивам — feGaussianBlur, feColorMatrix, feTurbulence, feDisplacementMap, feConvolveMatrix и т.д. — и позволяет создавать эффекты (искажения, шум, эмбосс, манипуляции каналами), которые не могут быть выражены сокращенными формами. Любое действие, которое вы можете выполнить в CSS, вы можете выполнить в SVG, но обратное не верно.

Что означает атрибут stdDeviation в feGaussianBlur?
stdDeviation — это стандартное отклонение нормального распределения, используемого для взвешивания соседних пикселей. Более высокое значение распределяет взвешивание по большему количеству пикселей, что приводит к более размытому результату. Вы можете передать одно число (однородное размытие по обеим осям) или два числа, разделенных пробелом (разные значения размытия по X и Y) для направления мягкости.

Как работает feTurbulence и почему его нужно сочетать с feDisplacementMap?
feTurbulence генерирует процедурно шум Perlin-типа в изображении SVG, регулируемый baseFrequency (масштаб шума) и numOctaves (уровни детализации). Сам шум является только цветным текстурой. feDisplacementMap использует этот шум как in2 и использует его каналы R/G для смещения пикселей вашего исходного изображения, создавая органические искажения, дым, волны воды и искажения. Атрибут scale контролирует, насколько далеко каждый пиксель может быть смещен.

Что такое ядро матрицы и как feConvolveMatrix создает эффекты эмбосса или обнаружения краев?
feConvolveMatrix скользит маленькой матрицей (ядром) по каждому пикселю, умножая каждую ячейку на соответствующий соседний пиксель и суммируя результат. Разные ядра создают разные эффекты: ядро, которое вычитает верхний левый из нижнего правого соседей, создает направленную теневую шкалу, которую мы воспринимаем как эмбосс; ядро с -1 вокруг положительного центра усиливает различия и создает эффект обнаружения краев или острого усиления. Атрибут order устанавливает размер ядра (обычно 3 для матрицы 3x3), а атрибут divisor/bias нормализует выход.

Почему мой SVG-фильтр не работает при применении через CSS filter: url(#id)?
Три распространенных причины: (1) элемент не находится в DOM при применении CSS-правила — убедитесь, что фильтр SVG встроен непосредственно в страницу, а не загружен из внешнего файла, который блокируется браузером. (2) Идентификатор, который вы ссылаетесь, не совпадает с идентификатором на элементе (чувствителен к регистру, должен быть уникальным). (3) Элемент, который вы фильтруете, имеет нулевые размеры или отсекается по умолчанию — установите явные значения x, y, width, height на элементе (часто x="-30%" y="-30%" width="160%" height="160%"), чтобы эффекты, такие как размытие или тень, выходящие за пределы исходного контура, не обрезались.

myFilter