Filtros e efeitos gráficos com filter, gradient, pattern

gradientes
padrões
máscaras
e
clipping
efeitos
e
filtros
Helder
da
Rocha
([email protected])
Gradientes
e
Padrões
•  Com
SVG
você
pode
pintar
o
interior
(fill)
ou
o
traço
(stroke)
de
figuras
e
texto
usando
•  Cores
opacas
ou
transparentes
•  Gradientes
(degradê)
•  Padrões
(imagens
repe=das)
•  Gradientes
e
padrões
são
definidos
(em
<defs>)
e
iden=ficados
com
id
para
que
possam
ser
referenciados
•  Objetos
podem
usar
gradientes
e
padrões
como
=nta
para
preencher
traços
e
interior
dos
objetos
•  Use
atributo
fill
ou
stroke
com
função
url(#xpointer)
argonavis.com.br
<rect
fill="url(#id_gradiente)"
...
>
<circle
stroke="url(#id_padrao)"
..>
•  h7p://www.w3.org/TR/SVG/pservers.html
2
Gradientes
•  Gradientes
são
variações
suaves
de
duas
ou
mais
cores
•  Há
dois
=pos
de
gradientes
•  Lineares
<linearGradient>
que
representa
uma
linha,
e
tem
coordenadas
x1/x2
e
y1/y2
•  Radiais
<radialGradient>
que
representa
um
círculo
e
tem
coordenadas
cx,
cy
e
r
•  Os
valores
são
rela=vos
(percentagens
ou
valores
entre
zero
e
um)
ao
gráfico
que
será
pintado
com
o
gradiente
•  0%
a
100%,
0.0
a
1.0
argonavis.com.br
•  Pontos
de
parada
iniciais,
finais
e
intermediários
são
marcados
com
um
tag
<stop>
•  Atributo
offset
marca
posição
na
linha
•  Cada
<stop>
pode
definir
uma
cor
(atributo
stop‐color)
e/ou
transparência
(stop‐opacity)
para
o
ponto
•  Cores
intermediárias
são
calculadas
por
interpolação
0%
25%
50%
75%
100%
Transparência
Exemplos
de
gradientes
argonavis.com.br
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="800"
height="600">
<defs>
<linearGradient
id="linear1"
x1="0"
y1="0%"
x2="100%"
y2="0">
<stop
offset="0%"
stop‐color="black"
stop‐opacity="0.5"
/>
<stop
offset="45%"
stop‐color="rgb(225,225,255)"
stop‐opacity="0.8"/>
<stop
offset="55%"
stop‐color="rgb(225,225,255)"
stop‐opacity="0.8"/>
<stop
offset="100%"
stop‐color="black"
stop‐opacity="0.5"
/>
</linearGradient>
<radialGradient
id="radial1"
cx="75%"
cy="25%"
r="90%">
<stop
offset="0.01%"
stop‐color="rgb(225,225,255)"
/>
<stop
offset="90%"
stop‐color="navy"
/>
<stop
offset="100%"
stop‐color="black"
/>
</radialGradient>
</defs>
<circle
r="100"
cx="400"
cy="300"
fill="url(#radial1)"/>
<circle
r="30"
cx="250"
cy="200"
fill="url(#radial1)"/>
<rect
x="50"
y="55"
height="170"
width="60"
fill="url(#radial1)"
/>
<rect
x="50"
y="50"
height="180"
width="60"
fill="url(#linear1)"
/>
</svg>
4
Gradiente
linear
•  O
gradiente
linear
é
uma
linha
•  Gradiente
ver=cal:
x1
=
x2
=
0
,
y1=0,
y2=1
•  Gradiente
horizontal:
y1
=
y2
=
0
,
x1=0,
x2=1
•  Ou
varie
os
valores
para
produzir
offsets
e
inclinação
argonavis.com.br
<linearGradient
x1="0"
y1="0.1"
x2="0.9"
y2="0"
id="arcoiris">
<stop
offset="0"
stop‐color="rgb(255,0,0)"
/>
<stop
offset="0.3"
stop‐color="rgb(180,180,0)"
/>
<stop
offset="0.6"
stop‐color="rgb(0,180,0)"
/>
<stop
offset="0.8"
stop‐color="blue"
/>
offset
<stop
offset="1"
stop‐color="rgb(128,0,220)"
/>
x2
</linearGradient>
vetor
normal
90%
•  Para
coordenadas
x,y
use
proporção
(0.0
a
1.0
ou
0%
a
100%)
•  O
gradiente
é
pintado
ao
longo
do
vetor
perpendicular
(normal)
y1
ao
vetor
do
gradiente
10%
5
Gradiente
radial
•  Gradientes
radiais
são
círculos
•  r,
cx
e
cy
são
frações
do
espaço
do
gráfico
•  cx
0.5,
cy
0.5
e
r
0.5
=
gradiente
no
centro,
com
círculo
inscrito
•  Elementos
<stop>
marcam
pontos
no
raio
(0%
=
origem,
100%
=
borda)
argonavis.com.br
<svg
...
>
<defs>
<radialGradient
cx="0.5"
cy="0.5"
r="0.5"
id="arcoiris">
<stop
offset="0"
stop‐color="rgb(255,0,0)"
/>
<stop
offset="0.25"
stop‐color="rgb(255,255,64)"
/>
<stop
offset="0.5"
stop‐color="rgb(64,255,64)"
/>
<stop
offset="0.75"
stop‐color="rgb(64,64,255)"
/>
<stop
offset="1"
stop‐color="rgb(128,0,255)"
/>
</radialGradient>
<radialGradient
cx="0.25"
cy="0.25"
r="1"
id="sombra">
<stop
offset="0"
stop‐color="rgb(255,255,255)"
/>
<stop
offset="0.5"
stop‐color="rgb(0,128,255)"
/>
<stop
offset="1"
stop‐color="rgb(128,0,255)"
/>
</radialGradient>
</defs>
<rect
x="0"
y="0"
width="200"
height="200"
fill="url(#arcoiris)"
.../>
<circle
cx="100"
cy="100"
r="100"
fill="url(#arcoiris)"
.../>
<rect
x="0"
y="0"
width="200"
height="200"
fill="url(#sombra)"
.../>
<circle
cx="100"
cy="100"
r="100"
fill="url(#sombra)"
.../>
</svg>
6
Reuso
de
cores
com
gradientes
•  Se
um
gradiente
for
definido
com
uma
única
cor,
o
efeito
é
igual
a
um
fill
•  Permite
construir
cores
referenciáveis
pelo
nome
argonavis.com.br
•  Exemplo:
<defs>
<linearGradient
id="corPretas">
<stop
offset="0"
stop‐color="rgb(64,32,32)"
/>
</linearGradient>
<linearGradient
id="corBrancas">
<stop
offset="0"
stop‐color="rgb(255,225,200)"
/>
</linearGradient>
<rect
id="rp"
x="0"
y="0"
width="20"
height="20"
fill="url(#corPretas)"/>
<rect
id="rb"
x="0"
y="0"
width="20"
height="20"
fill="url(#corBrancas)"/>
...
<g
id="tabuleiro">...</g>
<g
id="peao">...</g>
<g
id="peaoBranco"
fill="url(#corBrancas)"
stroke="url(#corPretas)">...</g>
<g
id="peaoPreto"
fill="url(#corPretas)"
stroke="url(#corBrancas)">...</g>
</defs>
<use
xlink:href="#tabuleiro"
transform="translate(50,50)"></use>
<use
xlink:href="#peaoBranco"
transform="translate(125,110)"></use>
...
<use
xlink:href="#peaoPreto"
transform="translate(245,230)"></use>
7
Padrões
(azulejos)
•  O
elemento
<paJern>
replica
um
objeto
gráfico
para
pintar
ou
contornar
um
objeto
•  Para
criar
e
usar
•  Defina
o
elemento
<paJern>
em
<defs>
•  Referencie‐o
para
pintar
um
objeto
argonavis.com.br
<svg
...
xmlns="http://www.w3.org/2000/svg">
<defs>
<pattern
id="TrianglePattern"
patternUnits="userSpaceOnUse"
x="0"
y="0"
width="100"
height="100"
viewBox="0
0
10
10"
>
<path
d="M
0
0
L
7
0
L
3.5
7
z"
fill="red"
stroke="blue"
/>
</pattern>
</defs>
<!‐‐
The
ellipse
is
filled
using
a
triangle
pattern
paint
server
and
stroked
with
black
‐‐>
<ellipse
fill="url(#TrianglePattern)"
stroke="black"
stroke‐width="5"
cx="400"
cy="200"
rx="350"
ry="150"
/>
</svg>
Fonte:
W3C
(spec
SVG)
8
<paJern>
e
viewBox
•  Coordenadas
x,
y,
height
e
width:
dimensões
do
padrão
•  Atributo
paJernUnits="userSpaceOnUse"
determina
que
as
coordenadas
usadas
serão
as
do
objeto
que
aplica
o
padrão
•  Cada
unidade
de
padrão
("azulejo")
deve
ter
seus
limites
recortados
dentro
de
um
viewBox
argonavis.com.br
•  Isto
não
é
obrigatório,
mas
é
uma
boa
prá=ca
•  Desenho
de
cada
"azulejo"
nas
coordenadas
do
viewBox
•  No
exemplo
abaixo,
haverá
clipping
de
4x2
pixels
da
imagem
<defs>
<pattern
id="peixes"
patternUnits="userSpaceOnUse"
x="0"
y="0"
width="80"
height="50"
viewBox="0
0
20
10"
>
<image
xlink:href="TheFish.png"
x="0"
y="0"
width="24"
height="12"
/>
</pattern>
</defs>
<rect
x="0"
y="0"
width="300"
height="300"
fill="url(#peixes)"
/>
9
Máscaras
•  Máscaras
alfa
são
usadas
em
composição
gráfica
•  São
definidas
com
o
elemento
<mask>
e
devem
conter
uma
imagem
fonte
(formada
por
qualquer
imagem,
elemento
gráfico
ou
combinação
de
elementos)
•  A
máscara
pode
ser
reaplicada
a
vários
elementos
gráficos
argonavis.com.br
•  Exemplo:
aplicação
de
máscara
simples
(criada
no
PhotoShop)
para
remover
o
fundo
de
uma
imagem
<defs>
<mask
id="mascaraPeixe"
x="0"
y="0"
width="300"
height="150">
<image
xlink:href="TheFishMask.png"
...
/>
</mask>
</defs>
<rect
x="0"
y="0"
width="600"
height="300"
fill="aquamarine"
/>
<g
transform="translate(100,50)">
<image
xlink:href="TheFish.png"
mask="url(#mascaraPeixe)"
/>
</g>
TheFishMask.png
(fonte
da
máscara)
TheFish.png
Resultado
10
Como
funciona
uma
máscara
•  A
máscara
é
formada
por
pixels
de
transparência
(alfa)
que
são
mul=plicados
pelo
valor
dos
pixels
do
objeto‐alvo
da
máscara
•  Se
a
fonte
da
máscara
for
uma
imagem
colorida
RGB
(24
bits),
o
valor
alfa
de
cada
pixel
é
sua
luminância,
ob=da
pela
fórmula*
•  Luminância
=
0.2125
R
+
0.7154
G
+
0.0721
B
argonavis.com.br
•  Se
for
imagem
monocromá=ca
(tons
de
cinza),
o
valor
alfa
corresponde
ao
nível
de
cinza
(preto
=
0)
•  Se
a
imagem
for
de
32
bits
(RGBA),
o
fator
alfa
de
cada
pixel
da
fonte
é
mul=plicado
pela
luminância
para
obter
o
alfa
resultante
00f
0.5
00f
0.5
fff
0.0
fff
0.0
0.03 0.03 0.0
0.0
00f
1.0
00f
1.0
fff
0.0
fff
0.0
0.07 0.07 0.0
0.0
0f0
1.0
0f0
1.0
fff
1.0
fff
0.5 0.72 0.72 1.0
0.5
0f0
1.0
0f0
1.0
fff
1.0
fff
0.5
0.72 0.72 1.0
0.5
Máscara
RGBA
Converte
em
alfa
Alvo
da
máscara
*
segundo
o
padrão
sRGB,
adotado
pela
especificação
SVG
Resultado
11
Máscara
usando
figuras
SVG
<defs>
<polygon
id="poligono"
points="50,0
150,0
150,50
200,50
200,150
150,150
150,200
50,200
50,150
0,150
0,50
50,50"
fill="white"
/>
<rect
id="retangulo"
width="100"
height="100"
x="50"
y="50"
fill="red"/>
<circle
id="circulo"
cx="100"
cy="200"
r="50"
fill="green"
/>
<mask
id="mascara"
x="0"
y="0"
width="200"
height="200"
>
<use
xlink:href="#poligono"/>
<use
xlink:href="#retangulo"/>
<use
xlink:href="#circulo"/>
</mask>
</defs>
argonavis.com.br
<use
xlink:href="#circulo"
stroke="gray"
stroke‐dasharray="5
5"/>
<use
xlink:href="#retangulo"
stroke="gray"
stroke‐dasharray="5
5"/>
<use
xlink:href="#poligono"
stroke="gray"
stroke‐dasharray="5
5"/>
<text
x="100"
y="300"
font‐size="24"
text‐anchor="middle">Mascara</text>
<rect
x="0"
y="0"
height="200"
width="200"
fill="blue"
transform="translate(250,0)"/>
<circle
cx="100"
cy="100"
r="100"
fill="red"
transform="translate(250,250)"
/>
<rect
x="0"
y="0"
height="200"
width="200"
fill="blue"
mask="url(#mascara)"
transform="translate(500,0)"/>
<circle
cx="100"
cy="100"
r="100"
fill="red"
mask="url(#mascara)"
transform="translate(500,250)"
/>
12
Máscaras
de
recorte
(1
bit)
•  Para
isolar
a
imagem
do
peixe,
foi
usada
uma
máscara
de
recorte
•  Cada
pixel
branco
(#FFF)
usa
apenas
dois
valores
alfa
•  0
=
100%
transparente
(exclui
do
resultado)
•  1
=
100%
opaco
(inclui
no
resultado)
•  Ou
cada
pixel
de
alfa=1
usa
apenas
duas
cores
•  #000
=
100%
preto
opaco
(exclui
do
resultado)
•  #FFF
=
100%
branco
opaco
(inclui
no
resultado)
Resultado
argonavis.com.br
•  Resultado
desse
=po
de
máscara
equivale
à
aplicação
de
clipping
1.0
1.0
0.0
0.0
1.0
1.0
0.0
0.0
1.0
1.0
1.0
1.0
1.0
1.0
1.0
1.0
Máscara
RGBA
Alvo
da
máscara
Resultado
13
Atributos
de
<mask>
•  x
e
y,
height
e
width
•  Coordenadas,
altura
e
largura
da
máscara
•  O
resultado
da
aplicação
da
máscara
leva
em
conta
as
coordenadas
e
dimensões
•  Resultado
será
truncado
se
coordenadas
e
dimensões
do
objeto
não
couberem
na
máscara
ou
vice‐versa
argonavis.com.br
•  maskUnits="userSpaceOnUse
|
objectBoundingBox"
•  Default
é
objectBoundingBox,
que
considera
as
coordenadas
x,
y,
height
e
width
percentagens
do
objeto
no
qual
a
máscara
é
aplicada
•  userSpaceOnUse
considera
os
considera
valores
do
sistema
de
coordenadas
usado
quando
a
máscara
é
referenciada
Veja
mais
em
h7p://www.w3.org/TR/SVG/masking.html
14
Recorte
(clipping)
•  Gráficos
podem
também
podem
ser
recortados
por
um
caminho
definido
pelo
elemento
<clipPath>
•  Funciona
como
máscara
de
1
bit
•  Áreas
fora
do
clipping
path
não
são
desenhadas
•  Caminho
é
combinação
dos
elementos
usados
na
definição
•  Qualquer
objeto
pode
aplicar
o
recorte
com
o
atributo
clip‐path,
que
recebe
uma
função
de
xpointer
url(#idref)
para
o
<clipPath>
•  O
atributo
clip‐rule
se
aplicado
a
um
elemento
dentro
do
<clipPath>
comporta‐se
como
fill‐rule
no
resultado
•  Funciona
para
polígonos,
caminhos,
etc.
argonavis.com.br
•  Exemplo
de
polígonos
com
fill‐rule
fill‐rule="nonzero"
fill‐rule="evenodd"
15
Exemplo
de
clipping
com
<clipPath>
<svg
...
viewBox="0
0
500
500">
<defs>
<clipPath
id="poly">
<polygon
points="50,50
300,300
300,50
100,50
50,300
300,150
300,250"
clip‐rule="evenodd"
/>
<circle
r="50"
cx="200"
cy="300"
clip‐rule="evenodd"/>
</clipPath>
</defs>
argonavis.com.br
<image
x="0"
y="0"
height="500"
width="600"
xlink:href="lua.png"
clip‐path="url(#poly)"
transform="translate(20,20)"/>
</svg>
16
Filtros
<filter>
•  Filtros
combinam
algoritmos
para
compor
efeitos
gráficos
•  Composições,
desfoques,
pontos
de
luz,
mesclagens,
etc.
•  Podem
ser
aplicados
em
objetos
diferentes
•  Definidos
com
<filter>
que
configura
e
concatena
um
ou
mais
algoritmos
primiYvos
(cada
um
realiza
uma
operação)
•  Há
atributos
e
sub‐elementos
próprios
para
cada
primi=vo
•  Detalhes
na
especificação:
h7p://www.w3.org/TR/SVG/filters.html
•  Objetos
referenciam
o
filtro
com
o
atributo
filter
argonavis.com.br
•  <rect
...
filter="url(#filtro)"
/>
•  Dimensões
default
•  x=‐10,
y=‐10,
height=120%,
width=120%
•  Geralmente
se
define
um
filtro
com
mais
espaço
pois
efeitos
podem
vazar
além
dos
limites
do
gráfico
17
Elementos
de
filtro
do
SVG
1.1
•  <feBlend/>
•  Combina
duas
imagens;
atributos:
mul=ply,
screen,
darken,
etc.
•  <feColorMatrix/>
•  Define
um
filtro
através
de
uma
matriz
de
transformação
de
cores.
•  <feComponentTransfer/>
•  Ajuste
de
brilho,
contraste,
balanceamento
de
cores,
etc.
•  <feComposite/>
•  Combina
duas
imagens
usando
algoritmos
de
composição
•  <feConvolveMatrix/>
•  Aplica
uma
matriz
de
convolução
para
desfoque,
embossing,
etc.
•  <feDiffuseLigh=ng/>
argonavis.com.br
•  Aplica
um
efeito
de
luz
difusa
em
uma
imagem
usando
o
canal
alfa.
•  <feDisplacementMap/>
•  Efeito
realizado
deslocando
a
imagem
de
lugar.
•  <feFlood/>
•  Preenche
uma
área
com
cor
e
transparência
determinados
no
filtro.
18
Elementos
de
filtro
do
SVG
1.1
•  <feGaussianBlur/>
•  Desfoca
a
imagem
usando
algoritmo
gaussiano.
•  <feImage/>
•  Usa
uma
imagem
externa
como
fonte
para
o
filtro.
•  <feMerge/>
•  Combina
várias
imagens
externas
para
formar
o
filtro.
•  <feMorphology/>
•  Usado
para
erodir
ou
dilatar
o
objeto
no
qual
o
filtro
é
aplicado.
•  <feOffset/>
•  Desloca
a
imagem
em
relação
à
sua
posição
atual.
•  <feSpecularLigh=ng/>
argonavis.com.br
•  Aplica
um
efeito
de
luz
brilhante
em
uma
imagem
usando
o
canal
alfa.
•  <feTile/>
•  Define
um
filtro
como
um
padrão
de
imagem
repe=da.
•  <feTurbulence
/>
•  Cria
efeito
de
nuvens
ou
mármore.
19
Exemplo:
desfoque
gaussiano
<defs>
<filter
id="f2"
x="‐100"
y="‐100"
height="200"
width="200">
<feGaussianBlur
stdDeviation="50,0"
in="SourceGraphic"/>
</filter>
argonavis.com.br
<filter
id="f1">
<feGaussianBlur
stdDeviation="5"
/>
</filter>
</defs>
<text
id="text"
font‐size="48"
fill="blue"
x="50"
y="60"
filter="url(#f1)">
Voce
precisa
de
oculos?
</text>
<g
id="stardot"
transform="translate(100,50)">
<polygon
id="star"
points="250,0
400,500
0,200
500,200
100,500"
fill="red"
fill‐rule="evenodd"/>
<circle
id="circ"
cx="250"
cy="283"
r="75"
fill="blue"
filter="url(#f1)"
/>
</g>
<image
xlink:href="TheFish.png"
width="400"
height="300"
x="100"
y="550"
filter="url(#f2)"
/>
Entradas
e
resultados
•  Componentes
do
gráfico‐fonte
a
ser
filtrado*
•  SourceGraphic
–
o
gráfico‐fonte
completo
•  SourceAlpha
–
máscara
simples
do
gráfico‐fonte
•  A
maior
parte
dos
primi=vos
de
filtro
recebem
uma
ou
mais
entradas
(in)
que
podem
ser
•  Componente
de
gráfico‐fonte
•  Resultado
(result)
do
processamento
de
algum
outro
primi=vo
•  Exemplo
{pico
de
concatenação
de
algoritmos
de
filtro
•  <feXXX
in="SourceAlpha"
...
result="passo1"
/>
•  <feYYY
in="passo1"
...
result="passo2"
/>
argonavis.com.br
•  <feZZZ
in="SourceGraphic"
in2="passo2"
operator="xor"
result="passo3"
/>
•  Outras
fontes
que
podem
ser
usadas
como
entrada
•  BackgroundImage
e
BackgroundAlpha:
o
fundo
da
imagem
•  FillPaint
e
StrokePaint:
cor/padrão/gradiente
de
preenchimento
ou
traço
*
É
possível
também
manipular
o
fundo
com
BackgroundImage
e
BackgroundAlpha
21
Filtro
composto
<svg
...
>
<defs>
<linearGradient
...
id="arcoiris">
...
</linearGradient>
<filter
id="efeito3d"
x="‐300"
y="‐300"
height="500"
width="500">
<!‐‐
Brilho
‐‐>
<feGaussianBlur
in="SourceAlpha"
stdDeviation="5"
result="borrao"
/>
<feFlood
flood‐color="orange"
flood‐opacity="1"
result="laranja"
/>
<feComposite
in="laranja"
in2="borrao"
operator="in"
result="brilho"
/>
<!‐‐
Sombra
‐‐>
<feOffset
in="borrao"
dx="8"
dy="8"
result="sombra"
/>
argonavis.com.br
<!‐‐
Texto
em
3D
‐‐>
<feSpecularLighting
in="borrao"
surfaceScale="5"
specularConstant="1"
specularExponent="15"
lighting‐color="white"
result="luzDifusa">
<fePointLight
x="‐50"
y="‐200"
z="300"/>
</feSpecularLighting>
<feComposite
in="luzDifusa"
in2="SourceAlpha"
operator="in"
result="luzDireta"/>
<feComposite
in="SourceGraphic"
in2="luzDireta"
operator="arithmetic"
k1="0"
k2="1"
k3="1"
k4="0"
result="texto3D"
/>
<!‐‐
Combinacao
dos
filtros
‐‐>
<feMerge>
<feMergeNode
in="sombra"/>
<feMergeNode
in="brilho"/>
<feMergeNode
in="texto3D"/>
</feMerge>
</filter>
</defs>
<g
transform="translate(50,50)
scale(2)">
<text
id="text"
font‐weight="bold"
font‐family="impact"
font‐size="150"
fill="url(#arcoiris)"
x="0"
y="160"
filter="url(#efeito3d)">SVG</text></g>
</svg>
22
Filtro
composto
SourceGraphic
Início
in
SourceAlpha
feComposite
in
in2
feGaussian
Blur
result
result
in2
feComposite
luzDifusa
result
in
luzDireta
texto3D
in2
result
feComposite
result
in
brilho
feSpecular
Lighting
argonavis.com.br
in
result
feFlood
in
in
n
n
n
in
feMerge
laranja
borrao
in
feOffset
result
sombra
efeito3D
23
Exercícios
•  Explore
outros
algoritmos
de
filtro
como
• 
• 
• 
• 
• 
feTurbulence
feMerge
feBlend
feDiffuseLigh=ng
feColorMatrix
•  Consulte
a
especificação
em
argonavis.com.br
•  h7p://www.w3.org/TR/SVG/filters.html
•  Aplique
os
filtros
em
desenhos
usados
em
exemplos
e
exercícios
•  Explore
os
filtros
variando
atributos
e
parâmetros
24