gradientes padrões máscaras e clipping efeitos e filtros Helder da Rocha

gradientes


padrões


máscaras
e
clipping


efeitos
e
filtros


navis

.com.br

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)


<rect
fill="url(#id_gradiente)"
...
>


<circle
stroke="url(#id_padrao)"
..>


• 

h7p://www.w3.org/TR/SVG/pservers.html


2


navis

.com.br

Transparência


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


• 

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


navis

.com.br

Exemplos
de
gradientes


4


<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)"
/>


navis

.com.br

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


• 

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)


ao
vetor
do
gradiente


5


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


/>

<stop
offset

=

"1"




stop‐color

=

"rgb(128,0,220)"


/>

</linearGradient>

offset


x2


90%


y1




10%


vetor
normal


navis

.com.br

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)


6










<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)"
.../>


navis

.com.br

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


• 

Exemplo:


7




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


navis

.com.br

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


8










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


navis

.com.br

<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


• 

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


9





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



navis

.com.br

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


• 

Exemplo:
aplicação
de
máscara
simples
(criada
no


PhotoShop)
para
remover
o
fundo
de
uma
imagem


10


<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


navis

.com.br

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


RG

B


(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


• 

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


11


Máscara
RGBA


_{Converte
em
alfa}

_{Alvo
da
máscara}

_Resultado

00f 00f fff fff
 0.5 0.5 0.0 0.0 00f 00f fff fff
 1.0 1.0 0.0 0.0 0f0 0f0 fff fff
 1.0 1.0 1.0 0.5 0f0 0f0 fff fff
 1.0 1.0 1.0 0.5

*
segundo
o
padrão
sRGB,
adotado
pela
especificação
SVG


navis

.com.br

Máscara
usando
figuras
SVG


12


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


<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)"



navis

.com.br

Máscara
RGBA


Resultado


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
desse
=po
de
máscara
equivale
à
aplicação
de
clipping


13


13


Resultado


Alvo
da
máscara


navis

.com.br

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


• 

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


14


Veja
mais
em
h7p://www.w3.org/TR/SVG/masking.html


navis

.com.br

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.


• 

Exemplo
de
polígonos
com
fill‐rule


15


fill‐rule="nonzero"


fill‐rule="evenodd"


navis

.com.br

Exemplo
de
clipping
com
<clipPath>


16


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

<image


x

=

"0"


y

=

"0"


height

=

"500"


width

=

"600"


xlink:href

=

"lua.png"

clip‐path="url(#poly)"


transform

=

"translate(20,20)"

/>

navis

.com.br

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


• 

<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


navis

.com.br

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



• 

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


navis

.com.br

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



• 

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


navis

.com.br

Exemplo:
desfoque
gaussiano


<defs>










<filter
id="f2"
x="‐100"
y="‐100"

 





height="200"
width="200">
 





<feGaussianBlur
stdDeviation="50,0"

 





in="SourceGraphic"/>
 







</filter>
 







<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)"
/>


navis

.com.br

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

"
/>


• 

<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


21


*
É
possível
também
manipular
o
fundo
com
BackgroundImage
e
BackgroundAlpha


navis

.com.br

Filtro
composto


22










<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"
/>
 





<!‐‐
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>


navis

.com.br

Filtro


composto


23


Início


navis

.com.br

Exercícios


• 

Explore
outros
algoritmos
de
filtro
como


• 

feTurbulence


• 

feMerge


• 

feBlend


• 

feDiffuseLigh=ng


• 

feColorMatrix


• 

Consulte
a
especificação
em


• 

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