Svg фильтры: Эффекты фильтрации SVG. Часть 1. SVG фильтры 101 / Хабр

Содержание

SVG-фильтры. Часть 1. Основные понятия и типы. Применение к изображениям для создания графических эффектов.

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

В этой статье я попытаюсь убедить Вас в обратном, расскажу о возможностях и типах SVG-фильтров и, в частности, о том, как применить их к изображениям на веб-страницах.

SVG-фильтры поддерживаются почти всеми современными браузерами, включая мобильные. Исключение составляют IE9 и Android native browser версии ниже 4.4.

svg-filters поддержка браузерами

Чтобы понять, что представляет из себя фильтр в SVG, давайте разберем простой пример. Для начала мы нарисуем круг:

<svg viewbox="0 0 400 300">
    <circle cx="200" cy="200" fill="#3498db" r="80" />
</svg>

Если Вы вообще не знакомы с SVG, то сейчас самое время познакомиться 🙂

Вкратце:

тег <circle> – это круг
аттрибуты cx, cy – задают положение центра круга, fill – заливку, r – радиус.

То, что мы написали, будет выглядеть в браузере вот так:

Да, круто. Настоящий, большой и синий SVG-круг. А теперь давайте опишем простейший SVG-фильтр, задающий гаусовское размытие, и применим этот фильтр к нашей незамысловатой фигуре.

<svg viewbox="0 0 400 300">
  <defs>
    <filter>
      <feGaussianBlur stdDeviation="10"/>
    </filter>
  </defs>
  <circle cx="200" cy="150" fill="#3498db" filter="url(#myFilter1)" r="80" />
</svg>

Сам фильтр определяется в секции

<defs> с помощью тега <filter>. Ему необходимо задать id (уникальный в контексте всего документа). У нас это id="myFilter1".

Внутри описываются типы применяемой фильтрации. В нашем примере это <feGaussianBlur>, где атрибут stdDeviation регулирует уровень размытия.

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

Далее к той части SVG, которая должна быть обработана фильтром, нужно добавить атрибут filter="url(#myFilter1)"

с указанием id фильтра.

И вот что получится:

Да! Вот он – наш первый SVG-фильтр. Не так сложно, как казалось, не правда ли? Идем дальше. Давайте применим такой же фильтр к растровой картинке. Для этого поместим изображение красивой девушки в наушниках внутрь SVG:

<svg viewbox="0 0 400 300">
  <image xlink:href="/blogdemo/img/girl.jpg" />
</svg>

И применим к изображению фильтр, описанный выше:

<svg>
  <defs>
    <filter>
      <feGaussianBlur stddeviation="5" />
    </filter>
  </defs>
  <image filter="url(#myFilter2)" xlink:href="/blogdemo/img/girl.jpg" />
</svg>

Получилась “разблюренная” девушка, как мы и ожидали. И это только начало. Продолжаем!

Комплексные SVG-фильтры. Применяем несколько эффектов последовательно.

Еще одним неотъемлемым достоинством SVG-фильтров является возможность сочетания нескольких типов фильтров. Т.е. результат, полученный после применения одного фильтра, может являться источником изображения для другого фильтра и т.д.

Чтобы было понятнее, давайте добавим еще один тип фильтрации для “разблюренной” девушки. Например, сделаем изображение черно-белым.

<svg viewbox="0 0 400 300">
  <defs>
    <filter>
      <feGaussianBlur in="SourceGraphic" result="a1" stddeviation="3" />
      <feColorMatrix in="a1" type="saturate" values="0"></feColorMatrix>
    </filter>
  </defs>
  <image filter="url(#myFilter3)" xlink:href="/blogdemo/img/girl.jpg" />
</svg>

Графически эту схему фильтрации можно представить как:

Как Вы видите, для каждого типа фильтров можно указать атрибуты in и result. Если они не указаны, фильтры будут применяться последовательно в порядке их записи.

В качестве in для первого типа фильтра по умолчанию используется предопределенное значение SourceGraphic (в нашем случае оно является псевдонимом <image>)

Типы SVG-фильтров

Как мы уже говорили, существует несколько возможных типов фильтров. Давайте разберем каждый из них подробнее. Для простоты восприятия мы будем рассматривать только код, находящийся внутри тега filter. Все остальное остается таким же, как в предыдущих примерах.

feComponentTransfer

Фильтр <fecomponenttransfer> позволяет производить линейные, табличные, дискретные операции над каналами изображения, а также изменять гамму каждого канала.

Давайте рассмотрим примеры:

<!--1-й пример -->
...
<fecomponenttransfer>
  <feFuncR type="linear" slope="5" intercept="-0.5" />
  <feFuncG type="linear" slope="0.2" />
  <feFuncB type="linear" slope="0.2" />
  <feFuncA type="identity" />
</fecomponenttransfer>
...

Здесь feFuncR, feFuncG, feFuncB, feFuncA – красный, зеленый, синий и канал прозрачности соответственно. type – тип преобразования, slope – множитель,

intercept – добавляемое (отнимаемое) значение.

T.е. <feFuncR type="linear" slope="5" intercept="-0.5" /> значит: red = red * 5 - 0.5

Вот так, например, можно сделать изображение полупрозрачным:

<!--2-й пример -->
...
<fecomponenttransfer>
  <fefunca type="linear" slope="0.5" />
</fecomponenttransfer>
...

A вот так выделить только синий канал:

<!--3-й пример -->
...
<fecomponenttransfer>
  <fefuncr type="linear" slope="0" />
  <fefuncg type="linear" slope="0" />
  <fefuncb type="linear" slope="1" />
</fecomponenttransfer>
...

Или просто заполнить значения атрибутов случайными значениями и получить интересный эффект.

<!--4-й пример -->
...
<fecomponenttransfer>
  <fefuncr type="linear" slope="10" intercept="-4" />
  <fefuncg type="linear" slope="1.5" intercept="1" />
  <fefuncb type="linear" slope="2" intercept="-1" />
</fecomponenttransfer>
...

Вот демо всех примеров, приведенных выше.

Фильтр <fecomponenttransfer> поддерживает не только линейные преобразования. Тип преобразований задается атрибутом

type и может принимать значения identity | table | discrete | linear | gamma. Давайте бегло взглянем, что из себя представляет каждый из типов.

fecomponenttransfer с

type="table"

В случае fecomponenttransfer с типом table функция преобразования для канала будет определена путем линейной интерполяции между значениями, указанными в атрибуте tablevalues. А вот так, например, можно добиться эффекта “негатива”, используя табличные значения:

...
<fecomponenttransfer>
  <fefuncr type="table" tablevalues="1 0" />
  <fefuncg type="table" tablevalues="1 0" />
  <fefuncb type="table" tablevalues="1 0" />
</fecomponenttransfer>
...

fecomponenttransfer с

type="discrete"

Для типа discrete функция будет ступенчатой, в соответствии со значениями, указанными в атрибуте tablevalues. Вот несколько примеров:

<!-- 1-й пример -->
...
<fecomponenttransfer>
  <fefuncr type="discrete" tablevalues="1 0" />
  <fefuncg type="discrete" tablevalues="0 0" />
  <fefuncb type="discrete" tablevalues="0 0" />
</fecomponenttransfer>
...
<!--2-й пример -->
...
<fecomponenttransfer>
  <fefuncr type="discrete" tablevalues="1 0" />
  <fefuncg type="discrete" tablevalues="0 0" />
  <fefuncb type="discrete" tablevalues="0 0" />
</fecomponenttransfer>
...
<!-- 3-й пример -->
...
<fecomponenttransfer>
  <fefuncr type="discrete" tablevalues="1 1 1" />
  <fefuncg type="discrete" tablevalues="0 0.8 1" />
  <fefuncb type="discrete" tablevalues="0 0.5 1" />
</fecomponenttransfer>
...
<!-- 4-й пример -->
...
<fecomponenttransfer>
  <fefuncr type="discrete" tablevalues="0 0" />
  <fefuncg type="discrete" tablevalues="0.1 0.6" />
  <fefuncb type="discrete" tablevalues="0.  3 0.9" />
</fecomponenttransfer>
...

Имеется также возможность задавать значения гаммы каждого канала при помощи типа фильтра type="gamma"

и атрибутов amplitude, exponent и offset для каждого из каналов.

Например, <fefuncg type="gamma" amplitude="1.2" exponent="0.5" offset="0.2" /> значит: green = 1.2 * pow(green, 0.5) + 0.2

Демо:

<!-- 1-й пример -->
...
<fecomponenttransfer>
  <fefuncr type="gamma" amplitude="1.1" exponent="1" offset="0" />
  <fefuncg type="gamma" amplitude="1.1" exponent="1" offset="0" />
  <fefuncB type="gamma" amplitude="1.3" exponent="0.9" offset="0.5" />
</fecomponenttransfer>
...
<!-- 2-й пример -->
...
<fecomponenttransfer>
  <fefuncr type="gamma" amplitude="2" exponent="1" offset="0.1" />
  <fefuncg type="gamma" amplitude="1" exponent="1.2" offset="0.1" />
  <fefuncB type="gamma" amplitude="1.  4" exponent="1" offset="0.1" />
</fecomponenttransfer>
...
<!-- 3-й пример -->
...
<fecomponenttransfer>
  <fefuncr type="gamma" amplitude="0.1" exponent="1" offset="0.1" />
  <fefuncg type="gamma" amplitude="1" exponent="3" offset="0.1" />
  <fefuncB type="gamma" amplitude="0.1" exponent="1" offset="0.1" />
</fecomponenttransfer>
...
<!-- 4-й пример -->
...
<fecomponenttransfer>
  <fefuncr type="gamma" amplitude="0.4" exponent="1" offset="0.4" />
  <fefuncg type="gamma" amplitude="1" exponent="0.33" offset="0.33" />
  <fefuncB type="gamma" amplitude="0.1" exponent="1" offset="0.1" />
</fecomponenttransfer>
...

feColorMatrix

Фильтр позволяет умножить каждый пиксель исходного изображения в виде вектора, образованного каналами R, G, B, A и дополненного до размерности 5, на матрицу 5×5. В результате мы получим вектор, представляющий из себя каналы R', G', B', A' каждого пикселя результирующего изображения.

  | R' |     | a00 a01 a02 a03 a04 |   | R |
  | G' |     | a10 a11 a12 a13 a14 |   | G |
  | B' |  =  | a20 a21 a22 a23 a24 | * | B |
  | A' |     | a30 a31 a32 a33 a34 |   | A |
  | 1  |     |  0   0   0   0   1  |   | 1 |

Давайте сразу перейдем к примеру. Знакомый всем эффект “сепия” можно получить с помощью вот такой матрицы:

  0.343 0.669 0.119 0 0
  0.249 0.626 0.130 0 0
  0.172 0.334 0.111 0 0
  0     0     0     1 0
  0     0     0     0 1

Матрица записывается в атрибут values фильтра <fecolormatrix> с типом matrix в виде значений, разделенных пробелом.

Последнюю строку не нужно указывать, т.к. она всегда равна | 0 0 0 0 1 |.

<fecolormatrix type="matrix" values="0.343 0.669 0.119 0 0 0.249 0.626 0.130 0 0 0.172 0.334 0.111 0 0 0 0 0 1 0" />

Для удобства чтения матрицу можно записать в таком виде:

<!-- 1-й пример -->
...
<fecolormatrix type="matrix"
  values="0. 343 0.669 0.119 0 0
          0.249 0.626 0.130 0 0
          0.172 0.334 0.111 0 0
          0     0     0     1 0" />
...

Давайте посмотрим еще на несколько примеров с различными матрицами:

  <!-- 2-й пример -->
  ...
  <fecolormatrix type="matrix"
    values="0.788 -0.262  0.474  0   0
            0.1    1.032 -0.132 -0.1 0
            -1     2.1    0.912 -2.8 0
            0      0      0      1   0" />
  ...    
  <!-- 3-й пример -->
  ...
  <fecolormatrix in="SourceGraphic" type="matrix"
    values="5   0   0 0 -0.2
            0 1.2   0 0 -0.2
            0   5 1.2 0 -0.2
            5   0   0 1    0 "/>
  ...    
  <!-- 4-й пример -->
  ...
  <fecolormatrix type="matrix"
    values="1.2 0   0 0 -0.2
            2   0   2 2 -0.2
            2   2 1.2 0 -0.2
            2   0   0 1    0"/>
  ...

Вот результат:

Частные случаи цветовых матриц – это поворот изображения по цветовому кругу, изменение цветности и т. п. Чтобы упростить жизнь разработчикам и не требовать умножения на матрицы для типовых операций в спецификации для фильтров , определены вспомогательные типы type=saturate, type=hueRotate, type=luminanceToAlpha. Давайте рассмотрим примеры их использования:

Обесцвечивание с type="saturate", а также примеры, где цветность увеличена в 0, 0.5, 2, 5 раз, используя type="saturate":

<fecolormatrix type="saturate" values="0"   /> <!-- 1-й пример -->
...
<fecolormatrix type="saturate" values="0.5" /> <!-- 2-й пример -->
...
<fecolormatrix type="saturate" values="2"   /> <!-- 3-й пример -->
...
<fecolormatrix type="saturate" values="5"   /> <!-- 4-й пример -->

Поворот по цветовому кругу на 40, 120, 240, 320 градусов, используя type="hueRotate":

<fecolormatrix type="hueRotate" values="40"  /> <!-- 1-й пример -->
...
<fecolormatrix type="hueRotate" values="120" /> <!-- 2-й пример -->
. ..
<fecolormatrix type="hueRotate" values="240" /> <!-- 3-й пример -->
...
<fecolormatrix type="hueRotate" values="360" /> <!-- 4-й пример -->

Свертка

feConvolveMatrix

В процессе свертки матрица коэффициентов «умножается» на значения каналов пикселей изображения. Будет намного проще представить это графически:

Действие над изображением (или фильтрование изображения) определяется матрицей свертки m. Матрица свертки определяет то, как конкретный пиксель зависит от соседних пикселей в процессе свертки. Пиксель у в результирующем изображении зависит от пикселей x0 … x8 исходя из следующей формулы:

y = x0×m0 + x1×m1 + ... + x8×m8

Свертка используется в цифровой обработке изображений для различных целей. Это размытие, искусственное увеличение резкости и другие интересные эффекты.

Давайте посмотрим, как можно немного «подтянуть» резкость классического нечеткого #duckface изображения при помощи вот такого фильтра свертки с размерностью 3:

. ..
<feConvolveMatrix 
  order="3" 
  kernelMatrix=" 1  -1   1 
                -1  -1  -1 
                 1  -1   1">
</feConvolveMatrix>
...

Оригинальное изображение (слева) и результат фильтрации (справа)

Далее представлены еще несколько примеров для различных фильтров свертки:

<!-- 1-й пример -->
...
<feConvolveMatrix order="3" kernelMatrix="1 -1 1 -1 -0.1 -1 1 -1 1"></feConvolveMatrix>
...
<!-- 2-й пример -->
...
<feConvolveMatrix order="3" kernelMatrix="9 0 0 0 1 0 0 0 -9"></feConvolveMatrix>
...
<!-- 3-й пример -->
...
<feConvolveMatrix order="3" kernelMatrix="-1 -1 -1 -1 7 -1 -1 -1 -1"></feConvolveMatrix>
...
<!-- 4-й пример -->
...
<feConvolveMatrix order="5" kernelMatrix="1 1 1 1 1 1 -2 -2 -2 1 1 -2 .01 -2 1 1 -2 -2 -2 1 1 1 1 1 1"></feConvolveMatrix>
...

Композитные операции c

feComposite

При помощи feComposite можно осуществлять арифметические и логические операции над слоями в svg.

<feComposite
    in="source1"
    in2="source2"
    operator="xor"/>

Давайте рассмотрим возможные значения на примерах:

over

out

atop

xor

arithmetic
k1=”0″ k2=”1″ k3=”-1″ k4=”1″

arithmetic
k1=”.5″ k2=”.5″ k3=”.5″ k4=”.5″

arithmetic
k1=”0″ k2=”1″ k3=”1″ k4=”0″

Режимы смешивания слоев с

feBlend

При помощи feBlend можно осуществлять смешивание слоев в svg.

<feBlend
    in="source1"
    in2="source2"
    mode="lighten"/>

Давайте рассмотрим возможные значения на примерах. Их не так много, как в photoshop и подобных редакторах, но все же есть наиболее часто используемые:

normal

screen

multiply

lighten

darken

Текстура (повторяющееся изображение) с

feTile

feTile позволяет сделать в svg текстуру. Это очень похоже на background-repeat: repeat; в html

<feTile in="source" />

Демо c svg-фильтрами:

В качестве демо посмотрите, что мы делали на halloween

Еще несколько примеров будут опубликованы в ближайшее время отдельными статьями.

В заключение:

Это первая статья с основами SVG фильтров. Продолжение седует…

Подписывайтесь на наши группы в Ваших любимых соц. сетях.

Posted on Октябрь 31, 2014
by Nedudi Дудин Дмитрий
11 Comments ↓
37,568 views

SVG — Фильтры — CoderLessons.com

SVG использует элемент <filter> для определения фильтров. Элемент <filter> использует атрибут id для уникальной его идентификации. Фильтры определяются внутри элементов <def>, а затем графические элементы ссылаются по их идентификаторам.

SVG предоставляет богатый набор фильтров. Ниже приведен список наиболее часто используемых фильтров.

feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMorphology
feOffset — фильтр для теней
feSpecularLighting
feTile
feTurbulence
feDistantLight
fePointLight
feSpotLight

декларация

Ниже приводится объявление синтаксиса элемента <filter> . Мы показали только основные атрибуты.

 <фильтр
    filterUnits = "единицы для определения области эффекта фильтра"
    primitiveUnits = "единицы для определения субрегиона примитивного фильтра"
   
    х = "координата оси х" 
    y = "координата оси Y"     
   
    ширина = «длина»
    высота = «длина»
   
    filterRes = "числа для области фильтра"
    xlink: href = "ссылка на другой фильтр">
 </ Фильтр>

Атрибуты

Sr.No.	Имя и описание
1	filterUnits — единицы для определения области эффекта фильтра. Он определяет систему координат для различных значений длины в фильтре и для атрибутов, определяющих субрегион фильтра. Если filterUnits = «userSpaceOnUse», значения представляют значения в текущей пользовательской системе координат, действующей на момент использования элемента filter. Если filterUnits = «objectBoundingBox», значения представляют значения в долях или процентах от ограничительной рамки для ссылочного элемента, установленного во время использования элемента filter. По умолчанию используется userSpaceOnUse.
2	primitiveUnits — единицы для определения области эффекта фильтра. Он определяет систему координат для различных значений длины в фильтре и для атрибутов, определяющих субрегион фильтра. Если filterUnits = «userSpaceOnUse», значения представляют значения в текущей пользовательской системе координат, действующей на момент использования элемента filter. Если filterUnits = «objectBoundingBox», значения представляют значения в долях или процентах от ограничительной рамки для ссылочного элемента, установленного во время использования элемента filter. По умолчанию используется userSpaceOnUse.
3	x — координата оси x ограничительной рамки фильтра. По умолчанию 0.
4	y — координата оси y ограничивающей рамки фильтра. По умолчанию 0.
5	ширина — ширина ограничительной рамки фильтра. По умолчанию 0.
6	высота — высота ограничительной рамки фильтра. По умолчанию 0.
7	filterRes — числа, представляющие области фильтра.
8	xlink: href — используется для ссылки на другой фильтр.

пример

testSVG.htm

 <HTML>
    <title> SVG Filter </ title>
    <Тело>
   
       <h2> Пример фильтра SVG </ h2>
   
       <svg width = "800" height = "800">
      
          <DEFS>
             <filter id = "filter1" x = "0" y = "0">
                <feGaussianBlur in = "SourceGraphic" stdDeviation = "8" />
             </ Фильтр>
            
             <filter id = "filter2" x = "0" y = "0" width = "200%" height = "200%">
                <feOffset result = "offOut" in = "SourceAlpha" dx = "20" dy = "20" />
                <feGaussianBlur result = "blurOut" in = "offOut" stdDeviation = "10" />
                <feBlend in = "SourceGraphic" in2 = "blurOut" mode = "normal" />
             </ Фильтр>
          </ DEFS>
         
          <Г>
             <text x = "30" y = "50"> Использование фильтров (эффект размытия): </ text>
             <rect x = "100" y = "100" width = "90" height = "90" stroke = "green" stroke-width = "3"
             fill = "green" filter = "url (# filter1)" />      
          </ Г> 
         
       </ SVG>
   
    </ Body>
 </ Html>

Два элемента <filter> определены как filter1 и filter2.
Эффект фильтра feGaussianBlur определяет эффект размытия в зависимости от степени размытия с использованием stdDeviation.
in = «SourceGraphic» определяет, что эффект применим ко всему элементу.
Эффект фильтра feOffset используется для создания эффекта тени. in = «SourceAlpha» определяет, что эффект применим для альфа-части графики RGBA.
Элементы <rect> связывают фильтры, используя атрибут filter.

Два элемента <filter> определены как filter1 и filter2.

Эффект фильтра feGaussianBlur определяет эффект размытия в зависимости от степени размытия с использованием stdDeviation.

in = «SourceGraphic» определяет, что эффект применим ко всему элементу.

Эффект фильтра feOffset используется для создания эффекта тени. in = «SourceAlpha» определяет, что эффект применим для альфа-части графики RGBA.

Элементы <rect> связывают фильтры, используя атрибут filter.

Выход

Откройте textSVG.htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра SVG-изображения напрямую без какого-либо плагина. Internet Explorer 9 и выше также поддерживает рендеринг изображений SVG.

Фильтр с эффектом тени

 <HTML>
    <title> SVG Filter </ title>
    <Тело>
      
       <h2> Пример фильтра SVG </ h2>
      
       <svg width = "800" height = "800">
      
          <DEFS>
             <filter id = "filter1" x = "0" y = "0">
                <feGaussianBlur in = "SourceGraphic" stdDeviation = "8" />
             </ Фильтр>
            
             <filter id = "filter2" x = "0" y = "0" width = "200%" height = "200%">
                <feOffset result = "offOut" in = "SourceAlpha" dx = "20" dy = "20" />
                <feGaussianBlur result = "blurOut" in = "offOut" stdDeviation = "10" />
                <feBlend in = "SourceGraphic" in2 = "blurOut" mode = "normal" />
             </ Фильтр>
          </ DEFS>
         
          <Г>
             <text x = "30" y = "50"> Использование фильтров (эффект тени): </ text>
             <rect x = "100" y = "100" width = "90" height = "90" stroke = "green" stroke-width = "3"
             fill = "green" filter = "url (# filter2)" />
          </ Г>
         
       </ SVG>
   
    </ Body>
 </ Html>

Выход

Откройте textSVG. htm в браузере Chrome. Вы можете использовать Chrome / Firefox / Opera для просмотра SVG-изображения напрямую без какого-либо плагина. Internet Explorer 9 и выше также поддерживает рендеринг изображений SVG.

— SVG: Масштабируемая векторная графика

Элемент SVG определяет эффект пользовательского фильтра путем группировки примитивов атомарного фильтра. Он никогда не отображается сам по себе, но должен использоваться атрибутом filter для элементов SVG или свойством CSS filter для элементов SVG/HTML.

Категории	Нет
Разрешенный контент	Любое количество следующих элементов в любом порядке: Элементы описания Элементы-примитивы фильтра ,

Глобальные атрибуты

Основные атрибуты
Атрибуты презентации
Атрибуты XLink
класс
стиль

Специальные атрибуты

x
г
ширина
высота
фильтр Рез Not for use in new websites.»> Устаревший
фильтры
примитивные единицы
ссылка: href

Этот элемент реализует интерфейс SVGFilterElement .

SVG

Результат

Спецификация
Модуль эффектов фильтра, уровень 1 # FilterElement

Таблицы BCD загружаются только в браузере с включенным JavaScript. Включите JavaScript для просмотра данных.

<феморфология>
Учебное пособие по SVG: эффекты фильтра

Обнаружили проблему с содержанием этой страницы?

Редактировать страницу на GitHub.
Сообщить о проблеме с содержимым.
Посмотреть исходный код на GitHub.

Хотите принять более активное участие?

Узнайте, как внести свой вклад.

Последний раз эта страница изменялась 6 марта 2023 г. от участников MDN.

— SVG: Масштабируемая векторная графика

Элемент фильтра SVG изменяет цвета на основе матрицы преобразования. Цветовое значение каждого пикселя [R, G, B, A] является матрицей, умноженной на цветовую матрицу 5 на 5 для создания нового цвета [R', G', B', A'] .

Примечание: Символ штриха ' используется в математике для обозначения результата преобразования.

 | Р' | | r1 r2 r3 r4 r5 | | Р |
| Г' | | g1 g2 g3 g4 g5 | | г |
| Б' | = | b1 b2 b3 b4 b5 | * | Б |
| А' | | а1 а2 а3 а4 а5 | | А |
| 1 | | 0 0 0 0 1 | | 1 |

В упрощенном виде ниже показано, как рассчитывается каждый цветовой канал в новом пикселе. Последняя строка игнорируется, поскольку ее значения постоянны.

 R' = r1*R + r2*G + r3*B + r4*A + r5
G' = g1*R + g2*G + g3*B + g4*A + g5
В' = b1*R + b2*G + b3*B + b4*A + b5
А' = а1*R + а2*G + а3*В + а4*А + а5

Возьмите количество красного цвета в новом пикселе или R' :

Это сумма:

r1 умноженная на красный цвет старого пикселя R ,
r2 раз зеленый цвет старого пикселя G ,
r3 раз синий цвет старого пикселя B ,
r4 раз больше альфы старого пикселя A ,
плюс сдвиг r5 .

Эти указанные суммы могут быть любыми действительными числами, хотя последние R’ будет зажат между 0 и 1. То же самое касается G’ , B’ и A’ .

 R' = r1 * R + r2 * G + r3 * B + r4 * A + r5
Новый красный = [r1 * старый красный] + [r2 * старый зеленый] + [r3 * старый синий] + [r4 * старый альфа] + [сдвиг r5]

Если, скажем, мы хотим сделать полностью черное изображение более красным, мы можем сделать r5 положительным действительным числом x , увеличив красноту каждого пикселя нового изображения на х .

Идентичная матрица выглядит следующим образом:

 R G B A W
Р' | 1 0 0 0 0 |
Г' | 0 1 0 0 0 |
Б' | 0 0 1 0 0 |
А' | 0 0 0 1 0 |

В нем каждое новое значение ровно в 1 раз превышает старое значение, и больше ничего не добавляется. Отсюда рекомендуется начинать манипуляции с матрицей.

Категории	Примитивный элемент фильтра
Разрешенный контент	Любое количество следующих элементов в любом порядке: ,

Глобальные атрибуты

Основные атрибуты
Атрибуты презентации
Атрибуты примитивов фильтра, включая атрибуты x , y , ширина , высота и результат атрибуты.
класс
стиль

Специальные атрибуты

в : Значения включают SourceGraphic , SourceAlpha , BackgroundImage , BackgroundAlpha , FillPaint , StrokePaint или ссылку на другой примитив фильтра .
тип : значения включают матрицу , насыщенность , оттенок Rotate и яркость до альфа-канала .
значения : Значение для типа матрицы, заданное в атрибуте типа .

Этот элемент реализует интерфейс SVGFEColorMatrixElement .

SVG

  2" />
  
  <использовать
    href="#круги"
    трансформировать = "перевести (0 210)"
    filter="url(#colorMeSaturate)" />
  насыщение
  
  <фильтр>
    
  
  <использовать
    href="#круги"
    трансформировать = "перевести (0 280)"
    filter="url(#colorMeHueRotate)" />
  hueRotate
  
  <фильтр>
    
  
  
  яркость до альфы

Результат

90 034

Скриншот	Живой образец

Спецификация
Модуль эффектов фильтра, уровень 1 # feColorMatrixElement

9 0002 Таблицы BCD загружаются только в браузере с включенным JavaScript.

Svg фильтры: Эффекты фильтрации SVG. Часть 1. SVG фильтры 101 / Хабр

SVG-фильтры. Часть 1. Основные понятия и типы. Применение к изображениям для создания графических эффектов.

Комплексные SVG-фильтры. Применяем несколько эффектов последовательно.

Типы SVG-фильтров

feComponentTransfer

fecomponenttransfer с

fecomponenttransfer с

feColorMatrix

Свертка

Композитные операции c

Режимы смешивания слоев с

Текстура (повторяющееся изображение) с

Демо c svg-фильтрами:

В заключение:

SVG — Фильтры — CoderLessons.com

декларация

Атрибуты

пример

Выход

Фильтр с эффектом тени

Выход

— SVG: Масштабируемая векторная графика

Глобальные атрибуты

Специальные атрибуты

SVG

Результат

Обнаружили проблему с содержанием этой страницы?

— SVG: Масштабируемая векторная графика

Глобальные атрибуты

Специальные атрибуты

SVG

Результат

Добавить комментарий Отменить ответ

Рубрики

Рубрики