Содержание

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

in

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 ↓
36,960 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 (Scalable Vector Graphics), входящего в подмножество расширяемого языка разметки XML.
Стандарт SVG 1.0 был принят в качестве спецификации Консорциумом Всемирной паутины (W3C) в сентябре 2001 г. Стандарт SVG 1.1 и его версии SVG mobile profiles (SVG Basic and SVG Tiny) были приняты консорциумом в качестве рекомендации в январе 2003 г.
Сейчас ведутся работы по созданию стандарта SVG 2.0

Основные преимущества формата SVG.

Я не буду долго распространяться о преимуществах векторной графики перед растровой в вебдизайне, замечу лишь, что, однажды созданный, файл в формате SVG одинаково хорошо выглядит без потери качества и на мобильном устройстве и на станционарном мониторе домашнего ПК.
Шапка данного сайта выполнена в формате SVG, попробуйте уменьшить окно браузера до минимальных размеров, картинка на “лету” будет также пропорционально уменьшаться.
SVG – это двухмерная графика и тем не менее это текстовый формат, который можно легко править в блокноте или просто рисовать в векторных редакторах: Incscape , Adobe illustrator, CorelDRAW

Бесконечное полотно документа svg.

Итак, как происходит формирование векторного изображения.
Документ формата SVG – это двухмерный объект, который может иметь бесконечные координаты, как в положительном, так и в отрицательном направлении по осям X и Y. Также документ SVG имеет две области просмотра: viewport – системная область просмотра и viewBox – пользовательская область просмотра, положение которой относительно начала системных координат viewport, может задаваться собственной, пользовательской системой координат. Другими словами окно просмотра viewBox, может быть перемещёно в любое место документа SVG, при этом берется фрагмент изображения под ним, который после процесса согласования между viewBox и viewport, возвращается обратно в системную область просмотра viewport, которую видит пользователь. Используя это свойство можно организовать вертикальную или горизонтальную прокрутку изображения, меняя параметры координат viewBox.

При уменьшении размера пользовательского окна просмотра viewbox можно пропорционально увеличивать фрагмент изображения в системной области просмотра или уменьшать его при увеличении размера viewbox.
Таким образом реализуется эффект лупы. Более подробно эти процессы разобраны в статье: Трансформация изображений SVG при изменении параметров Viewbox.

 

Взаимодействие SVG, XML с HTML, CSS, Jscript

В SVG, как и в HTML можно добавлять ссылки на внешние ресурсы. Но если в HTML одна картинка может служить только для одной внешней ссылки, то в SVG документ можно добавлять сколько угодно внешних ссылок . Картинка кликабельна.
Внутрь HTML страницы легко встраивается код SVG документа или целиком подключается внешний SVG файл. Можно наоборот, внутри SVG файла разместить код HTML внутри тегов foreignObject. Получаются интересные эффекты: Внутри SVG файла находится работающий внешний HTML сайт. К SVG формату можно подключать внешние таблицы стилей CSS 2.0, что позволяет управлять сразу несколькими файлами *.svg. Также вполне допустимо подключение стилей внутри файла *.svg внутри тегов style или использовать внутренние стили непосредственно внутри командных строк фигур и путей.
SVG, как любой основанный на XML формат, позволяет использовать для его обработки таблицы трансформации (XSLT).
Преобразуя XML-данные в SVG с помощью простого XSL, можно получить графическое представление текстовых данных, например визуализировать графики, круговые диаграммы, гистограммы и т.д.

Анимация и интерактивность SVG.

Анимация в SVG осуществляется при помощи языка SMIL (Synchronized Multimedia Integration Language). Также поддерживаются скриптовые языки на основе спецификации ECMAScript — это встраиваемый расширяемый язык программирования.
То есть всё находится в одном месте, внутри документа SVG, поэтому нет необходимости для подключения внешних библиотек.
На каждую отдельную фигуру или на целое изображение можно установить обработчик событий (клик, наведение мышки, нажатие клавиши и т. д), таким образом, пользователь может управлять рисунком. Наведите курсор мышки на кнопку“Start” на примере слева.
По событию mouseover на этой кнопке начнется анимация по команде begin=”startButton.mouseover” – движение цветных шариков по криволинейному пути. Закончится анимация либо через заданные в коде 16 секунд, либо в любой момент по наведению курсора мышки на цветные радиокнопки “Stop”. При этом каждая радиокнопка управляет своим объектом совпадающим по цвету. На рисунке ниже анимация начинается и заканчивается при нажатии клавиши мышки на кнопки GO и STOP. В этом случае работает событие click. Команда на запуск анимации – begin=”gO.click” и соответственно остановка – end=”stop.click”
Следующий пример анимации – плавная отрисовка картинки с нуля до полного изображения.

Уже встроенные в SVG языки программирования позволяют реализовать довольно сложные сценарии анимации. Но, в дополнение к этому есть еще более мощные средства для реализации интерактивности графики и ее анимации – это внешние библиотеки сторонних разработчиков: D3. js, BonsaiJS, Svg.js, Snapsvg.js

Еще примеры анимации ⇛

Недостатки SVG формата

  • С увеличением количества мелких деталей в изображении, быстрее растёт размер файла SVG-данных. Предельный случай — когда изображение представляет собой белый шум. В этом случае SVG не только не даёт никаких преимуществ в размере файла, но даже имеет проигрыш по отношению к растровому формату. На практике, SVG становится невыгоден уже задолго до того, как изображение дойдёт до стадии белого шума.
  • Трудность использования в крупных картографических приложениях из-за того, что для правильного отображения маленькой части изображения документ необходимо прочитать целиком.
  • В настоящее время SVG формат применяется в Интернете сравнительно мало, из-за недостаточной кроссбраузерности. Лучше всего обстоят дела у Mozilla Firefox со встроенным просмотрщиком SVG, так как ее разработчики находятся в рабочей группе Консорциума Всемирной паутины (W3C) по разработке и внедрению стандарта SVG. Хуже всего дела по поддержке формата SVG у Microsoft, которая покинула группу 2003 г. Для Internet Explorer – необходим Adobe SVG Viewer (ASV). С 9 версии IE частично поддерживает функции SVG.
    Браузеры Apple Safari, Google Chrome намного лучше поддерживают SVG, но не полностью, так как SVG – это большая спецификация (вдвое больше HTML 4.01), именно поэтому разработчики браузеров внедряют функции постепенно, от версии к версии. Но абсолютно все разработчики современных браузеров заявляют, что за форматом SVG будущее в области графики вебдизайна.


 

 

UPD. Добавлен новый раздел онлайн генераторы SVG кода path.
следующая: Структура SVG документа ⇛

 – SVG&колония; Масштабируемая векторная графика

В этой статье

  • Контекст использования
  • Атрибуты
  • Интерфейс DOM
  • Пример
  • Спецификации
  • Совместимость браузера
  • См.

11106. на основе матрицы преобразования. Значение цвета каждого пикселя [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 , увеличив красноту каждого пикселя нового изображения на 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 раз превышает старое значение, и больше ничего не добавляется. Отсюда рекомендуется начинать манипуляции с матрицей.

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

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

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

  • в
  • тип
  • значения

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

SVG 

 
  
  <определения>
    <г>
      
      
      
    
  
  <использовать href="#круги" />
  Справочник
  
  <фильтр>
    
  
  <использовать
    href="#круги"
    трансформировать = "перевести (0 70)"
    filter="url(#colorMeTheSame)" />
  Идентификационная матрица
  
  <фильтр>
    
  
  <использовать
    href="#круги"
    трансформировать = "перевести (0 140)"
    filter="url(#colorMeGreen)" />
  <текст х="70" у="190">rgbToGreen
  
  <фильтр>
    
  
  <использовать
    href="#круги"
    трансформировать = "перевести (0 210)"
    filter="url(#colorMeSaturate)" />
  насыщение
  
  <фильтр>
    
  
  <использовать
    href="#круги"
    трансформировать = "перевести (0 280)"
    filter="url(#colorMeHueRotate)" />
  hueRotate
  
  <фильтр>
    
  
  
  яркость до альфы

Результат

Спецификация
Эффект фильтра. Включите JavaScript для просмотра данных.
  • <фильтр>
  • <анимация>
  • <набор>
  • <феморфология>
  • Учебное пособие по SVG: эффекты фильтра

Последний модифицированный: , авторы MDN

SVGS Filters может быть вставлен в CSS

. 0257

Время чтения
4 минуты

Свойство CSS filter позволяет применять графические эффекты к элементам HTML. Эти эффекты варьируются от размытия до обработки оттенков серого , но также могут включать расширенные фильтры с использованием SVG. CSS-фильтры поддерживаются в разных браузерах и готовы к использованию. Если вы еще не играли с ними, вы должны попробовать!

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

Заставить работать сложные SVG-фильтры в Safari оказалось непросто (иногда они не отображались без ошибки). Я рекомендую относиться к расширенным фильтрам как к прогрессивному улучшению.

Два типа фильтра CSS

значения

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

How to apply filter functions in CSS

There are ten different filter functions:

  • blur
  • brightness
  • contrast
  • drop-shadow
  • grayscale
  • hue -rotate
  • инвертировать
  • непрозрачность
  • насыщенность
  • сепия

Посмотрите и поэкспериментируйте с этими фильтрами, как показано ниже.

Функции фильтра можно комбинировать. Вы можете определить несколько функций фильтра в одном объявлении filter для создания следующих эффектов. Посмотрите на эту фиолетовую красоту, которая сочетает в себе функции фильтра hue-rotate и drop-shadow . 👇

Но что, если вы хотите применить визуальные эффекты, которые не охватываются этими функциями?

Как применять фильтры SVG в CSS

В дополнение к доступным функциям фильтрации вы можете определить «более продвинутые» фильтры в SVG. SVG-фильтры очень мощные. Давайте посмотрим на пример, чтобы увидеть фильтры SVG в действии.

SVG предоставляет элемента filter , которые могут включать примитивы фильтра, такие как элемент feGaussianBlur . Если эти элементы фильтра включают атрибут id , на них можно ссылаться и применять к другим элементам. В этом случае элемент rect ссылается на #blur фильтрующий элемент для применения базового эффекта размытия.

Я не буду вдаваться в подробности создания SVG-фильтров в этой статье, но если вы хотите увидеть, что возможно с элементом filter , я могу порекомендовать проверить yoksel.github.io/svg-filters/. Онлайн-редактор отлично показывает возможности фильтров SVG и включает в себя множество эффектов, более захватывающих, чем размытие.

Меня всегда впечатляет, когда я вижу, что возможно с фильтрами SVG.

Применение внешних фильтров SVG

Применение фильтра SVG к другим элементам SVG полезно, но становится интереснее, когда вы покидаете границы SVG и применяете фильтры к элементам HTML через CSS!

Чтобы использовать фильтр SVG в CSS, используйте ключевое слово url , определите URI, который определяет файл SVG, и сошлитесь на фильтр с идентификатором . Вот и все!

Фильтр Waves , который вы видите выше, представляет собой модифицированную версию пресетов, включенных в yoksel.github.io/svg-filters/.

Эффект Waves показывает мощность фильтров SVG. Я поражен, увидев волнистое изображение и заголовок.

Применить встроенные/встроенные фильтры SVG

Если вы не хотите загружать внешние файлы SVG, вы также можете встроить SVG в свой HTML и указать ссылку на фильтр в своем CSS.

Будьте осторожны с этим подходом: кажется, что Firefox не применяет встроенные фильтры SVG, для которых установлено значение display: none (отчет об ошибке).

TIL: фильтры SVG могут быть встроены в CSS

Читая статью Матиаса «Имитация недостатков цветового зрения в Blink Renderer», я узнал изящный трюк с фильтрами SVG.

Если вы не хотите загружать внешний SVG и не хотите встраивать SVG в свой HTML, вы можете встроить фильтр SVG в CSS!

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

шт. Прежде чем развертывать сложные SVG-фильтры для всех ваших элементов, обязательно выполните «настоящее кросс-браузерное тестирование». Я видел, что Safari особенно не может отображать сложные фильтры SVG.

Я протестировал включенные примеры в Firefox 84 и Chrome 87. Он работал в Safari 14, но остановился по неизвестной причине. 🙈

Если у вас что-то не работает, взгляните на следующие сообщения об ошибках (я ожидаю, что со временем появится больше):

  • Webkit: начальные пробелы следует игнорировать при анализе свойства списка SVG

Ускоренный курс — Сара Суэйдан, инклюзивный инженер-конструктор

Опубликовано   | Чтение

занимает примерно 4 минуты.

Я всегда стараюсь адаптировать внутренние семинары для клиентов к потребностям своих клиентов. Иногда это также означает, что если команда дизайнеров и разработчиков моего клиента заинтересована в изучении чего-то, что не рассматривается в моем семинаре, я изменю содержание семинара, чтобы убедиться, что они узнают то, что им нужно для улучшения их работы.

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

Я изучил все основы фильтров SVG как раз к семинару, а затем провел следующие два месяца, изучая больше. Материал, который я собрал, изучил и создал, оказался достаточно полезным, чтобы поделиться им с другими, поэтому я подумал, что напишу серию статей на эту тему, может быть, даже дам им где-нибудь собственный URL. Я также подумал, что они станут хорошим материалом для интересного доклада, поэтому я создал доклад и провел его дважды в этом году: дебют состоялся на Beyond Tellerrand в Мюнхене в январе, а второй — на Дне CSS в Амстердаме в прошлом месяце.

Если вы меня знаете, то знаете, что мои выступления, как правило, быстры, содержат практические и технические советы и советы. Этот разговор не стал исключением. И отклики на оба доклада были ошеломляющими.

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

Поэтому я решил написать эту статью, чтобы поделиться видео(ами) доклада(ов), слайдами и некоторыми ссылками, если вы хотите узнать больше о фильтрах SVG из дополнительных ресурсов.

Видеозапись

Ниже приводится видеозапись моего выступления на btconf:

Фильтры SVG: The Crash Course - Sara Soueidan - btconfMUC2018 из-за пределов Tellerrand на Vimeo.

Я не хочу сильно замедлять работу этой страницы, встраивая два видео, поэтому вот ссылка на запись выступления на Дне CSS.

Вы можете смотреть видео в более медленном темпе, чем по умолчанию. 🙈

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

Слайды выступления

Слайды онлайн можно найти здесь.

Дополнительные ресурсы

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

  • Документы SVG Filter веб-платформы были незаменимым ресурсом.

  • Я многому научился благодаря работе Майкла Маллани. Он написал часть документации по веб-платформе и написал прекрасное введение в SVG-фильтры для сетевого журнала, из которого я многому научился.

  • У Майкла также есть несколько экспериментов с фильтрами SVG на Codepen, которые я очень рекомендую проверить. Я также сломал большую часть его ручек, и одна из демонстраций в моем выступлении была вдохновлена ​​/ позаимствована из его примеров.

  • Замечательные эксперименты Дирка Вебера в Smashing Magazine. В статье не рассматриваются концепции, необходимые или используемые в примитивах фильтров SVG, но я разбил некоторые из его демонстраций, чтобы узнать больше об используемых фильтрах.

Всему остальному я научился, собирая маленькие советы и кусочки информации тут и там и сшивая их вместе.

No related posts.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *