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

Текстура дерева и тень имитируются с помощью фильтров 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 поддерживает только указанные примитивы фильтра:

Текущий проект уровня 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" >  <! - Здесь идет определение фильтра ->  </filter>  </defs>  <text  x = "10"  y = "100"  filter = "url (#AFilter)" > примененный фильтр < / текст> </svg>

Внешние ссылки [ править ]

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

Ссылки [ править ]