Эффекты фильтров SVG

Эффекты фильтра
Модуль эффектов фильтров, уровень 1
	Текстура дерева и тень, смоделированные с помощью SVG-фильтров.
Статус	Рабочий проект (WD)
Год начался	15 октября 2012 г.
Впервые опубликовано	15 октября 2012 г.
Последняя версия	18 декабря 2018 г.
Предварительная версия	Черновик редактора ; 30 октября 2019 г.
Организация	W3C
комитет	Рабочая группа CSS
Редакторы	Дирк Шульце ; Дин Джексон ; Винсент Харди ; Эрик Дальстрем ;
Домен	Визуальные эффекты

Эффекты фильтра SVG — это эффекты, применяемые к масштабируемой векторной графики файлам (SVG). SVG — это с открытым стандартом формат XML для двумерной векторной графики , определенный Консорциумом World Wide Web (W3C). Эффект фильтра состоит из серии графических операций, которые применяются к заданному исходному векторному изображению для получения измененного растрового результата.

Эффекты фильтра определяются элементами фильтра. filter Свойство устанавливается для элемента контейнера или графического элемента, чтобы применить к нему эффект фильтра. Каждый filter элемент содержит набор примитивов фильтра в качестве своих дочерних элементов. Каждый примитив фильтра выполняет одну фундаментальную графическую операцию (например, размытие по Гауссу или эффект освещения) на одном или нескольких входных данных, создавая графический результат. Поскольку большинство примитивов фильтра представляют собой ту или иную форму обработки изображения, в большинстве случаев выходные данные примитива фильтра представляют собой одно растровое изображение RGBA (однако оно будет сгенерировано повторно, если будет выбрано более высокое разрешение).

Исходное исходное изображение или результат примитива фильтра можно использовать в качестве входных данных для одного или нескольких других примитивов фильтра. Обычное применение — многократное использование исходного изображения. Например, простой фильтр может заменить одно изображение на два, добавив черную копию исходного изображения со смещением для создания тени . По сути, теперь существует два слоя графики, оба с одинаковой исходной графикой.

Примитивы фильтров SVG

В следующей таблице перечислены примитивы фильтров, доступные как в SVG 1.0, так и в SVG 1.1. SVG Tiny не поддерживает эффекты фильтров, а SVG Basic поддерживает только показанные примитивы фильтров:

Имя	Элемент	Базовый формат SVG
Смешивать	`feBlend`	Да
Цветовая матрица	`feColorMatrix`	Да
Перенос компонентов	`feComponentTransfer`	Да
Композитный	`feComposite`	Да
Свертка матрицы	`feConvolveMatrix`	Нет
Рассеянное освещение	`feDiffuseLighting`	Нет
Карта смещения	`feDisplacementMap`	Нет
Наводнение	`feFlood`	Да
Размытие по Гауссу	`feGaussianBlur`	Да
Изображение	`feImage`	Да
Объединить	`feMerge`	Да
Морфология	`feMorphology`	Нет
Компенсировать	`feOffset`	Да
Зеркальное освещение	`feSpecularLighting`	Нет
Плитка	`feTile`	Да
Турбулентность	`feTurbulence`	Нет

В текущем проекте модуля «Эффекты фильтров уровня 1» добавлен примитив фильтра для тени . Этот примитив, feDropShadow, — это просто сокращение для комбинации других примитивов фильтра. ^[1]

Платформа для применения фильтра

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  viewBox="0 0 400 300">
  <defs>
    <filter id="AFilter">
      <!-- Definition of filter goes here -->
    </filter>
  </defs>
  <text x="10" y="100" filter="url(#AFilter)">a filter applied</text>
</svg>

Внешние ссылки

Эффекты фильтра – SVG 1.1 (второе издание) спецификации W3C
Учебник по W3C SVG: Фильтры Глава W3C Primer (черновик) и примеры, касающиеся фильтров.
FILDROP Набор пользовательских эффектов фильтра SVG и эффектов фильтра генератора.
SVG Filter Builder Интерактивный визуальный инструмент программирования фильтров SVG, который можно использовать как для визуализации существующих фильтров (путем загрузки SVG), так и для создания собственных с нуля и сохранения их.

Ссылки

^ Шульце, Дирк; Джексон, Дин, ред. (18 декабря 2018 г.). «Модуль эффектов фильтров, уровень 1» . www.w3.org . Проверено 14 января 2023 г.

[1] Шульце, Дирк; Джексон, Дин, ред. (18 декабря 2018 г.). «Модуль эффектов фильтров, уровень 1» . www.w3.org . Проверено 14 января 2023 г.

[1]

Текстуры:	feTurbulence , feDiffuseLighting , feDistantLight , feComposite и feBlend
Тени:	feGaussianBlur , feOffset , feColorMatrix и feBlend