gradientespadrõesmáscaraseclippingefeitosefiltros

HelderdaRocha(helder@argonavis.com.br)

argo

navi

s.co

m.b

r GradientesePadrões

•  ComSVGvocêpodepintarointerior(fill)ouotraço(stroke)defigurasetextousando•  Coresopacasoutransparentes•  Gradientes(degradê)•  Padrões(imagensrepe=das)

•  Gradientesepadrõessãodefinidos(em<defs>)eiden=ficadoscomidparaquepossamserreferenciados

•  Objetospodemusargradientesepadrõescomo=ntaparapreenchertraçoseinteriordosobjetos•  Useatributofilloustrokecomfunçãourl(#xpointer)<rectfill="url(#id_gradiente)"...>

<circlestroke="url(#id_padrao)"..>

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

2

argo

navi

s.co

m.b

r

Transparência

Gradientes•  Gradientessãovariaçõessuavesdeduasoumaiscores•  Hádois=posdegradientes

•  Lineares<linearGradient>querepresentaumalinha,etemcoordenadasx1/x2ey1/y2

•  Radiais<radialGradient>querepresentaumcírculoetemcoordenadascx,cyer

•  Osvaloressãorela=vos(percentagensouvaloresentrezeroeum)aográficoqueserápintadocomogradiente•  0%a100%,0.0a1.0

•  Pontosdeparadainiciais,finaiseintermediáriossãomarcadoscomumtag<stop>•  Atributooffsetmarcaposiçãonalinha•  Cada<stop>podedefinirumacor(atributostop‐color)e/ou

transparência(stop‐opacity)paraoponto•  Coresintermediáriassãocalculadasporinterpolação

0%25%50%75%100%

argo

navi

s.co

m.b

r Exemplosdegradientes

4

<svgxmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"width="800"height="600"><defs><linearGradientid="linear1"x1="0"y1="0%"x2="100%"y2="0"><stopoffset="0%"stop‐color="black"stop‐opacity="0.5"/><stopoffset="45%"stop‐color="rgb(225,225,255)"stop‐opacity="0.8"/><stopoffset="55%"stop‐color="rgb(225,225,255)"stop‐opacity="0.8"/><stopoffset="100%"stop‐color="black"stop‐opacity="0.5"/></linearGradient><radialGradientid="radial1"cx="75%"cy="25%"r="90%"><stopoffset="0.01%"stop‐color="rgb(225,225,255)"/><stopoffset="90%"stop‐color="navy"/><stopoffset="100%"stop‐color="black"/></radialGradient></defs>

<circler="100"cx="400"cy="300"fill="url(#radial1)"/><circler="30"cx="250"cy="200"fill="url(#radial1)"/><rectx="50"y="55"height="170"width="60"fill="url(#radial1)"/><rectx="50"y="50"height="180"width="60"fill="url(#linear1)"/>

</svg>

argo

navi

s.co

m.b

r Gradientelinear

•  Ogradientelinearéumalinha•  Gradientever=cal: x1=x2=0, y1=0,y2=1•  Gradientehorizontal: y1=y2=0, x1=0,x2=1•  Ouvarieosvaloresparaproduziroffsetseinclinação

•  Paracoordenadasx,yuseproporção(0.0a1.0ou0%a100%)

•  Ogradienteépintadoaolongodovetorperpendicular(normal)aovetordogradiente

5

<linearGradientx1="0"y1="0.1"x2="0.9"y2="0"id="arcoiris"><stopoffset="0"stop‐color="rgb(255,0,0)"/><stopoffset="0.3"stop‐color="rgb(180,180,0)"/><stopoffset="0.6"stop‐color="rgb(0,180,0)"/><stopoffset="0.8"stop‐color="blue"/><stopoffset="1"stop‐color="rgb(128,0,220)"/></linearGradient>

offsetx290%

y110%

vetornormal

argo

navi

s.co

m.b

r Gradienteradial

•  Gradientesradiaissãocírculos•  r,cxecysãofraçõesdoespaçodográfico•  cx0.5,cy0.5er0.5=gradientenocentro,comcírculoinscrito•  Elementos<stop>marcampontosnoraio(0%=origem,100%=borda)

6

<svg...><defs><radialGradientcx="0.5"cy="0.5"r="0.5"id="arcoiris"><stopoffset="0"stop‐color="rgb(255,0,0)"/><stopoffset="0.25"stop‐color="rgb(255,255,64)"/><stopoffset="0.5"stop‐color="rgb(64,255,64)"/><stopoffset="0.75"stop‐color="rgb(64,64,255)"/><stopoffset="1"stop‐color="rgb(128,0,255)"/></radialGradient><radialGradientcx="0.25"cy="0.25"r="1"id="sombra"><stopoffset="0"stop‐color="rgb(255,255,255)"/><stopoffset="0.5"stop‐color="rgb(0,128,255)"/><stopoffset="1"stop‐color="rgb(128,0,255)"/></radialGradient></defs>

<rectx="0"y="0"width="200"height="200"fill="url(#arcoiris)".../><circlecx="100"cy="100"r="100"fill="url(#arcoiris)".../><rectx="0"y="0"width="200"height="200"fill="url(#sombra)".../><circlecx="100"cy="100"r="100"fill="url(#sombra)".../></svg>

argo

navi

s.co

m.b

r Reusodecorescomgradientes

•  Seumgradientefordefinidocomumaúnicacor,oefeitoéigualaumfill•  Permiteconstruircoresreferenciáveispelonome

•  Exemplo:

7

<defs><linearGradientid="corPretas"><stopoffset="0"stop‐color="rgb(64,32,32)"/></linearGradient><linearGradientid="corBrancas"><stopoffset="0"stop‐color="rgb(255,225,200)"/></linearGradient><rectid="rp"x="0"y="0"width="20"height="20"fill="url(#corPretas)"/><rectid="rb"x="0"y="0"width="20"height="20"fill="url(#corBrancas)"/>...<gid="tabuleiro">...</g><gid="peao">...</g><gid="peaoBranco"fill="url(#corBrancas)"stroke="url(#corPretas)">...</g><gid="peaoPreto"fill="url(#corPretas)"stroke="url(#corBrancas)">...</g></defs>

<usexlink:href="#tabuleiro"transform="translate(50,50)"></use><usexlink:href="#peaoBranco"transform="translate(125,110)"></use>...<usexlink:href="#peaoPreto"transform="translate(245,230)"></use>

argo

navi

s.co

m.b

r Padrões(azulejos)

•  Oelemento<paJern>replicaumobjetográficoparapintaroucontornarumobjeto

•  Paracriareusar•  Definaoelemento<paJern>em<defs>•  Referencie‐oparapintarumobjeto

8

<svg...xmlns="http://www.w3.org/2000/svg"><defs><pattern id="TrianglePattern"patternUnits="userSpaceOnUse" x="0"y="0"width="100"height="100" viewBox="001010"><pathd="M00L70L3.57z"fill="red"stroke="blue"/></pattern></defs>

<!‐‐Theellipseisfilledusingatrianglepatternpaintserverandstrokedwithblack‐‐><ellipsefill="url(#TrianglePattern)"stroke="black"stroke‐width="5"cx="400"cy="200"rx="350"ry="150"/></svg>

Fonte:W3C(specSVG)

argo

navi

s.co

m.b

r <paJern>eviewBox

•  Coordenadasx,y,heightewidth:dimensõesdopadrão•  AtributopaJernUnits="userSpaceOnUse"determinaqueas

coordenadasusadasserãoasdoobjetoqueaplicaopadrão

•  Cadaunidadedepadrão("azulejo")deveterseuslimitesrecortadosdentrodeumviewBox•  Istonãoéobrigatório,maséumaboaprá=ca

•  Desenhodecada"azulejo"nascoordenadasdoviewBox•  Noexemploabaixo,haveráclippingde4x2pixelsdaimagem

9

<defs><patternid="peixes"patternUnits="userSpaceOnUse"x="0"y="0"width="80"height="50"viewBox="002010"><imagexlink:href="TheFish.png"x="0"y="0"width="24"height="12"/></pattern></defs><rectx="0"y="0"width="300"height="300"fill="url(#peixes)"/>

argo

navi

s.co

m.b

r Máscaras

•  Máscarasalfasãousadasemcomposiçãográfica•  Sãodefinidascomoelemento<mask>edevemconteruma

imagemfonte(formadaporqualquerimagem,elementográficooucombinaçãodeelementos)

•  Amáscarapodeserreaplicadaavárioselementosgráficos•  Exemplo:aplicaçãodemáscarasimples(criadano

PhotoShop)pararemoverofundodeumaimagem

10

<defs><maskid="mascaraPeixe"x="0"y="0"width="300"height="150"><imagexlink:href="TheFishMask.png".../></mask></defs><rectx="0"y="0"width="600"height="300"fill="aquamarine"/><gtransform="translate(100,50)"><imagexlink:href="TheFish.png"mask="url(#mascaraPeixe)"/></g>

TheFishMask.png(fontedamáscara)

TheFish.png

Resultado

argo

navi

s.co

m.b

r

0.03 0.03 0.0 0.0

0.07 0.07 0.0 0.0

0.72 0.72 1.0 0.5

0.72 0.72 1.0 0.5

Comofuncionaumamáscara•  Amáscaraéformadaporpixelsdetransparência(alfa)quesão

mul=plicadospelovalordospixelsdoobjeto‐alvodamáscara

•  SeafontedamáscaraforumaimagemcoloridaRGB(24bits),ovaloralfadecadapixelésualuminância,ob=dapelafórmula*•  Luminância=0.2125R+0.7154G+0.0721B

•  Seforimagemmonocromá=ca(tonsdecinza),ovaloralfacorrespondeaoníveldecinza(preto=0)

•  Seaimagemforde32bits(RGBA),ofatoralfadecadapixeldafonteémul=plicadopelaluminânciaparaobteroalfaresultante

11

MáscaraRGBA Converteemalfa ResultadoAlvodamáscara

00f 00f fff fff0.5 0.5 0.0 0.000f 00f fff fff1.0 1.0 0.0 0.00f0 0f0 fff fff1.0 1.0 1.0 0.5 0f0 0f0 fff fff1.0 1.0 1.0 0.5

*segundoopadrãosRGB,adotadopelaespecificaçãoSVG

argo

navi

s.co

m.b

r MáscarausandofigurasSVG

12

<defs><polygonid="poligono"points="50,0150,0150,50200,50200,150150,150150,20050,20050,1500,1500,5050,50"fill="white"/><rectid="retangulo"width="100"height="100"x="50"y="50"fill="red"/><circleid="circulo"cx="100"cy="200"r="50"fill="green"/>

<maskid="mascara"x="0"y="0"width="200"height="200"><usexlink:href="#poligono"/><usexlink:href="#retangulo"/><usexlink:href="#circulo"/></mask></defs>

<usexlink:href="#circulo"stroke="gray"stroke‐dasharray="55"/><usexlink:href="#retangulo"stroke="gray"stroke‐dasharray="55"/><usexlink:href="#poligono"stroke="gray"stroke‐dasharray="55"/><textx="100"y="300"font‐size="24"text‐anchor="middle">Mascara</text>

<rectx="0"y="0"height="200"width="200"fill="blue"transform="translate(250,0)"/><circlecx="100"cy="100"r="100"fill="red"transform="translate(250,250)"/><rectx="0"y="0"height="200"width="200"fill="blue"mask="url(#mascara)"transform="translate(500,0)"/><circlecx="100"cy="100"r="100"fill="red"mask="url(#mascara)"transform="translate(500,250)"/>

argo

navi

s.co

m.b

r

MáscaraRGBA

Resultado

Máscarasderecorte(1bit)

•  Paraisolaraimagemdopeixe,foiusadaumamáscaraderecorte

•  Cadapixelbranco(#FFF)usaapenasdoisvaloresalfa•  0=100%transparente(excluidoresultado)•  1=100%opaco(incluinoresultado)

•  Oucadapixeldealfa=1usaapenasduascores•  #000=100%pretoopaco(excluidoresultado)•  #FFF=100%brancoopaco(incluinoresultado)

•  Resultadodesse=podemáscaraequivaleàaplicaçãodeclipping

13

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

13

ResultadoAlvodamáscara

argo

navi

s.co

m.b

r Atributosde<mask>

•  xey,heightewidth•  Coordenadas,alturaelarguradamáscara

•  Oresultadodaaplicaçãodamáscaralevaemcontaascoordenadasedimensões•  Resultadoserátruncadosecoordenadasedimensõesdoobjetonãocouberemnamáscaraouvice‐versa

•  maskUnits="userSpaceOnUse|objectBoundingBox"•  DefaultéobjectBoundingBox,queconsideraascoordenadasx,y,heightewidthpercentagensdoobjetonoqualamáscaraéaplicada

•  userSpaceOnUseconsideraosconsideravaloresdosistemadecoordenadasusadoquandoamáscaraéreferenciada

14Vejamaisemh7p://www.w3.org/TR/SVG/masking.html

argo

navi

s.co

m.b

r Recorte(clipping)

•  Gráficospodemtambémpodemserrecortadosporumcaminhodefinidopeloelemento<clipPath>•  Funcionacomomáscarade1bit

•  Áreasforadoclippingpathnãosãodesenhadas•  Caminhoécombinaçãodoselementosusadosnadefinição

•  Qualquerobjetopodeaplicarorecortecomoatributoclip‐path,querecebeumafunçãodexpointerurl(#idref)parao<clipPath>

•  Oatributoclip‐ruleseaplicadoaumelementodentrodo<clipPath>comporta‐secomofill‐rulenoresultado•  Funcionaparapolígonos,caminhos,etc.

•  Exemplodepolígonoscomfill‐rule

15

fill‐rule="nonzero" fill‐rule="evenodd"

argo

navi

s.co

m.b

r Exemplodeclippingcom<clipPath>

16

<svg...viewBox="00500500"><defs><clipPathid="poly"><polygonpoints="50,50300,300300,50100,5050,300300,150300,250"clip‐rule="evenodd"/><circler="50"cx="200"cy="300"clip‐rule="evenodd"/></clipPath></defs>

<imagex="0"y="0"height="500"width="600"xlink:href="lua.png"clip‐path="url(#poly)"transform="translate(20,20)"/></svg>

argo

navi

s.co

m.b

r Filtros<filter>

•  Filtroscombinamalgoritmosparacomporefeitosgráficos•  Composições,desfoques,pontosdeluz,mesclagens,etc.

•  Podemseraplicadosemobjetosdiferentes

•  Definidoscom<filter>queconfiguraeconcatenaumoumaisalgoritmosprimiYvos(cadaumrealizaumaoperação)•  Háatributosesub‐elementosprópriosparacadaprimi=vo

•  Detalhesnaespecificação:h7p://www.w3.org/TR/SVG/filters.html

•  Objetosreferenciamofiltrocomoatributofilter•  <rect...filter="url(#filtro)"/>

•  Dimensõesdefault•  x=‐10,y=‐10,height=120%,width=120%•  Geralmentesedefineumfiltrocommaisespaçopoisefeitos

podemvazaralémdoslimitesdográfico17

argo

navi

s.co

m.b

r ElementosdefiltrodoSVG1.1

•  <feBlend/>•  Combinaduasimagens;atributos:mul=ply,screen,darken,etc.

•  <feColorMatrix/>•  Defineumfiltroatravésdeumamatrizdetransformaçãodecores.

•  <feComponentTransfer/>•  Ajustedebrilho,contraste,balanceamentodecores,etc.

•  <feComposite/>•  Combinaduasimagensusandoalgoritmosdecomposição

•  <feConvolveMatrix/>•  Aplicaumamatrizdeconvoluçãoparadesfoque,embossing,etc.

•  <feDiffuseLigh=ng/>•  Aplicaumefeitodeluzdifusaemumaimagemusandoocanalalfa.

•  <feDisplacementMap/>•  Efeitorealizadodeslocandoaimagemdelugar.

•  <feFlood/>•  Preencheumaáreacomcoretransparênciadeterminadosnofiltro.

18

argo

navi

s.co

m.b

r ElementosdefiltrodoSVG1.1

•  <feGaussianBlur/>•  Desfocaaimagemusandoalgoritmogaussiano.

•  <feImage/>•  Usaumaimagemexternacomofonteparaofiltro.

•  <feMerge/>•  Combinaváriasimagensexternasparaformarofiltro.

•  <feMorphology/>•  Usadoparaerodiroudilataroobjetonoqualofiltroéaplicado.

•  <feOffset/>•  Deslocaaimagememrelaçãoàsuaposiçãoatual.

•  <feSpecularLigh=ng/>•  Aplicaumefeitodeluzbrilhanteemumaimagemusandoocanalalfa.

•  <feTile/>•  Defineumfiltrocomoumpadrãodeimagemrepe=da.

•  <feTurbulence/>•  Criaefeitodenuvensoumármore.

19

argo

navi

s.co

m.b

r Exemplo:desfoquegaussiano

<defs><filterid="f2"x="‐100"y="‐100"height="200"width="200"><feGaussianBlurstdDeviation="50,0"in="SourceGraphic"/></filter>

<filterid="f1"><feGaussianBlurstdDeviation="5"/></filter></defs>

<textid="text"font‐size="48"fill="blue"x="50"y="60"filter="url(#f1)">Voceprecisadeoculos?</text><gid="stardot"transform="translate(100,50)"><polygonid="star"points="250,0400,5000,200500,200100,500"fill="red"fill‐rule="evenodd"/><circleid="circ"cx="250"cy="283"r="75"fill="blue"filter="url(#f1)"/></g><imagexlink:href="TheFish.png"width="400"height="300"x="100"y="550"filter="url(#f2)"/>

argo

navi

s.co

m.b

r Entradaseresultados

•  Componentesdográfico‐fonteaserfiltrado*•  SourceGraphic–ográfico‐fontecompleto

•  SourceAlpha–máscarasimplesdográfico‐fonte

•  Amaiorpartedosprimi=vosdefiltrorecebemumaoumaisentradas(in)quepodemser

•  Componentedegráfico‐fonte

•  Resultado(result)doprocessamentodealgumoutroprimi=vo

•  Exemplo{picodeconcatenaçãodealgoritmosdefiltro•  <feXXXin="SourceAlpha"...result="passo1"/>

•  <feYYYin="passo1"...result="passo2"/>

•  <feZZZin="SourceGraphic"in2="passo2"operator="xor"result="passo3"/>

•  Outrasfontesquepodemserusadascomoentrada•  BackgroundImageeBackgroundAlpha:ofundodaimagem

•  FillPainteStrokePaint:cor/padrão/gradientedepreenchimentooutraço

21*ÉpossíveltambémmanipularofundocomBackgroundImageeBackgroundAlpha

argo

navi

s.co

m.b

r Filtrocomposto

22

<svg...><defs><linearGradient...id="arcoiris">...</linearGradient>

<filterid="efeito3d"x="‐300"y="‐300"height="500"width="500"><!‐‐Brilho‐‐><feGaussianBlurin="SourceAlpha"stdDeviation="5"result="borrao"/><feFloodflood‐color="orange"flood‐opacity="1"result="laranja"/><feCompositein="laranja"in2="borrao"operator="in"result="brilho"/>

<!‐‐Sombra‐‐><feOffsetin="borrao"dx="8"dy="8"result="sombra"/>

<!‐‐Textoem3D‐‐><feSpecularLightingin="borrao"surfaceScale="5"specularConstant="1"specularExponent="15"lighting‐color="white"result="luzDifusa"><fePointLightx="‐50"y="‐200"z="300"/></feSpecularLighting><feCompositein="luzDifusa"in2="SourceAlpha"operator="in"result="luzDireta"/><feCompositein="SourceGraphic"in2="luzDireta"operator="arithmetic"k1="0"k2="1"k3="1"k4="0"result="texto3D"/>

<!‐‐Combinacaodosfiltros‐‐><feMerge><feMergeNodein="sombra"/><feMergeNodein="brilho"/><feMergeNodein="texto3D"/></feMerge></filter></defs><gtransform="translate(50,50)scale(2)"><textid="text"font‐weight="bold"font‐family="impact"font‐size="150"fill="url(#arcoiris)"x="0"y="160"filter="url(#efeito3d)">SVG</text></g></svg>

argo

navi

s.co

m.b

r Filtro

composto

23

brilho

laranja

feComposite

feOffset

sombra

SourceGraphic

SourceAlphafeComposite

feSpecularLighting

luzDifusa

borrao

feComposite

luzDireta

feFloodfeMerge

feGaussianBlur

efeito3D

texto3D

in

in

in

inin2

in

in

in2

in2

result

result

result

result

result

result

result

inin

n n nin

Início

argo

navi

s.co

m.b

r Exercícios

•  Exploreoutrosalgoritmosdefiltrocomo•  feTurbulence•  feMerge•  feBlend•  feDiffuseLigh=ng•  feColorMatrix

•  Consulteaespecificaçãoem•  h7p://www.w3.org/TR/SVG/filters.html

•  Apliqueosfiltrosemdesenhosusadosemexemploseexercícios•  Exploreosfiltrosvariandoatributoseparâmetros

24