Эффекты фильтра SVG - SVG filter effects

Масштабируемая векторная графика
Текстура дерева и тень имитируются с помощью фильтров SVG

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

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

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

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

Пример SVG с использованием различных примитивов фильтров
Текстуры: feTurbulence , feDiffuseLighting , feDistantLight , feComposite и feBlend
Тени: feGaussianBlur , feOffset , feColorMatrix и feBlend
Демонстрация анимированного эффекта преломления с использованием feTurbulence , feDisplacementMap и синхронизированного языка интеграции мультимедиа

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

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

Текущий проект уровня 1 модуля эффектов фильтра добавляет примитив фильтра для тени . Этот примитив feDropShadow,, является сокращением для комбинации других примитивов фильтра.

Рамки для применения фильтра

<?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>

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

  • Спецификации страницы W3C SVG , список реализаций
  • Праймер W3C SVG: Фильтры Глава W3C Primer (черновик) и примеры фильтров.
  • FILDROP Набор настраиваемых эффектов фильтра SVG и эффектов фильтра генератора
  • SVG Filter Builder Визуальный конструктор и анализатор SVG-фильтров.
  • Фильтры SVG Текстовые эффекты в стиле ретро 80-х в стиле Photoshop, созданные с помощью фильтров CSS и SVG

использованная литература