SVG - Scalable Vector Graphics: Uma Introdução Prática

195
!"# %&'()*!+,) -(.'%/# !"#$"% $' ()*+' ,+"#$"%-'%.)/'0123*)435%6

Transcript of SVG - Scalable Vector Graphics: Uma Introdução Prática

Page 1: SVG - Scalable Vector Graphics: Uma Introdução Prática

!"#$%&'()*!+,)$-(.'%/#$

!"#$"%&$'&()*+'&,+"#$"%-'%.)/'0123*)435%6&

Page 2: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#$"%&%'()'*+%,-'

•  !"#$%&'()%*•  +*,'-*.*/012*3-$$45-"#462*6'7%$#-2*784#43%$546*

•  94$#-*!*•  :;*<%$-6*&-*7$--"=>?5-"#%2*-6@8%6*-*#$4(%6*•  A;*B?C'$46*DE6?=46F*$-#G"C'8%2*=H$='8%2*-8?76-2*7%8HC%"%2*8?">4*•  I;*J6#$'#'$4*&%*&%='5-"#%2*6H5D%8%62*54$=4&%$-6*

•  94$#-*!!*•  K;*<45?">%62*='$L46*M.N?-$*-*4$=%6*•  O;*P-Q#%2*3%"#-6*-*-3-?#%6*=%5*#-Q#%*•  R;*B?8#$%6*-*-3-?#%6*C$ES=%6*=%5*C$4&?-"#2*74T-$"2*=8?77?"C2*546U6*

•  94$#-*!!!*•  V;*P$4"63%$54()%*&-*=%%$&-"4&46*•  W;*X4"?7'84()%*&-*=%57%"-"#-6*/01*=%5*Y4L4/=$?7#*-*Z+X*•  [;*\"?54()%*/01*=%5*/X!]*

•  94$#-*!0*•  :^;*1-$4()%*&-*/01*=%5*_/]P*

A*

Page 3: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r

>T7F``aaa;b%'#'D-;=%5`a4#=>cLdef#-0,3g>h%*i>T7F``aaa;>-8&-$&4$%=>4;=%5;D$j*

.'%/0#"'

Page 4: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r .'1/2'3'4567'

•  /=484D8-*0-=#%$*1$47>?=6*•  1$ES=%*

•  8?">462*7%8?C%"%62*SC'$462*#-Q#%2*S8#$%62*-3-?#%6*•  J6=48EL-8*

•  k%%5*-S=?-"#-*-*$E7?&%*•  9%&-*4578?4$*-*$-&'N?$*6-5*7-$&-$*,'48?&4&-*

•  0-#%$?48*•  \$54N-"4*4*21/%89#'*#,'$":;<#,*i-*")%*'5*5474*&-*7?Q-86*=%5%*?54C-"6*D?#547j*

•  !54C-"6*54?%$-6*%='745*&2,&#'2,=%8#','-*?54C-"6*5-"%$-62*-*>9#'=2"*2&'1/%?+*%*2'

•  9%&-*#$4#4$*C$ES=%6*6-74$4&45-"#-*i=%5%*%De-#%j2*7-$5?@"&%*4"?54(l-6*

K*

Page 5: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r 520#"2,'2'@+0&%=,'

O*

7184'9:&;<=7&

7184'9&'49#1'$):&>?<=7&

@"8)%:&;=7&

@"8)%&'49#1'$):&;=7&

Page 6: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r 456'3'ABCD'

•  P'&%*-Q7$-66%*-5*_X]*•  9%&-*6-$*48#-$4&%*-5*-&?#%$*&-*#-Q#%6*•  9%&-*6-$*7$%=-664&%*=%5%*#-Q#%*•  9%&-*6-$*#$4"63%$54&%*L?4*_/]P*•  9%&-*#-$*%De-#%6*6-8-=?%"4&%6*L?4*_94#>*•  9%&-*6-$*L48?&4&%*=%5*_X]*/=>-54*•  9%&-*#-$*4*474$m"=?4*&-*%De-#%6*48#-$4&46*=%5*<//*•  9%&-*#-$*=%57%$#45-"#%*&-*%De-#%6*48#-$4&%*=%5*Y4L4/=$?7#*-*Z+X*

•  9%&-*6-$*-5D'@&%*-5*fPX]*=%5%*#-Q#%*•  n'48,'-$*-8-5-"#%*7%&-*6-$*4"?54&%*

R*

Page 7: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r 456'3'/&'E#"&%0#'$":;<#'

•  Z-6-">%6*7%&-5*6-$*7$%&'N?&%6*-5*3-$$45-"#46*C$ES=46*7%7'84$-6*•  <%$-8*Z$4a*•  \&%D-*!88'6#$4#%$*•  +7-"+o=-*

•  B%$54#%*4D-$#%*-*5'8@784#43%$54*•  9%&-p6-*=$?4$*'5*/01*"%*!88'6#$4#%$*-*34N-$*48#-$4(l-6*-5*'5*-&?#%$*&-*#-Q#%*-*L?=-pL-$64*

•  9%&-p6-*&-6-">4$*74$#-6*&-*'5*/01*"%*<%$-8*Z$4a2*-*'64$*_/]P*74$4*C-$4$*C$ES=%6*54?%$-6*'64"&%*46*74$#-6*=%5%*=%57%"-"#-6*DE6?=%6*

V*

Page 8: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r F2<>#?#$+%,',+&+?%"2,'

•  B846>*`*B8-Q*•  /%8'()%*q*7%7'84$*&-*C$ES=%6*L-#%$?4?6*-*4"?54()%*AZ*"4*r-D*

•  9$%7$?-#E$?4*•  9-$&-"&%*-674(%*74$4*#-="%8%C?46*-5-$C-"#-6*=%5%*/01*

•  fPX]O*<4"L46*•  ]?"C'4C-5*C$ES=4*AZ*D46-4&4*-5*Y4L4/=$?7#2*-5D'@&4*-5*fPX]*=%5*

$-='$6%6*6?5?84$-6*4*/01*

•  s*7%66HL-8*?"#-$4C?$*=%5*/01*L?4*fPX]*Z+X*

•  r-D1]*•  ]?"C'4C-5*C$ES=4*IZ*-5*fPX]*O*<4"L46*=%5*6?"#4Q-*&%*+7-"1]*J/*

•  +'#$%6*3%$54#%6*&-*C$ES=%*L-#%$?48*i%D6%8-#%62*-5*-Q@"()%2*7$%7$?-#E$?%62*?"=%574tL-?6*=%5*4*r-D2*-#=;j*•  0X]2*91X]2*r-D<1X2*J9/2*\!2*Zr12*<1X2*rXB2*-#=;*

W*

Page 9: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r ."+$2>,'*#'456'

•  /01*3%?*=$?4&%*-5*:[[W*4*74$@$*&-*7$%7%6#46*-"L?4&46*u*rI<*74$4*4*74&$%"?N4()%*&-*8?"C'4C-5*L-#%$?48*74$4*4*r-D*•  J67-=?S=4()%*S"48*:;^*7'D8?=4&%*-5*A^^:*

•  J67-=?S=4()%*:;:2*A4;*-&2*A^:^F*+A9BCCDE3)%.CF%'9+1*2CG@F&&•  \6*7$?"=?74?6*?"v'm"=?46*&%*/01*6)%**

•  5BC'&4*X?=$%6%w*i=%5*f92*\'#%&-6U*-*X4=$%5-&?4j*

•  !6BC2*&4*\&%D-*i=%5*!MX2*h-#6=47-*-*/'"j*

•  G44'-*HFBC'irI<j*

•  9$?5-?$4*-67-=?S=4()%*-6=$?#4*7%$*Y%"*B-$$4?%8%*i\&%D-j*

•  \*\&%D-*3%?*4*-57$-64*,'-*54?6*?"L-6@'*"%*/01*"%6*7$?5-?$%6*4"%6*•  9$%&'N?'*%*L?-a-$*54?6*7%7'84$**i\&%D-*/01*0?-a-$j*

•  !"#$%&'N?'*6'7%$#-*"4@L%*"%*\&%D-*!88'6#$4#%$;*[*

Page 10: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r B2"<%*#'

•  X-$=4&%*=$-6=-"#-*•  X'?#46*478?=4(l-6*7%7'84$-6*-*784#43%$546*6'7%$#452*7$%&'N-5*

%'*-Q7%$#45*/01*&-6&-*46*7$?5-?$46*L-$6l-6*

•  JQ-578%6F*\&%D-*!88'6#$4#%$2*<%$-8*Z$4a2*+7-"+o=-;%$C2*M8-"&-$2*1!X92*h%U?4*/R^2*;;;*

•  1%%C8-*?"&-Q4*=%"#-x&%*/01*&-6&-*4C%6#%*&-*A^:^;*•  /'7%$#-*"4@L%*/01*-5*D$%a6-$6*i/#4#<%'"#-$jF*

•  I>02">20'JK=?#"2"'iKRy*5-$=4&%!jF*/01*:;:*4*74$@$*&%*!J*[;^*

•  L+"2E#K'iI^y!jF*/01*:;:*&-6&-*A^^O*i74$=?48j*

•  r-DU?#F*GM"#&2'-*4%E%"+'i:Wy"jF*/01*:;:*&-6&-*A^^R*i74$=?48j*

•  .=2"%'iAy#$j*/01*:;:*&-6&-*L-$6)%*W;^2*=%578-#%*&-6&-*:^;^*

•  B#@+?2z*iKy"jF*/01*:;:`/01*:;A*P?"b*

*z*LE$?%6*34D$?=4"#-62*C-$485-"#-*r-DU?#*i\"&$%?&2*94852*/b5D?4"2*/434$?j*:^*

Page 11: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !?%0%E#"&%,'456'

•  /01*B'88*•  /01*:;^*-*456'NON'{*,'46-*?C'4?6*"%*,'-*6-*$-3-$-*u*=%57%"-"#-6*-*6?"#4Q-*i-5*:;:2*%*ZPZ*.*5%&'84$j*

•  B%$54#%*456P'i/01*=%57$?5?&%*=%5*k!9j*

•  /01*X%D?8-*•  456'NOQ'F+>R'i/01Pj*-*456'S%,+<'i/01MjF*&-6@"4&%6*4*&?67%6?@L%6*5|L-?62*#4D8-#62*-#=;*

•  \*T6!!'4&%#%'*/01*P?"b*=%5%*74&$)%*&-*5H&?4*L-#%$?48*

•  J5*&-6-"L%8L?5-"#%*•  456'QOU'i4"#-6*=>454&%*&-*/01*:;Aj*{*#-5*$-='$6%6*&-*#$4"63%$54()%*IZ*

•  456'!"+>0'i<4"%"2*f92*\&%D-*-*<%$-8j*{*?57$-66)%*

::*

Page 12: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r 4/=#"02'456'NON'

•  94$4*#-6#4$2*-Q-='#4$*-*-Q?D?$*%6*-Q-578%6*&-5%"6#$4&%6*>2,02'</",#'3%$45*'64&%6*%6*6-C'?"#-6*D$%a6-$6*-*784#43%$546*

•  984#43%$54*X4=*+/*_*i:^;Rj*-*]?"'Q*i}D'"#'j*•  1%%C8-*<>$%5-*:^;^*ir-DU?#j*

•  /434$?*K;^K*-*O;^I*ir-DU?#j*

•  B?$-3%Q*K*iM-#4j*iX%N?884j*

•  +7-$4*:^;RA*i9$-6#%j*

•  984#43%$54*r?"&%a6*i_9j*•  !"#-$"-#*JQ78%$-$*W*ir?"&%a6*_9j*<#&'*+V2",#,'=?/$W+>,'X%V%4<"+=0*

•  <>$%5-*:^2*+7-$4*:^2*B?$-3%Q*K2*/434$?*K*ir?"&%a6*_9j*

•  984#43%$54*r?"&%a6*V*•  !"#-$"-#*JQ78%$-$*[*

•  B-$$45-"#46*i5'8@784#43%$54*{*'64&46*-5*X4=*+/*_j*•  /,'?CC8-*i/01*0?-a-$*&%*3$45-a%$U*M4@Uj*

•  /01*0?-a-$*&%*-&?#%$*+QbC-"*_X]*:A*

Page 13: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r 4/=#"02'>#'Y+>*#Z,7'

•  h-">'5*6'7%$#-*"4@L%F*!"#-$"-#*JQ78%$-$*R2*V2*W*•  !J*3%?*'5*&%6*7$?5-?$%6*D$%a6-$6*4*#-$*6'7%$#-*/01*:;^*4#$4L.6*

&%*[*#@2'456'5+2Z2"'!?/$+>'iA^^^2*r?"&%a6*[W`A^^^`_9j*

•  X46*X?=$%6%w*"'"=4*?"L-6@'*"%*6'7%$#-*>%\V#'4*/012*-*\&%D-*{*7$%7%"-"#-*&4*-67-=?S=4()%*/01*:;^*{**&-?Q%'*&-*&4$*6'7%$#-*4%*7%7'84$*78'Cp?"*-5*e4"-?$%*&-*A^^[;*

•  \&%D-*98'C?"*4?"&4*3'"=?%"4*-5*!J*R2*V2*WF*74$=?48*-*=%5*D'C6*

•  /%8'(l-6*'64"&%*%*!"#-$"-#*JQ78%$-$*•  }64$*I>02">20'JK=?#"2"']*i546*6|*$%&4*-5*0?6#4*%'*/-L-"j*

•  98'Cp?"*456Y2@'&%*1%%C8-F*+A9BCC*)$"3.)).#"3*)4C9C20.D"5C&

•  +'#$%6*78'Cp?"6*,'-*-5D'#-5*/01F*+A9BCCDDD3'49#"2$=3*)4C&

•  }64$*%'#$%6*D$%a6-$6*"%*r?"&%a6*•  X-8>%$*6'7%$#-*i:A`A^:^jF*+7-$42*1%%C8-*<>$%5-2*B?$-3%Q*K*

•  B?$-3%Q*I;Q*#-5*5-"%6*6'7%$#-*i-QF*")%*6'7%$#4*4"?54()%*/X!]j*:I*

Page 14: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r G#&#'<"+%"'/&'456'2&'ABC'

•  J8-5-"#%*$4?N*•  ~6LC�*

•  h45-674=-*•  >T7F``aaa;aI;%$C`A^^^`6LC*

•  }5*C$ES=%*/01*5'?#%*6?578-6F*

:K*

!"#$%&'()*+,-./012/&(-3,4+-5./6789:/";&!*'5&#$%-*./<==>?@@AAA1AB1,)5@C222@*'5/&&&&&&&A+4=<./022D/&<(+5<=./022D/;&&&&&!3+)3%(&)./E2/&3#./022/&3F./022/&G+%%./5)((-/@;&&!@*'5;&

20.$"4)320.&

Page 15: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r G#&#'2K+@+"'

•  J5*'5*D$%a6-$*•  /?578-65-"#-*4D$4*%*4$,'?L%*/01*-5*'5*D$%a6-$*

•  J5*%'#$46*478?=4(l-6*•  B-$$45-"#46*C$ES=46F*!"U6=47-2*/U-#642*!88'6#$4#%$2*<%$-8*Z$4a*•  /01*0?-a-$6*i\74=>-*/,'?CC8-j2*?"#-$34=-6*&-*#4D8-#62*=-8'84$-62*-#=;*

:O*

+7-$4*

<>$%5-*

/434$?*

B?$-3%Q*

!J*W*=%5*=?/$W+>'Y2@456*&%*1%%C8-*i/'7%$#-*/'H0)&-5*!J*6%5-"#-*=%5*!J[j*

Page 16: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r S%\^'41/+$$?2'

:R*

•  0?6'48?N4&%$*-*-&?#%$*/01*&4*\74=>-*i%7-"p6%'$=-j*•  9-$5?#-*-Q?D?$*/012*&-7'$4$*6=$?7#62*4"48?64$*=|&?C%p3%"#-*=%5%*E$L%$-2*48#-$4$*=|&?C%2*-#=;*

Page 17: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r G#&#'V+></?%"'2&'HFBC_AHFBC'

•  \*3%$54*$-=%5-"&4&4*.*'64$*~%De-=#�*•  !,HI(3=&*)3./!"#$%&'(!"#/&&&&&&&&&&3%J**+4./+$J5(@*'5K#$%/&&&&&&&&&&=F>(./+$J5(@*'5K#$%/&&&&&&&&&&<(+5<=./B22/&A+4=<./L22/&@;&

•  +'#$46*3%$546*#45D.5*3'"=?%"45*i546*")%*-5*#%&%6*%6*D$%a6-$6j*•  !+$5&*)3./!"#$%&'(!"#/&&&&&&&<(+5<=./B22/&A+4=<./L22/&@;&

•  !($H(4&*)3./!"#$%&'(!"#/&&&&&&&&&=F>(./+$J5(@*'5K#$%/&&&&&&&&&<(+5<=./B22/&A+4=<./L22/&@;&

:V*

Page 18: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r G#&#'2&@/\"'

•  J5*_X]*

•  J5*fPX]O*

:W*

!#*%?*=F%(*<((=&#$%-*?#*%./<==>?@@AAA1AB1,)5@0MMM@NOP@7)J-*G,)$/&'()*+,-./012/;&&&&&!#*%?=($>%J=(&$J=3<./G+5Q)J/;&))))))))*!"#)+&,-!./0112344555(56('7#489994!"#/)5:$10./;99</)0%:#01./;99</=)))))))))))))*>:7>,%)7./?9/)>+./;99/)>@./;99/)A:,,./#7%%-/4=))

))))))))*4!"#=&&&&&!@#*%?=($>%J=(;&!@#*%?*=F%(*<((=;& !3J=J%,5,&#$%-*./<==>?@@AAA1J3$(13,$@RJ=J%,5,/&

&&&&&&&&&&#$%-*?*'5./<==>?@@AAA1AB1,)5@C222@*'5/;&&&&&!+$J5($;&))))))))*!"#3!"#))5:$10./899/)0%:#01./899/=)

))))))))))))*!"#3>:7>,%)7./?9/)>+./;99/)>@./;99/)A:,,./#7%%-/4=))))))))))*4!"#3!"#=&&&&&!@+$J5($;&!@3J=J%,5,;&

!S4,3=F>(&<=$%;&!<=$%;&&&&&!<(J4;&&&&&&&&&!$(=J&3<J)*(=./6789:/;&&&&&&&&&&&&&!=+=%(;T(%%,&OUVS!@=+=%(;&&&&&!@<(J4;&&&&&!H,4F;&&&&&&&&&!<0;T(%%,&OUVS!@<0;&))))))))*!"#=))

))))))))))))*>:7>,%)7./?9/)>+./?9/)>@./?9/)A:,,./#7%%-/4=))))))))))*4!"#=&&&&&!@H,4F;&!@<=$%;&

Page 19: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r G#&#'="#$"%&%"'

•  I>02"%\V+*%*2F*74$4*?"#-$4C?$*-*54"?7'84$*/01*-5*#-57%*&-*-Q?D?()%*•  /=$?7@"C*-5*/01*:;:*=%5*rI<*Z%='5-"#*+De-=#*X%&-8*]-L-8*A*iZ+X*A;^j*

•  94$4*7$%C$454$*%*Z+X2*7%&-p6-*'64$*,'48,'-$*8?"C'4C-5*6'7%$#4&4*7-8%*L?-a-$*'@8?N4&%*

•  X%V%4<"+=0'iJ<X\*/=$?7#j*.*4*8?"C'4C-5*54?6*'64&4*i-*x"?=4*6'7%$#4&4*7-84*54?%$?4*&%6*L?6'48?N4&%$-6*/01j*

•  62"%89#F*94$4*C-$4$*-*54"?7'84$*/01*4"#-6*&4*-Q?D?()%*•  <%5*Y4L42*7%&-p6-*'64$*%*7%7'84$*3$45-a%$U*%7-"p6%'$=-*\74=>-*M4@UF*+A9BCCI4#.%'9+1*23'9'*+"3)%.C5'H=&

•  9%&-p6-*C-$4$*/01*4#$4L.6*&-*_/]P*=%5*4578%*6'7%$#-*-5*&?L-$646*784#43%$546*-*8?"C'4C-"6*

•  _/]pB+*-*\9!6*C$ES=46*#45D.5*#m5*%7()%*&-*C-$4$*/01*:[*

Page 20: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r 62"%89#'*2'+&%$2&'

•  X'?#46*L-N-6*.*"-=-66E$?%*=%"L-$#-$*'5*/01*-5*?54C-5*•  JQF*74$4*C-$4$*'54*L?6'48?N4()%*48#-$"4@L4*4*D$%a6-$6*,'-*")%*

6'7%$#45*/01*

•  !6#%*7%&-*6-$*3-?#%*&?"45?=45-"#-*4#$4L.6*&%*3$45-a%$U*M4@U2*-5*478?=4(l-6*r-D*-6=$?#46*-5*Y4L4*

•  +'*-Q-='#4&%*L?4*8?">4*&-*=%54"&%*'64"&%*%*456'`%,02"+a2"'&%*S%\^'•  !""#$%%&'()*+#!,-./+#+-!0/1*)%2+",3%"11(.%*+."0*,40*/!"'(5

•  JQ-578%*&-*'6%F*$"J'K#8&.*C-$4$*9h1*•  +*=%54"&%*4D4?Q%*C-$4*4$,'?L%;7"C*&IJ'J&9IJ)&HJ=+W9)J*=()+X()1IJ)&J)YQ+',1*'5&

•  X46*#45D.5*.*7%66HL-8*C-$4$*%'#$%6*3%$54#%6*•  +*=%54"&%*4D4?Q%*C-$4*'5*Y9J1*&IJ'J&9IJ)&HJ=+W9)J*=()+X()1IJ)&B&):&C#%4D2%#)J)YQ+',1*'5&

A^*

Page 21: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r 4#?/8b2,'=%"%'IJ'2'@"#Z,2",'%>\$#,'

•  B%$"-=-$*'54*?54C-5*48#-$"4@L4*,'4"&%*'5*D$%a6-$*")%*6'7%$#4*/01*.*$-=%5-"&4&%2*546*>E*7-$&46F*•  9-$&-p6-*?"#-$4@L?&4&-*-*4"?54()%*

•  k%%5*7-$&-*,'48?&4&-*

•  !54C-"6*C-$485-"#-*6)%*54?%$-6*

•  \8C'"6*78'Cp?"6*-*-Q#-"6l-6*#-"#45*=%"L-$#-$*/01*-5*0X]*%'*B846>2*'64"&%*Y4L4/=$?7#2*74$4*,'-*3'"=?%"-5*-5*D$%a6-$6*4"@C%6*-*"%*!"#-$"-#*JQ78%$-$*=%5*54?6*$-='$6%6*,'-*?54C-"6*•  \*54?%$?4*4?"&4*-6#E*-5*L-$6l-6*4834*%'*D-#42*-*")%*?578-5-"#45*

LE$?%6*$-='$6%6*

•  X46*48C'"6*eE*=%"6-C'-5*?578-5-"#4$*?"#-$4@L?&4&-*-*4"?54()%*

•  \8#-$"4@L46*54?6*54&'$46*i-5*:ApA^:^j*•  456Y2@'i1%%C8-*<%&-j*

•  [&=?2'4cd'

•  L?%,MG%>V%,'i=%"L-$#-*fPX]*O*<4"L46*-5*B846>j*q*<%>V$'i=%"L-$#-*/01*-5*fPX]O*<4"L46j*

A:*

Page 22: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r 456Y2@'

•  +A9BCC*)$"3.)).#"3*)4C9C20.D"5C&

•  Ä-,'-$*?"6#484()%*&-*@+@?+#02<%'X%V%4<"+=0'-*M%<^,','-*'645*B846>*74$4*-Q?D?$*/01*•  M$%a6-$*7$-=?64*#-$*=?/$W+>'L?%,M'

•  /'7%$#-*/01*:;:*4?"&4*8?5?#4&%*iL-$6)%*4834*{*:A`A^:^j*•  /'7%$#4*4"?54(l-6*/X!]*6?578-6*-*6=$?7@"C*

•  <|&?C%*/01*7%&-*#-$*,'-*6-$*4&47#4&%*i-L?#4$*'64$*6b5D%82*S8#-$2*-#=;j*

•  /-*D$%a6-$*6'7%$#4$*/012*%*78'Cp?"*.*?C"%$4&%*

•  s*7$-=?6%*=4$$-C4$*L?4*fPX]*i2&@/\"'&-"#$%*&-*'5*D8%=%*~6=$?7#�*#/''64$*~%De-=#�*74$4*V+></?%"jF*

AA*

!<=$%;&*!>7:21)!7>./!7>4!"#(D!/)$C1CB2C10./!7>/)4=)!H,4F;&&&!,HI(3=&*)3./*'54($,1*'5/&&&&&&&&&&&&&&&&&&3%J**+4./+$J5(@*'5K#$%/&&&&&&&&&&&&&&&&&A+4=<./:22/&<(+5<=./Z22/&&&&&&&&&&&&&&&&&+4./$FOUV[HI(3=/&@;&!@H,4F;&

9$-=?64*=4$$-C4$*D?D8?%#-=4*4"#-6*&-*,'48,'-$*%'#$%*6=$?7#Å*

Page 23: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r [&=?2'4cd'

•  +A9BCCDDD3'49#"2$=3*)4C&

•  P45D.5*'64*D?D8?%#-=46*Y4L4/=$?7#*•  X46*6'7%$#4*%'#$%6*$-='$6%6*48.5*&%*/012*=%5%*_}]2*fPX]*O2*-#=;*

•  /'7%$#4*6=$?7#6*$%&4"&%*&-"#$%*&%*/01*i?"#-$4@L?&4&-*-*4"?54()%j*

•  /'7%$#4*C$ES=%6*=%578-Q%6*i7%$.5*4?"&4*")%*6'7%$#4*48C'"6*-8-5-"#%6*{*7%&-p6-*$-p-6=$-L-$*%*/01*=%5*47-"46*-8-5-"#%6*6'7%$#4&%6j*

•  s*7$-=?6%*=4$$-C4$*L?4*fPX]*i-5D'@&%*%'*-Q#-$"%j*

AI*

!S\[R7]^_&<=$%;&!<=$%;&&&&&!<(J4;&&&&&&&&&*!>7:21)1@2%./1%+14DC"C!>7:21/)!7>./C&2,%47E-1:&%B$%"(D!/)4=)))))))))*!>7:21)1@2%./1%+14DC"C!>7:21/)!7>./C&2,%4,C-#EC#%!4!"#4!"#(D!/)4=&&&&&!@<(J4;&&&&&!H,4F;&&&&&&&&&!*3)+>=&=F>(./J>>%+3J=+,-@J$>%(K#$%/&*)3./*'54($,1*'5/&@;&&&&&!@H,4F;&!@<=$%;&

M?D8?%#-=46*74$4*/01*

}64*~6=$?7#�*74$4*=4$$-C4$*/01*

Page 24: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r L?%,MG%>V%,'2'<%>V$'

•  h4*L-$&4&-*6)%*&'46*D?D8?%#-=46*•  s*7$-=?6%*'64$*46*&'46*

•  L?%,MG%>V%,'=%"L-$#-*fPX]*O*<4"L46*-5*B846>*•  +A9BCCL'2+*'/0'23/"8C&

•  <%>V$'=%"L-$#-*/01*-5*fPX]*O*<4"L46*•  +A9BCC*)$"3.)).#"3*)4C9C*'/0.C&

•  94$4*'64$*L?%,MG%>V%,'47-"46*?57%$#-*4*D?D8?%#-=4*!*3)+>=&=F>(./=(#=@IJ'J*3)+>=/&*)3./A,C!0>C-"C!(D!/@;&

•  94$4*'64$*<%>V$2*=$?-*'5*e<%>V%,f'=%5*'5*+*2*-*?"?=?48?N-*L?4*'54*=>454&4*Y4L4/=$?7#*

AK*

*!>7:21)1@2%./1%+14DC"C!>7:21/)!7>./>C-"#47#F>','7(D!/4=))*!>7:21)1@2%./1%+14DC"C!>7:21/)!7>./>C-"#4>C-"#(D!/4=)))))))&!*3)+>=&=F>(./=(#=@IJ'J*3)+>=/;&&&&&GQ-3=+,-&:-:1GH)`&&&3J-'5ab1%,Cbc&b*'54($,1*'5bde&&&f&!@*3)+>=;&111&!H,4F&,-%,J4./:-:1GH/;&&&&&&!3J-'J*&+4./1%,C/&A+4=<./:22/&<(+5<=./Z22/&@;&!@H,4F;&

Page 25: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r JK2"<g<+#,'

•  JQ7-$?5-"#-*•  P-6#4$*6-*6-'*D$%a6-$*6'7%$#4*/01*i=%5%c*?"&-7-"&-"#-2*-5D'@&%*-5*fPX]Ocj*

•  Z?C?#4$*%*/01*5%6#$4&%*=%5%*-Q-578%2*48#-$Ep8%*-*%D6-$L4$*%*,'-*4=%"#-=-*

•  JQ-578%6*-*$-='$6%6*•  0-e4*LE$?%6*-Q-578%6*&-*/01*-5*2K2&=?#,_'

•  M?D8?%#-=4*/01r-D*-*%'#$46*-5*,#hZ%"2_'•  B-$$45-"#46*/U-#64*-*/,'?CC8-*-5*,#hZ%"2_'•  /01*Ä46#-$?N-$*-5*,#hZ%"2_'

AO*

Page 26: SVG - Scalable Vector Graphics: Uma Introdução Prática

!"#$%"&#$&'()$*$+,'-."&

$*,/%"*0&1")$*&$&,)'+*(')2+1/'&

,)'-"*&$&()$$+13/!$+,"&

!"#$"%&$'&()*+'&,+"#$"%-'%.)/'0123*)435%6&

Page 27: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%"&#$&'()$*$+,'-."&/)012'&

•! !"#$%&'($)(*+,('-&(.$'$/01.&'($)(2&/%$3%&'(45672&'(8/.898.:18'(

•! ,5:;&'<(74:51'<($%2=('-&(.$'$/01.&'(2&)&('$(21.1(:)(>&''$(:)1(%$?1(@21/91'A(;5B;581(

•! C&(;5&2$''&<($>$8%&'(.$()6'2151<(%51/';15D/281<($%2=('-&(?$91.&'($)(2&/%1(

•! E6(%5D'(F;&'(.$($?$)$/%&'(45672&'($)(*+,(

•! 74:51'(@2:591'<(?8/01'<($%2=A(

•! %$3%&(

•! 8)14$/'()1%582818'(@"8%)1;'<(51'%$5(8)14$'A(

G(

Page 28: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*(+,%&'-(*($*.$/(

•! !"#$%&'()(*)+*,(-,.)/(')%(-"0*&.&'(1,/(.,"'(&*%"2$*,'(•! 0&**#12"3*#$/(34556(

•! 1,0*,%0,7(,$($&'4/(3'*%,8)6(

•! 9(*%&:,(;(.)')0<&.,(-)5,(1)0*%,(.&(2,%.&(.,(,2=)*,(3,$(0,(/)",(.&(5"0<&6(•! >)*&.)(.,(*%&:,()'*?(.)0*%,(.&("/&#)/7(/)*&.)()'*?(@,%&(

•! A,.)B')(C&%"&%(&($&'#-0'&5#1"'(.)(*%&:,'()(-%))01<"/)0*,'(

•! D?(*%E'(F-,'(.)(GF0*&G(H$)(-,.)/(')%($'&.&'(-&%&(-"0*&%(*%&:,'()(-%))01<"/)0*,'(•! I,%)'('J5".&'(3'KLM6(

•! L%&.")0*)'(3.)#%&.E6(

•! A&.%N)'(3*)+*$%&'6(

•! O."1",0&5/)0*)7(H$&5H$)%(,-)%&:P,(.)(-"0*$%&(-,.)(')%(•! 45*%&.&(31,/(&5#,%"*/,'(.)(45*%,(."C)%','6(

•! %)1,%*&.&()(1,/-,'*&(31,/(/?'1&%&'7(15"--"0#()(,-)%&:N)'(.)(1,/-,'":P,(#%?41&( Q(

Page 29: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'(&()*$'(+&(+"+$'(

•! !"#$%&'(&)(*++(&(+!,(-.)(/012"2&'(

•! +!,(/'"(+&,"-#.'(&(/$0.&1.$'(3"%"(2&'4$5%1%(/012"2&'(2&(6"#$%&'("5'$#/-$'(

•! 789(318&#':(;%"/':('&;/02$'('<$(2&="/#-'(/'"2$'(&)("#;/)"'('1-/">?&'(@&)($/-%"'(3$2&('&%($5%1;"-A%1$(/'"%(/012"2&'B(

•! C13$'(2&(2"2$'(4$)/0'(/'"2$'(&)(+!,(&(/012"2&'(

•! !"#$%&'@2&;:(;%"2:(%"2B:(()*+&'@':()':(D:(2:(&-4EB(

•! ,&-'@0$)&:(FG=:(&-4EB:(,&-.//''

•! +)-,)"(0#)*'@HB:(1-)234",50'@IJ:(KIJB:((

•! 5"()5-&'@LMNOPOQRSOQ("(MNOPOQRSOPB:(+6'7$($0"()'@LREO&LRQT("UREO&RQTB(

•! .8.:(98.''

•! ,&*+-5*)"(&'@38:(4):(3-:(&):(&-4EB(

•! :"(0'@4$%&':(;%"21&0-&'(&(3"2%?&'B(

•! %5;(0;'<)'=0%&-);'

O(

Page 30: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&

•! !"#$%$%&'(&)*+)$,-"%#&%)".&'%&/%012%3%4&.#$#$%#"%5006%

•! 78%9.:'%/$;&*.$'%#&%#&+;*.%</$%)".%

•! =".%;"/&>6%?@A%#$'B%()*+,-(.$B%/0#""1&

•! =".%)C#*D"%4&@$#&)*/$E6%?@A%2345678B%2694B%2669944&

•! =".%F<;,-"%G2HA%#*-:;<<=9=9>B%#*-:?;@=AB=5;>B%#*-:9C=<9C=?99C>&

•! IJ$*@"%K8.*$'%F"./$'%#&%&'(&)*+)$.%)".&'%J8'*)$'%

•! !"# ! !"##$$$$!"#$$! !%&'()$$*+!!$*+!!$*,!%&'(-..+!!$+!!$,!

•! $!""%! !"$$##$$!"$#$! !%&'(!!$*+)$$*+!!$*,!%&'(!!$+-..+!!$,!

•! &'("! !"$$$$##!"$$#! !%&'(!!$*+!!$*+)$$*,!%&'(!!$+!!$+-..,!

•! )"''*+ !"####$$!"##$! !%&'()$$*+)$$*+!!$*,!%&'(-..+-..+!!$,!

•! ,-$"%.- !"##$$##!"#$#! !%&'()$$*+!!$*+)$$*,!%&'(-..+!!$+-..,!

•! /)-%! !"$$####!"$##! !%&'(!!$*+)$$*+)$$*,!%&'(!!$+-..+-..,!

•! +01."! !"######!"###! !%&'()$$*+)$$*+)$$*,!%&'(-..+-..+-..,!

•! &'-/2! !"$$$$$$!"$$$! !%&'(!!$*+!!$*+!!$*,!%&'(!!$+!!$+!!$,!

L%!"#$%&"$'($)*+)&,-./"'$,-."010"(&2&"3.4$'"567*8.'"

Page 31: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!""#$#$%&'(%#$)#"*+#

•! !"#$"%&'"#(")*'"#+),)#-',$".#/'01$".#&),2(,)#*$#1,)3'.#$1-4#"5'#*$,67)*'"#*'#899#:8)"-)*602#91;&$#9<$$1"=#

•! 9$#7'->#-'0<$-$#899.#"$,?#/?-6&#)+&6-),#-',$".#1,)3'".#/'01$".#$1-4#$@#9AB#

•! C$2,)"#*'#899#+'*$@#"$,#)+&6-)*'"#)#7?,6'"#$&$@$01'"#*'#9AB#(")0*'#'#)1,6D(1'#%,-'$!

!"#$%&!'()*+)!,()-+)!./0&1()2-+)!1$/31&()2++)!4&,5$()4&#67$8./0&19!:;!4&#67$9!<5=$;!>/559!,$556.)!?@!

•! A?,6'"#)1,6D(1'"#+,E+,6'"#*'#9AB#,$-$D$@#*$-&),)3F$"#$#/(03F$"#*'#899.#-'@'#.''.#$#%,/(0$#

!"#$%&!'()*+)!,()-+)!./0&1()2-+)!1$/31&()2++)!>/55(),$556.)!4&#67$()<5=$)!4&#67$8./0&1():)?@#

G#

Page 32: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&"'()&(*+'(),-)./0),)1..)

•! !"#$"%&'('&)*'&*+#,-&*&*-&.-#*•! /+#,-0*

•! /+#,-1+(2%340*

•! /+#,-1)%5&0*

•! /+#,-1)%5&1('67)-0*

•! /+#,-1)-"&-890*

•! /+#,-1)-43&0*

•! /+#,-1:("%(,-0*

•! /+#,-1;&%<9-0*

•! /'%"&8=#,0*

•! /3&>&"1)$(8%,<0*

•! /-&.-1'&8#"(=#,0*

•! /7,%8#'&1?%'%0*

•! /;#"'1)$(8%,<0*

•! @7-"()*$"#$"%&'('&)*

•! /83%$0*

•! /8#3#"0*

•! /87")#"0*

•! /'%)$3(40*

•! /#:&"A#;0*

•! /:%)%?%3%-40**

•! BCD*$#))7%*27%-#)*#7-"#)*(-"%?7-#)*E7&*$#'&2*)&"*7)('#)*-(,-#*8#2#**"#$%&"'()234)8#2#*8#2#*5#'5#$,+*+,()1..)

F*

Page 33: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&$'#()*"$%&$&"+(#$,--$

•! !"#$%&'()')&*#"'+,,'-"().'&)/'%-#01%(%&'%'2.',34'()'(2%&'5"/.%&'

•! +%//)6%7("'2.%'5"#$%')89)/7%':0&9"';'5)09"'()'%1"/("'1".'%')&-)10<1%=>"'?@AB'

!"#$%&$'(%)$*))'+'(,)-.')#'/0$$.+*1)2-.)$'3%450$$.+"6+

•! C.D2*7("'%'5"#$%').'D#"1"'E&9F#)G'!$'(%)+'(,)-.')#'/0$$.6+

++++7+8249'&2:;3%(<+$:9$&$)132=+$'14>)<+?;;@+

++++7571:2304+1)0'A+BC:1+823%%<+17CDEFFGAHFGAEFGI@+

!/$'(%)6+

•! H"()I&)'071#20/'7"'D#"1"'."/0(&1$J2%#J2)/'%9/0D29"'&2-"/9%("').',34'

K'

Page 34: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$$%$&%&'($&

•! !"#$%&'()*+(,&-$.('$/(/$0$/$1234-&'($.(0&564'(-$($'75&(8))(-$(9:/34'(0&/.4'(

•! ;%/49<'(-$(=.(3-$17>24-&/(=1?9&2&(@3-A(

•! ;%/49<'(-$(=.4(254''$(@254''A(

•! ;%/49<'(-$(&=%/&'('$5$%&/$'(8))(@$BC(1&.$(-&($5$.$1%&A(

•! ;%/3"=%&(254''(-$>1$(=.4(254''$D((

•! *:/3&'($5$.$1%&'(,&-$.(,$/%$12$/(E(.$'.4(254''$(

!!"#!$%&''()*&++&),,,-!!!"+.$/!$%&''()*&++&)!,,,-!

•! !(4%/3"=%&(3-(<(=.(3-$17>24-&/(

•! FG&(,&-$(649$/(&=%/&($5$.$1%&(2&.(&(.$'.&(3-(!"#!01()#+&20$3)-!

•! H$0$/I1234(4(254''$'($(3-'($.(=.4(0&564(-$($'75&(8))(,*&++&!4235/62&70%89!$3+*.%:!

;#+&20$3!420%%9!8.%%3<:!J(

Page 35: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"##$%&'(#$)*+

•! !"#$,--+%&'()*+',$,+$(#-(&$.//0$1&(&$#"1#2)32&($+4&$%*"+5+#$)(6$1(##728#($+4$,*9#',$•! !"#$%&'''&!"##()"*+,-../0-../0./1)&23&

•! !"#$%&'''&4%56#()!"##$"*+,-../0-../0./1)&23&

•! :$2,41,7#7'#$&;<&=$,+$'(&7"1&(>72)&$?$#"1#2)32&@,$"#1&(&@&4#7'#$7&$1(,1()#@&@#$,--.*/0%')1+

•! A&()&$@#$B$%'(&7"1&(#7'#0$&$C$%,1&2,0D$

CB$

!7896&:#"4;<=()-'.)&#=$<>;=*()?@ABC)73&

!4:*&896=4()D%%EF22GGG'GH'<"*2I...24:*)&&

&&&&&G;>%D()-../)&D#;*D%()-../)3&&&&&!$;"$6#&"()J.)&$8()-..)&$5()-..)&!"##%&'())*&23&&

&&&&!$;"$6#&"()J.)&$8()-IJ)&$5()-IJ)&!"##%&'())*&++

+++++++++++++++++++++++++++++++++++++!"##,-./0"12%&345&23&&

&&&&!$;"$6#&"()J.)&$8()-J.)&$5()-J.)&!"##%&'())*&++

+++++++++++++++++++++++++++++++++++++!"##,-./0"12%&346&23&&!24:*3&

Page 36: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&•! !"#$%&'

•! (!)&*+,*-'-'*$#'.$'"#-/$'

•! !"#$%&01+."2'•! (!)&!!3#-'

•! !"#$%&0$)-*+"4'•! 567&8'.&'"#-9!)-#:9*+-';-8<-='

•! !"#$%&0.-!2-##-4'•! 8+!"-'.&'7-8$#&!')-#-'"#-*&>-.$';!&?@:9*+-'.&'"#-/$!'&'7-A+$!='

BB'

!"#$%&'()*+,-./012/&(-3,4+-5./6789:/";&

!*'5&#$%-*./<==>?@@AAA1AB1,)5@C222@*'5/&A+4=<./022D/&<(+5<=./022D/;&

&&&&!3+)3%(&)./E2/&3#./022/&3F./022/&!"#$%&'()#&&*(+G+%%9,>H3+=F./2/&&

&&&& &!"#$%&,-./"0'(1(+!"#$%&,/2!02##23'(4+4(@;&&

&&&&!3+)3%(&)./E2/&3#./0CE/&3F./0CE/&!"#$%&'()#&&*(+G+%%9,>H3+=F./2/&&

& &!"#$%&,-./"0'(4(+!"#$%&,$526."3'(784(@;&&

&&&&!3+)3%(&)./E2/&3#./0E2/&3F./0E2/&!"#$%&'()#&&*(+G+%%9,>H3+=F./2/&&

& &!"#$%&,-./"0'(97(+!"#$%&,$526."3'(789(@;&&

!@*'5;&

Page 37: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'(#$)*"#%&'+,'-..','&#$%/,'

•! -..0$".,!"#$#%&'$()(&*&#$++()(,#-&',."(

•! /(01&(23$#.&3&(012#+$(2(451'2(.&6(62,7(+&(162(8$'+2(9&:;(8$'+27(,#.&'#27<(

•! &#$%/,0.)1,2(3!"81=()('$1#+()(7012'&()(,#-&',."(

•! >$6$(7&(2?'&7&#.26(27(&:.'&6,+2+&7(+&(162(@,#-2(

•! &#$%/,0.)1,4%)1!"6,.&'()('$1#+()(8&*&@()(,#-&',."((&((&#$%/,05)#,$.)5)#!"*2@$'"(

•! >$6$(7&(2?'&7&#.26($7(*A'B3&7(+&(@,#-27C(?$@D5$#$7(&(451'27(&6(5&'2@(

•! &#$%/,0+(&6%7&,#!"*2@$'"(

•! ?$7,EF$($#+&(3$6&E2($(.'23&G2+$(+$(3$#.$'#$H(&77&(2.',81.$(?$+&(7&'(2#,62+$(?2'2(3',2'($(&I&,.$(+&(.'2E$7(&6(6$*,6&#.$(

JK(

Page 38: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&%'()*

•! !"#$%&'()*#+,&-./#0*#*/1&,#0'+*2*34*/#.,/#

.2()'5,/#678#*#9:;<#=,>#678#&,=.&'?.0,/#3.#

%./4.#*@*>%&,/AB!#

•! ;,0'C()*#.&D)>./#2*D2./#0*#*/1&,#E*@F#=,2*/#,)#

+,34*/G#*#5*H.#,#()*#.=,34*=*#=,>#.#%ID'3.#*#=,>#

,#D2IC=,#678#

!J#

Page 39: SVG - Scalable Vector Graphics: Uma Introdução Prática

!"#$%&'()&*+%&'

!"#$"%&$'&()*+'&,+"#$"%-'%.)/'0123*)435%6&

Page 40: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*'"+&'(

•! !"#$%&'()*+,%"&"'(

•! -%*.+/(0(1*+23#$4,(

•! -."%.4*/(0(56%.$4,((

•! -*44"7'*/(0(84"7'*((

•! -4"3*/(0(9"3:&(%*+&((

•! -7,4;4"3*/(0(9"3:&(.,<(<=4>74,'('*#<*3+,'(

•! -7,4;#,3/(0(?,46#,3,( ((

•! @"+<&7'(

•! -"<&#*/(0(A<&#*<(?BC(,$(D?8C(

E(

Page 41: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*+,"-#.*

•! !"#$%&"'()•! /**)+''#,-./,/)-(0&-#,/)

•! 0**)+''#,-./,/)(&1-#$'#)

•! 123#4**)2/#3&#/))

•! 4"2&4#**)/2"&#/))

•! ,/**),$("4.+$/)5'#$6'."/2)1/#/)+/."'()/##-,'.,/,'()7'1+$'./28)

•! ,0**),$("4.+$/)9-#:+/2)1/#/)+/."'()/##-,'.,/,'()7'1+$'./28)

;)

!"#$%&'()*+)&,()+-)&./0%1()2-)&1#/31%()2-)&&

! !"#$%&'()*$''+)!,-../%012-#3()4)!"#$%&'/5-6#7()8)!!

! !"#$%&'/61"71$$13()9!9):;!!

!"#$%&'()+-)&,()4+-)&./0%1()4*+)&1#/31%()4*+)&"'()5-)&",()5-)&

! !"#$%&'()$'6)!,-../%012-#3()4)!"#$%&'/5-6#7()9)!!

! !"#$%&'/%012-#3()4<9)!:;!!

!"#$%&'()4+-)&,()+-)&./0%1()4+-)&1#/31%()4+-)&&

! !"#$%&'()*$''+)!,-..()=.>')!,-../%012-#3()4<?)!!

! !"#$%&'/5-6#7()?4)!"#$%&'/%012-#3()4<?)!:;!

Page 42: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()$*#$&+,(

•! !"#$%&"'()•! $-(*)+''#,-./,/),')+-."#')

•! $.(*)+''#,-./,/),')+-."#')

•! #)*)#/$')

•! 0/$')1)'%#$2/"3#$')

4)

!"#$"%&'"()*+,-*'".)*+,-*'$)*+--*''

' ''/#%%)*$0123--456-45-47*''

' ''89$:;&)*.&%%:<*'89$:;&=<#>9?)*+-*''

' ''89$:;&=:@A"#9.)*-B,*CD''

!"#$"%&'"()*6,-*'".)*6+-*'$)*3+-*''

' ''/#%%)*.&%%:<*'/#%%=:@A"#9.)*-BE*''

'' ' ''89.%&)*/#%%=:@A"#9.F'-BEG''

' ' ' '89$:;&=<#>9?F'+-G'89$:;&F'1%H&G''

' ' ' '89$:;&=:@A"#9.F'-B6G'/#%%F'0$&&I*'CD'

Page 43: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'"()*+'&,*"#+-&

•! !"#$%&"'()•! ./&*)+''#,-./,/)0),')1#$2-$#')1'."')

•! 0/&*)+''#,-./,/)3),')1#$2-$#')1'."')

•! .1&*)+''#,-./,/)0),')(-4&.,')1'."')

•! 01&*)+''#,-./,/)3),')(-4&.,')1'."')

•! !)'2$((5'),-)&2)6/7'#)8)+'.($,-#/,')9-#':)

;)

!"#$%&'()*+,*&-()*,.*&'+)*(/.*&-+)*(/.*&&

&!"#$%&'()*+&(,!"#$%&-./0"1'(2(,!"#$%&-03!13##34'(5,5(67,,

!"#$%&'()*,.*&-()*(,.*&'+)*(+,*&-+)*(+,*&&

&!"#$%&'(#&0(,!"#$%&-./0"1'(5(,!"#$%&-$839/"4'(:;5(67,

!"#$%&'()*(,.*&-()*,.*&'+)*(,.*&-+)*(,.*&&

&!"#$%&'(<#&&=(,!"#$%&-./0"1'(>:(,!"#$%&-$839/"4'(:;>(,67,,

Page 44: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'(&""#$%&)'

•! !"#$%&"'()•! *+'*)+''#,-./,/)0),')+-."#')

•! *,'*)+''#,-./,/)1),')+-."#')

•! -+'*)#/$')2'#$3'."/4)

•! -,'*)#/$')5-#6+/4)

7)

!"#$%&'()"*+,--./00111213245$067770"#$+%%

%%189-,*+:77;+%,<8$,-*+:77;+=%

!!!!"#$$%&'#!()*+,--+!(.*+/--+!0)*+/1-+!0.*+1-+!!

! !>8((*+?<((41+%>8((@4.AB8-?*+72C+%%"-54D<*+E(F<+%%

% %"-54D<@189-,*+:+%"-54D<@9A",A55A?*+C%C+0=%%

!!!!"#$$%&'#!()*+,2-+!(.*+/2-+!0)*+32+!0.*+/,2+!!

! !>8((*+5<9+%>8((@4.AB8-?*+726+%%"-54D<*+5<9+%%

% %"-54D<@189-,*+C+%"-54D<@4.AB8-?*+72C+0=%%

%%%%"#$$%&'#!()*+4--+!(.*+,--+!0)*+5-+!0.*+/2-+!!

! !>8((*+E(ABD+%>8((@4.AB8-?*+7+%"-54D<*+$5<<)+%%

% %"-54D<@189-,*+67+%"-54D<@4.AB8-?*+726+%0=%%

!0"#$=%

Page 45: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*+)%&,+-).)"#/0&

•! !"#$%&"'()

•! +-"#12&*)&+,)-$(",)./))0''#./1,.,()0'+)'()2'1"'().,)-$13,)

4)

!"#$%$&'()"#&'*+,-./01./0))

) ) ) ) )/01./0))

) ) ) ) ).00120))

) ) ) ) )./01/0))

) ) ) ) )2001200))

) ) ) ) )/01200))

) ) ) ) )201./3))

) ) ) ) )34142))

) ) ) ) )52120-)6&$$,-%($$#7-)6&$$8#"9:&*%,-0;2-)))

) ) ) ) ) ) )+*<#=(,-<(>-)+*<#=(87&>*?,-.0-@A))

Page 46: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%"&"'

•! !"#"$%&'(")&)*+$,$-'".)#&/)0)/"#*1")2#&)

3421&)5"6%&7&)

•! 8(1-92(+/)

•! (")&*+':)$-/(&)7")6++17"'&7&/))

6+#)+/);01<6"/)7+)*+$=4+'+)

>)

!"#$%&#'("#)'*+,-(./01./0(((((/012/0((((/01./0(((.001/0((

( ( ( ( (2001/0(((((2/01.00(((3001./0(((3/012/0((

( ( ( ( (2/012/0-((

( (4)$$,-567-(4)$$8#"9:)*%,-0;2-(((

( (+*5#<68#"9:)*%,-0;/-(+*5#<6,-'9=%-((

( (+*5#<68>)7*?,-.0-(+*5#<68$)'6:9",-5#@'7-((

( (+*5#<68$)'6A#)',-5#@'7-((

( (+*5#<6879+?9559%,-B0(20(/(20-CD((

Page 47: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'(

•! !"#$#%#&'(")*"#$%+()#*%+'#"+&,#*+*"-%."+%./#%"012"(-"3042"#%"-%"/*567("892"•! :"+%./#%"+&,#*+;.")(;#",#*"-,.;."#%"7$+))+&/<"%5,7.*.,<")*##&7=+%#&'(<").;*>#,"

•! 0(;#?,#"/+*.*<".$'#*.*".")*()(*@A("#"'.%.&=(<"#'7B"

C"

!"#$%&'()*+,-'.,%*/'$*)+,0'.,%#/1"'2.+,343,%

%%567."+,*))89::&&&4&0421$:;<<<:"#$,%%

%%567."957'.=+,*))89::&&&4&0421$:3>>>:57'.=,?%

%%!"#$%&'()*+,,*'-)*+,,*'."/01)*2,,3(*'1&"%10)*2,,3(*'

''''(4"56718&9)*"#$%&#:35%*;'

''''!0"04&;<#$'"#$%&#!=0"04&;'

''!="#$%&;%

!:"#$?%

Page 48: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&%'()*

•! !"#$%&'$()$*+,'*-.*/,%'-.*01.&+-.*2,*345*$*/-6-*2$.$(7,.*8.-(2,*+,,-.9*)/$(0#-.*

•! :.*2$.$(7,.*(;,*#%$+&.-'*.$%*$"-),.*

•! 38<$.)=$.>*

?@*

Page 49: SVG - Scalable Vector Graphics: Uma Introdução Prática

!"#$%#%$&'()'()*%+!,#)'

-$%.)"/'"0+1)2)"'!'+&$*&()$!"'

$!%")'(!')13!#)"'.)$'$!4!$5,*6&'

!"#$"%&$'&()*+'&,+"#$"%-'%.)/'0123*)435%6&

Page 50: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%#%$&'()'%*'(+,%*)-#+'

•! !"#$%&'(")*+,-*!"#$%&.&#/0101*23$10)*#"%"*&/&%&'(")*.&*415%&51"*'67&/*/"3"*08059"*."*&/&%&'("*."/01'•! :;*%$5(0*$)2)345+<*01=$57")*310'.&)*&*5'&2#5&'(&)*

•! >.&0/*?*$)%"&$'#"%4"'&'(&)<*@*&2#5&'(&A*@*B;#5/*.&*%0'(&1C3&101*

•! +,-*)$3&1&*$%0*&)(1$($10*4010*"130'5D01*"*."#$%&'("*

E*

!"#$%&'()"*&(+),-./001*22333435467$289992&(+),.%%

%%%%%&'()"-./001*22333435467$2:;;;2"#$.%3+<0/-.8;=;.%/>+$/0-.?;;.%#+>3@6&-.;%;%8;=;%?;;.A%

%%%%!7>B0%&-.;.%C-.;.%3+<0/-.:;.%/>+$/0-.:;.%D+((-.7$EF?GH5:H5:I.%07J)"D67'-.07J)"(J0>F:;I.%2A%

%%%%!7>B0%&-.;.%C-.;.%3+<0/-.:;.%/>+$/0-.:;.%D+((-.7$EF:==H::=H:;;I.%%07J)"D67'-.07J)"(J0>FG;I.%2A%

%%%%!7>B0%&-.;.%C-.;.%3+<0/-.:;.%/>+$/0-.:;.%D+((-.7$EF?GH5:H5:I.%07J)"D67'-.07J)"(J0>F?;I.%2A%

%%%%!7>B0%&-.;.%C-.;.%3+<0/-.:;.%/>+$/0-.:;.%D+((-.7$EF:==H::=H:;;I.%%07J)"D67'-.07J)"(J0>FK;I.%2A%

%%%%!7>B0%&-.;.%C-.;.%3+<0/-.:;.%/>+$/0-.:;.%D+((-.7$EF?GH5:H5:I.%07J)"D67'-.07J)"(J0>F8;;I.%2A%%%%%!7>B0%&-.;.%C-.;.%3+<0/-.:;.%/>+$/0-.:;.%D+((-.7$EF:==H::=H:;;I.%%07J)"D67'-.07J)"(J0>F8:;I.%2A%

%%%%!7>B0%&-.;.%C-.;.%3+<0/-.:;.%/>+$/0-.:;.%D+((-.7$EF?GH5:H5:I.%07J)"D67'-.07J)"(J0>F8G;I.%2A%

%%%%!7>B0%&-.;.%C-.;.%3+<0/-.:;.%/>+$/0-.:;.%D+((-.7$EF:==H::=H:;;I.%%07J)"D67'-.07J)"(J0>F8?;I.%2A%

%%%%!7>B0%&-.;.%C-.;.%3+<0/-.:;.%/>+$/0-.:;.%D+((-.7$EF:==H::=H:;;I.%07J)"D67'-.07J)"(J0>F:;H:;I.%2A%

%%%%!7>B0%&-.;.%C-.;.%3+<0/-.:;.%/>+$/0-.:;.%D+((-.7$EF?GH5:H5:I.%07J)"D67'-.07J)"(J0>FG;H:;I.%2A%%%%%!7>B0%&-.;.%C-.;.%3+<0/-.:;.%/>+$/0-.:;.%D+((-.7$EF:==H::=H:;;I.%07J)"D67'-.07J)"(J0>F?;H:;I.%2A%

%%%%!7>B0%&-.;.%C-.;.%3+<0/-.:;.%/>+$/0-.:;.%D+((-.7$EF?GH5:H5:I.%07J)"D67'-.07J)"(J0>FK;H:;I.%2A%

%%%%!7>B0%&-.;.%C-.;.%3+<0/-.:;.%/>+$/0-.:;.%D+((-.7$EF:==H::=H:;;I.%07J)"D67'-.07J)"(J0>F8;;H:;I.%2A%

%%%%!7>B0%&-.;.%C-.;.%3+<0/-.:;.%/>+$/0-.:;.%D+((-.7$EF?GH5:H5:I.%07J)"D67'-.07J)"(J0>F8:;H:;I.%2A%

%%%%!7>B0%&-.;.%C-.;.%3+<0/-.:;.%/>+$/0-.:;.%D+((-.7$EF:==H::=H:;;I.%07J)"D67'-.07J)"(J0>F8G;H%:;I.%2A%%%%%%444%

%%%%!7>B0%&-.;.%C-.;.%3+<0/-.:;.%/>+$/0-.:;.%D+((-.7$EF:==H::=H:;;I.%07J)"D67'-.07J)"(J0>F8G;H8G;I.%2A%

%%%%!7>B0%&-.;.%C-.;.%3+<0/-.:;.%/>+$/0-.:;.%D+((-.7$EF?GH5:H5:I.%07J)"D67'-.07J)"(J0>F8?;H8G;I.%2A%

!2"#$A%

FG*=$0.10.")*

!!"#$%&'("

)*+,,"-&'.("

Page 51: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$#%&'()#(&*+&+*,-()

!"

!"#$%&&&%#'()*+,-./%/%01//%2//.%%

%%%%%%%%%)'345-.01//6,.%5('$54-.2//6,.%7%

%%%%!"89'647&&&!:"89'647%!"4;<(7&&&!:"4;<(7%%%%%!3(="7%

%%%%%%%%!<'>(?9@9?3'(>4%'3-.?98+'9'".7%&&&%!:<'>(?9@9?3'(>47%

%%%%%%%%!='<4(9%'3-.3("=+AB(.7%&&&%!:='<4(97%

%%%%%%%%!6?44(9>%'3-.$9?3(.7%&&&%!:6?44(9>7%

%%%%%%%%!C?9D(9%'3-."(4?.7%&&&%%!:C?9D(97%%%%%%%%%!$%'3-..7%&&&%!:$7%

%%%%%%%%!";CE+<%'3-.3'+3+.%7%

%%%%%%%%%%%%!4'4<(7F'+3+!:4'4<(7%

%%%%%%%%%%%%!3("87G'CE+<+%3(%3'+3+%8+CBC&!:3("87%

%%%%%%%%%%%%!9(84%,-.1.%;-./.%&&&%:7%%%%%%%%%%%%%!6+<;$+>%6+'>4"-./H/%0/H/%IHJ.%:7%

%%%%%%%%!:";CE+<7%

%%%%%%%%!";CE+<%'3-.49?>"'"4+9.%%

%%%%%%%%%%%%%%%%#'()*+,-.K0%K0%LL%LL.7%&&&%!:";CE+<7%

%%%%!:3(="7%

%%%%!B"(%,<'>DM59(=-.N3'+3+.%%%%%%%

%%%%%%%%%,-.I/.%;-.I/.%5('$54-.LI.%)'345-.LI.:7%

%%%%!B"(%,<'>DM59(=-.N49?>"'"4+9.%%

%%%%%%%%%,-.0//.%;-.I/.%5('$54-.I/.%)'345-.I/.:7%

%%%%!$%49?>"=+9C-.49?>"<?4(OL//HP/Q%"8?<(%OK0H0Q.7%&&&%!:$7%

!:"#$7%

!"#$#%&'()*+,-(

./#01'2(/%/3/4"(

536/7&*(#(855(

1"'3'(9#(9#:%/;<#*((((((=649/#%&#*(

>/"&6'*(

?496<#*(

@46349'6#*(

=6A7'*(

5B$C'"'*(

D'3A$#%&4;E'(

5AC3'$7'%#%&#*(

+/#01'2("'34"(

FCG#&'*(6#H#6#%3/49'*(

=6A7'*(

Page 52: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'(")&*(+$($+,-")

!"

!"#$%&'()"*&(+),-./001*22333435467$289992&(+),.%&'()"-./001*22333435467$2:;;;2"#$.%%

%%%%%%%%%%%3+<0/-.8;=;.%/>+$/0-.?;;.%#+>3@6&-.;%;%8;=;%?;;.A%

%%%%!<>B"A%

%%%%%%%%!7>C0%+<-.17>06.%%&-.;.%D-.;.%3+<0/-.:;.%/>+$/0-.:;.%B+((-.7$EF?GH5:H5:I.%2A%

%%%%%%%%!7>C0%+<-.E7J)C6.%&-.;.%D-.;.%3+<0/-.:;.%/>+$/0-.:;.%B+((-.7$EF:==H::=H:;;I.%2A%

%%%%%%%%!$%+<-.KLJ076MJ"J".A%

%%%%%%%%%%%%!L">%&(+),*/7>B-.N17>06.%2A%

%%%%%%%%%%%%!L">%&(+),*/7>B-.NE7J)C6.%07J)"B67'-.07J)"(J0>F:;I.2A%

%%%%%%%%%%%%!L">%&(+),*/7>B-.NE7J)C6.%07J)"B67'-.07J)"(J0>F;H:;I.2A%

%%%%%%%%%%%%!L">%&(+),*/7>B-.N17>06.%%07J)"B67'-.07J)"(J0>F:;H:;I.2A%

%%%%%%%%!2$A%

%%%%%%%%!$%+<-.B+(>+7JOL1(J.A%

%%%%%%%%%%%%!L">%&(+),*/7>B-.NKLJ076MJ"J".%2A%

%%%%%%%%%%%%!L">%&(+),*/7>B-.NKLJ076MJ"J".%07J)"B67'-.07J)"(J0>FG;I.%2A%

%%%%%%%%%%%%!L">%&(+),*/7>B-.NKLJ076MJ"J".%07J)"B67'-.07J)"(J0>FP;I.%2A%

%%%%%%%%%%%%!L">%&(+),*/7>B-.NKLJ076MJ"J".%07J)"B67'-.07J)"(J0>F8:;I.%2A%

%%%%%%%%!2$A%

%%%%%%%%!$%+<-.0JEL(>+76.A%

%%%%%%%%%%%%!L">%&(+),*/7>B-.NB+(>+7JOL1(J.%2A%

%%%%%%%%%%%%!L">%&(+),*/7>B-.NB+(>+7JOL1(J.%07J)"B67'-.07J)"(J0>F;HG;I.%2A%

%%%%%%%%%%%%!L">%&(+),*/7>B-.NB+(>+7JOL1(J.%07J)"B67'-.07J)"(J0>F;HP;I.%2A%

%%%%%%%%%%%%!L">%&(+),*/7>B-.NB+(>+7JOL1(J.%07J)"B67'-.07J)"(J0>F;H8:;I.%2A%

%%%%%%%%!2$A%

%%%%!2<>B"A%

%%%%!L">%&(+),*/7>B-.N0JEL(>+76.%2A%

!2"#$A%

!"#$%&'()#

*+,--#.'(/)#

Page 53: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$#%&'$(#

•! %&'$(#!"#$$!%&'()*'&#+#%#,)'&-./&0'*&)$*$)+,-!.&

•! 1+#%#,)'$&2(#&$#*3'&*#4#*#,"5!6'$&6#7#%&)#*&(%&!"#

•! 8&#+#%#,)'&*#4#*#,"5!6'&0'6#&#$)!*&,'&%#$%'&!*2(57'&'(&#%&'()*'9&+'"!+&'(&*#%')'&

•! %&'$(#,3'&%(6!&!)*5:()'$&6'&#+#%#,)'&*#4#*#,"5!6'&

•! -5,)!;#&

!"#$%!"#$%&'()*&'"()'%%

%%%%%!&'*++(,)-./$'%%

%%%%%+&'*++(,)-./$'%%

%%%%%,#-.'&'0$-1/2'%%

%%%%%')#/'.&'0$-1/2'%%

%%%%%#/30$4.//()5"/$&'666'%7./()5#%8)009%#/(+:$9%$/*6;%

<%%

•! <=>&+'"!+&•! =0)-:>2($8&'?-.@$'%%

•! <=>&#;)#*,!&

•! =0)-:>2($8&'66A#/("*/AB#$CD6#E1A?-.@$'%%

?&

Page 54: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'"()*+",(-)

•! !"#$%&'#(")"*+#,"-)+,#-.#,"&-,)%#!/01#&%2%3-"#".#)"45%#*+",(-)•! 6#72%&%#*+",(-)+,.+8"9+#(":9;4<")#

•! =2"."9>%)#("&2+,+(%)#".#*+",(-)95%#)",5%#(")"9?+(%)#@A+,+#(")"9?BC2%1#D#A,"&;)%#,"E","9&;BC2%#&%.#*.("-)

•! F)"#*+",(-)A+,+#G-+,(+,#%7*">%)#3-"#)",5%#,"-)+(%)#&%.#E,"3H'9&;+#

•! I%#,"-)+,#-.#%7*">%1#A%("C)"#.-(+,#)"-#")J2%#"#&%%,("9+(+)#

•! =K".A2%L#

M#

!"#$%&&&'%

%%!()*"'%

%%%%!+),-%.(/0!"#$%0%1/020%3/020%4.(-5/0620%5).$5-/0620%*.77/0+$89:;<=6<=6>0%?'%%%%%!+),-%.(/0&"'()%0%1/020%3/020%4.(-5/0620%5).$5-/0620%*.77/0+$896@@<66@<622>0%?'%

%%!?()*"'%

%%!A")%17.BCD5+)*/0*!"#$%0%?'%

%%!A")%17.BCD5+)*/0*&"'()%0%-+EB"*F+G/0-+EB"7E-)962>0?'%%%!A")%17.BCD5+)*/0*&"'()%0%-+EB"*F+G/0-+EB"7E-)92<62>0?'%

%%!A")%17.BCD5+)*/0*!"#$%0%%-+EB"*F+G/0-+EB"7E-)962<62>0?'%

!?"#$'%

Page 55: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*'

•! !"#$%&'!"#$%&"$'&#(&(#')$'*+,-),&+'."'+/-"&+0'*+$+')$'01'

•! 2'3#)!+'*+$!+#&(40"'*+$+')$'+/-"&+'5,%*+'

•! 67"$",&+0'*+,8.+0',+'3#)!+'9"#.($'"087+0'"'(&#%/)&+0'*+$),0'

•! :+."$'*+,&"#'+)&#+0'3#)!+0'

•! ;%,&(<"'!"#$%&'()*+'##

###!"#$%&"'()*+)+("$,'))

###,-.(/0)-*&'-'.!/*'()*+)"#!/(0'#.!12''1##

##!23#4)(,+5%)#%)#"-56)#771##

!8"1'

='

!/9"#:::1#

##!%+0/1#

####:::#####!"#$%&'!"#$%&'#(#('#,-.(/0)-*&',-.(/;.,+<=>?=>@'1#

######!5/+#A;$(BCD-+0&'E6-+,)'#81#

######!5/+#A;$(BCD-+0&'EF-.(4)'#,-.(/0)-*&',-.(/;.,+<G>@'81#

######!5/+#A;$(BCD-+0&'EF-.(4)'#,-.(/0)-*&',-.(/;.,+<>?G>@'81#

######!5/+#A;$(BCD-+0&'E6-+,)'##,-.(/0)-*&',-.(/;.,+<G>?G>@'81#####!8"1#

##!8%+0/1#

##)"(*+,-./012%*3456!"#$%&'#(#(5+78#

!8/9"1#

Page 56: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'%'!(%)*&'

•! !"#$%&'!"!(%)*&'#$%"!&!'!()%#"*#+,%#"-+.+",%/*'!()+."*'"012"

•! 3%,!'"#!."*#+,%#"!'"+,-$+,%.'!&!'!()%"

•! 4"56#*+&67+,%."($%"-.!/6#+"'%#).89&%#"

•! 2!.+&'!()!"!"#$%&'+-+.!/!"/%'%"!""#$%&:"%"'!#'%"-%,!"+/%()!/!."/%'"!(%)*&'

;"

!"#$%&'()*+,-$./'0#

#!($(,-012(/#-3#+4#()*+,-$./!5($(,-0#

#!%-2607#()*+,-$./#8#6/92(.+$%/#%)#2-"+$9(-#:::!5%-260#

####!+2-#;,$9<=3.->&'?>$,-$.)@+A,)'#50#

####!+2-#;,$9<=3.->&'?>$,-$.)@+A,)'#(.)92>/.4&'(.)92,)(-BCDECF'#50#

####!+2-#;,$9<=3.->&'?>$,-$.)@+A,)'#(.)92>/.4&'(.)92,)(-BCDGCF'#50#

####!+2-#;,$9<=3.->&'?>$,-$.)@+A,)'#(.)92>/.4&'(.)92,)(-BCDHICF'#50#

!5"0#

<"="!#-!/6>/+?$%"#*@!.!"'+#"($%"%A.6@+"%#"56#*+&67+,%.!#"+"6'-&!'!()+."!#)!"/%'-%.)+'!()%"

Page 57: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&%'()'*#$%&+(

•! !"#)'*#$%&+($#%"&#'(%)&#*+',-*&#.+/0#%1%2)-0#

•! !1+#.&)&#3)-&)#'(%)&1#30"./+4&1#5%+#1+)60#)+%1&*&17#)+*-"+,1-0,&*&1#+#)+.01-3-0,&*&1#

•! 89":0/01#.0*+"#30,;+)#'(%)&17#0%;)01#19":0/017#()%.01#

•! <#%"#+/+"+,;0#+1;)%;%)&/#

•! =&-1#-".0);&,;+#.+/0#5%+#)+.)+1+,;&#*0#5%+#.+/0#5%+#>&?##

•! @03A#;&":$"#.0*+#3)-&)#'(%)&1#30"#),+#B"&1#C(D#*+E+#1+)#%1&*0#.&)&#-,./0-.(0:F+;01G#

•! 89":0/01#,60#160#*+1+,H&*01#&%;0"&I3&"+,;+#B30"0#&30,;+3+#30"#%"#()%.07#1+#+1IE+)#>0)&#*+#%"#C*+>1DGJ#$#.)+3-10#)+>+)+,3-2K/01#B+4J#E-&#)/'1+G#

•! 89":0/01#.0*+"#;+)#%"#23145%6(

•! L#'(%)&#$#(+)&/"+,;+#*+1+,H&*&#*+,;)0#*+#%"#23145%6#M#

Page 58: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&%'(

!"#

!"#$%&'

''!()*+#*',"-.%#/).'000&'000'!1()*+#*&'

''!%2(345',"-.!"#!#.'6,#7849-.:':';:';:.''

''''''''''%/*4+#<4=)>,/2-.:.&'

'''''!*#>/'9-.:.'2-.:.'?#,@?/-.;:.''

'''''''''''7,"/?-.;:.'$,55-.7?,/#.1&'

'''''!=452@4A'=4,A/%-.:B:';:B:'CBD.'1&''''''!*#>/'9-.:.'2-.D.'7,"/?-.;:.'?#,@?/-.E.'1&'

''!1%2(345&'

''!%2(345',"-.$%!.'6,#7849-.:':'E:';:.&'

'''''!F%#'95,A+G?*#$-.&!"#!#.'9-.C.'2-.:.'?#,@?/-.;:.'7,"/?-.;:.1&''''''!=4525,A#'=4,A/%-.;CBH';DBC.'%/*4+#<7,"/?-.0D.'%/*4+#-.35)>+.''

'''''''''''''''()*+#*<#A"-.F*5IJ%#/)K.1&'

'''''!=4525,A#'=4,A/%-.;CBL';DBD.'%/*4+#<7,"/?-.0D.'%/*4+#-.35)>+.''

'''''''''''''''()*+#*<#A"-.F*5IJ%#/)K.1&'

''!1%2(345&'

!1"#$%&'

!@'/*)A%$4*(-./*)A%5)/#IM:BECK'*4/)/#I<N:BECBC:K.&'

''!F%#'95,A+G?*#$-.&$%!.'?#,@?/-.;::.'7,"/?-.;::.1&'!1@&'

!5,A#'9;-.:.'2;-.C:.'9E-.E::.'2E-.C:.'%/*4+#<7,"/?-.O.'%/*4+#-.35)>+.'1&'

$#%&'%(#)(*&+'&#,-.&/#0(%#)*+(

1&20&3(#4'-/#4%#56&78(29:#%-'#

)',#$%&+(;#-#%&<=(/#()>?(#)-/-#

&'3&#@)(#*&#&'3/434/-#

A&4'(#*&#4%#'6%B(<(#&26'3&C3&#

C-#0/6->?(#*&#(43/(#

D'(#*(#'E%B(<(:#0(%#(43/-#

*6%&C'?(#

Page 59: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$"%&#'()*+"#,'#-)

•! !"#"$%&$'(%#)#*"#+,"-(.(#/*0#.&%')('#)$&/$"0'/"%&)")12#3$'()'0#&$"123(+4#.123$+4#5(.,6(2(+#0#5(.1.123$+#

•! 70%$."0280#*+$'(+#5$%$#9$:0%#5(28$+#'0#+08$+#(*#+1"1.$%0+#

•! ;$%$#&%1$%#

•! <0=2$#*"#*+"#,'#-)'$#"0+"$#9(%"$#/*0#*"#>+?"-(.@#

•! !+0#$8%1-*8(+##'45)0##'46)5$%$#"$%&$%#(#5(28(#'0#&(20AB(#

•! <0=2$#$#(%1028$CB(#&("#&#7'/0)D+0#9(%#+08$#*+0#"80&E#

•! F0#+"#,'#9/70()9(%#8('#:."$';/9('4#*+0#+"#,'#<'7=>0)0#+"#,'#?7%0>)5$%$#'080%"12$%#$+#'1"02+G0+#=A$+#'(#"$%&$'(%#

•! F0#+"#,'#9/70()9(%#(0#&,'?7%0>4#(#8$"$23(#+0%H#5%(5(%&1(2$.#I#0+50++*%$#'$#.123$#

•! ;$%$#*+$%##

•! >5$83@4#>.120@4#>5(.?.120@#(*#>5(.?6(2@#8J"#$8%1-*8(+#+"#,'#@'/%4#+"#,'#@(0"#0)(*#+"#,'#@+7%)

KK#

Page 60: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$"%&#'()

!"#

*+*)

*,-)

.*,/)

!"#$%&$'()&*+,-./0'0'10'2/'

''''''''''''''''!"#$%&'&(!"#)%&*&(

''''''''''''''''+!,"-.%&'&3'

'''!4,567,8'4,)89:./'/'((0'/1(('/2/';3'

!;"#$%&$3''

*,0)

!"#$%&$'()&*+,-./0'0'10'2/'

''''''''''''''''!"#$%&*&(!"#)%&1&(

''''''''''''''''+!,"-.%&34.+&3'

'''!4,567,8'4,)89:./0<0''10<=''0<2/';3'

!;"#$%&$3''

0,/)

!"#$%&$'()&*+,-./0'0'10'2/'

''''''''''''''''$&>?./0/'$&>@./A/'

''''''''''''''''+!,"-.%&34.+&3'

'''!4,567,8'4,)89:./0<0''10<=''0<2/';3'

!;"#$%&$3''

!"#$%&$'()&*+,-./0'0'10'2/'

''''''''''''''''$&>?./A/'$&>@./=/'

''''''''''''''''+!,"-.%&'&3'

'''!4,567,8'4,)89:./0<0''10<=''0<2/';3'

!;"#$%&$3''

Page 61: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$"%&#'()')(*+,&-&()

!"#

!"#$%&'

''!()*+#*',"-.!"#$.'/,#0123-.4'4'54'54.'*#$6-.7.'*#$8-.7.''

''''''''''2*,#9:-.);:2.'()*+#*<9,:%-.%:*2+#=,":>.&'

''''!?2@AB29'?2,9:%-.4C4'54C7'4C54.'D&'

''!D()*+#*&'

''!()*+#*'%&'(#"))$(*/,#0123-.4'4'54'E.'*#$6-.7.'*#$8-.4.''

''''''''''2*,#9:-.FG4.'()*+#*<9,:%-.;%#*H?)I#J9<%#.'

''''''''''()*+#*K#,B>:-.5L.'()*+#*=,":>-.MN.&'

''''!?2@A@,9#'?2,9:%-.5C5'GC5.'OOOD&'

''''!?2@A@,9#'?2,9:%-.MO7CP'QO7CP.'OOOD&'

''''!?2@A@,9#'?2,9:%-.NO7C7'7O7C7.'OOOD&'

''!D()*+#*&'

''!B',"-.R)%#S2@#:2*.&'OOO''!DB&'

''!%A(R2@',"-.:*)9%,%:2*TUT.'/,#0123-.F5'F5'MM'MM.&'

'''''!;%#'3@,9+V>*#$-.WR)%#S2@#:2*.'D&'

'''''!@,9#'35-.4.'3M-.G.'A5-.M4.'AM-.54.'OOO'+$),")-".&'(/)012!"#$3(*D&''''''

''!D%A(R2@&'

''!()*+#*',"-.!"#$454.'/,#0123-.4'4'54'54.'*#$6-.4.'*#$8-.7.'2*,#9:-.);:2.''

''''''''''()*+#*<9,:%-.;%#*H?)I#J9<%#.'()*+#*=,":>-.74.'()*+#*K#,B>:-.74.&'

'''''!;%#'3@,9+V>*#$-.W:*)9%,%:2*TUT.'3-.4.'A-.4.'>#,B>:-.54.'0,":>-.54.':*)9%$2*(-.*2:):#XFG4C7C7Y.'D&'

''!D()*+#*&'

OOO'

!D"#$%&'

!B',"-.I,*I;,:25.'%:*2+#F0,":>-.M.'%:*2+#-.R@)I+.'%:*2+#F@,9#I)?-.%Z;)*#.':*)9%$2*(-.:*)9%@):#X4CM7Y.&'

''!B':*)9%$2*(-.:*)9%@):#X74C4Y.&'

''''!?2@A@,9#'?2,9:%-.4C74'M7C74.'+$),")-".&'(/)012!"#$4543(D&'

''''!?2@A@,9#'?2,9:%-.QMCME'QMC4.'D&'

''''!?2@A@,9#'?2,9:%-.QMCQP'QMC544.D&'

''!DB&'

''!B':*)9%$2*(-.:*)9%@):#X5MMC5M7Y'*2:):#XG4C4CM7Y.&'

''''!?2@A@,9#'?2,9:%-.4CM7'P4CM7'E4CM7.'+$),")-+%&'(/)012!"#$6"!3(*+$),")-".&'(/)012#"))$3(D&'

''!DB&'

OOO'

!DB&'

Page 62: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&#"'$()#*+*,)%)-).)/#/+*

•! !"#$%&'#()%*+'#,-#.+%/+%#+#./'/0/1/,+,-#,-#2*#)03-$)#-*#456#

•! 7$%/02$)#0&#()128#*+/'#+0%+9:-9$-#;2-#<11=)>+?/$@#-#'$%)A-=)>+?/$@#B#'-#+>1/?+,)#+#2*#:%2>)C#+(-$+#$),)'#)'#)03-$)'D#?)*#)>+?/$@EFGF#$),)#)#:%2>)#<?+#/9./'H.-1#

•! 7$%/02$)#,)%)-).)128#>),-#'-%#,)%)-.+*)2#3)//+$D#'-#I/,,-9#)#)03-$)#<?+#/9./'H.-1#

•! 7$%/02$)#/)%&.#245$0$+58#9J)#+>-9+'#$)%9+#)#)03-$)#/9./'H.-1C#?)*)#%-*).-=)#,+#"%.)%-#K9J)#L#>)''H.-1#?+>$2%+%#-.-9$)'M#

•! 7#./'/0/1/,+,-#>),-#'-%#?)9$%)1+,+#,/9+*/?+*-9$-#+$%+.L'#,-#'?%/>$'#

•! N),+'#+'#>%)>%/-,+,-'#>),-*#'-%#*+9/>21+,+'#./+#OPQ#K?)*#R+.+4?%/>$M#-#+9/*+ST-'#

•! 4H*0)1)'C#-#;2+/';2-%#,-<9/ST-'#,-#:%2>)'#)2#-1-*-9$)'#-*#6/+7%8*9J)#-U/'$-*#K-#'J)C#>)%$+9$)C#/9./'H.-/'M#-9;2+9$)#9J)#()%-*#%-(-%-?/+,)'#?)*#V2'-W#

XY#

Page 63: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&

•! !"#$%&'()*&$+),-.$),*&',/.$&$&0*&',/.$1*'123.$4&$'('%&56,*&',17/,1+)8&4$9&./:';&$64&,7<&'=>$

•! 9&?&'@;)1.$+/;1).$%/4&($.&'$&.%&;)<;141.$4)'&*1(&,*&$&($1*')A:*/.$4/$BC),-$)*"#$+,-./&

•! !"#$#"#%&'()

•! D($1*')A:*/.$4/.$&+&(&,*/.$!"#$3$%'&;)./$;E1(1'$1$'&?&'@,;)1$1*'123.$4&$:(1$?:,FG/$696$

•! !"#$!"#$#"#%&'(%&

•! 9&?&'@,;)1.$*1(A3($%/4&($.&'$?&)*1.$1$1'H:)2/.$&0*&',/.$

•! *++,-../0&12.13+"10456'"()("(*+,-&

•! !"#$*++,-../0&12.13+"10456'"()("(*+,-%&

•! D+&(&,*/.&012&%&'()*&($+),;1'$%1'1$?/'1$4/$!"#$

•! 7()89'%:-*"#$;<*++,-..///04'+#0&12.(0*+29<=)7"#&+000=)7.(=)

IJ$!"#$%&'"(")'&)("*$'"+,-&".($"+,/&0"

Page 64: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&%'()*

•! !"#$%&'()'"&)&*+()',&-%()'*('&.&/010-('#*%&/-(/'

$#/#'23#'&)%/2%2/#'2)#*"('

•! 4/2$()'&')135(6()'

•! "&,)'

•! 2)&'&'-"'

•! 7(*)%/2#'23'0(3$(*&*%&',(/3#"('$(/'

/&%8*426()9'01/026()9'&%0:'&'#))(0-&'#'23')-35(6('

•! ;&$(-)'2)&'&))&'4/2$('$#/#'0(*)%/2-/'(2%/()'(5<&%()'

•! !/3#=&*&'#)'$#/%&)'&3'#/>2-?()')&$#/#"()'

@A'

Page 65: SVG - Scalable Vector Graphics: Uma Introdução Prática

!"#$%&'()

*$%&"(+)!,-."()/)

"-!'()

!"#$"%&$'&()*+'&,+"#$"%-'%.)/'0123*)435%6&

Page 66: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()

•! !"#$%&'()*+,*+(+%-"#)').'%-'*%')/+)0#")120*")•! 34')/+1%$/'(),'*)(+567%.$"()/+).'#"%/'()8*+,*+(+%-"/'(),'*)

9+-*"(:)+).''*/+%"/"()8,"*+();<=:>)?@A)!"!"#!"$#$%&"#%&"$$"

•! !"/").'#"%/')*+,*+(+%-")')#'B$#+%-')/+)0#),'%-')")'0-*'>))

•! C+-*"()#"$D(.09"()*+,*+(+%-"#).''*/+%"/"()"E('90-"()

•! C+-*"()#$%D(.09"()(4').''*/+%"/"()*+9"FB"()

•! G()#'B$#+%-'(),'/+#)(+*)/+)50"-*')F,'(A)•! #'*+,'A)/+1%+)0#),'%-')$%$.$"9)8,'%-').'**+%-+:)'0)#'B+)"-H)

'0-*'),'%-')(+#)/+(+%&"*)8-<)#:)

•! .$%+,'A)/+(+%&")0#")9$%&")*+-")"-H)'0-*'),'%-')8/<).<)0<)&<)1<)*:)

•! 234*+,'A)/+(+%&")0#").0*B")")0#)%'B'),'%-'<)50+),'/+)(+*))

•! IHJ$+*).DE$.").'#)/'$(),'%-'()-"%2+%.$"$()8!<)2<)5<)(:)

•! IHJ$+*)50"/*KF.").'#)0#),'%-')-"%2+%.$"9)86<)7<)8<),:)

•! L*.')+9M,F.')'0).$*.09"*)89<)":)

•! 2.'(+:",&A)N+.&")")120*")8;<)<:)

O)

Page 67: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'$&()#$*)+,-."($

•! !"#$%&'()*+",&(-)(.')")/'0#")$12"3)+"0")/'#)#$456))0#)12($3'$("45)#'$

•! 4.')7'#+"7,'()2)287$2%,2()*&20"%9")1')5:;-)

•! 4.')#"$()1$<72$()12)="3$1"0)*%.')(.')>:;-)2)12)7'1$87"0)#"%?"3#2%,2)

•! @'12#)12(2%&"0),'1"()"()8A?0"()*7B07?3'(C)23$+(2(C)02,D%A?3'(C)2,7E-)

•! F)$12"3)G)/'#)#$7"#$%&'(C)2)%.')2(702=HI3'()

•! J')7'1$87"0)456)K)#.'C)?(2)"()8A?0"()LM($7"(C)(2)+'((B=23)

•! !'#')70$"0)7"#$%&'(N)!"#$%&'()!"#$%&'()*!)*$+,&-.))&#$*+,-$./0'.01#2+3%.&45&

•! OP2#+3'Q))&!"#$%&'()/*0112011*3*4112011*3*5112411*6)&&&&&&&/$*.67()*7')&8+99(),9-7)&/$*+670:+'$%();)&45&

R)

Page 68: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()#(*$(+,$-./'0(

!"#"$%"&'&()*$%"+&%,&"-.)/,0*$"%1$"+."&%)&-23-.41$"567"898"+$":;<"=>&?."@&A&@BC-2."C$"3C.*D"

!"#$%&'()*+,-./012/&*34-54%,-(./-,/"6&

!789:;<=>&*'?&=@ABC:&/DEEFG:EE8;8&HIJ&010EE>K/&&

&&/L33MNEEOOO1OG1,)?EJ)4ML+P*EHIJE010E8;8E*'?001535/6&

!*'?&O+53L./QP$/&L(+?L3./QP$/&'+(OA,#./2&2&Q22&Q22/&

&&&&#$%-*./L33MNEEOOO1OG1,)?ER222E*'?/&'()*+,-./010/6&

&&&&!3+3%(6>#4$M%(&3)+4-?%(20D&*+$M%(&(#4$M%(&,S&4&TM43LT!E3+3%(6&

&&&&!5(*P6U&M43L&3L43&5)4O*&4&3)+4-?%(!E5(*P6&

&&&&!)(P3&#./0/&V./0/&O+53L./GWX/&L(+?L3./GWX/&

&&&&&&&&S+%%./-,-(/&*3),Y(./Z%[(/&E6&

&&&&!"#$%&'()*&+,,&+,,&-&.,,&+,,&-&/,,&.,,&0)&

&&&&&&&&1233()45')&6$4785()93:5)&6$4785;<2'$%().)&=>&

!E*'?6&

Page 69: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'(")*%+(%,"*%+

•! !"#$%&"'(-+")((+*'+$,*-*.*#(%"/"(.%)*%+&%//")*"+•! 0"/*($(.$%*+$('*#(&*'*%1$2(

•! 3*(4"2("(526#*62"(5"%+"(&"(.$#6%1"7(-+8$,'"-)+"9('*2:(6;)$-($((+82*-$</"($"(5"%+"(=7=9(

•! !$&$(!"#$%"&2*52*'*%+$("(6%>.6"(&*()#(#01&'(2)3%+

•! ?@*#5-"(8+2*.1"'(&*(.$#6%1"'9(•! !!"##$"##!"!%#$&'#!

•! 0"/*(&*(=7=(5$2$(A==7A==(*(&*5"6'(5$2$(AB=7C=(

•! !"##!"##"%#!&'#!

•! 0*'#$(."6'$(8/>2;)-$'(*(*'5$D"'(622*-*/$%+*'('E"("5.6"%$6'9(

•! !"##!"##!"%#!(#!

•! 0*'#$(."6'$(8."#$%&"'(%E"(52*.6'$#('*2(2*5*<&"'('*(#"/6#*%+"(4"2(&"(#*'#"(<5"9(

B(

Page 70: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&"'()"*+,$-.'

•! !"#$%&"'(/(")(0(*+,-$#()#(*12($#3%."''•! !$)'$#("(&+'+%-"(&+()#$(./%-$(0+1$(&"(,"%-"'("44+%-+'$12("(

3"%1"(/%/,/$.(&"(*12($#3%."'

•! 4+("(,"#$%&"('+5)/%1+(*"0()#(!"#$%"6()#(%"7"(')8,$#/%-"('+09(/%/,/$&"(

•! 4+("(,"#$%&"('+5)/%1+(*"0(:)$.:)+0(")10"6("(3"%1"(/%/,/$.('+09("(#+'#"(&"(')8,$#/%-"(,"00+%1+(

•! ;$."0(&"($10/8)1"(*-4"5+6)3%+7"3%'2()'$&"(3$0$(*+,-$0($(,)07$(

•! <=+#3."'(•! !!""#!"""!$"#!$"##!%""#%"""%$"#%$"$%"!""#&""$%

•! >(,$#/%-"($,/#$(1+#(10?'(')8,$#/%-"'(

•! >(1+0,+/0"(,$#/%-"(,"#+@$(+#(ABB6ABB(

•! C$%1"(*$D()'$0(/(,"#"(0(E9(:)+(+.+'(%F"(1?#(3$0G#+10"'(

H(

Page 71: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'(")*%+$,)"*%+

•! !"#$%&"'(-)(.)(/+*($)(0+*(1+&*'*%+$#(,-%+$'(.*/$'(•! .+"0(0+.*1*2*(0#$("0(#$-'(1"".&*%$&$'(3(*(&*'*%+$(,-%+$'(.*/$'(

+".-4"%/$-'(

•! /+"0(1+.*1*2*(0#$("0(#$-'(1"".&*%$&$'(5(*(&*'*%+$(,-%+$'(.*/$'(6*.71$-'(

•! -+"0($+.*1*2*(0#("0(#$-'(8$.*'(&*(1"".&*%$&$'(3)5(*(&*'*%+$(,-%+$'(.*/$'(*#(90$,90*.(&-.*:;"(

•! <3*#8,"'(•! !!""#!"""!$"#%""&'

•! !!""#!"""!$"#%""#$"&'

•! !!""#!"""!$"#%""#$"$(!""&'

•! !!""#!"""!$"#%""#$"$(!""%($"#$"&'

•! !!""#!"""!$"#%""#$"$(!""%($"#$"-=>?)>?(=??)>?&'

@(

A?)?B(

A233)233B(

A243)533B( A533)C??B(

AC??)233B( A2436243B(

A243643B(A233643B(

7+

7+

7+

7+

Page 72: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*&+,-%.*/0,&'-"#$*0,1'

•! !"#$%&'#()*'#+,#-.%/0'#•! 1234,%#-.54-*#•! 1234,%#6.0+%"(-*#•! 7%-*#

•! !"#$%&'2345*#'-675-%&''8*#+,9:4+0'#)*%#0#8&')0%,'#+,#-**%+,:0+0'#•! ;**%+,:0+0'#<=>#+,#?@AB#)*:$*'#+,#-*:$%*C,#$0:D,:-404'#•! ;**%+,:0+0'#<=>#+*#9E#+0#-.%/0#

•! !"#$%&'2345*#'9"%)#:;-%&''8*#+,9:4+0'#)*%#),5&')0%,'#+,#-**%+,:0+0'#•! ;**%+,:0+0'#<=>#+,#FG#)*:$*#+,#-*:$%*C,#$0:D,:-40C#•! ;**%+,:0+0'#<=>#+*#9E#+0#-.%/0#

•! <#-,&''8*#+,9:4+*'#)*%#•! H0%#+,#%04*'#I%<=%>J#+*#,C4)',#+*#6.0C#',%"#,<$%0K+*#*#0%-*#•! L:D.C*#+,#%*$0M8*#+*#,4<*#<#•! FE#)0%#+,#N0D'#4:+4-0:+*#.E#+*'#6.0$%*#)*''K/,4'#0%-*'#)*''K/,4'#•! ;**%+,:0+0'#<=>#+*#9E#+0#-.%/0#

O#

Page 73: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*+,#'-./+-%&'

•! !"#$%&'$(&$)*($''+'&#$&#,+'&-"(%+'&

•! !"#$%'01#2%3.&!&",&-&/"%&/""#$0+#+'&!"#$"!!!%#$%&&!#$&"0#$&

•! 456''1"&+'&/""(#$0+#+'&#"&*"02"&30+4&#+&/,(5+&

•! 47567''1"&+'&/""(#$0+#+'&#"&/"02("4$&2+06$0/7+4&#"&*"02"&707/7+4&

•! 48568''1"&+'&/""(#$0+#+'&#"&/"02("4$&2+06$0/7+4&#"&*"02"&30+4&

•! !"#$%'&"%$,.&8"%+0#"&9&",&&&/"%&/""(#$0+#+'&!%#$%&&!#$&

•! 9$'2$&/+'":&"&/"02("4$&#"&*"02"&707/7+4&'$(;&&+2):#+-1'+"&/"02("4$&30+4&#+&/,(5+&+02$(7"(:&-+<$0#"&/"%&=,$&+&>,0?1"&'$>+&&"%$,'

•! @)$%*4"'&

A&

B&*(7%$7(+&/,(5+&C&0"(%+4&

B&'$6,0#+&/,(5+&C&',+5$D&E&*"02"&$%&

#$'2+=,$&C&'7%C2(7/"&+"&*"02"&#$&/"02("4$&

30+4&#+&*(7%$7(+&/,(5+&

Page 74: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*+,-.#/*012.03(*

!"#$%&'()#*+,#-./0#12(34#

Page 75: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*+,#'-"%.#/01%&'

!!"

•! #$%&'"(&)"&*+)&((,("%&"%-,(".$)',("•! !"#$%'23#4%5/"6"$-"-"0$'"0$$%&1,%,("!"#$"!!!#$%$1%&"

•! 789'(2$",("0$$)%&1,%,("%$"+$13$"41,5"%,"0-)6,"

•! 7:89:'(2$",("0$$)%&1,%,("%$"0$13)$5&"3,17&108,5"

•! !"#$%'&"%$,/"9$',1%$";"$-"<"0$'"0$$)%&1,%,("!#$%

•! :"0$13)$5&"3,17&108,5"(&);"&+4)<#+13',$"0$13)$5&"%,"0-)6,",13&)8$)<".,=&1%$"0$'">-&","?-1@2$"(&?,"&"%$,'

•! A*&'+5$"

&%"##$%##!!

'%&##$'#!(##$%##!!

(%)###$%##!

)%

BCDD<EDDF"

BGDD<HDF"

BIDD<EDDF"B!DDD<EDDF"

#$13$"%&"0$13)$5&"(8'J3)80$"

0,50-5,%$",-3$',K0,'&13&"

Page 76: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

•! !"#$%&%'$&$()*$%&+%#$,-+.*$&*$/%&0$.1$%&*2&($"*2&*+&34&+,/0%+&

•! 5'$&+%0+#/6#2*$%&#$4&$&#$42.*$&!&$3&"&

•! !&%/.127+&89& &!"#$%#&"!"'(%)("$%&"$.*+&•! #$%+&#&&%'$&"+%0+#):24+.1+&$&"2/$&-$"/;$.12,&+&:+")#2,&*$&+,/0%+&

•! !%8&$&<.=3,$&*+&"$12>'$&*$&+/7$&7&$.*+&+%1?&$&+,/0%+&

•! '()*(%0$*+&1+"&$%&:2,$"+%&+)+%+),%,)+%$3&,),%+&"+0"+%+.124&@321"$&A$"42%&*+&$(1+"&$&2"#$&B+7+40,$&.$&0"C7/4$&%,/*+D&

•! $)&%%'$&2%&#$$"*+.2*2%&*$&0$.1$&6.2,&

!#-.*%

EF&

#&%

#$%!%& 7&

G&

Page 77: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*#)+,-'()(.$%&#()

!"#

!"#$%&'()*+,,-.,,&%/01,&!"#$%"#$&$&"%$&"#$%'"#$&2)&

&&&&&&3455()67')&8$69:7();5<7)&8$69:7/=4'$%()1)&>?&

!"#$%&'()(.@1-0@1&)/01,&!"#$%"#$&$&$%$&'"#$%"#$&2)&

&&&&&&3455()A7559=)&8$69:7();5<7)&&

&&&&&&8$69:7/=4'$%()1)&>?&

!"#$%&'()*B,,-+1,&5&1,-/1,&&

&&&&&&&&&!*#%*#&'+$&$%"&#$%'*#&5&1,-/.1&&

&&&&&&&&&!*#%#$&'+$&$%"&#$%'*#&5&1,-,&&

&&&&&&&&&!*#%,#&&&$&$%"&#$%$&&&5&1,-.1&&

&&&&&&&&&!*#%"$$&+$&$%"&#$%*#&&5&1,-1,)&

&&&&&&&3455()C9C7)&8$69:7()67')&&

&&&&&&&8$69:7/=4'$%()1)&&>?&

$%&'()#*"+#,-./#01(23#

Page 78: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'(&)*+$&

•! !"#$%&'"#"('#')*+'"#,-.$#/01-%"-&2('#+-#+'/"#-./,"-"#

•! 34$1%'#+/5-%-01-"#$%&'"#"('#,'""67-/"#

•! !#,$%#+-#8$9"#,-.%-&+-:0-#;4$.#"-%<#4"$+'#

=>#

,-#?#.$%9-@$%&@8$9#

%-#?#"A--,@8$9#

/./&

/.0&

0./&

0.0&

B'01-C#DEF#GHIJ#",-&K#

Page 79: SVG - Scalable Vector Graphics: Uma Introdução Prática

!"#!$%"&"'!$(%)"%!"#!$%&$*!"(%

!"#$"%&$'&()*+'&,+"#$"%-'%.)/'0123*)435%6&

Page 80: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#$%&

•  !"#$%&$'%#$&$()*#"%+",%"%$-$,$(."%'$"#$(&•  /.'012."&%$%&213$-$,$(."&%4$',0.$,%+"(.'"-$%&"1'$%,20."&%*&4$+."&%#"%.$5."%$%+*'*+.$'$&%0(#060#2*0&%

•  70,$(&8$&9%$&4*:*,$(."9%'".*:;"9%$.+<%•  !"#$%&$'%#$&$()*#"%(*%6$'=+*-9%(*%#0*>"(*-9%$,%+*,0()"&%*'10.'?'0"&%@*&&"+0*#"%*%2,%')*$+(A%

•  /&&0,%+","%"+"''$%+",%*&%B>2'*&9%4"#$3&$%*4-0+*'%+"'9%B-.'"&9%>'*#0$(.$&9%4*#'8$&9%+-0440(>9%$.+<%

•  /,4-"%&24"'.$%4*'*%*+$&&010-0#*#$%$%0(.$'(*+0"(*-0C*:;"%

•  D&4$+0B+*:;"%•  !"#$%%&&&'&(')*+%,-%./0%1231'!1456

E%

Page 81: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#$%&'$(

•  !"#$%%&'()*'*"#+)+$+*+"#'(#,-#(.(-()/%#'(#/(0/%#)1%#2$*-#)%#$*)/%#",3(&+%&#("4,(&'%#$%-%#*"#25,&*"#•  !#3%"+61%#(0*/*#'(3()'(#'(#7*/%&("#$,./,&*+"#8+'+%-*9:#'*#)*/,&(;*#'%#/(0/%#8*.7*<=>$%:#-*/(-?>$%:#(/$@9#

•  A)$%&*#'(7*,./#/(-#%&+5(-#)*#.+)B*#<*"(#8!"#$%&'$9#3*&*#/(0/%"#.*>)%"#*.7*<=>$%"#

•  C*)/%#%#&(/D)5,.%#*<*+0%#$%-%#%#/(0/%#/E-#*"#-("-*"#$%%&'()*'*"#):*(

F#

!"#$%&&&%#'()*+,-./01%/21%311%311.4%%%!5(67%,-.1.%8-.1.%9('$97-.:;.%%%%%%%%%%)'<79-.0=1.%&&&%>4%%%!7(,7%?+@7/"'A(-.:;.%%%%%%%%%,-.1.%8-.1.4B$+5C!>7(,74%!>"#$4%

G%"+61%#8H:H9##()$#*")+",*$)#$,-).&#/.$%)#$).&$0123)425$6",)$5)787)

Page 82: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#$%&'

•  !""#$%&'&"(&()*+)#(&),&-."('*(&),%/0)#"('*(*"12#(*3'($%)$*'#0(*2*3*4)#"(3&%"(&2)#"(4&(5%*,&,60%&(7*+8((+*9'•  :#'*3("*,(&;2%$&'#"(-%&(<=>(#0(?@@(

•  @A#(%'*41B$&'&"(;*2#(#",%'•  C(&),%/0)#(-"#$.-/,012';*,3%)*(*";*$%B$&,(03&(10&$/'3%'#",%&8($&"#(#(;,%3*%,#(4A#("*D&(*4$#4),&'#E("*,F(0"&'#(#("*G04'#E(*(&""%3(;#,('%&4)*(

•  HF(4#3*"('*I&02)($#3#(&/#&J&%40-E(&%40-E(,"#"&5/6%'•  HF(-F,%#"(&),%/0)#"(;&,&($#4),#2&,(&";*$)#"('*(I#4)*"E($#3#(;*"#E(%4$2%4&KA#E()&3&45#E(*)$(•  =*"3&"(;,#;,%*'&'*"('#(?@@(L(*(3*"3&("%4)&+*(

•  M&(&0"N4$%&('*(03&(I#4)*E(#()*+)#(.('*"*45&'#(*3(03&(I#4)*('*I&02)E($#3#(&%40-'

O(

Page 83: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#$%&"'()*+)+(,-')./#/)0'1"+()

•  !"#$%!&'()*+•  !"#$%#"&'(#)$"*(#+*##

,$)-*#(*.&/&+$(#.$/##01/2%3&#

•  !"#$%,(-.+•  !"#$%&'(!"#$%&'(")*#"+#,"-#+.%/!/&0#$)*'#+,$*1#.-4#5"4#')4#.64#*"4#*64#.5#

•  !"#$%/.(01$+•  2&0"1#7$3+4#3'28-4#9::4#;::4#<<<#4#=::#

•  !"#$%,$*).+•  &034"#/&#56%7"1#'-&3'54#$73'>%*#

•  !"#$%2&3(&#$+•  $!6%!89"1#("&33?5&.(#

•  !"#$%,$3.$41+•  )$/"&34#5$)+*)(*+4#*-5:#;)2!./&#"+#,"./&.0!#!#7".<&#

•  !"#$+•  =<!4>"#2!6!#&02&,%?,!6#$@6%!0#26"26%&/!/&0#/&#+-!#$&A#

@#

B"/&-#0&6#&02&,%?,!/"0#<!.<"##&-#-./(C,"-"#!<6%D+<"0#26E26%"0F#,"-"##

&-#011(C/&.<6"#/&#7"4>!0#/&#&034"*##D4","0#G0<H4&I#"+#!<6%D+<"0#0<H4&F#

Page 84: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#$%&'%()*+,-&'%'./0'!"#$&'

•  !"#$%&'("'&)&$%*+'#,"'-"(%*'&%.'%*/01(+&'%*'234'

•  5+&'6'-"&&78%9'(%:#).';"#$%&'%*'234<'=0%'-"(%*'&%.'.%;%.%#>)+(+&'-".'

+.=0)8"&'?22'"0'234'

•  @9%*%#$"'12"#$3'-%.*)$%'+'(%:#)A,"'(%'/)/9)"$%>+&')#$%).+&'(%';"#$%&'

0&+#("'234<'.%;%.%#>)B8%)&'8)+'CD'-".'?22'

•  D%#$."'(%'E;"#$F'&,"'(%:#)("&'

•  ?+.+>$%.7&1>+&'(+';"#$%'>"*"';+*79)+<'+9$0.+<'9)#G+H/+&%<'%$>I'12"#$42-5%3'

•  C(%#1:>+(".%&'-+.+'+';"#$%'J12"#$42-5%4&653<'12"#$42-5%47683<'%$>KL'

•  49);"&M'19:;<=3')#()8)(0+)&'(%'>+(+'>+.+>$%.%'&,"'(%&%#G+("&'(%#$."'(%&$%'%9%*%#$"'0&+#("'&)#$+N%'(%'E-+$GF'

•  O$.)/0$"&'(%'19:;<=3'-%.*)$%*'%&-%>):>+.'-+.+'>+(+'P9);"'>Q()P"&'R#)>"(%<'

)(%#1:>+(".%&<'>Q()P"&'(%')()"*+<'*6$.)>+&<'9)P+(0.+&<'%$>K''

•  D%$+9G%&'(+'>.)+A,"'%'*+#)-09+A,"'(%'234'!"#$&';"P%'+"'%&>"-"'(%&$%'

>0.&"K'S+.+'*+)&'(%$+9G%&'>"#&09$%'+'%&-%>):>+A,"'%*I'

•  !"#$%%&&&'&(')*+%,-%./0%1)234'!3567

T'M'27*/"9"'0&+("'-+.+'.%-.%&%#$+.'0*'>+.+>$%.%<'%*'0*+'(%$%.*)#+(+';+*79)+'(%';"#$%&'

Page 85: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#$%&'()#()#*+,-.'()#(/'+0#12(

!"

!"#$%&'()*+,-../0,%*1'$*)+,2../0,%#13"'45+,676,%0895"%+%:*))/;<<&&&7&2743$<=...<"#$:>%%%%!(1?">%%%%%%!?45)%'(+,!"#$%,%*43'@AB(#A0+,6...,>%%%%%%%%%%%%%!?45)A?BC1%?45)A?B8'9D+,&'()*+&,#-,%?45)A&1'$*)+,."/0,%?45)A")D91+,#"*1,/,%%%%%%%%%%%%%%%%%E5')"A/13A18+,6...,%CB/A*1'$*)+,F..,%0A*1'$*)+,-..,%B"C15)+,G..,%%%%%%%%%%%%%%%%%%(1"C15)+,2..,%B9/*BH1)'C+,.,%8B)*18B)'CB9+,2I.,%'(14$3B/*'C+,-..,%*B5$'5$+,I..,>%%%%%%%%%%%%%%%%%!?45)A?BC1A"3C>%%%%%%%%%%%%%%%%%%%%%!?45)A?BC1A5B81%5B81+,&'()*+&,#-+2"/0,<>%%%%%%%%%%%%%%%%%!<?45)A?BC1A"3C>%%%%%%%%%%%%%!<?45)A?BC1>%%%%%%%%%%%%%!8'""'5$A$9D/*>!/B)*%(+,J.K.*=..#=..*A=..@,<>!<8'""'5$A$9D/*>%%%%%%%%%%%%%!$9D/*%E5'C4(1+,L,%*43'@AB(#A0+,2..,>!/B)*%(+,777,<>!<$9D/*>%%%%%%%%%%%%%!$9D/*%E5'C4(1+,M,>!/B)*%(+,777,<>!<$9D/*>%%%%%%%%%%%%%777%%%%%%!<?45)>%

!?45)%'(+,!"#$3,%*43'@AB(#A0+,6...,>%%%%%%%!?45)A?BC1%?45)A?B8'9D+,&'()*+&,#-,%?45)A&1'$*)+,#"*1,/,%?45)A")D91+,4$,/45,%777>%%%%%%%%%%%%!?45)A?BC1A"3C>%%%%%%%%%%%%%%%%!?45)A?BC1A5B81%5B81+,&'()*+&,#-+6$,/45,<>%%%%%%%%%%%%!<?45)A?BC1A"3C>%%%%%%%%!<?45)A?BC1>%%%%%%%%!8'""'5$A$9D/*>!/B)*%(+,J.K.*=..#=..*A=..@,<>!<8'""'5$A$9D/*>%%%%%%%%!$9D/*%E5'C4(1+,L,%*43'@AB(#A0+,2..,>!/B)*%(+,777,<>!<$9D/*>%%%%%%%%!$9D/*%E5'C4(1+,M,>!/B)*%(+,777,<>!<$9D/*>%

%%%%%%%%%%777%%%%%%!<?45)>%%%%!<(1?">%!<"#$>%

!"#$%&'()*")'"#+,#-./-'01*"234"

#$%&'()*+,"

Page 86: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#"$%&'($%#'$)"*+,$-./$

•  !"#$%&'$(&)*+(#$#$,-*.&/$&0#$(&%&$1&2$2&,&2&*3+#(#$%+#$455$

•  6&7-+1/$89#089&2$&0&"&*.-$5:;$7-(&$91<=0#$

>$

!"#$%&'#()*!+!!!!!!!!!!!!!!!!#$%&'#(,-./0!1234*5!2(%617!!!!!!!!!!!!!!!!!#$%&'8*-9:&0!%$5,(.7!!!!!!!!!!!!!!!!#$%&'6&/.*0!-&(.-)7!!!!!!!!!!!!!!!!65)0!35.;<,/#$%&=6>9?@$%&A<B!#$5,(&;<6>9<B!!!!!!!!!!C!!"#$%&'#()*!+!!!!!!!!!!!!!!!!#$%&'#(,-./0!1234*5!2(%617!!!!!!!!!!!!!!!!!#$%&'8*-9:&0!D$.E7!!!!!!!!!!!!!!!!#$%&'6&/.*0!%$5,(.7!!!!!!!!!!!!!!!!65)0!35.;<,/#$%&=6>9?@$%&F<B!#$5,(&;<6>9<B!!!!!!!!!!C!

G&*H&!HI<FJJ<!/I<FJJ<!!!!!!!!6&/.*I<#$%&'#(,-./0!1234*5!2(%617!!!!!!!!!!!!!!!#$%&'8*-9:&0!%$5,(.7!!!!!!!!!!!!!!!#$%&'6&/.*0!-&(.-)<KL*H&$!36(%E$!3,(!2MN!@$%&GO&*H&K!

Page 87: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#"$%&'('$)*+$,"-./$

•  !"#$"%&'$%($')*#$%+,%(-./,0%&0$.+-%123%4-./0%",5&,"%'&#/-%/"$6$*7-%

•  1,%8-9:%/,'%(-./,0%/"&,;/<=,>%=-+,%9-.8,"/:;*$0%=$"$%123%$/"$8?0%+-%("$',@-"A%01(23&$4(56$B!"#$%%&'()*+#!,-./+#+-!0/1*)%2+34C%

•  D%E$FA%/$'6?'%(-".,9,%&'$%(,""$',./$%+,%*#.7$%+,%9-'$.+-G%7(5689:/;%$5&,%=-+,%0,"%97$'$+$%=-"%5&$#05&,"%$=*#9$HI,0%

•  JK,'=*-%+,%&0-%•  D%,K,'=*-%$6$#K-%L,"$%&'%$"5&#8-%9-./,.+-%(-./,0%123%=$"$%-0%

9$"$9/,",0%M<M%BN.#9-+,%OOPQC%$%M=M%BN.#9-+,%OORSC%,'%&'$%(-./,%123%!!!"#$#!!%"#&!'#()*%((+,-$./"#&!0+12(3-041&'35/((+!!6!

!!! !%5!78!%9!:;!<!"#2=1&'35!%1!>?@41&'35/-$.!

•  T%(-./,%+,8,%0,"%",(,",.9#$+$%8#$%!11%!A-(B53C!!!!D+12(%+#=3!E+12(%+#@)5BF!G41&'35GH!!!!!!!!!!!!!!!!!-&=F!?&5IJ>?@41&'35/-$.$2=1&'35JK!+1&@#(IJ-$.JK!A0-(B53C!

•  J%+,=-#0%=-+,%0,"%&0$+$%.-"'$*',./,%,'%5&$*5&,"%,*,',./-G%!A(3L(!+12(%+#@)5BMJ41&'35J!///!0C!

U%

Page 88: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#$%&"'()*+),"+-".)

•  -)!"/"#!$#!%!&'()"0''#*+12*2()2%('3&"2()•  *+,!)"-+&'!#".)"+.")(/%"0(1+#!%"

•  *#/)!/#+%"1)0(1+#!%"%2+"$+%/34!%",+%"1)$#/)!/#+%"-(#(-'!#!%5"678"

•  !"#$"%$&'(%)%*('%+&'(',-./!0"#$",%,!%!&9("4"&("$+%/32+":;"5"&("$+%/32+"<"!"6"&("$+%/32+"=:"

•  >%"('#/?.'+%"*-)!"*/)#!$#!%!&'()"0''#*+12*2()#+32782()•  @!%1+-()"+"-(#(-'!#!"A+."+%"$#/)!/#+%"1"-(#(-'!#!%;"%!"9+.0!#"1"

0(1+#!%B"!)"#!1(32+"C"$+%/32+"(&'!#/+#",+"'!7'+"

•  #'"2"+)D/#("+"$#/)!/#+"-(#(-'!#!"•  >."$#/)!/#+%"&"-(#(-'!#!%"%!"9+.0!#"1)0(1+#!%"

•  "+-"5+19":),!'!#)/&("+"-+)$#/)!&'+",+"'!7'+"•  >"'!7'+"E"(F.%'(,+"$(#("-(?!#"&+"!%$(3+"

•  3+19":!*;&("GH%$(-/&D"I"%$(-/&DJ&,K1L$9%H""•  @!M&!"("N+#)("-+)+""+-"5+19":)(F.%'("+"'!7'+"$(#("-(?!#"&+"

-+)$#/)!&'+"A0(#/(&,+"!%$(3+"+."!%O-(&,+"("N+&'!B"

=:"

Page 89: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#$%&'(

•  !"#$%&'(!"#$"%&'('")*+,-*'".'"+,/+'"0#,"1,-$)+,".&+,-.-"1-'1-),2.2,3"2,"#$"+-,(4'"2'"+,/+'"•  5''-2,*.2.3"•  637&'""•  ,+(8"

•  93".+-)%#+'3"1-)*()1.)3"2,"!"#$%&'(3:'"'3"$,3$'3"2,"!")*"'(•  ;.3"(.2."!"#$%&'(,3+<"*'"('*+,/+'"2,"#$"!")*"'(1.)8"

•  =>?"*:'"1'33#)"-,(#-3'3"1.-.".#+'$.7(.$,*+,"0#,%-.-"&)*4.3"@*:'"4<"%&'('3"2,"1.-<A-.B'C"•  5.2.",&,$,*+'"!")*"'(2,3,*4."#$."D*)(."&)*4."2,"+,/+'8"

•  ;.3"('$"!"#$%&'(!"1'33EF,&"('*3+-#)-"%&'('3"!")*"'($#&7&)*4."('$"(.2."&)*4."2,G*)2.",$"#$"!"#$%&'8"

HH"

Page 90: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#$%&'()'$(*+,%-./(#(0"102(

•  !"#$%&%'()"#$*+*,&"-$"$.%#)"/*'%01"$2"3,4"01*)$3%)*56"$7$'*05."$•  80/3%'%01"#$/"'$*13,+91"$02-$:9%$)%6*$%'$/"01*$"$6*)"3$*01%3,"3$

•  ;#$.",#$*3:9,6"#$(3".94%'$"$'%#'"$3%#9)1*."$$

<=$

!"#$%&'()"*+,--./00111213245$067770"#$+%222%#891:4&*+7%7%677%677+;%%%%%!-9&-%<4)-="8>9*+?6+%&*+@+%A*+?@+;%%%%%%%%%!-".B)%C&*+7+%CA*+7+;D'!0-".B);%%%%%%%%%!-".B)%CA*+?@+;E48"!0-".B);%%%%%%%%%!-".B)%CA*+?@+;F59"!0-".B);%%%%%%%%%!-".B)%CA*+?@+;GHB-54!0-".B);%%%%%%%%%!-".B)%CA*+?@+;I8)J4!0-".B);%%%%%%%%%!-".B)%&*+@+%CA*+7+;D'!0-".B);%%%%%%%%%!-".B)%CA*+=?@+;E48"!0-".B);%%%%%%%%%!-".B)%CA*+=?@+;F59"!0-".B);%%%%%%%%%!-".B)%CA*+=?@+;GHB-54!0-".B);%%%%%%%%%!-".B)%CA*+=?@+;I8)J4!0-".B);%%%%%!0-9&-;%!0"#$;%

!"#$%&'()"*+,--./00111213245$067770"#$+%222%#891:4&*+7%7%677%677+;%%%!-9&-%<4)-="8>9*+?6+%&*+@+%A*+?@+;%%%%%!-".B)%C&*+7+%CA*+7%7%7%%?@%7%7%7%7%%?@%7%7%7%7%%?@%7%7%7%7%7%7%%?@%7%7%7%7+;%%%%%%%%%%%%%%D'%E48"%F59"%GHB-54%I8)J4!0-".B);%%%%%!-".B)%&*+@+%%CA*+7%7%7%=?@%7%7%7%7%=?@%7%7%7%7%=?@%7%7%7%7%7%7%=?@%7%7%7%7+;%%%%%%%%%%%%%D'%E48"%F59"%GHB-54%I8)J4!0-".B);%%%%%!0-9&-;%!0"#$;%

Page 91: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#$%&'()*'$)+',-,#)./012)

!"#$%&'()#*"+#,-./#01(23#

!"#$"%&'()*+,#-")%./-"0.+1&23()4,&+25%6+-606#,&.)%./-"06&7#()89)%.&22(),#')%$():;)%3():;)%%%%%%%%,/"+"#()<5=<59<58<5:<5<<)>%%%%%%?/"%%%%%%%%!"6*+-%&'()@A&2'=)%,/"+"#()0=;509;508;50:;)%.&22()/,+-B#)>+22%@A+,+@"#,6%%%%%%%%%%!"6*+-%&'()@A&2'9)%,/"+"#()C;5D;5<;5:;58;59;5=;)%.&22()3#22/E)>&-%%%%%%%%%%%%!"6*+-%&'()@A&2'8)>"A#!F"6*+->%%%%%%%%%%!F"6*+->%%%%%%%%%%!"6*+-%&'()@A&2':)%.&22()/,+-B#)%$():;)%3()G;)>"#$"!F"6*+->%%%%%%%%%%A+H#%+%%%%%%%%!F"6*+->%%%%%%%%!"6*+-%&'()@A&2'<)%,/"+"#()0=;)%.&22()I2J#)>6*#@&.&#'!F"6*+->%%%%%,/"+"&/-%!F"#$">%

!"#$"%./-"0.+1&23()K#,'+-+)%%%%%%%%./-"06&7#()<<)%.&22()I2J#)%>%%%%%!"6*+-%$()9<;)%3()=<;)%,/"+"#()08;5;58;)>%%%%%%%L#22/5%/J"%"A#,#!F"6*+->%!F"#$">%

Page 92: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#$%&'()*+#"+,)#)*+(%-.,)/0123)

!"#$%&'()#*+,#-./0#12(34#

!"#$"%$&'()*'%+&',)*'%%%%%%%%-./"0-1234+&'5#671/1'%%%%%%%%-./"0839#&'))'%-344&':4;#'%<%=#44.>%.;"%"?#6#!@"#$"<%

!"#$"%$&'(**'%+&',)*'%-344&':4;#'%<%A.;%16#%!"#$%&'()&"*+,-./"012)341'''''''''''''''''(-33015,416&)"!7"#$%&6%1%:1/1/1B%!@"#$"<%

!"#$"%$&'(**'%+&',)*'%-344&':4;#'%<%C;"%+.;%!"#$%&'48019,:1'4;01*<=1'''''''''''''''''()&"*+,-./"012)341'''''''''''''''''(-33015,41'6%5,!7"#$%&6%!"#$%&'4;01>==16%'$,%?/@!7"#$%&6!@"#$"<%

!"#$"%-344&'6D:E())>,FG>*H'%<%%%%!"8I1/%$&'J**%J)*%G**%G)*%)**%))*%F**%F)*'%%%%%%%%%%%%+&',**'<K;"#%1/7!@"8I1/<%%%%!"8I1/%$&'JL)%G()%GL)%)()%)L)'%+&'(**'<-;99+!@"8I1/<%!@"#$"<%

Page 93: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#$%&"'()*+)+(,-')./00)'&)1234)

•  !"#!$%"&'()!*'+!"#$%&'()$&*+*,-&'()$&*+*()$&./0',#10*+*222"*•  3&4/,*5#6()$07%,8*5,6'&()$07%,8*')597%,*

•  ,"!!"($-.)&*+/!"$,':7(*+*-7(,'+*)$0&')/"*•  ;*5*<*7*=*,***&*$*/*'*&***(*&*/*'*7*5*

•  0'(%$-.)&*+/!"$,':7(*+*-7(,'+*)$0&')/"**•  ;5<7=,********&$/'&*********<7(7-'75*

•  1"(+*+/!"7#/,*+*9,:<'):&$/,*+*)$0&')/"*•  ;5<7=7:&$/,*&5<&9)7(*&$/'&*97'79/&'&5*

•  >,%,*5&"')?*%&@7#(/*&*7#/,:7A97:&$/&*'&%#B*,*&5<7=7:&$/,*&$/'&*97'79/&'&5*&5<&9CD9,5*E&4F*"6!"G**

HI*

Page 94: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#$%&"'()*+),-$./,0+."')

•  !"#!$%&'()*!"#$%&$'(')*++,-'('-.+"'•  /,*.0%)-.$1'+1'$-2$1'31.+-'-,-'4'%.51&%+16'•  71#*891'+-:-.+-'+1'*+*1)%;'5<,$<&%;'-$5='•  7%&%'%,>%?-$1',%@.1'(",#")!'-#A<-&+%;'+.*)!'+*&-*$%'

•  +%,"-.&"$,(./!!"?%#-,*.-'('#<?'('#<:-&'('.B'('C%,1&'('==="'•  D-#C*1'&-,%@C1'C-&@5%,'-)'&-,%891'E',*.0%'?%#-'•  7-&)*$-'->-*$1#'#<?-#5&*$1;'#1?&-#5&*$1;'-$5='

•  0)1.&%&!$+%,"-.&"!"%<$1'('*+-1F&%:0*5'('==="'•  G*.0%'?%#-':&*.5*:%,'+1'$-2$1'

•  %-.2&1"&!$+%,"-.&"!"%<$1'('*+-1F&%:0*5'('==="'•  G*.0%#'?%#-'#-5<.+H&*%#'3&-,%@C%#'E',*.0%'?%#-':&*.5*:%,6'

IJ'

Page 95: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#$%&'()'(*&%+,"&$-()'('-./$(

!"#

!"#$"%&'(")&*+,-./01'23#-4%5*(5)5#2,&0%&'(")5,6#/07809%%%%!"5:*(%,;/0;#1'2*",'(09<#$"'%1=#,'%;#%-,(=*5!>"5:*(9%%%%!"5:*(%;./0?80%$/0@80%,;/0-,(#5:*1#09A#"2*5%#5:*1*;*5!>"5:*(9%%%%!"5:*(%;./0?80%$/0@80%,;/0B'2;5:*1#09CD,"'%#5:*1'%#("2#%:*-*E2*5!>"5:*(9%%%%!"5:*(%;./0?80%$/0@80%,;/05"2#"1=09<#$"'%#5",1*;'!>"5:*(9%%%%!"5:*(%;./0?80%$/0@80%,;/05FD,5=09<#$"'%#5:2#+,;'!>"5:*(9%%%%!"5:*(%;./0?80%$/0@80%"#$"A#(G"=/078809788%:,$#-5!>"5:*(9%%%%!"5:*(%;./0?80%$/0@80%"#$"A#(G"=/07880%-#(G"=H;ID5"/05:*1,(GH(;J-.:=509788%:,$#-5%;#%-*2GD2*!>"5:*(9%%%%!"5:*(%;./0?80%$/0@80%"#$"A#(G"=/07880%-#(G"=H;ID5"/05:*1,(GH(;J-.:=509<#$"'%KKK%:,$#-5%;#%-*2GD2*!>"5:*(9%%%%!"5:*(%;./0?80%$/0@809L!"5:*(%3*5#-,(#)5=,&"/05D3097!>"5:*(9M!>"5:*(9%%%%!"5:*(9N%/%+1!"5:*(%3*5#-,(#)5=,&"/05D:#2097!>"5:*(9!>"5:*(9%%%%!"5:*(%;./0?80%$/0@80%,;/0('O#2(09PHPHP!>"5:*(9%%%%!"5:*(%,;/0O#2(*D"'09PHPHP!>"5:*(9%%%%!"5:*(%,;/0O#2(I',(09PHPHP!>"5:*(9%!>"#$"9%

!5".-#%".:#/0"#$">15509%%%%Q;#1'2*",'(%R"#$");#1'2*",'(S%'E#2-,(#%%%%%%%%%%%%%%%%%%%%%%%%%D(;#2-,(#%-,(#)"=2'DG=TU%%%%Q-,(#5:*1#%%R-#""#2)5:*1,(GS%V#+U%%%%QB'2;5:*1#%%RB'2;)5:*1,(GS%V1+U%%%%Q5"2#"1=%%%%R&'(")5"2#"1=S%D-"2*)#$:*(;#;U%%%%Q5FD,5=%%%%%R&'(")5"2#"1=S%D-"2*)1'(;#(5#;U%%%%%%%%%%%%%%%%%%%Q('O#2(%%%%%RO#2(,(GS%8U%%%%%%%%%%%%%%%%%%%QO#2(*D"'%%%RO#2(,(GS%*D"'U%%%%%%%%%%%%%%%%%%%QO#2(I',(%%%RO#2(,(GS%)WU%%%%%%%%%%%%%%%%%!>5".-#9%

!"#$%&'()*+,--.%(

Page 96: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#$%&'($)*+%*,#-*$)&".+)(/)0&$1%*,+

!"#

!"#$%&'()"*+,--./00111213245$067770"#$+%189-,*+:77+%,;8$,-*+377+<%%!$%-5=)">45'*+-5=)"(=-;?377@A7B+%<%%%!$%89*+$589+%"-54C;*+D(E;+%222%"-54C;F9=",=55=G*+H7%H7+<%%%%%%!(8);%&H*+7+%GH*+F6A+%&6*+7+%G6*+HA7+%%0<%%%%%%!(8);%&H*+F377+%GH*+7+%%%&6*+377+%G6*+7+%0<%%%%%%!(8);%&H*+F377+%GH*+:7+%&6*+377+%G6*+:7+%0<%%%%%%!(8);%&H*+F377+%GH*+H67+%&6*+377+%G6*+H67+%0<%%%!0$<%%%!-;&-%>4)-F>='8(G*+'4)4".=I;+%>4)-F"8J;*+6K+<%%%%%!-".=)%&*+7+%G*+7+%%-;&-F=)I,45*+"-=5-+<L;(4%8)8I84%?MNOPNB!0-".=)<%%%%%!-".=)%&*+7+%9G*+:7+%-;&-F=)I,45*+'899(;+<L;(4%';84%?QRSSTUB!0-".=)<%%%%%!-".=)%&*+7+%9G*+:7+%-;&-F=)I,45*+;)9+<L;(4%>8)=(%?VRQB!0-".=)<%%%!0-;&-<%%!0$<%!0"#$<%

Page 97: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#$%&'($)*+,(-./&"0+1&2("#$(+

•  !"#$%&'()*(+,"-".&"*3(14#)+"*'*5#""&+•  /0".'#*%&$6#$6+"*&7)*+#1)*2).345"+#*•  6$&-)#*7-)8#"-#9*'0".'#*&7)*+,$.2+).'*

:;*

!"#$%&'(

!"#$%&'()*%+,-$%&'(.&$/0123124-#555#6###!.7'/#89,-2-#:9,-2-###8;,-<22-#:;,-2-#=6###!.7'/#89,-2-#:9,-922-#8;,-<22-#:;,-922-#=6#############!.7'/#89,-2-#:9,-;22-#8;,-<22-#:;,-;22-#=6###!.7'/#89,-2-#:9,-<22-#8;,-<22-#:;,-<22-#=6#!="6#!"#$%&'()*%+,-$%&'(.&$/0123124-#$/8$>&'?@*%,-($&%$-####)*'$>)&+7.:,-+*'*(A&?/-#)*'$>(7B/,-;C-#####)*'$>D/7"@$,-E*.F-6####!$/8$#8,-2-#:,-2-##########F*+7'&'$>E&(/.7'/,-7F/*"%&A@7?-67F/*"%&A@7?#######################################E&(/.7'/!=$/8$6####!$/8$#8,-2-#:,-922-########F*+7'&'$>E&(/.7'/,-&G$*-6&G$*#E&(/.7'/!=$/8$6####!$/8$#8,-2-#:,-;22-########F*+7'&'$>E&(/.7'/,-+&$@/+&$7?&.-6+&$@/+&$7?&.#########################################E&(/.7'/!=$/8$6####!$/8$#8,-2-#:,-<22-########F*+7'&'$>E&(/.7'/,-@&'"7'"-6@&'"7'"#E&(/.7'/!=$/8$6#!="6#

Page 98: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#$%&'

•  !"#$#%&'()!"$("&'*'+#$)(#,),#-#,#%./0+'()#),#1(0+'().'$')210"21#,)'1&,')'34#&')567)0&,089()+#)!)*$&'

•  :0,0)(#;$#%&'()+#)&#<&').'%=+'()%')/%&#,/',)+#)3"'.'()!"$("&>)*'+#?(#)1(0,)')#"#$#%&')!"#$%&'•  @#-#,#%./0)0*#%0()')+,-"$./,'+')&#<&')A%B')*,#(#,80)0&,/31&'()+#)

#(="')'1)*'(/CB'D)

EF)

!"#$%#&'()*+,-.%.%/..%/..-%000%1%

%%!2'3"1%!!!!"#$%#!&'()*+,)-./01021$!!!!!!!!!!!!3$/#45!65078&/*"9#$%#-%%%!42'3"1%

%%!5'+5%+,-6.-%3*758('&$95,-:*;2-%3*758"5<;',-&5=;&>-%<,-?..-%3*758"&@',-?AB5-%%%%%%%%%%%%%%%%%;'7$59C2DE"5,-"B=>&7$C72F;<B9"-%3*7583=G&;<,-=H&=;-1%%%%%!5"B=7%5'+5I'7$59,-A6.-%+,-?..-1J"%=HKE&#*"%3*H=G%>H&=2*"%>*G!45"B=71%%%%%!5"B=7%5'+5I'7$59,-L..-%2<,-L.-%+,-6.-1"#5$:!%1&;<=85$:()>*+,)9-%?0?!45"B=71%%%%%!5"B=7%5'+5I'7$59,-L..-%2<,-L.-%+,-6.-1'%="%=7&G=>*'"%$'H=2="%>*G%!45"B=71%%%%%!5"B=7%5'+5I'7$59,-L..-%2<,-L.-%+,-6.-1"#5$:!%1&;<=85$:()>*+,)9-!?0A%M&7<0!45"B=71%%%!45'+51%!4"#$1%

Page 99: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#$"%&"'()

•  !"#$%&'%("&)"*&(")"+,-(%&+-&.%*/-&("&0/&1-/2+,%&10*3%&•  45"/"+$%&!"#$"%&"'()*"."*"+12-&0/&!*&"'()60"&)"*32*7&("&52+,-&

8-)"&'-*-&%&$"#$%&

•  9$*280$%&!"#$"%&&!'"(:&'"*1"+$-;"/&<&&•  =+(21-&-&'%)2>?%@&")'"12A1-(-&1%/%&0/-&'"*1"+$-;"/&(%&

1%/'*2/"+$%&$%$-5&(%&1-/2+,%@&%+("&%&$"#$%&1%/">-&

•  )'"*+,:B-52;+&C&)$*"$1,B&D(".-05$&:&-52;+E&•  F"&%&$"#$%&("3"&)"*&")G1-(%&'-*-&)";02*&%&1-/2+,%&%0&-52+,-(%&

'"5-&$-+;"+$"&D(".-05$E&

•  !-#./01:B-0$%C"#-1$B&•  H"A+"&-&.%*/-&1%/%&%)&1-*-1$"*")&)?%&1-5105-(%)&)%8*"&%&

1-/2+,%&D&+",)I&(".-05$E&

JK&

Page 100: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#$%&'()*+,-.)

!!"

!"#$%&!'()*+,"-.!"#$%&.+++++++++++"-./+011+211+3+211+011+411+1+511+011+

+++++++++++++++++++++++3+611+211+711+411+811+211+

+++++++++++++++++++++++3+911+011+:11+011+:11+011.+;&!;"#$%&+

!<%#+=>,?@A*B#$-.C/DE()*.+$,>>-.?F?#.+%)BF@#-.B#".++;&+

!)#=)+$F?)G$(H,>D-.I#B"(?(.+$F?)G%,J#-.52K6.+$,>>-.L><#.+&+

++++!)#=)E()*+=>,?@A*B#$-.C/DE()*.&+

++++++M#+NF+<'O+)*#?+P#+NF+"FP?O+)*#?+<'+(N(,?+

++++!;)#=)E()*&+

!;)#=)&+

!)#=)E()*+=>,?@A*B#$-.C/DE()*.&+

++++++M#+NF+!)%'(?+"D-.G41.+$,>>-.B#".+&'(!;)%'(?&+++++++!)%'(?+"D-.41.&O+!;)%'(?&+

++++++)*#?+P#+NF+"FP?O+)*#?+<'+(N(,?+

!;)#=)E()*&+

!)#=)E()*+=>,?@A*B#$-.C/DE()*.+)%$*%+,,)-%./012/&+++++++M#+NF+<'O+)*#?+P#+NF+"FP?O+)*#?+<'+(N(,?+

!;)#=)E()*&+

#$%"/0(%123)

#$%"'4(#0)&'('")*)+)'("

,-./$"0-12)*3$"2%"+'%)*4$"

5$*/-6"78#"9:;<"0&-+="

Page 101: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#$%&'()*+,%&"-&.*-(+/%&.().01*)&

!"#

!"#$%&'!!!"#$%&!'()*+,,-.,,!!!!!!!!!!!!!!/+,,-+,,!.0,-+,,!.0,-.,,!!!!!!!!!!!!!1+,,-2,,!+,,-.,,)!!!!!!!!!!!3'()4354678)!9%58:;()5;')!!!!!!!!!!!9%58:;<=3'%&()+)!!!!!!!!!!!>377<8#$43%?(),)@!!!!"A#$%&@'!("#$%&')))'!*%#'+,-./012#$3456-26*,74'%827/#9":%1:22:;34<'<4'(&'

!8#+8'$7.89%-=#34><4'+34>??4'";349>?4'-"348#+874''''''''$7.89$:@-,;[email protected]%A:6#4&''''!:.-@:8#B2:.%$72@':882-C*8#D:@#3482:.%$72@4'8;A#34278:8#4'''''''''''''''''''''''$27@34?E>F<EG??4'8734HI?E>F<EG??4'''''''''''''''''''''''2#A#:8J7*.834-."#$-.-8#4'$-,,34$2##=#4'"*234F%4(&''''"%;B%C$%&!B73D:E&5;>()F4354678)@!

'A:,:K2:%'L*#'M-2:@'67.$*."#@':%',#82:%''''!(8#+8N:81&'!(8#+8&'

Page 102: SVG - Scalable Vector Graphics: Uma Introdução Prática

argo

navi

s.co

m.b

r !"#$%&'(#$)*"#%&'

•  !"#$%&'(#$)*"#%&'+',$%,$)+-(-+&'-+'+#,-#.'&.%'$+/(0)%1(-%&'2')1#+$1(0)%1(/)3(4.%'•  /)$,01%256/#$'7'$#/6'8/+9:#%:$);<#'+'$);<#:#%:/+9=')1-)0('('-)$+4.%'-%'#+>#%?')-)%@(&'0%@%'A$(*+'+'<+*$()0%'/B+@'-('-)$+)#(',($('('+&C"+$-('

•  3$)12456%/,56/$:#*'7'$/:#*'7'+#0D6'8/$'5'$);<#:/+9E'#*'5'#%,:*%F%@=',+$@)#+'+&0$+G+$'+@'GA$)(&'-)$+4H+&'80%@%')-+%;$(@(&'%$)+1#()&='

•  "2)0%/,5*)/)56DDD6'-+I1+'J%$@('-+'&",%$#+'2'#+>#%'*)-)$+0)%1(/'8"&+'0%@'-6787(24'+'(#$)*"#%&'-+')1#+$1(0)%1(/)3(4.%'!"#$%%&&&'&(')*+%,-%./01234516#%='

KL'

Page 103: SVG - Scalable Vector Graphics: Uma Introdução Prática

!"#$%&'(&)*

+#$",&)*

-.)/#"#)*&*/0%++%'!*

&1&%(2)*&*30("2)*

!"#$"%&$'&()*+'&,+"#$"%-'%.)/'0123*)435%6&

Page 104: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'(&)*&*+#$",&)*

•! !"#$%&'$(")*$+",-$+./012$"$./0-2."2$3-..4$"5$"$0216"$3)("/0&4$,-$785219$-$0-:0"$591/,"$

•! !"2-9$"+1)19$"5$021/9+12-/0-9$

•! '21,.-/0-9$3,-821,*4$

•! ;1,2<-9$3.#18-/9$2-+-=,194$

•! '21,.-/0-9$-$+1,2<-9$9>"$,-7/.,"9$3-#$1$&2)34$-$.,-/=7)1,"9$)"#$%$*+121$?5-$+"991#$9-2$2-@-2-/).1,"9$

•! ABC-0"9$+",-#$5912$821,.-/0-9$-$+1,2<-9$)"#"$=/01$+121$+2--/)D-2$0216"9$-$./0-2."2$,"9$"BC-0"9$

•! E9-$102.B50"$-..*"5$)("/0&*)"#$@5/6>"$4".5678/%'(&"9*

!"#$%&!"##$%&'#()"*+,'-*"./0.1%2'''&(&

!$)"$*#&30'45.$%&'#()"*+6-*'-41%2''(&

•! !"#$%%&&&'&(')*+%,-%./0%#12*32*1'!4567

F$

Page 105: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&#"'$()#*

!"#$%&'(&)*•! +"#,)-$.-%*%/0*1#")#23-%*%4#1-%*,-*,4#%*04*5#)%*(0"-%*

•! 67*,0)%*8&0%*,-*9"#,)-$.-%*•! :)$-#"-%*+,%'&#"!"#$%&'(-*;4-*"-&"-%-$.#*45#*<)$=#>*-*.-5*

(00",-$#,#%*?@A?B*-*C@ACB*

•! D#,)#)%*+"#$%#,!"#$%&'(-*;4-*"-&"-%-$.#*45*(E"(4<0*-*.-5*(00",-$#,#%*(?>*(C*-*"*

•! F%*1#<0"-%*%/0*"-<#810%*G&-"(-$.#9-$%*04*1#<0"-%*-$."-*H-"0*-*45I*#0*9"7J(0*;4-*%-"7*&)$.#,0*(05*0*9"#,)-$.-*•! KL*#*@KKL>*KMK*#*@MK*

•! ./'(/)*$&*0#"#$#*)$)()#)%>*J$#)%*-*)$.-"5-,)7")0%*%/0*5#"(#,0%*(05*45*.#9*+)(/0-*•! N.")O4.0*/1)&(*5#"(#*&0%)2/0*$#*<)$=#*

•! P#,#*Q%.0&R*&0,-*,-J$)"*45#*(0"*G#.")O4.0*)(/023/,/"I*-A04*."#$%&#"'$()#*G)(/02/0#3%(4I*&#"#*0*&0$.0*

•! P0"-%*)$.-"5-,)7")#%*%/0*(#<(4<#,#%*&0"*)$.-"&0<#2/0*

KL************BSL*************SKL***********TSL**********@KKL******

Page 106: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*#)+,-*.#/0#()

!"

!"#$%&'()"*+,--./00111213245$067770"#$+%%

%%%%%&'()"/&(8)9*+,--./00111213245$0:;;;0&(8)9+%18<-,*+=77+%,>8$,-*+?77+@%

%%%%!<>A"@%%%%%%%%%!(8)>B5C5B<8>)-%8<*+!"#$%&'+%&:*+7+%D:*+7E+%&6*+:77E+%D6*+7+@%

%%%%%%%%%%%%!"-4.%4AA">-*+7E+%%%"-4.FG4(45*+H(BG9+%"-4.F4.BG8-D*+72I+%0@%

%%%%%%%%%%%%!"-4.%4AA">-*+JIE+%%"-4.FG4(45*+5$HK66IL66IL6IIM+%"-4.F4.BG8-D*+72=+0@%

%%%%%%%%%%%%!"-4.%4AA">-*+IIE+%%"-4.FG4(45*+5$HK66IL66IL6IIM+%"-4.F4.BG8-D*+72=+0@%

%%%%%%%%%%%%!"-4.%4AA">-*+:77E+%"-4.FG4(45*+H(BG9+%"-4.F4.BG8-D*+72I+%0@%%%%%%%%%!0(8)>B5C5B<8>)-@%

%%%%%%%%!5B<8B(C5B<8>)-%8<*+&%("%!'+%G&*+NIE+%GD*+6IE+%5*+;7E+@%

%%%%%%%%%%%%!"-4.%4AA">-*+727:E+%"-4.FG4(45*+5$HK66IL66IL6IIM+%0@%

%%%%%%%%%%%%!"-4.%4AA">-*+;7E+%%%"-4.FG4(45*+)B#D+%0@%

%%%%%%%%%%%%!"-4.%4AA">-*+:77E+%%"-4.FG4(45*+H(BG9+%0@%%%%%%%%%!05B<8B(C5B<8>)-@%

%%%%!0<>A"@%

%%%%!G85G(>%5*+:77+%G&*+J77+%GD*+377+%%

%%%%%%%%%%%%A8((*+)&!*+&%("%!',+0@%%%%%!G85G(>%5*+37+%G&*+6I7+%GD*+677+%%

%%%%%%%%%%%%A8((*+)&!*+&%("%!',+0@%

%%%%!5>G-%&*+I7+%D*+II+%%,>8$,-*+:N7+%18<-,*+?7+%%

%%%%%%%%%%%%A8((*+)&!*+&%("%!',+%0@%

%%%%!5>G-%&*+I7+%D*+I7+%%,>8$,-*+:=7+%18<-,*+?7+%%%%%%%%%%%%%%A8((*+)&!*+!"#$%&',+%0@%

!0"#$@%

Page 107: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'(&)*%'&#")

•! !"#$%&'()*("+')(%$","-.%"*%'+#)•! /$%&'()*("0($12%+3"" "45"6"47"6"8"""""9" ":5689":765"

•! /$%&'()*(";<$'=<)*%+3" ":5"6":7"6"8"""""9" "45689"4765"

•! !-"0%$'("<>"0%+<$(>"?%$%"?$<&-='$"<@>(*>"("')2+')%AB<"

•! C%$%"2<<$&()%&%>"49:"->(","-,-"./-)D8E8"%"5E8""<-""8F"%"588FG"

•! !"#$%&'()*(","?')*%&<"%<"+<)#<"&<"0&(-"),&",&'$%12*#")D)<$.%+G"%<"0(*<$"&<"#$%&'()*("

H"

!"#$%&'('&)#%$*+,-./0/+1-./02-/+!"#$%&'$(13./0/+#)./&'45#'#6/7+

+++!6*58+5996%*./0/+++6*58:45"5'./';<=3>>?0?0@/+A7+

+++!6*58+5996%*./02B/+6*58:45"5'./';<=-C0?-C0?0@/+A7+

+++!6*58+5996%*./02D/+6*58:45"5'./';<=0?-C0?0@/+A7+

+++!6*58+5996%*./02C/+6*58:45"5'./<"E%/+A7+

+++!6*58+5996%*./-/+++6*58:45"5'./';<=-3C?0?330@/+A7+

!A"#$%&'('&)#%$*7+

<@>(*"

47"

I8F"

:5"""

58F"

!"#$%&'$%()*&

Page 108: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'(&)"#$%#*)•! !"#$%&'(&)*"#$%#%)*)+,*+,"+-*./)

•! "-*+0)&*+1))+,*."#/0&)*$,*&)1#/,*$,*2"345,*

•! 56*789-*5:*789*&*"*789*;*2"#$%&'(&*',*5&'(",-*5,<*5="5>?,*%')5"%(,*

•! @?&<&'(,)*2/(.34)<#"5#<*1,'(,)*',*"#%.)A7B*;*,"%2&<-*C77B*;*D,"$#E*

F*

!"#$%&&&%'%

%%%%!()*"'%

%%%%%%%%!+,(-,./+,(-)01%23456&75%28456&75%+456&75%-(45,+29-+-"5'%

%%%%%%%%%%%%!"19:%9**")14565%"19:;29.9+45+$<=>77?6?6@5%A'%

%%%%%%%%%%%%!"19:%9**")1456&>75%"19:;29.9+45+$<=>77?>77?BC@5%A'%

%%%%%%%%%%%%!"19:%9**")1456&75%"19:;29.9+45+$<=BC?>77?BC@5%A'%

%%%%%%%%%%%%!"19:%9**")1456&D75%"19:;29.9+45+$<=BC?BC?>77@5%A'%

%%%%%%%%%%%%!"19:%9**")145E5%"19:;29.9+45+$<=E>F?6?>77@5%A'%

%%%%%%%%!A+,(-,./+,(-)01'%

%%%%%%%%!+,(-,./+,(-)01%23456&>75%28456&>75%+45E5%-(45"9G<+,5'%

%%%%%%%%%%%%!"19:%9**")14565%"19:;29.9+45+$<=>77?>77?>77@5%A'%

%%%%%%%%%%%%!"19:%9**")1456&75%"19:;29.9+45+$<=6?E>F?>77@5%A'%

%%%%%%%%%%%%!"19:%9**")145E5%"19:;29.9+45+$<=E>F?6?>77@5%A'%

%%%%%%%%!A+,(-,./+,(-)01'%

%%%%!A()*"'%

%%%%!+)21%34565%84565%H-(1I45>665%I)-$I145>665%%

%%%%%%%%%%*-..45J+.=K,+29-+-"@5%&&&A'%

%%%%!2-+2.)%2345E665%2845E665%+45E665%%

%%%%%%%%%%*-..45J+.=K,+29-+-"@5%&&&A'%

%%%%!+)21%34565%84565%H-(1I45>665%I)-$I145>665%%

%%%%%%%%%%*-..45J+.=K"9G<+,@5%&&&A'%

%%%%!2-+2.)%2345E665%2845E665%+45E665%*-..45J+.=K"9G<+,@5%&&&A'%

!A"#$'%

Page 109: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'"&(%)"$&(%*&+),'-"./"$&

•! !"#$%#&'()*"+,"#-.'#)"/+*).#0.%#$%(#1+*0(#0.'2#.#"-"*,.#3#*&$(4#(#$%#011&•! 5"'%*,"#0.+6,'$*'#0.'"6#)"2")".(-34"-$&5"1%&.%*"&

•! 78"%94.:#

;#

!"#$%&'

''!()*#+,-,+")#*.')"/0!"#$#%&'(0&'

''''!%.12'1$$%#./030'%.12451(1,/0,6789:;<=;<=>0'?&'''!?()*#+,-,+")#*.&'

''!()*#+,-,+")#*.')"/0!"#)#'*!'(0&'

''''!%.12'1$$%#./030'%.12451(1,/0,678=@@;==@;=33>0'?&'

''!?()*#+,-,+")#*.&'

''!,#5.')"/0,20'A/030'B/030'C)".D/0=30'D#)6D./0=30'$)((/0+#,-.!"#$#%&'(/0?&'''!,#5.')"/0,70'A/030'B/030'C)".D/0=30'D#)6D./0=30'$)((/0+#,-.!"#)#'*!'(/0?&'

''''''''EEE'

''!6')"/0.+7F(#),10&EEE!?6&'

''!6')"/02#+10&EEE!?6&'

''!6')"/02#+1G,+*510'$)((/0+#,-.!"#)#'*!'(/0'%.,1H#/0+#,-.!"#$#%&'(/0&EEE!?6&'''!6')"/02#+1I,#.10'$)((/0+#,-.!"#$#%&'(/0'%.,1H#/0+#,-.!"#)#'*!'(/0&EEE!?6&'

!?"#$%&'

!F%#'A()*HJD,#$/0K.+7F(#),10'.,+*%$1,L/0.,+*%(+.#8@3;@3>0&!?F%#&'

!F%#'A()*HJD,#$/0K2#+1G,+*510'.,+*%$1,L/0.,+*%(+.#8M=@;MM3>0&!?F%#&'EEE'

!F%#'A()*HJD,#$/0K2#+1I,#.10''.,+*%$1,L/0.,+*%(+.#8=:@;=<3>0&!?F%#&'

Page 110: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()"*+,&-.'/(

•! !"#$#%#&'("01"2&$34()#*$+,-".%"(/0#'("1)23,("*-)-"*+&'-)"(.",(&'()&-)".%"(/0#'("

•! 4-)-",)+-)"#".5-)"

•! 6#3&-"("#$#%#&'("01"2&$34(#%"0#&5'4(

•! 7#8#)#&,+#9("*-)-"*+&'-)".%"(/0#'("

:"

!"#$%&&&%'()*"+,-../011222&23&45$167771"#$,8%

%%%%!9:;"8%

!!!!!!!!"#$%%&'(! !)*+,-')$(./&0$%%&'(,!#$%%&'(1()%2+,32&'4#$5&6(12&,!!!!!!!!!!!!! ! !7+,8,!9+,8,!:)*%;+,<88,!;&).;%+,<88,!

!!!!!!!!!!!! ! !=)&:>?7+,8!8!<8!<8,!@!

!!!!!!!!!!!!"#$%;!*+,A!8!8!B!C!8!B!DEF!C!G,!H)//+,'&*,!2%'?I&+,J/3&,!K@!

!!!!!!!!"K#$%%&'(@!%

%%%%!19:;"8%

%%%%!<==%>-:%:))?/":%?"%;?)):9%@"?*$%A%.5?A*$):%/A..:5*%/A?*.%":5#:5%

%%%%%%%%A*9%".54B:9%2?.-%C)ADB%==8%

%%%%!:))?/":%H)//+,3'/LM-')$(./&0$%%&'(N,!".54B:+,C)ADB,%".54B:=2?9.-+,E,%%%

%%%%%%%%D'+,F77,%DG+,677,%5'+,3E7,%5G+,HE7,%18%

!1"#$8%

!"#$%&'()*'+,-%.'/012'

Page 111: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()%)*+%,-./)

•! !""#$%&'$'()/*)0*)1%+213)%),+431+)$,-%&(.%()$")/'$#0")

•! 12#,342")"#$%&'5'+365!"#$%&'()$*+,#$!-$%2%#-,&')64%)'()7""#$%&'$'()4('$'()(%#0")'()$")"38%2")64%)'/9,7')")/'$#0")

•! !'$')4&,$'$%)$%)/'$#0"):;'<49%8";=)$%>%)2%#)(%4()9,-,2%()#%7"#2'$"()$%&2#")$%)4-)*+%,-./)

•! ?(2")&0")@)"3#,A'2B#,"*)-'()@)4-')3"')/#CD7')

•! E%(%&F")$%)7'$');'<49%8";)&'()7""#$%&'$'()$")*+%,-./)

•! G")%H%-/9")'3',H"*)F'>%#C)79,//,&A)$%)IHJ)/,H%9()$'),-'A%-)

K)

!"#$%&'

'''!()**#+,'!"#$%&!'&($)()**#+,-,.*%/01%#+2()3#4,-%#0'

''''''''''''5/060'7/060'8."*9/0:60'9#.;9*/0<60'

''''''''''''=.#8>?5/06'6'*+),+0'&'

''''''!.@);#'5A.,BC9+#$/0D9#E.%9F(,;0'5/060'7/060''

'''''''''''''8."*9/0*-0'9#.;9*/0,*0'G&'

'''!G()**#+,&'

!G"#$%&'

!+#3*'5/060'7/060'8."*9/0H660''

''''''9#.;9*/0H660'.!//#$01/23%&!'&(4$'G&'

Page 112: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&%#'

•! !"#$%&%#'%()%'#*+',#%-%#'./'$+/0+#12*+'3&"4$%'•! 5*+'-.461-%#'$+/'+'.(./.67+'()%#*+'.'-.8./'$+67.&',/%'

1/%3./')+67.'9)+&/%-%'0+&':,%(:,.&'1/%3./;'.(./.67+'3&"4$+'+,'$+/<16%2*+'-.'.(./.67+#='

•! >'/"#$%&%'0+-.'#.&'&.%0(1$%-%'%'8"&1+#'.(./.67+#'3&"4$+#'

•! ?@./0(+A'%0(1$%2*+'-.'/"#$%&%'#1/0(.#'9$&1%-%'6+'BC+7+5C+0='0%&%'&./+8.&'+'),6-+'-.',/%'1/%3./'

DE'

!"#$%&'

!!"#$%&!'()*#$%+$,$-.'/.*!/)*0*!1)*0*!2'(34)*500*!4.'643)*780*9!

!!!!"'#$6.!/:';&<4,.=)*>4.?'%4@$%&AB;6*!AAA!C9!

!!"C#$%&9'

!("#$%&'

!)#*+',-./.'0-./.'12"+3-.4//.'3#253+-.6//.'$277-.89:8;8)2<#.'(&'

!5'+)8<%$=);-.+)8<%78+#>?//@A/B.&'

''!2;85#',72<CD3)#$-.E3#F2%3GH<5.'#$%&)*D,:EF#$%+$,$-.'/.G*!(&'

!(5&'

!"#$%&"'(&)*+,-.

/01,2#.3(.45&6(7(8.

!"#$%&"*+,-.

9#&:;2(31.

Page 113: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

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!

!"#"$%&'()"'*$&#*$#+,(*-*$

•! !"#$%&'('")"*+(#','"-+("-./01%",0"2('3%-'(43&.'"5'1*'6"780"%9+"

#81:-1.&',+%"-01+";'1+(",+%"-./01%",+"+<=02+>'1;+",'"#$%&'('"

•! ?0"'"*+320",'"#$%&'('"*+("8#'".#'@0#"&+1+(.,'"./0"5AB"<.2%6C"+"1*2"-$*2%*$,0"&','"-./01")"%8'"2&#)'3'()*C"+<:,'"-01'"*D(#81'E"

•! F8#.3G3&.'"H"IJAKAL".$M"IJNKLB"/$M"IJINAK"0$

•! ?0"*+(".#'@0#"#+3+&(+#$:&'"52+3%",0"&.3O'6C"+"1*2"-$*2%*$&+((0%-+3,0"'+"3P;01",0"&.3O'"5-(02+"H"I6"

•! ?0"'".#'@0#"*+(",0"QA"<.2%"5RST!6C"+"*'2+("'1*'",0"&','"-./01",'"

*+320")"#81:-1.&',+"-01'"18#.3G3&.'"-'('"+<20("+"'1*'"(0%812'320"

KK"

U$%&'('"RST!" V+3;0(20"0#"'1*'" R0%812',+"!1;+",'"#$%&'('"

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!

E"%0@83,+"+"-',(9+"%RSTC"',+2',+"-01'"0%-0&.W&'X9+"?YS"

Page 114: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&%'(#%)*+',-(&%#'./0'

!"#

!"#$%&'

''!()*+,)-'."/0()*.,)-)0'().-1%/02343'52343'523423'633423'6334523'5234523'5234633''

'''''''''''''''''''''''''''''''''234633'234523'34523'3423'234230'$.**/078.1#0'9&'''!:#;1''''."/0:#1<-,=*)0'7."18/05330'8#.,81/05330'>/0230'+/0230'$.**/0:#"09&'

''!;.:;*#''."/0;.:;=*)0''';>/05330';+/06330':/0230'$.**/0,:##-0'9&'

!!"#$%&!'()*#$%+$,$*!-)*.*!/)*.*!!

!!!!!!!!0'(12)*3..*!24'521)*3..*!6!!!!!!!"7%4!-8'9&:2,4;)*<=>8'5>9>*?6!

!!!!!!"7%4!-8'9&:2,4;)*<,41$9578>*?6!

!!!!!!"7%4!-8'9&:2,4;)*<+',+78>*?6!

!!"?#$%&6'

!9"#$%&'

!=%#'>*.-?@8:#$/0A;.:;=*)0'''%1:)?#/0,:<+0'%1:)?#B"<%8<::<+/02'209&'

!=%#'>*.-?@8:#$/0A:#1<-,=*)0'%1:)?#/0,:<+0'%1:)?#B"<%8<::<+/02'209&'

!=%#'>*.-?@8:#$/0A()*.,)-)0''%1:)?#/0,:<+0'%1:)?#B"<%8<::<+/02'209&'!1#>1'>/05330'+/0C330'$)-1B%.D#/06E0'1#>1B<-;8):/0F.""*#0&G<%;<:<!91#>1&'

!:#;1'>/030'+/030'8#.,81/06330'7."18/06330'$.**/0H*=#0'1:<-%$):F/01:<-%*<1#I62343J09&'

!;.:;*#';>/05330';+/05330':/05330'$.**/0:#"0'1:<-%$):F/01:<-%*<1#I6234623J0'9&'

!:#;1'>/030'+/030'8#.,81/06330'7."18/06330'$.**/0H*=#0'#$%&)*7,8@<#$%+$,$A*!!''''''''''''''''''''1:<-%$):F/01:<-%*<1#I23343J09&'

!;.:;*#';>/05330';+/05330':/05330'$.**/0:#"0'#$%&)*7,8@<#$%+$,$A*!!

''''''''''''''''''''1:<-%$):F/01:<-%*<1#I2334623J0'9&'

Page 115: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&%'()*+'

(,#-./%01'

!"#$%&%#'()'&)$*&+)',-'./+0'

•! 2%&%'3#1.%&'%'34%5,4'01'6,37,8'913'-#%0%'-4%'4"#$%&%'0,'&,$1&/,'

•! :%0%'637,.';&%<$1'=>???@'-#%'%6,<%#'013#'A%.1&,#'%.9%'

•! 1'B'CDDE'/&%<#6%&,</,'=,7$.-3'01'&,#-./%01@''

•! -'B'CDDE'16%$1'=3<$.-3'<1'&,#-./%01@'

•! F-'$%0%'637,.'0,'%.9%BC'-#%'%6,<%#'0-%#'$1&,#'

•! 2111'B'CDDE'6&,/1'16%$1'=,7$.-3'01'&,#-./%01@'

•! 2333'B'CDDE';&%<$1'16%$1'=3<$.-3'<1'&,#-./%01@'

•! (,#-./%01'0,##,'G61'0,'4"#$%&%',H-3A%.,'I'%6.3$%JK1'0,'$.3663<5'

CL'

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!

CL'

(,#-./%01'+.A1'0%'4"#$%&%'

Page 116: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&"'()*+),-.(/0)

•! 1)!"2#"3+$43")!"5$*"3)

•! $%%&'!()')*#")+,-&)"!"+)&.-&)"')"/0*1)&)"

•! 2"&!*-+,)'%"')")3+41)56%"')"/0*1)&)"+!7)"!/"1%(,)")*"1%%&'!()')*"!"'4/!(*8!*"

•! 9!*-+,)'%"*!&0",&-(1)'%"*!"1%%&'!()')*"!"'4/!(*8!*"'%"%:;!,%"(6%"1%-:!&!/"()"/0*1)&)"%-"741!<7!&*)"

•! -.(/67$"(=>-*!&?3)1!2(@*!"A"%:;!1,B%-('4(.B%C>"

•! D!E)-+,"F"'%8+9":'&7*$74:'1#"G-!"1%(*4'!&)")*"1%%&'!()')*"1#"2#"3+$43")!"5$*"3)3!&1!(,).!(*"'%"%:;!,%"(%"G-)+")"/0*1)&)"F")3+41)')"

•! &(+#;<.9+=76(+)1%(*4'!&)"%*"1%(*4'!&)"7)+%&!*"'%"*4*,!/)"'!"1%%&'!()')*"-*)'%"G-)('%")"/0*1)&)"F"&!E!&!(14)')"

HI"!"#$%&$'(%"&%)*+,--.../.0/123-45-6!7-&$(8'93/):&;%

Page 117: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&"'(#)*++*,-.'

•! !"#$%&'()&*+,(-.,/0,()&*+,('+"("+%&"-.*&'()&"(1,(%.,234&(*+$32*&()+5&(+5+,+3-&(/#)*+01&23'

•! 613%2&3.(%&,&(,#'%.".(*+(7(/2-(

•! 8"+.'(9&".(*&(%52))23:().-4(3;&(';&(*+'+34.*.'(

•! <.,234&(0(%&,/23.=;&(*&'(+5+,+3-&'(1'.*&'(3.(*+$32=;&(

•! >1.5?1+"(&/@+-&()&*+(.)52%."(&("+%&"-+(%&,(&(.-"2/1-&(#)*+4+1&2A(?1+("+%+/+(1,.(913=;&(*+(B)&23-+"(1"5CD2*"+9E().".(&(/#)*+01&23'

•! F(.-"2/1-&(#)*+4%5)"''+(.)52%.*&(.(1,(+5+,+3-&(6",&%$'*&(/#)*+01&23'%&,)&"-.G'+(%&,&(7))4%5)"'3&("+'15-.*&(

•! 613%2&3.().".()&5H:&3&'A(%.,234&'A(+-%I(

•! JB+,)5&(*+()&5H:&3&'(%&,(7))4%5)"'

7K(

!""#$%"&'()*)+&$*(, !""#$%"&'(&-&)*..(,

Page 118: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()#(*&+%%+,-(*'$(.*&+%/0123(

!"#

!"#$%&&&%#'()*+,-./%/%0//%0//.1%

%!2(3"1%

!!!"#$%&'()*!%+,-&.$/-0%

%%%%%%!4+56$+7%4+'78"-.0/90/%://9://%://90/%;//90/%0/9://%://9;0/%://9<0/.%%

%%%%%%%%%%%%%%%#$%&123$4,-4546.++-!=1%

%%%%%%!>'?>5(%?-.0/.%>,-.<//.%>6-.://.%>5'4@?A5(-.(#(7+22.=1%

!!!"7#$%&'()*0%

%!=2(3"1%

%!'BC$(%,-./.%6-./.%D('$D8-.0//.%)'28D-.E//.%,5'7FGD?(3-.5AC&47$.%%

%%%%%%%#$%&1&()*,-32$89&.$/:-!8?C7"3+?B-.8?C7"5C8(H</9</I.=1%

!="#$1%

Page 119: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*#$+%,(

•! !"#$%&'()&*+",-*(-#.&%"$*&'(/-%-()&*/&%(010"$&'(.%23)&'(

•! 4&*/&'"560'7(80'1&9:0'7(/&,$&'(80(#:;7(*0')#-.0,'7(0$)<(

•! =&80*('0%(-/#")-8&'(0*(&+>0$&'(8"10%0,$0'(

•! ?03,"8&'()&*()*#$+%,(9:0()&,3.:%-(0()&,)-$0,-(:*(&:(*-"'(-#.&%"$*&'(-%"."/0&'(@)-8-(:*(%0-#";-(1.2(&/0%-5A&B(

•! C2(-$%"+:$&'(0(':+D0#0*0,$&'(/%E/%"&'(/-%-()-8-(/%"*"FG&(

•! ?0$-#H0'(,-(0'/0)"3)-5A&I(!"#$%%&&&'&(')*+%,-%./0%1234*5'!362(

•! J+>0$&'(%010%0,)"-*(&(3#$%&()&*(&(-$%"+:$&(*#$+%(

•! K%0)$(<<<(3#$0%LM:%#@N3#$%&BM(OP(

•! ?"*0,'60'(801-:#$(

•! QLDRS7(TLDRS7(H0".H$LRUSV7(W"8$HLRUSV(

•! X0%-#*0,$0('0(803,0(:*(3#$%&()&*(*-"'(0'/-5&(/&"'(010"$&'(/&80*(G-;-%(-#Y*(8&'(#"*"$0'(8&(.%23)&(

RZ(

Page 120: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$#%&'()*#)+"&,')*')-./)010)

•! !"#$%#&'()*•! +,-./&0*'102*/-03#&24*056/.15,27*-1%89%:;*2<6##&;*'06=#&;*#5<>*

•! !"#+,%,6?056/@()*•! A#B&#*1-*B%56,*0560CD2*'#*1-0*-056/E*'#*560&2",6-0FG,*'#*<,6#2>*

•! !"#+,-9,&#&5H60&2"#6()**•! IJ125#*'#*.6/%K,;*<,&56025#;*.0%0&<#0-#&5,*'#*<,6#2;*#5<>*

•! !"#+,-9,2/5#()**•! +,-./&0*'102*/-03#&2*120&',*0%3,6/5-,2*'#*<,-9,2/FG,*

•! !"#+,&C,%C#?056/@()**•! I9%/<0*1-0*-056/E*'#*<,&C,%1FG,*9060*'#2",L1#;*#-.,22/&3;*#5<>*

•! !"#A/M12#N/3K8&3()**•! I9%/<0*1-*#"#/5,*'#*%1E**'/"120*#-*1-0*/-03#-*120&',*,*<0&0%*0%"0>*

•! !"#A/29%0<#-#&5?09()**•! O"#/5,*6#0%/E0',*'#2%,<0&',*0*/-03#-*'#*%1306>*

•! !"#P%,,'()**•! Q6##&<K#*1-0*R6#0*<,-*<,6*#*560&2906S&</0*'#5#6-/&0',2*&,*B%56,>*

TU*

Page 121: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$#%&'()*#)+"&,')*')-./)010)

•! !"#$%&''(%)*+&,-.//•! 0#'"12%/%/(3%4#3/&'%)51/%+41,(631/4%&''(%)17/

•! !"#83%4#-.//•! 9'%/&3%/(3%4#3/#:6#,)%/2131/"1)6#/;%,%/1/<+6,17/

•! !"#=#,4#-.//•! >13?()%/@A,(%'/(3%4#)'/#:6#,)%'/;%,%/"1,3%,/1/<+6,17/

•! !"#=1,;B1+14C-.//•! 9'%51/;%,%/#,15(,/1&/5(+%6%,/1/1?D#61/)1/E&%+/1/<+6,1/F/%;+(2%517/

•! !"#GH'#6-.//•! 0#'+12%/%/(3%4#3/#3/,#+%IJ1/K/'&%/;1'(IJ1/%6&%+7/

•! !"#L;#2&+%,M(4BN)4-.//•! O;+(2%/&3/#"#(61/5#/+&P/?,(+B%)6#/#3/&3%/(3%4#3/&'%)51/1/2%)%+/%+"%7/

•! !"#Q(+#-.//•! 0#<)#/&3/<+6,1/2131/&3/;%5,J1/5#/(3%4#3/,#;#N5%7/

•! !"#Q&,?&+#)2#/-.//•! >,(%/#"#(61/5#/)&@#)'/1&/3A,31,#7/

RS/

Page 122: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*#+,'-.#)/0.++102')

!"#$%&'

''''''''!$()*#+'(",-$.-'/,-0122-'3,-0122-''

''''''''''''''''4#(54*,-.22-'6("*4,-.22-&'''''''''''''!$#789%%(8:;)9+'%*"<#=(8*(>:,-?2@2-''

''''''''''''''''''''''''''''(:,-A>9+B#7+8C4(B-D&'

''''''''!D$()*#+&'

''''''''!$()*#+'(",-$1-&'''''''''''''!$#789%%(8:;)9+'%*"<#=(8*(>:,-?-'D&'

''''''''!D$()*#+&'

!D"#$%&'

!*#/*'(",-*#/*-'$>:*0%(E#,-FG-'$()),-H)9#-''''''''/,-?2-'3,-I2-'$()*#+,-9+)JK$1L-&'

''''''''''M>B#'C+#B(%8'"#'>B9)>%N'

!D*#/*&'

!5'(",-%*8+">*-'*+8:%$>+O,-*+8:%)8*#J122@?2L-&'

''!C>)35>:'(",-%*8+-'C>(:*%,-.?2@2'F22@?22'[email protected]'[email protected]'122@?22-'''''''''''''$()),-+#"-'$())0+9)#,-#=#:>""-D&'

''!B(+B)#''(",-B(+B-'B/,-.?2-'B3,-.GP-'+,-Q?-'$()),-H)9#-'$()*#+,-9+)JK$1L-'D&'

!D5&'

!(O85#'/)(:RS4+#$,-T4#U(%4VC:5-'6("*4,-F22-'4#(54*,-P22-''

'''''''/,-122-'3,-??2-'$()*#+,-9+)JK$.L-'D&'

Page 123: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&%'()($)'*+#%&,'(

•! !"#$"%&%'&()*")+,-./"01"%'&)2)(&,).3',2*"4)

•! !"#$%&'$()*+%(5)")+,-./"01"%'&)/"#$3&'")

•! !"#$%&,-)*((5)#-(/2,2)(6#$3&()*")+,-./"01"%'&)

•! 7)#26",)$2,'&)*"()$,6#689"()*&).3',"),&/&:&#);#2)";)#26()&%',2*2()<-"=)>;&)$"*&#)(&,)

•! !"#$"%&%'&)*&)+,-./"01"%'&)

•! ?&(;3'2*")<$)'*+#=)*")$,"/&((2#&%'")*&)23+;#)";',")$,6#689")

•! @A&#$3")B$6/")*&)/"%/2'&%2CD")*&)23+",6'#"()*&).3',")

•! !"#$$$%&'()!"#$%&,-)*()%***%+#,-./())(.."/)%01%

•! !"#222%&'())(.."/)%***%%%%%%+#,-./())(.."0)%01%

•! !"#333%&'()!"#$%&'$()*+%)%&'4())(.."0)%%%%%%%%%56#+7/5+()85+)%%%%%%%+#,-./())(.."1)%01%

•! E;',2()1"%'&()>;&)$"*&#)(&,);(2*2()/"#")&%',2*2%

•! 2(%34$"#5678(4&(&)2(%34$"#56,-)*(F)")1;%*")*2)6#2+&#)

•! 9+--:(+5;(&)!;$"3&:(+5;F)/",G$2*,D"G+,2*6&%'&)*&)$,&&%/H6#&%'")";)',2C")

IJ)!"#"$%&&'()*"+,-./-"-,01$2*,3"%"4205%"6%-"7,6893%205:-,9)")"7,6893%205;*$<,"

Page 124: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'(&)*&+$&'

!!"

!"#$%&&&%'%

%%%%!()*"'%

%%%%%%%%!+,-)./0/.(,)-1%&&&%,(23!"#$%"%&3'%&&&%!4+,-)./0/.(,)-1'%

%%%%%%%%!*,+1)/%,(23'('%)$*+3%52367883%92367883%:),$:123;883%<,(1:23;883'%

%%%%%%%%%%%%!=66%>/,+:?%66'%

%%%%%%%%%%%%!*)0.@"",.->+@/%,-23,$-"#'./01!3%"1(A)#,.1,?-23;3%/)"@+1232$""!$3%4'%

%%%%%%%%%%%%!*)B+??(%%%%%%%%*+??(6C?+?/23?/.-$)3%*+??(6?D.C,1923E3%%%/)"@+123/!"!34!3%4'%

%%%%%%%%%%%%!*)F?GD?",1)%%%%,-23/!"!34!3%%,-H232$""!$3%?D)/.1?/23,-3%/)"@+1232"%/1$3%4'%

%%%%%%%%%%%%!=66%I?GJ/.%66'%

%%%%%%%%%%%%!*)K**")1%,-232$""!$3%(523L3%(923L3%/)"@+123&$52"!3%4'%

%%%%%%%%%%%%!=66%M)51?%)G%7A%66'%

%%%%%%%%%%%%!*)ID)C@+./N,$:1,-$%,-232$""!$3%%"@/*.C)IC.+)23;3%"D)C@+./F?-"1.-123E3%%

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%"D)C@+./O5D?-)-123E;3%+,$:1,-$6C?+?/23<:,1)3%/)"@+123/-67%(-&!3'%

%%%%%%%%%%%%%%%%!*)P?,-1N,$:1%5236;83%9236H883%Q2378834'%

%%%%%%%%%%%%!4*)ID)C@+./N,$:1,-$'%

%%%%%%%%%%%%!*)F?GD?",1)%,-23/-67%(-&!3%%%%,-H23,$-"#'./01!3%?D)/.1?/23,-3%/)"@+123/-67%"')!34'%

%%%%%%%%%%%%!*)F?GD?",1)%,-23,$-"#'8"!01%#3%,-H23/-67%"')!3%%?D)/.1?/23./,1:G)1,C3%%

%%%%%%%%%%%%%%%%%%%%%%%%%RE2383%RH23E3%R723E3%RS2383%/)"@+123)'9)$*73%4'%

%%%%%%%%%%%%!=66%F?GJ,-.C.?%(?"%*,+1/?"%66'%

%%%%%%%%%%%%!*)T)/$)'%

%%%%%%%%%%%%%%%%!*)T)/$)U?()%,-23&$52"!34'%

%%%%%%%%%%%%%%%%!*)T)/$)U?()%,-232"%/1$34'%

%%%%%%%%%%%%%%%%!*)T)/$)U?()%,-23)'9)$*734'%

%%%%%%%%%%%%!4*)T)/$)'%

%%%%%%%%!4*,+1)/'%

%%%%!4()*"'%

%%%%!$%1/.-"*?/G231/.-"+.1)V;8W;8X%"C.+)VHX3'%

%%%%%%!1)51%,(231)513%*?-16<),$:123J?+(3%*?-16*.G,+923,GD.C13%%

%%%%%%%%%%%%*?-16",Q)23E;83%*,++23@/+V:!"#$%"%&X3%52383%923EY83%*,+1)/23@/+V:'('%)$*+X3'IZ0!41)51'!4$'%

!4"#$'%

Page 125: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'(&)*&+$&'

!"#

!"#$%&'

$("()*('

+,-&./&0#1,'

+,2++0,1'

0&.!"('

3&4"5,6"(/%#5'

3&4"5,7$/%('

+,-&./&0#1,'

+,3/,54$("''

8#9%1#)9'

$4:;#+40('

!&""(&'

+,-&./&0#1,'

$4:;#",1('

+,<$&&='+,>,"9,'

+,6(400#()'

?$4"'

,+,#1&@;'

1,A1&@;'

!"#

!"#

!"#

!"#

!"$#

!"#

!"#

!"$#

!"$#

%&'()*#

%&'()*#

%&'()*#

%&'()*#

%&'()*#

%&'()*#

%&'()*#

!"#

!"#

)' )' )'!"#

,-.("&'

Page 126: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&%'()*

•! !"#$%&'(%)*&%+(,$-%&.*/%+(0'(1$*&%(2%/%(

•! 3'4)&5)$'62'(

•! 3'7'&-'(

•! 3'8$'60(

•! 3'9.:)+';.-<=6-(

•! 3'>%$%&7,*&."(

•! >%6+)$*'(,('+#'2.12,?@%('/(

•! !"#$%%&&&'&(')*+%,-%./0%1234*5'!3627

•! A#$.B)'(%+(1$*&%+('/(0'+'6<%+()+,0%+('/('"'/#$%+('('"'&2C2.%+(

•! !"#$%&'(%+(1$*&%+(D,&.,60%(,*&.5)*%+('(#,&E/'*&%+(

FG(

Page 127: SVG - Scalable Vector Graphics: Uma Introdução Prática

!""#$%&'$'()

*+%,-"#.()%)*+%,/"0%()

!1+--+&2)$%)*+%,-"#.()

.#'&(3"#4'56")$%)!""#$%&'$'()

!"#$"%&$'&()*+'&,+"#$"%-'%.)/'0123*)435%6&

Page 128: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!""#$%&'$'()%)*+%,-"#.()

•! !"#$%&"'()%"'"*$#+,'"-./"0")%1%(2&)'",2&3&41%"/01)0+%,-"#.)

•! 5'(603"&"'2.3#')%"2'#43#')7%3"89:%;1<"

•! =')%",'(6%$">3&"3&+$'$%)78:?",3?"9(?"%6,@<"

•! A"6&3&(2'")'"B9%C8'$6"8')%""1%$"%18%,9+,&)'"%:8;9,96&3%(6%"7&6$9D>6'1"5%+45.)%",+$.5<"'>",&;,>;&)'"&>6'3&E,&3%(6%"

•! A",#;,>;'"0"F%96'"&"8&$E$")&"3&9'$";&$*>$&"%"&;6>$&")'1"'DG%6'1",'(E)'1"('")',>3%(6'?"1%"5%+45.)%",+$.5)(H'"%1EB%$%3")%+(9)'1"

•! A"B9%C8'$6")%+(%"$"+()1916%3&1")%",''$)%(&)&1?"I>%"1H'"9(9,9&;3%(6%"9)J(E,'1"73%13&"'$9*%3?">(9)&)%?")93%(1K%1<"

•! 1916%3&")%",''$)%(&)&1")'"B9%C8'$6"7*+%,-"#.)(-'6%<"

•! 1916%3&")%",''$)%(&)&1")'">1>#$9'"73(%#)(-'6%<"

•! L'B&1",''$)%(&)&1"8')%3"1%$"%16&D%;%,9)&1"&6$&B01")%"".#'&(7"#8'9:%())'"1916%3&")'">1>#$9'?"8%;'1"&6$9D>6'1"

•! *+%,;"<?"%3"M1B*N?"M1O3D';N?"M3&$P%$N?"M8&Q%$(N?"MB9%CN""

•! .#'&(7"#8)%3"%;%3%(6'1"*$#+,'1"'>",'(6&9(%$1"7*$>8'1<""R"

Page 129: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'"(#)*+%,

•! !"#$%&'(")*)&+("&,-./0)"-1)"/0)2.3(01)45("%6"-1".&./61)"%6"

#((0%62)%).7"61"06,)45(")(".&./61)"(0&'&2),"

•! !"2(8(".&./61)"/61".-)"(0&'61"2)"9(.&45(":;7:;"%(".&./61)"(0&'&2),"

<"

!"#$%&'()*+,-../0,%*1'$*)+,23./0,%0456"+,*))/788&&&9&:9;<$8=...8"#$,%#1<"';6+,292,>%

%%!$%?'55+,6;61,%")<;@1+,A5BC@,%")<;@1D&'()*+,:,%>%

%%%%!5'61%02+,.,%E2+,293,%0=+,-..,%E=+,293,%8>%

%%%%!5'61%02+,293,%E2+,.,%0=+,293,%E=+,23.,%8>%

%%!8$>%

%%!$>%

%%%%!)10)%0+,:.,%E+,:.,%999%>%

%%%%%%FGH%I"'")14B%(1%C;;<("%;<'$'6B5J%

%%%%!8)10)>%

%%!8$>%

!!"#!$%&'()*%+,-$%&'(.&$/0123124-5!

!!!!"#!)6..,-'*'/-!($%*7/,-%/8-!!

!!!!!!!($%*7/9:68$;,-<-!5!

!!!!!!".6'/!=>,-2-!?>,-2-!=@,-12-!?@,-2-!!

!!!!!!!!!!!!($%*7/,-%/8-!A5!

!!!!!!".6'/!=>,-2-!?>,-2-!=@,-2-!?@,-12-!A5!

!!!!"A#5!

!!!!"$/=$!=,-<2-!?,-<2-!BBB!5!

!!!!!!CDE!0(6($/+&!8/!F**%8(!8/(.*F&8*!/+!123124!

!!!!"A$/=$5!

!!"A#5%

!8"#$>% =(2/6>"?<@"A6.96#&B#)45("CDEF"

Page 130: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&"'(')(*+,(-.+"-$,(-#"'

•! !"#$%$&$'()*%+),"#-.%/*+"%"+"#$'."%/$%0**-/$1./."%1*2*"%•! 3*'%/$")*0.'$1#*%45675%$%-*#.89*%/$%75%:-.,"%;$'%-$).89*%<%*-+:$'%/*%=>?%

•! 3*'%/$")*0.'$1#*%@56A55%$%.,'$1#*%/$%45B%

@%

!"#$%&'()*+,-./01,%*2'$*)+,3//01,%#24"'56+,787,%19:6"+,*))0;<<&&&8&=854$<-///<"#$,>%

%%!$%?'::+,6562,%")45@2+,A:BC@,%")45@2D&'()*+,=,%>%

%%%%!:'62%17+,/,%E7+,78.,%1-+,3//,%E-+,78.,%<>%

%%%%!:'62%17+,78.,%E7+,/,%1-+,78.,%E-+,7-/,%<>%

%%!<$>%

%%!"#$%&'()*%+,-$%&'(.&$/0123425-6#

####!"#$%&'()*%+,-%*$&$/0425-6#

######!"#)7..,-'*'/-#($%*8/,-%/9-#($%*8/:;79$<,-4-#6#

########!.7'/#=>,-2-#?>,-2-#=@,-12-#?@,-2-#A6#

########!.7'/#=>,-2-#?>,-2-#=@,-2-#?@,-12-#A6#

######!A"6#

######!$/=$#=,-2-#?,-2-#BBB6CDE#0%*$&$/5!A$/=$6#

####!A"6#

##!A"6%

%%!"#$%&'()*%+,-$%&'(.&$/0F23@225-6#

####!"#$%&'()*%+,-(G&./0>B15-6#

######!"#)7..,-'*'/-#($%*8/,-%/9-#($%*8/:;79$<,-4-#6#

########!.7'/#=>,-2-#?>,-2-#=@,-12-#?@,-2-#A6#

########!.7'/#=>,-2-#?>,-2-#=@,-2-#?@,-12-#A6#

######!A"6#

######!$/=$#=,-2-#?,-2-#BBB6CDE#0(G&./5!A$/=$6#

####!A"6#

##!A"6%

!<"#$>%C*1#$D%E73%;$"($0+F0.89*%G=H?%

Page 131: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&$'()*+,-."#*+/01+,*$)2()3"$%4,

•! !"#$%&'(&)*+,-".#5(6/"0$%,-1#*"-"%$%,*)&"0*"#--10*+&0&%"2-1"

3)&",&+4*+,*"(-1$5-+,&'"-3"6*17#&'"

8"9-+,*:";<=".*%2*#$>#&?@-"ABC/"

!"#$%&'()*+,-./01,%*2'$*)+,3//01,%444%5%

%%!$%6'77+,8982,%"):9;2+,<7=>;,%"):9;2?&'()*+,@,%5%

%%%%!7'82%1A+,/,%BA+,A4.,%1-+,3//,%B-+,A4.,%C5%

%%%%!7'82%1A+,A4.,%BA+,/,%1-+,A4.,%B-+,A-/,%C5%

%%!C$5%

!!"#!$%&'()*%+,-$%&'(.&$/0123124-5!

!!!!"#!$%&'()*%+,-(6/780124-5!

!!!!!!"#!)9..,-'*'/-!($%*6/,-%/:-!($%*6/;79:$<,-1-!5!

!!!!!!!!".9'/!=>,-2-!?>,-2-!=@,-A2-!?@,-2-!B5!

!!!!!!!!".9'/!=>,-2-!?>,-2-!=@,-2-!?@,-A2-!B5!

!!!!!!"B#5!

!!!!!!"$/=$!=,-2-!?,-2-!CCC5DEF!0(6/784"B$/=$5!

!!!!"B#5!

!!"B#5%

%%"#!$%&'()*%+,-$%&'(.&$/0123>G24-5!

!!!!"#!$%&'()*%+,-(6/7H0124-5!

!!!!!!"#!)9..,-'*'/-!($%*6/,-%/:-!($%*6/;79:$<,-1-!5!

!!!!!!!!".9'/!=>,-2-!?>,-2-!=@,-A2-!?@,-2-!B5!

!!!!!!!!".9'/!=>,-2-!?>,-2-!=@,-2-!?@,-A2-!B5!

!!!!!!"B#5!

!!!!!!"$/=$!=,-2-!?,-2!CCC5DEF!0(6/7H4"B$/=$5!

!!!!"B#5!

!!"B#5%

!C"#$5%

!"#$%&'(%)*+))

,"#-./-0+1$%)23&-4#5)

Page 132: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&"'("#)*+,'#-(

•! !"#$%&'($)""#)*+,'#-(*)+,"%,-,',%"(.#")(".#&/"$%#0/1)%.#23,/"/,*#%#+#/"*)%"45%6(7#/")(",/*#2)8"9(,"*)+,."/,%"

•! !"#$%&'"(()"(*)"(+)"*()"**)"*+,-:",;*%,//#"(."-)0<(0$)"+,"$%#0/1)%.#23,/"-).'&0#+#/"-).)"(.#".#$%&=">;>"?@7A.#"7&0B#"+#".#$%&="C"D8"D8"EF"

•! #$"./0"#1'#&,-)("#$"./0"#1'#&)-#2,-:"+,/7)-#"#")%&6,."

•! /3"01'/&,-)("/3"01'/&)-/2,-:"%,+&.,0/&)0#"

•! $4#"#1'!,")("$4#"#1'!)-3&)-32,-:"6&%#")"/&/$,.#"!"6%#(/"/)'%,"#")%&6,.")("/)'%,")"-,0$%)"3&)32-

•! /5167'!,-,"/5168'!,":"-&/#7B#.,0$)"+,"! 6%#(/"

•! G/"$%#0/1)%.#23,/"#'#&;)"/H)",9(&4#7,0$,/"

I"

9:-#$"./;4$!<=#$"./0"#1'>(?)>*?,=@-

--9:-#$"./;4$!<=/3"01'*,=@-

----9:-#$"./;4$!<=$4#"#1'AB,=@-------9:-#$"./;4$!<=#$"./0"#1'B)(?,=@-

--------9C>>-:$"DE%3/-101!1.#/-:4-E1$1->>@-

------9F:@-

----9F:@-

--9F:@-9F:@-

9:-#$"./;4$!<=#$"./0"#1'>(?)>*?,--

--------------/3"01'*,--

--------------$4#"#1'AB,--------------------#$"./0"#1'B)(?,=@-

9C>>-:$"DE%3/-101!1.#/-:4-E1$1->>@-

9F:@-

J)0$,K"L>M"?,/*,-&N-#2H)"OPQF"

Page 133: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&"'()$*+,'-(

•! !"#$"%&'(%)(*+(%$,%-&(.%,%),$/"01,%1"2"%,)&3(4%/,1,%,%"53(6,%

•! 75/(8".")"%&'%4"/9$:&.,%$(5%.''#/*01/12(/'(&2&3#$'(-&"%1"2"%5"4%'(3"(1,%

(,5%.*'*/"5%"5/(8".")*1,5%3".,%),$/"01,;%,%-&"%3(55(4%<%),4/(1,%=.4$55$06>%

•! ?/4*8&/,%5#*2*#)*!25*."718'(3,1"%5"4%&5(1,%3(4(%:(4($@4%-&"%(5%34,3,46A"5%

5"4B,%'($@1(5%

•! C*5/(%1"%-&(/4,%(/4*8&/,5%

•! '*$D+E%'*$DFE%.(4:&4(E%(./&4(%

G%

!"#$%!"#$%&'()*+*+,-**+,***)+&'("('#()"&(*+,-+./012/2(13334%

%%!'(*+%50161%70161%8.9+:01,-**1%:(.$:+01,***1%%

%%%%%%%%;.<<017(<</81%"+'/=(01><?(1%"+'/=(@8.9+:01AB1%%C4%

%%!&-+:%;.<<01'(91%%901D%EF6GA66%H%BF6GI66%H%ABF6GI66%J1C4%

%%!+(5+%501A661%701K661%333%4L+'(+*:%+/%;.+!C+(5+4%

!C"#$4%

!"#$%!"#$%&'()*+*+.***+/***)+&'("('#()"&(*+,-+./012/2(1%

%%%%%5M<2"01:++&NCC88838O3/'$CB666C"#$1%#('"./201A3A14%

%%!'(*+%50161%70161%8.9+:01,-**1%:(.$:+01,***1%C4333%

!C"#$4%

H,$/";%IJK%="53")*#)(6B,%LMN>%

Page 134: SVG - Scalable Vector Graphics: Uma Introdução Prática

!"!#$%&'

()")&*+,-$'

&".'/%0'

!"#$"%&$'&()*+'&,+"#$"%-'%.)/'0123*)435%6&

Page 135: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'(

•! !"#$%&'($)(*%&+'()$,$(-(+.&*$/+/0/,'&*$%(1&$2*23)/&$,.),-4*$'($)(02)*&*$',$1/+52,5(6$

•! 7&-/6(+.&$'&$6&2*($&2$01/82(*$%&'(6$'/*%,),)$,+/6,9:(*;$*0)/%.*$&2$)(,1/<,9=&$'($>/%()1/+?*;$<&&6$($)&1,5(6;$62',+9,*$'&$02)*&);$(.0@$

•! A*%(0.&*$'($!"#$,B(.,'&*$%&)$(-(+.&*$

•! C2-/+.(*$'($(-(+.&*$'&$DC7$E)*+(,-'%#$#.'F$)(5/*.),'&*$%&)$*0)/%.*;$($82($0>,6,6$&2.)&$*0)/%.$82,+'&$(G(02.,'&*$

•! /%.-01%&'(2#(#"#$%&'((6$(1(6(+.&*;$82($/+'/0,6$*0)/%.$,$(G(02.,)$82,+'&$&$(-(+.&$,0&+.(0()$

•! !,#3#$%&'(2#(4$-3456&(%&'(6$0&6(9,)$&2$%,),)$26,$,+/6,9=&$0&6$H,*($(6$(-(+.&*$

•! A.)/H2.&*$%()6/.(6$1/5,);$'(*1/5,)$&2$0&+.)&1,)$,$B&)6,$0&6&$(-(+.&*$*=&$.),.,'&*$%&)$(1(6(+.&*$

•! 7&-$%#.8#"#$%'(I$0&+.)&1,$,*%(0.&*$'($01/82(*;$6&-/6(+.&*$

•! 9&&3/$2:4$(I$0&+.)&1,$/+.(),J-/','($'($<&&6$

•! ;1.'&.(I$0&+.)&1,$,$,%,)K+0/,$'&$02)*&)$E.,6H46$(G/*.($26$(1(6(+.&$L02)*&)M$82($%()6/.($'(N+/)$26$02)*&)$(*%(0ON0&F$

P$

Page 136: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*+,$)-&'./'/0/%)-'

•! !"1-2$&+%#$#!"1-2$&-$)'•! %&'(')!*#+,'")!#$-$($".!#/$0$1$#!,#2$/)$#3!0!##

4+,'")!#,(#.$5.!#6#*$-$07!"')!8#2!/#$5$(2-!9#

•! !"(230()/'

•! %&'(')!#+,'")!#,(#$-$($".!#6#':;')!#'./';6*#)$#,(#0-7+,$#!,#.$0-'#

•! !"2"+248#!"5-$&/$68#!"5-$&/.-7%'•! %&'(')!*#+,'")!#,(#(!,*$#6#0-70')!#*!1/$#!#$-$($".!#

•! !"5-$&/-0/*8#!"5-$&/5-0/8#!"5-$&/-$)'

•! %&'(')!*#)$#'0!/)!#0!(#!#(!;7($".!#)!#(!,*$#*!1/$#,(#$-$($".!#

•! !""-(.8#!"$%"-(.8#!"/**-*'•! <;$".!*#/$-'07!"')!*#=#0'/>'#)!#!1?$.!#"'#($(@/7'A#

•! !"*/&+8/8#!"&2*-""8#!"8--5'

•! %&'(')!*#+,'")!#,*,B/7!#/$)7($"*7!"'#'#.$-'8#/!-'8#,*'#C!!(#

•! !",/#+%8#!"/%.8#!"*/6/()'•! <;$".!*#/$-'07!"')!*#'!#0!(2!/.'($".!#)$#'"7('DE!#

F#

!!!""""""!"#$%$&'(#

(&!!!#!"#)'*+,-'(#

Page 137: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()

•! !"#"$%&'%()*("#$"$+),-."-%/$.&"0"$$

•! 12#)3.24$"*'+,'+!"#$%+-.%,)0%$5&6-7$80%9".+2$/%%0$"/&*'1

,"2/3"#$%+:$4.$"2#)3.24$+.%,)04$%+%/%,24$43"#$%+5)

80%9".+2$+,6+1,"2/3"#$%+:$

•! ;%$4$(+)%,2%$,"4$&.'4#2"#$"$+),-."-%/<$,%,=./$3+4(4$

&(#)'2$>$%?%(.2"04$

•! @$%+%/%,24$43"#$%+5)$

•! 1(%)2"$0%(+"#"AB4$+4("+$0%$(C0)-4$43"#$%+5777413"#$%+5)

•! 1(%)2"$"#D.)64$%?2%#,4$6)"$$

43"#$%+)60$'89:#,;<=/#>?$@*7A3=)15)

E$

Page 138: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*+,$-./*',$0&1*2$

•! !"#$%&"'()*#')+#%,&)',*#*'+-.&#-/*#'+-$,-.".&")'012'

•! !"#$%%&&&'&(')*+%,-%./0%12+3)4'!5467

•! 012'345'")&".6"'758'345'

•! 9.&"#:*+")'6-'012'345';"#6*$'6-'758'345'

•! !-6"<)"':*="#'>(*)"'&(6-'+-.;"+".6-<)"'*,".*)'-'758'345'

•! !"#32*)*+,$;"#6*'6"'32*)*+,$?>("';"#6*'6"'4&1*@'

•! !"#%&'()*+,$;"#6*'6"'%&'()*+,$?>("'&*$AB$'B'4&1*@'

•! 4AC"&-)'"),"+%*%)D''

•! !"#$%&'($?,-.&"%#-',*#*'5@'

•! &)($?,-.&"%#-',*#*'"E".&-@''

•! !-.&"%#-',*#*'>(*/>("#'"/"$".&-',"/-'93D'

•! !"#$%&'(!"#$%&#'#($)*+,-./,.012

•! F/"$".&-'>("':-%':-.&"'6"'($'"E".&-D'

•! 3452#&#'#($6272&)(!$45"#$12G'

Page 139: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'$

•! !"##$%&%'()*+,-)#&)#.)-/0-,#&.,*,&-,1,&"23)("&1"&456&

•! 45678)9)'(:&45645678)9)'(:&456;)-(78)9)'(:&456<9,=)78)9)'(:&456!,(>78)9)'(:&)(-?&

•! 4564(@8)78)9)'(&)&.*".*%)1,1)&()*+,$A1,&BCD&#.)-&EFG&H&D44I&

•! !*".*%)1,1)#&-+.-/:&012(,13,4:&)(-?&ABCD&#.)-&EFG&H&7J)'(#I&

•! 456D"8"*:&456!,%'(:&456K*,'#+"*9:&)(-?&

•! L&9,%"*&.,*()&,.)',#&)M.N)&.*".*%)1,1)#&1"#&)8)9)'("#&

•! F$(*"#&-"9"&456D"8"*:&456K*,'#+"*9&)&#%9%8,*)#&(O9&9P("1"#&)&.*".*%)1,1)#&Q$)&+,-%8%(,9&,&9,'%.$8,RS"&

•! 7M)9.8"T&4564(@8)78)9)'(&A%=$,8&,&()*+,$1"&UKGV&EFGI&

•! !,*,&"2()*:&$#)&45678)9)'(?5,)!)*+,67$"$&()*+,&

!"#$%&'()*+'),-'&'()./0"12#3425*!"#$%*67--82/'--#92!

W&

Page 140: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*#)+(')*'),-./012)341)

•! !"#$%&'()5#6!&#$#7689:**+!,-

!"#$!!"#$%!&%!&'()*+,-.'$%()$*$+%,-.//01+-#023!

•! !"#$%&'()*';+$#76!&#$#76)"$-!"#$%&'()<''6!&#$#76)

!"#$!4567'1!%!&'()*+,-./!01*$+%()$*$+%.(756&8'&+1.6+,9-73!

!4),(5',!2+2%/+"-2!:!!!!!!"#$!1"9!%!+"-.-#$9+-.';,+$<'()*+,-./!01*$+%3!!%3!!=!!

•! ./012&'()(345&(-6-$%-./017&%&'(8-

!4),(-5',!452+%675$+%/+"-2!:!!!!!!!#6+$-/+"-.-#$9+-.>#$+,-8'&+.,'&+8#*+23!=!

•! 9343-%3'+:$734-3(4+;$("<-

!+"-.-#$9+-.'$%8%%52"1%$/07+597-023!

!+"-.-#$9+-.9$%8%%52"1%$/045660?!0$+&023!

•! =4+34-&7&%&'("-&-3!+#+"'>?7"-#"%"-@7A"-!&-B<25C-

!"#$!$+(-!%!&'()*+,-.05$7%$()$*$+%/0$+(-023!$+(-.1+-@--$5A)-+/0;5&-70?!BCC23!&'()*+,-.5!!%()$*$+%.744$+/:;2)//$+(-23!

D-

Page 141: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*$%&#)(+'$(,-.-/+0*%1(

!"

!"#$%&'()*+,-../,%*0'$*)+,-../,%1234"+,*))5677&&&8&98:;$7<...7"#$,=%

%%!">;'5)%)?50+,)01)70>2@">;'5),=%%%!ABCDEFEB%

%%%%GH4>)':4%!"#$%#&#'()*I%%

%%%%%%%0#)8)@;$0)8"0)E));'JH)0K,:5@>')?,L%,-8.,MN%%

%%%%O%%

%%%%GH4>)':4%!+!,!&#'()*I%%%%%%%%%0#)8)@;$0)8"0)E));'JH)0K,:5@>')?,L%,.8P,MN%%

%%%%O%

%%QQ=%%

%%!7">;'5)=%%

%%%%!$=%%

%%%%%%%%!;0>)%1+,-.,%%?+,-..,%&'()*+,PR,%*0'$*)+,PR,%G'33+,;0(,%:5@>')?+,.8P,% %%

% % %-$.-/0#-'#123!"#$%#&#'()43*-$.-/0#-/(23!+!,!&#'()437=%%

%%%%%%%%!;0>)%1+,SR,%?+,-..,%&'()*+,PR,%*0'$*)+,PR,%G'33+,J3H0,%:5@>')?+,.8P,%%

% % %-$.-/0#-'#123!"#$%#&#'()43*-$.-/0#-/(23!+!,!&#'()437=%%888%%

%%%%!7$=%%%

!7"#$=%

Page 142: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

XML DOM 2: Principais elementos

!"#$%&'()*+,%&'(-

!"#$%&'(-

./+*+#(&*!+(+-

0&1(-

."%%&'(-

.!2023&#(4"'-

2((*-

56&%&'(-

!"#$%&'(078&-

9"(+(4"'-

5'(4(7-

5'(4(7:&;&*&'#&-

<*"#&==4',>'=(*$#(4"'-

9"?&-9"?&@4=(-

9+%&?9"?&A+8-

BA@C00<:&D$&=(-

!"#$%&$'()*'+,-'

Page 143: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*+,+&',-'.%*/01-2/'3+,/'

•! !"#$% % %-44/%,56.",&!"#$'%

•! !"#$% % %2"+%/3+,/&("")$*+'%

•! !*,$#!"#$-*.%#/*!70.8$*/&&' % % %-70.8$*/&'

•! !"#$/012%% %#/*56.",3+,/&&' % % % %26.",3+,/&'

•! ("")$*+% % %6-&!70.8$*/&&' %%

•! ("")$*+% % %6-&56.",3+,/&&'%

•! !"#$% % %.%&/0*9/1+0/&!"#$3%!"#$'%

•! !"#$% % %0/(+:/56.",&!"#$'%

•! !"#$% % %0/4"-2/56.",&!"#$3%!"#$'%

•! !"#$% % %#/*;.0&*56.",&' % % % %<0&*56.",'

•! !"#$% % %#/*=-&*56.",&' % % % %"-&*56.",'

•! !"#$% % %#/*3/>*?.8".%#&' % % % %%/>*?.8".%#'

•! !"#$% % %#/*@0/:.+$&?.8".%#&' % % %40/:.+$&?.8".%#'

•! 4250+6% % %#/*3+,/3-(/&' % % % %%+,/3-(/'

•! 17"52% % %#/*3+,/AB4/&' % % % %%+,/AB4/'

•! 4250+6% % %#/*3+,/C-"$/&' % % % %%+,/C-"$/'

•! 8"9:,$+2 %#/*DE%/0F+2$(/%*&' % %+E%/0F+2$(/%*'

•! !"#$% % %#/*@-0/%*3+,/&' % % % %4-0/%*3+,/';<%

*2*)7"1=%

Page 144: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

DOM: tipos de nó

•! DOM usa constantes para identificar tipos de nó (nodeType)

Constante (opcional) Tipo valor

•! ELEMENT_NODE Element 1

•! ATTRIBUTE_NODE Attr 2

•! TEXT_NODE Text 3

•! CDATA_SECTION_NODE CDATASection 4

•! ENTITY_REFERENCE_NODE EntityReference 5

•! ENTITY_NODE Entity 6

•! PROCESSING_INSTRUCTION_NODE ProcessingInstruction 7

•! COMMENT_NODE Comment 8

•! DOCUMENT_NODE Document 9

•! DOCUMENT_TYPE_NODE DocumentType 10

•! DOCUMENT_FRAGMENT_NODE DocumentFragment 11

•! NOTATION_NODE Notation 12

Page 145: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%$&'()*)'+,&#)&'-'.)()&'

•! !"#$%!&%$'"()•! !&%$ ),#-.*+,-. ))

•! !&%$ )/-#0).-%1#-.*/-0+,1.)

•! !&%$ )2-3#0$%-*.)

•! 2&+%) )*-&-#*.)

•! +,- ) )/-#4-2/#5*. ) ) )+-2/#5'

•! !&%$3+4-)•! !&%$ ),#-.*+,-.)

•! !&%$ )2-3#0$%-*.)

•! 2&+%) )*-&-#*.)

•! +,- ) )/-#4-2/#5*. ) ) )+-2/#5'

56)

Page 146: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()'$(*'+#(

!"#

!"#$%&'()"*+,--./00111213245$067770"#$+%189-,*+:77;+%,<8$,-*+:77;+%4)(4=9*+)>'?8(,4"@A+B%

%%%!"C58.-B!DEFGHIHE%

%%%%%J>)C-84)%!"#$%&'()@A%K%

%%%%%%%%#=5%9=-=%*%+L(<'<)-4"%C4)-894"%<'%!"#$B/%+M*(+"#,!-.*(+"#,!-/&,#,!-20,-1'%&*2(*,)@A2&,!0-'N%

%%%%%%%%=(<5-@9=-=AN%

%%%%%O%

%%%%%J>)C-84)%%!3(/&,#,!-(4,5-67K%

%%%%%%%%%%#=5%=-58P>-4"%*%,5-.-890,-.8--9%:"-,)N%

%%%%%%%%%%#=5%9=-=%*%+L(<'<)-/%!+%M%,5-.-890,-.!(*,28#,N%

%%%%%%%%%%J45%@8%*%7N%8%!%=-58P>-4"2&,!0-'N%8MMA%K%

%%%%%%%%%%%%%9=-=%M*%+%+%M%=-58P>-4"2%-,#@8A2!8#,7M%+*Q+%M%=-58P>-4"2%-,#@8A258&",7M%+Q+N%

%%%%%%%%%%O%

%%%%%%%%%%9=-=%M*%+BR)S=5<)-/%!+%M%,5-2-890,-2;89,!-2(*,2!(*,28#,7M%+B+N%

%%%%%%%%%%9=-=%M*%+R)S5<#84>"%"8P(8)$/%!+%M%,5-2-890,-2;9,5%(")<%:&%!02!(*,28#,7M%+B+N%

%%%%%%%%%%9=-=%M*%+R)T<&-%"8P(8)$/%!+%M%,5-2-890,-2!,=-<%:&%!02!(*,28#,7M%+B+N%

%%%%%%%%%%=(<5-@9=-=AN%

%%%%%O%

%%%UUB!0"C58.-B%

%%%%!$B%

%%%%%%%%!5<C-%&*+V7+%W*+V7+%,<8$,-*+:77+%189-,*+:77+%J8((*+5<9+%4)C(8CX*+%!3(/&,#,!-(4,5-6+%0B%

!C85C(<%C&*+66V+%CW*+:77+%5*+V7+%J8((*+P(><+%4)C(8CX*+%!3(/&,#,!-(4,5-6+0B!$%J4)-Y"8Z<*+:7.-+B%

%%%%%%%%%%%!-<&-%&*+377+%W*+V7+B[P8%9>P8>'%8P8%(8P<5-="!0-<&-B%

%%%%%%%%!0$B%%

%%%%!0$B%

!0"#$B%

Page 147: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'($)*+$,$"#)

•! !"#$%&' ' '-$#./%012#$(!"#$%&)'

•! !"#$%&' ' '-$#./%012#$34(!"#$%&*'!"#$%&)'

•! +,#'' ' '-$#./%012#$356$(!"#$%&)'

•! +,#'' ' '-$#./%012#$356$34(!"#$%&*'!"#$%&)'

•! -./01$2"' '-$#*+$,$"#789:'-3',$(!"#$%&)'

•! -./01$2"' '-$#*+$,$"#789:'-3',$34(!"#$%&*'!"#$%&)'

•! !"#$%&' ' '-$#:'-3',$() ' ' ' ' '#'-3',$)

•! 3..405%'' ';'7./%012#$(!"#$%&)'

•! 3..405%'' ';'7./%012#$34(!"#$%&*'!"#$%&)'

•! 6.$/' ' '%$,5<$./%012#$(!"#$%&)'

•! 6.$/'' ' '%$,5<$./%012#$34(!"#$%&*'!"#$%&)'

•! 6.$/' ' '7$#./%012#$(!"#$%&*'!"#$%&)'

•! 6.$/' ' '7$#./%012#$34(!"#$%&*'!"#$%&*'!"#$%&)'

78'

Page 148: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'($)*+,%*$*-$.#*

•! !"#$•! %&#'()$ $ $/$#0'1$*+$ $ $ $ $ $"'1$*

•! ,-./.(&$ $/$#23"$%45$1$"#*+ $ $ $63"$%45$1$"#*

•! %&#'()$ $ $/$#7'58$*+$ $ $ $ $ $9'58$*

•! 01'2$$ $ $)$#7'58$*%&#'()+$

•! 3.4&$.$567#78&.#97&7$•! 01'2$$ $ $'::$";<'#'*%&#'()+$

•! %&#'()$ $ $/$#<'#'*+ $ $ $ $ $ $;'#'*

•! '(&$ $ $ $/$#=$"/#>*+ $ $ $ $ $5$"/#>*

•! 01'2$$ $ $?")$%#<'#'*'(&:$%&#'()+$

•! 01'2 $ $ $%$:5'($<'#'*'(&:$'(&:$%&#'()+$

•! 01'2$$ $ $)$#<'#'*%&#'()+$

;<$

Page 149: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()#&#$#*+',)#)-+./01+',)

!"#

!"#$%&'()"*+,--./00111213245$067770"#$+%189-,*+:77;+%,<8$,-*+:77;+=%

%%%!">58.-=!?@ABCDC@%

%%%%%%%EF)>-84)%!"#$%&'(%")*+G%

%%%%%%%%%%%%#H5%5<>-%*%94>F'<)-2(,!-.,/,0!1234%(5%/,I+5<>-+J28-<'I7JK%

%%%%%%%%%%%%#H5%>85>(<%*%94>F'<)-2(,!-.,/,0!1234%(5%/,I+>85>(<+J28-<'I7JK%

%%%%%%%%%%%%8E%I5<>-2$<-C--58LF-<I+&+J%**%M7J%G%

%%%%%%%%%%%%%%%%5<>-2"<-C--58LF-<I+&+N%+:OM+JK%

%%%%%%%%%%%%%%%%>85>(<2"<-C--58LF-<I+>&+N%+:77+JK%

%%%%%%%%%%%%P%<("<%G%

%%%%%%%%%%%%%%%%5<>-2"<-C--58LF-<I+&+N%+M7+JK%

%%%%%%%%%%%%%%%%>85>(<2"<-C--58LF-<I+>&+N%+66M+JK%

%%%%%%%%%%%%P%

%%%%%%%P%

%%%%%%%#H5%H)$F(4%*%7K%

%%%%%%%EF)>-84)%(6"%),7!*+G%

%%%%%%%%%%%8E%IH)$F(4%!*%3Q7J%G%H)$F(4%R*%SMK%

%%%%%%%%%%%P%<("<%G%H)$F(4%*%7K%P%

%%%%%%%%%%%<#-2-H5$<-2"<-C--58LF-<I+-5H)"E45'+N%+54-H-<I+RH)$F(4R+N%377N%M7J+JK%

%%%%%%%P%

%%%TT=!0">58.-=%

%%%%!$=%

%%%%%%%%!5<>-%&*+M7+%U*+M7+%,<8$,-*+:77+%189-,*+:77+%E8((*+5<9+%4)>(8>V*+!"#$%&'(%")*+%0=%

%%%%%%%%!>85>(<%>&*+66M+%>U*+:77+%5*+M7+%E8((*+L(F<+0=%

%%%%%%%%!$%E4)-W"8X<*+:7.-+%4)>(8>V*+(6"%),7!*+=%

%%%%%%%%%%%%!-<&-%&*+377+%U*+M7+=YL8%9FL8F'%8L8%(8L<5-H"!0-<&-=%

%%%%%%%%!0$=%%

%%%%!0$=%

!0"#$=%

Page 150: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%$&'()*+%,#-*)'()!./)

•! !"#$%&'()#*$+#,#$-./"$.01%&0$230$%"..4506$

•! 70&1-/0$&03."$8#.$+39,:0.$%"&$"3/&#.$#%6-)#,:0.$;0<*$=>?@$ABCDE@$FABCDG$

•! H#)-6-/#$80%3&#,I"$8"$J=@$.-1%6-K)#$L0&#,I"$80$=>?@$#3109/#$#$60L-M-6-8#80$

NO$

!"#$%&'()*#%*+,+*#)-#).)-/0(12*34#"!#

3+5#+&4%0(#6#78#

$%&'9:(&#!"#$%&'()#;#

###:$#<+&4%0(#=6#>?7@#;#

######+&4%0(#A6#BC8#

###D#)0*)#;#

######+&4%0(#6#78#

###D#

###)3929+54)92*)9E995:F%9)<G95+&*$(5-GH#G5(9+9)<GA+&4%0(AGH#>77H#C7@G@8#

D#

$%&'9:(&#(#*+$,-!$#%).;#

####3+5#5)'9#6#,('%-)&924)9I0)-)&9*JKL+4M+-)<G5)'9G@2:9)-<7@8#

####3+5#':5'0)#6#,('%-)&924)9I0)-)&9*JKL+4M+-)<G':5'0)G@2:9)-<7@8#

####:$#<5)'924)9E995:F%9)<G.G@#66#C7@#;#

########5)'92*)9E995:F%9)<G.GH#GNOCG@8#

########':5'0)2*)9E995:F%9)<G'.GH#GN77G@8#

####D#)0*)#;#

########5)'92*)9E995:F%9)<G.GH#GC7G@8#

########':5'0)2*)9E995:F%9)<G'.GH#G11CG@8#

####D#

D#

=*34#.-0&*6GP99/Q!!RRR2R>2(54!1777!*34GS#

##/0+#"1(.(21&34(&5(6&+7$0+#"1(4.58"9:;<#&=340+#"1(>[email protected]#

##=4S#

####=5)'9#.6GC7G#K6GC7G#P):4P96GN77G#R:,9P6GN77G#$:006G5),G#

(&'0:'T6G(#*+$,-!$#%)G#!S#222#

####=4#$(&9U*:V)6GN7/9G#(&'0:'T6G4:5+<)39@GS#

######=9).9#.6G>77G#K6GC7GSWF:#,%F:%-#:F:#0:F)59+*=!9).9S=!4S##

##=!4S#

=!*34S#

.)&-%/PQR.$

0<01%6"PQ.5L$

Page 151: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'$()*$+,*-./,(-.$

•! !"#$%&'()("$*+#$,#-.%$#%$/(0'.$($+,*-./,(-$

•! 1$0#/#""234($5.3.$./#"".3$#,#%#0'("$#$.'346+'("$*+#$+".%$0.%#"5./#"$7#89$8,40:;$

•! 1$0#/#""234($*+.0)($"#$+".$<=>$/(%$0.%#"5./#"$7#89$*+.0)($+".)($?+0'($/(%$@ABCDE$@<DFGHE$#'/I;$

•! J%$-#K$)#$L#'MN346+'#E$L#'J,#%#0'E$#'/I$•! !"#$L#'MN346+'#O<E$L#'J,#%#0'O<E$#'/I$

PQ$

!"#$%!&'($)$*+,,-.//00010213#&/4555/%!&*6$

!"#$789:;'($)$*+,,-.//00010213#&/<===/789:;*6$

!"#$>9#>8?$)$@3>AB?:,1!"#$%#&'#(#)%*+C%!&'(D*>9#>8?*E6$

>9#>8?1,#%-%%"./0%#*+C:A88D*>7*DF55E6$

>9#>8?1,#%-%%"./0%#*+C:A88D*>G*DF55E6$

>9#>8?1,#%-%%"./0%#*+C789:;'(D$*+#?H*D$*+,,-.//0001"/>3B*E6$

Page 152: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'($)*+(,-$"#)

•! !"#$$ $ $(%$'#$./%01,#$%&'#()*+$

•! !"#$$ $ $(%$'#$./%01,#$23%&'#()*,$&'#()*+$$

•! -./0/)'$ $(%$'#$45$-$"#%&'#()*+$

•! -./0/)'$ $(%$'#$45$-$"#23%&'#()*,$&'#()*+$

•! 1/2'$ $ $(%$'#$6$7#2+8$%&'#()*+$

•! 34560/)'178/ $9$#*+(6:;$%+$ $ $8+(6:;$)

•! -./0/)' $9$#*+(,-$"#45$-$"#%+ $ $8+(,-$"#45$-$"#)

•! -./0/)'$ $9$#*+(,-$"#<:!8%&'#()*+$

•! 94:/;(<' $9$#45$-$"#=<:6'92'-$%&'#()*+$

•! 94:/;(<' $9$#45$-$"#=<:6'92'-$23%&'#()*,$&'#()*+$

=>$

Page 153: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*+,-./')#&#$#.0'1)

!"#

!"#$%!&'($)$*+,,-.//00010213#&/4555/%!&*6$

789:,;39$:#;"#<;#:8=3>?!,@$A$

$$$!"#$#"9B3CD$)$$

$$$$$$$E",+17=33#>$E",+1#"9B3C>@$F$B3:8C?9,1#33,G=?C?9,1&?,H,,#;I8,?'(>98==J$*0;B,+*@$$$@6$

$$$!"#$#"9B3CK$)$$

$$$$$$$E",+17=33#>$E",+1#"9B3C>@$F$B3:8C?9,1#33,G=?C?9,1&?,H,,#;I8,?'(>98==J$*+?;&+,*@$$@6$

$$$!"#$:3=3#$)$*#&I>*$L$E",+17=33#>E",+1#"9B3C>@$F$4MN@$L*J$*L$$

$$$$$$$$$$$$$$$$$$$$$$$$E",+17=33#>E",+1#"9B3C>@$F$4MN@$L*J$*L$$

$$$$$$$$$$$$$$$$$$$$$$$$E",+17=33#>E",+1#"9B3C>@$F$4MN@$L*@*6$

$$$!"#$:;#:8=3$)$B3:8C?9,1:#?",?G=?C?9,'(>%!&'(J$*:;#:=?*@6$

$$$:;#:8=31%?,H,,#;I8,?'(>98==J$*:O*J$#"9B3CD@6$

$$$:;#:8=31%?,H,,#;I8,?'(>98==J$*:P*J$#"9B3CK@6$

$$$:;#:8=31%?,H,,#;I8,?'(>98==J$*7;==*J$:3=3#@6$

$$$:;#:8=31%?,H,,#;I8,?'(>98==J$*#*J$$

$$$$$$$$$$$$$$$$$$$$$$$$$$?!,1,"#&?,1&?,H,,#;I8,?'(>98==J$*#*@@6$

$$$:;#:8=31"BBG!?9,Q;%,?9?#>*:=;:R*J$:#;"#<;#:8=3J$7"=%?@6$

$$$?!,1,"#&?,1-"#?9,'3B?1"--?9B<+;=B>:;#:8=3@6$

S$

T%!&$OC=9%)*+,,-.//00010213#&/4555/%!&*$0;B,+)*M55*$+?;&+,)*M55*U$

$$$T%:#;-,$,P-?)*,?O,/?:C"%:#;-,*$O=;9R.+#?7)*%:#;-,V21W%*$/U$

$$$T:;#:=?$:O)*X4M*$:P)*Y5*$#)*M*$$$7;==)*&#??9*$39:=;:R)*:#;"#<;#:8=3>?!,@*/U$

$$$T:;#:=?$:O)*44M*$:P)*X55*$#)*X5*$7;==)*I=8?*$39:=;:R)*:#;"#<;#:8=3>?!,@*/U$

$$$T:;#:=?$:O)*24M*$:P)*XZ5*$#)*XM*$7;==)*#?B*$$39:=;:R)*:#;"#<;#:8=3>?!,@*/U$

T/%!&U$

!"#$%&'()*!+

Page 154: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*+%",()-./)012)

!"#

!"#$%&'()*+,-../0,%*1'$*)+,-../0,%%#'1&230+,.%.%-..%-..,%

%%%%%0456"+,*))/788&&&9&:93;$8<...8"#$,%#1;"'36+,=9=,%

%%%%%0456"705'6>+,*))/788&&&9&:93;$8=???805'6>,@%

%%!"A;'/)%)B/1+,)10)81A4C"A;'/),%05'6>7*;1D+,!"#$%&'()*!,8@%

%%!5'61%0=+,-.,%%B=+,.,%0<+,-.,%%B<+,<..,%");3>1E&'()*+,<,%");3>1+,F5CA>,%8@%

%%!5'61%0=+,G-.,%B=+,.,%0<+,G-.,%B<+,<..,%");3>1E&'()*+,<,%");3>1+,F5CA>,%8@%

%%!A';A51%A0+,-.,%%AB+,=..,%;+,=H9IG,%D'55+,F5CA>,@!8A';A51@%

%%!A';A51%A0+,=-.,%AB+,=..,%;+,=H9IG,%D'55+,F5J1,%@!8A';A51@%

%%!A';A51%A0+,<-.,%AB+,=..,%;+,=H9IG,%D'55+,;1(,%%@!8A';A51@%

%%!A';A51%A0+,:-.,%AB+,=..,%;+,=H9IG,%D'55+,$;116,@!8A';A51@%

%%!$%'(+,FC;KJ'6*3,%);C6"D3;4+,);C6"5C)1L-.M=G.N,%36A5'A>+,$+$"$,#-./$01+&.L1#)N,@%

%%%%%%!/C)*%(+,OE<-ME=<9-%PE<-M.%<-M.%<-ME=<9-%Q%.ME=..9-%R,%

%%%%%%%%%%%%D'55+,B1553&,%");3>1+,;1(,%");3>1E&'()*+,H9.I,%@%

%%%%%%!8/C)*@%

%%!8$@%

!8"#$@%

#C;%0%%%+%.9.S%

#C;%D'4%+%G..9.S%

#C;%FC;KJ'6*3S%

DJ6A)'36%$+$"$,#-./$01+&.L1#)N%T%FC;KJ'6*3%+%1#)9)C;$1)S%%%0./1#23S%U%

DJ6A)'36%0./1#23%T%

%%%%'D%L0%@+%D'4N%T%;1)J;6S%U%

%%%%0%+%0%V%=S%

%%%%FC;KJ'6*39"1)W));'FJ)1XYL6J55M%Z);C6"D3;4ZM%,);C6"5C)1L,%V%0%V%,M.N,NS%

%%%%'D%L0%@%-.N%T%

%%%%%%%%FC;KJ'6*39"1)W));'FJ)1XYL6J55M%Z3/CA')BZM%LD'4%E%0N%8%D'4NS%

%%%%U%

%%%%"1)['413J)L,0./1#23,M%:.NS%

U%

$%&#'()*+&%#

,&-(,%./0%#-12#

+345#$3(*467)

30,0#0).20*+&%#

%.234&%#

!"#$%&'()*!+

Page 155: SVG - Scalable Vector Graphics: Uma Introdução Prática

!"#$!%&'()$#*(

!"#$"%&$'&()*+'&,+"#$"%-'%.)/'0123*)435%6&

Page 156: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*$)+,-).($)+/01)

•! !"#$%$#&'()$%*+)%$,-#'./01%'2-3&%&)/2$%$+'2-4)%/2$%5-26$)-$%

•! 78-2&)1%9')-"1%::%;%)&%<#"/4)=1%>?%@AB%C$+'2-4)%'"-,#"(=%

•! ?()&)/42$%)%"4-#5+42$%'"-"%"/#&"DE2%<)%0-FG,2$%)%0-+'2$%

•! H"$)"<2$%/"%)$'),#G,"DE2%+/01)2)+3".45("#6*7)/89:$*7#%)0";*<5%:(")1%"<8%<*)C!"#$%%&&&'&(')*+%,-%./012340/35)4%=%

•! ?$'),#G,"DE2%IJK%+$"%'"-4)%<2%I!>L%)%",-)$,)/4"%)M4)/$N)$O%%!"#$%%&&&'&(')*+%,-%678%340/39:'!9/1;

•! I+'2-4"%$,-#'./01%)P)/42$1%)$.(2%)%2')-"DN)$%,2&%IJK%Q9!%

•! ?()&)/42$%

•! I!>LO%=%"#$%;*>1%=?*;>1)=%"#$%;*@(9(5>1%=%"#$%;*/(:(">)

•! ?M4)/$N)$O%=%"#$%;*/(:(">%,2&%=$A%;4>1%=%"#$%;*B5%"?C(5$>)

•! 9%"(P2%<"%"/#&"DE2%'2<)%$)-%#/<#,"<2%<)%<+"$%R2-&"$%

•! P#"%D9#"EF45*CGHI#7H)

•! $)/<2%2%)()&)/42%'"#%<)%+&%5(2,2%=%"#$%;*>1%=?*;>1%)4,A%

S%

Page 157: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*+,#-%)

•! !"#$%&'"&'()")(&*+,)"-,"'.(&'/0$"1$.)()2,",&"3'%('%"$"3'+$%"-,"4&"%./#*0.()-,"4&",+,&,.2$5"*$%"-,2,%&(.'-'"-4%'/0$"•! 6$-,"),%"4&"'2%(742$"-$"899"$4"-$":;<"

•! =)"3'+$%,)",&"1'-'"(.)2'.2,")0$"1'+14+'-$)"*$%"#".1/2(3%&'()•! !"(.#$%&'/0$"&>.(&'"*$-,"),%"4&"3'+$%"?.'+5"*'%"-,"3'+$%,)5",21@"

•! A'+$%,)"(.2,%&,-(B%($)")0$"1'+14+'-$)"*$%"(.2,%*$+'/0$"

•! 6$-,C),"*'))'%"&'()"3'+$%,)"(.2,%&,-(B%($)5"*'%'"&'($%"1$.2%$+,"

•! DE,&*+$F"!$"1+(1'%".$"%,2G.H4+$"3,%&,+I$5",+,"(%B"&$3,%C),"*'%'"'"-(%,(2'"'2J"?1'%")$7"$"%,2G.H4+$"'K4+5",&"L"),H4.-$)"

!"#$%&!"#$%#&&'()*+)&,-.%/()0++)&/#-1/%()*+)&2-33()"#.)&4&

&&&'()*+(,- &(,,.*/0,-1(+-"#!#&,2"#3%%#&40."#56#&&

&&&&&&&&&&& &/-7*)"#89*8:#&;*99"#;.--<-#&=>&

!5"#$%4&

!"#$%&6()7++)&'()*+)&,-.%/()0++)&/#-1/%()*+)&2-33()839#)&&

&&&&&&:;<$-%'()+=*)&54&

L"

Page 158: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%"&'()

•! !"#$%&"'()*((*+,$-$()•! "*+$,-&'."%'.)+'/*)0')-"#$%&"')1&*)"*#2)(*&)3-4'#)-4"*#-0')

50*3*),'+"*#)&/)3-4'#)$+"*#6'423*478)

•! /+0%.)3-4'#)$+$,$-4)5(*)+9')*(:3*#)6#*(*+"*;)(*#2),'+($0*#-0')')3-4'#)-"&-4)0')-"#$%&"'8)

•! &0.)3-4'#)1&*)(*#2)-:+<$0')+')=/)0-)-+$/->9')

•! ,1.)-4"*#+-:3-)-)!"#?)$%#@)('/-0')-)&'"(#6-#-)'%"*#)3-4'#)=+-4)

•! 2-+.)"*/6')1&*)$#2)0&#-#)-)-+$/->9')5')3-4'#)6'0*)(*#)*A6#*((')*/)32#$'()B'#/-"'()0*)"*/6'8)

•! ,'3$#.)','##C+,$-()1&*),-&(-#9')')$+D,$')0-)-+$/->9')?):6$,-/*+"*)&/)*3*+"')'&)$+("-+"*)5(*)+9')E'&3*#),'3$#;)-)-+$/->9'),'/*>-)1&-+0')')*4*/*+"')B'#),-##*<-0'8)

•! 455.)')1&*)-,'+"*,*)1&-+0')-)-+$/->9')"*#/$+-F)G'0*)(*#)/+''6')5')H4:/')*("-0')@)6#*(*#3-0'8)'&)+'%07')53'4"-)-')*("-0')-+"*()0-)-+$/->9')$+$,$-#8)

•! I()3-4'#*()0'()-"#$%&"'()6'0*/)(*#)0$B*#*+"*()*)"*#*/)'&"#'()($<+$=,-0'(;)*/)0$B*#*+"*(),'+"*A"'()

J)7)I)1&*)@)'&)+9')K$+"*#6'423*4K)0*6*+0*)0*)'&"#'()-"#$%&"'(F)LA.)+H/*#'()<*#-4/*+"*)(9'M)("#$+<()N()3*O*(F)

Page 159: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%#&'(&)*+&,-.'(

•! !"#$%&$'($)'*+,-.,"&'$,$*$/("&'01/2*1($34'51#1'6*',2#1/#"'5"*'6*1'1/2*178"'$&.$59:51'

!"#$%&'()*+)&&,()*+)&-./%0()1++)&&

&&&&&&0#.20%()*+)&3.44()"#/)&5&

&&&!67.86%#&6%%".9:%#;68#()')&%<()=++)&/:"()>?)&&

&&&&&&&&&&&&9#2.7()$4.$@)&3.44()3"##A#)&B5&&&&&&&&

&&&!67.86%#&6%%".9:%#;68#()3.44)&%<(),#44<-)&&

&&&&&&&&&&&&/:"()>?)&9#2.7()$4.$@)&3.44()3"##A#)&B5&

!B"#$%5&

;'

<&'

=&'

>&'

?&'

Page 160: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&

•! !"#$%&'()'*#)*()'&%+$,-%()'.-#'/&0$*&%#12'*&)')$*34#)*#0%#'*-5&'('&%+$,-%('6)#*'&0$*&78(9'

•! :'&%+$,-%(''()&0#)%#'"&)('+#3+#)#0%&'('%#*3('#*'.-#'('&%+$,-%('3#+*&0#"#'&4%#+&5('

•! ;('<0&4'5('%#*3(2'#4#'=(4%&'&('=&4(+'&0%#+$(+'6&'*#0()'.-#')#'5#<0&'*++,-.)##/#-9'

>'

?)'65#3($)'5('"4$"@9'

!"#$%&'()*+)&&,()*+)&-./%0()1++)&0#.20%()*+)&3.44()"#/)&5&

&&&!6#%&7%%".89%#:7;#()')&%<()=++)&8#2.>()$4.$?)&3.44()3"##@#)&A5&

&&&!6#%&7%%".89%#:7;#()3.44)&%<(),#44<-)&/9"()B6)&8#2.>()$4.$?)&3.44()"#;<C#)&A5&

!A"#$%5&

!"#$%&'()=++)&,()*+)&-./%0()1++)&0#.20%()*+)&3.44()849#)&<D7$.%,()+E*)5&

&&&!6#%&7%%".89%#:7;#()')&%<()*+)&/9"()B6)&8#2.>()$4.$?)&3.44()"#;<C#)A5&

!A"#$%5&

A)'

Page 161: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&"'()*+)"+,-')

•! !"#$%&"'()*+)"+,-').,.//),$0/)+0*/)*&#1)#+-+."2&#0)12+$"1,)"+,-')+3-#+((')41()(+5&$4"+()($4"13+()

•! 67896869)))) ) ):)7);'#1(/)96),$4&"'()+)9)(+5&4*'()

•! <68668=6>7<) ) ):)<6);'#1(/)=6)(+5&4*'()+)7<6),()

•! 67899))) ) ) ):)7),$4&"'()14*)99)(+2'4*()

•! 668=6><) ) ) ):)=6><)(+5&4*'():)=6)()+)<66),()

•! 9>7;)))) ) ) ):)9>7);'#1():)9);'#1()+)=7),$4&"'()

•! ?<,$4))) ) ) ):)?<),$4&"'()

•! 96())))) ) ) ):)96)(+5&4*'()

•! <,())))) ) ) ):)<),$@$((+5&4*'()

•! =7>?AB)) ) ) ):)=7)(+5&4*'()+)?AB),$@$((+5&4*'()

•! C38)!"#$%"&'()*+,-./0-(111(2(

B)

Page 162: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&"'()*+)"+,-'#$./01')

•! %+2$3!""#•! $%&'(#)*#+(,-.*&#/0*#*&1*2%32(#/0(4)-#(#(4%5(67-#%4%2%(#81-)*#2-4'*.#

05#'*51-9#*+*4'-9#.*:*.;42%(#(#-0'.(#(4%5(67-9#'&)4',%$3/05+())*#'0)-#%&'-<#

•! =*>(#&%4'(?*#)*'(,@()(#4(#&1*2#A=B#&*67-#CDEFEG#

•! H?I#J*K%4!"2,%2L#M#N&"#

•! +3*!""#•! O2*%'(#+(,-.*&#&%5%,(.*&#(#J*K%4#

•! #+("/#")!#"(,P(Q&#R#P@*4S-'O2T+*#R#4*+*."#•! A*#(#(4%5(67-#)*+*#.*%4%2%(.9#*#2-5-#

•! #+-+/"6'&3"!"!"#$%&'R#%4)*34%'*"#

•! SU5*.-#)*#+*V*&#/0*#(#(4%5(67-#)*+*#.*1*T.#

•! A*#%4)*34%'*9#(4%5(67-#.*1*'*#('W#-#)-205*4'-#'*.5%4(.#

•! #+-+/"7&#!"($#)&'R#%4)*34%'*"#•! X0.(67-#'-'(,#1(.(#(&#.*1*T6Y*&#

•! A*#%4)*34%'*9#(4%5(67-#.*1*'*#('W#-#)-205*4'-#'*.5%4(.#

Z#

Page 163: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*%+#,-%)*(*./$/0%,-%)*

•! !"#$%&"'(%++#,-()*+&,(-(#./012.*(

•! 3.(4'#()/$5(610'#(7'(1"#$%&"'(8(+',17'(1(610'#(

19".#$'#5(/#8:.;$+".9".5('&(610'#(7.(19$,1<=.+(7.(

,.9'#(/#$'#$717.(>7.?9$71+(19".+@(

•! 3.(4'#(1(20%.(*>7.41&0"@(610'#.+(/#86$'+(+A'($B9'#17'+(

•! !"#$%&"'(%../$/0%3()*9'9.(-(+&,*(

•! C'9+$7.#17'(/1#1(19$,1<=.+(D&.(+.(#./.".,(

•! 3.(4'#()/$5(2171(#./.E<A'(9'61(/1#".(7'(610'#(?910(

7'(1"#$%&"'(91(19$,1<A'(19".#$'#(

•! 3.(4'#("4"(*>7.41&0"@(2171(#./.E<A'(8($97./.97.9".(

F(

Page 164: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'

•! !"#$%&'()$("*%+,-*$("('&%&.(-'")$'(/$(0-%'$()"("/+."12$(

•! 3&4.&/*"12$(5&%.+*&(."+'(0$/*%$#&(6-&(()*+,-.'$-(()*+,/*'

•! !"#$%&'()&7&.('&%('&5"%")$'(5$%(5$/*$8&879%4-#"(

•! :$.$($($,;&*$('&(.$7&(/$(*&.5$()&5&/)&()$("*%+,-*$(0"#01*2%(

•! <=&.5#$>($(5&+=&(#&7"($(.&'.$(*&.5$(5"%"("*%"7&''"%(0")"(*%&0?$(

@A(

!"#$%&'()"*+,--./00111213245$067770"#$+8%

%%%%!9':$;%9<*+:=9"":(+%&(9)>/,5;?*+@,;A9",2.)$+%%

%%%%%%%%%%%,;9$,-*+B77+%19<-,*+6C7+%&*+C7+%D*+C7+%08%

%%%%!$%"-54>;*+=(E;+%"-54>;F19<-,*+6+8%

%%%%%%%%!(9);%&B*+677+%&6*+677+%DB*+BGC+%D6*+66C+08%222%!0$8%222%

%%%%!:)9':-;%:--59=E-;H:';*+!+%%

%%%%%%%%%%%%%"#$%&'()*+,-*+,.++,*++)//

%%%%%%%%%%%%%<E5*+0'+%=;$9)*+I(9I>+%%

%%%%%%%%%%%%%?9((*+?5;;J;+%%

%%%%%%%%%%%%%&(9)>/,5;?*+K:=9"":(+%08%

!0"#$8%

Page 165: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&"'()*+),'-.(

•! !"#"$%"&"$'$%()%*)(#($($(+,&(-."$

•! %()%!"#/01),+/(2$3$#,4%2/5/$3$6(%/#$3$46),+/1$

•! +$/.*#7$,+5/26")(-."$),+/(2$4,&6)/4$%()%*)($8()"2/4$,+5/2&/#,92,"4$/+52/$"4$6"+5"4$

•! -$0)#.".7$#*2(+5/$"$5/&6"$#($(+,&(-.":$4()5($#/$*&$8()"2$6(2($"$"*52"$;6/2&(+/%/$*&$5/&6"$/&$%(#($8()"2<$

•! 1*).-7$&'#,($#"4$8()"2/4$'$*4(#($6(2($"=5/2$*&($8/)"%,#(#/$%"+45(+5/$/+52/$"$6"+5"$,+,%,()$/$>+()$

•! 01+$/.7$%()%*)($*&($?*+-."$#/$5/&6"$+."@),+/(2:$%"&$#(#"4$?"2+/%,#"4$4/6(2(#(&/+5/$;(52,=*5"$A/BC6),+/4<$

•! D(2($8()"2/4$+*&'2,%"4:$#/?(*)5$'$+$/.*#$

•! D(2($8()"2/4$+."$,+5/26")98/,4:$%"&"$452,+E4:$#/?(*)5$;/$F+,%"$8()"2$6/2&,G#"<$'$-$0)#.".(

HH$

Page 166: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#"$%#&%'()&*+",-./"%,'(&-*&$%

!"#$%&'()#*+,#-./0#12(3#

!"#$%"&'()*+,-./0-((

(((((((((1"2*'0,-/3(43(53(63(73(48-((((

(((((((((9"29:;)',-!"#$%&'&-(<=(

!"#$%"&'()*+,-./0-((

(((((((((1"2*'0,-/3(43(53(63(73(48-((((

(((((((((9"29:;)',-(")&*%-(<=(

!"#$%"&'()*+,-./0-((

(((((((((1"2*'0,-/3(43(53(63(73(48-((((

(((((((((9"29:;)',-+*$&!-(<=(

Page 167: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*+,%%$-.('%$*/+0$12,3$*+

•! !"#$&'(.$*+"$%&#'"$()*+,$-$)./.).)"$&#$'0+%&1$.2*0.1$'0+0$30)0$1&2#&4%"$

•! 567$80/&4)"$9$/0:"+&1;$&$)*+<=91=;$30)0$1&2#&4%"$)*+0$>1$

•! !"#$"$0%+.?*%"$0$12,3$*;$-$'"11@/&:$.4A"+#0+$B*04%"$%&#'"$'&+#04&3&+$&#$30)0$1&2#&4%"$

•! C0:"+&1$&4%+&$D$&$>;$+&'+&1&4%04)"$*#$,"*#'"#$7$/0:"+$03*#*:0E/"$&$'+"'"+3."40:$F$)*+0GH"$)0$04.#0GH"$

•! !0)0$/0:"+$1*3&11./"$)&/&$1&+$3',)%+).+,-.'($0"$/0:"+$04%&+."+$

•! I$4%,3$,%)+&'()%$)&/&$1&+$1&#'+&$5+

•! J0+0$04.#0GH"$:.4&0+$"*$1':.4&;$)+6(73)+&'()%+8$&$+*$%+9+

•! 51%&$0%+.?*%"$&1%K$+&:03."40)"$3"#$"$0%+.?*%"$/0:*&1$

•! !0)0$/0:"+$&#$0$12,3$*+&1%K$+&:03."40)"$0$*#$/0:"+$&#$&'(.$*+

•! L$'+&3.1"$%&+$#&1#"$4M#&+"$)&$/0:"+&1$&#$0$12,3$*+&$&'(.$*+

>N$

Page 168: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()'$(*+&,#-(#(.#/01$#-(

•! !"#$#%&'()*+,-./#010#2#013##4##013#+#015##4##015#+#310#

•! 6#*(,-7%8+8(#&-#9)%:(%)-#(#;,<:-#')(7=-#>#+#:(.:+#?-#9(%@(#9+..+#30A#8-#'(:9-#(:#7+8+#B:C#

•! D#9(%@(#,(*+#E0A#8-#'(:9-#9+)+#9()7-))()#-#')(7=-#%&'():(8%")%-#

3F#

!"#$%&'()"*+,--./00111213245$067770"#$+%189-,*+:77;+%,<8$,-*+:77;+=%

%%%%!8'>$<%89*+>?8"">(+%&(8)@/,5<A*+B,<C8",2.)$+%,<8$,-*+:77+%189-,*+6D7+%

&*+D7+%E*+D7+%0=%

%%%%!$%"-54@<*+?(F<+%"-54@<G189-,*+6+=222!0$=%

%%%%!>)8'>-<%>--58?F-<H>'<*+&+%#>(F<"*+D7%I677I3D7ID77+%9F5*+J"+%%%

%%%%%%%%%%%%%?<$8)*+K(8K@+%%%@<EB8'<"*+727I72:I72LI:27+%A8((*+A5<<M<+%%

%%%%%%%%%%%%%&(8)@/,5<A*+N>?8"">(+%0=%

!0"#$=%

0.# 01F.# $1G.#

Page 169: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'(")'*"+,$'&-./)0&123,$'&4)

•! !"##$%$&$'()*(+$(,-").-"/&$.0(+)1")2"*$20.'")

•! 3)('+$%4'")50678&$.0#)109.0)42):".;4.'")10)3"'("4)5&)6"'(.",&)789$&.)6:;$6"4)109.02)42()<4.,-")=40)10'0+2$.():"2")*(+$()")(&%3")10)42)#0>20.'")

•! ?(1()8".'")10):".'+"&0)@AB$0+):".#$#'0)10)<=-(.")#-,".&4)CDE6D)CFE6F)G1"$#)8".'"#)10):".'+"&0)8"+)#0>20.'"H)

•! I(&"+0#).()<($C()10)J)()D)

•! 6-,6!"5&)10*0)#0+)43,$'&)

•! 3#)8".'"#)#-")#08(+(1"#)8"+)8".'"/0/*K+>4&()

•! L0&(:$".(20.'")0.'+0)"#)('+$%4'"#)0&123,$'&4E)0&1>$%&4)0)#-,=&4M)

•! !(+():(1()')*(&"+0#)10)0&1>$%&4)0)#-,=&4E)10*0)N(*0+)'+?)8".'"#)10):".'+"&0)@AB$0+)

DO)

Page 170: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*'$)+#,-%&./#()01234)

!"#$%&'()#*+,#-./(0#1234#!567689#

!"#$%"&'()*+,-./-(0"1*'/,-23453-(6'78$%'/,-342-((

(((((((((9"19:;)',-/<1$#'-(6'7=<1$#'/,-3>3(2>2-?(

!"#$%"&'()*+,-./-(0"1*'/,-23453-((((((

(((((((((6'78$%'/,-342-((

(((((((((9"19:;)',-/<1$#'-((

(((((((((6'7=<1$#'/,-3@A>3(3@A>2-?(

!"#$%"&'()*+,-./-(0"1*'/,-23453-((

(((((((((6'78$%'/,-342-((

(((((((((9"19:;)',-/<1$#'-((

(((((((((6'7=<1$#'/,-3>3@BA(3@5A>2-?(

!"#$%"&'()*+,-./-(0"1*'/,-23453-(6'78$%'/,-342-((

(((((((((9"19:;)',-/<1$#'-(6'7=<1$#'/,-2>3(3@5A>3@5A-?(

5()))!.###7.####+.####6()

5)))))))))))))))))))))))))))))7)

85)

!:#

75)

-9'):;<=*'()>#)?@;.@A9')>#)B!CDE)0/9')>#)#(%@A'4F)074)

084)

024)

064)

Page 171: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()'$(*#+,%&-.#/(

•! !"#$%&'(&%"#)%(*+",#"#'"-&'(.)"#/#&-.#01(01%23*"#4#5#67&8(#9.)(%&"%:#

•! !"#6(1;.8"#)%(*+",#"#$(&<(#*"'(=9#8(-919%,#0)#&#10(.'($#-'((#8($"&6#2#/0)#&#10(01%23*"#>:#

•! !"#)(%*(&%"#)%(*+",#"#$(&<(#2-/%010(.'(-.3)-'((#8($"&6#-9&#410250&$#.6#(2#/0)#&#10.2'(067(%010101%23*"#?:#

4@#

!"#$%&#'(!!#'')%*+'(,#&(-./.!0#1+(2-.345!6445!7345!344.!!

!!!!!!!! !8+)-.92.! ! ! !:(;<%&(2-.454=7775!4=>>?5!@.!!

!!!!!!!! !*(A%$-.B1%B:.!! !:(;CD1%$(2-.4=4E4=4!!!@=4E!@=45!!

!!!!!!!!!!!!!!!!!!!! ! ! ! ! ! !!4=3E4=4!!!4=3E!@=45!!

!!!!!!!!!!!!!!!!!!!! ! ! ! ! ! !!4=4E4=?3!!4=63E@=45.!

!!!!!!!!!!!!!!!!!!!!!! ! ! ! ! !B#1BFG8(-.2D1%$(.!

!!!!!!!! ! ! ! ! ! ! ! ! !H%11-.H)((I(.!!

! ! ! ! ! ! ! ! ! ! !/1%$:JK)(H-.L#*%22#1.!MN!

Page 172: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%"&'()*)#+,

•! !"#$%&"'()*"#'+,"',$'-./"&-'0"'$-1)'2-#',$'3)$%45-'62)&578'

•! 9'3)$%45-'2-:"'0"#'#"("#"43%):-':"'&#;0'(-#$)0'

•! <&#%.,&-'!"#$%&'()*+,-./0',116#"("#;43%)'2)#)',$'!-"&.+,7'

•! =>"$"4&-'?>5-'23./0'1!"#$%&'()*+,-./0',1451

•! <&#%.,&-'./0'@'$"0$)'0%4&)A"':-')&#%.,&-'6':-'">"$"4&-'2./0'51

•! <&#%.,&-'/'01)$#&2,

•! B):)'1)>-#'/'03$%'2,2-:"'0"#')00-3%):-')',$'2-4&-':-'3)$%45-''

•! C)>-#"0'"4&#"'4'"'5'62#-2-#DE-':)':%0&F43%)'2"#3-##%:)7'

•! <&#%.,&-'6)&"&'GH!"#$%&'I'),&-'I'),&-J#"1"#0"H'

•! K"'#-&)&"'(-#'"7&)L'-./"&-'?3)#M'0"$2#"')>%45):-'3-$'-'1"&-#'&)4N"43%)>':-'$-1%$"4&-O'"7&)86'9'62''G'),&-'P'QRS'N#),08'

•! K"'(-#',$'4T$"#-L'U'-':#;7<),=>),:"'#-&)DE-':-'-./"&-'2)?6',),'$>),>8'

•! !)#)'1)#%)#'-'F4N,>-':,#)4&"')'"A"3,DE-'2-:"J0"',0)#'V)1)K3#%2&8'

QR'

Page 173: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()'(%$*"+,$-.(/-0,#.(

•! !"#$%&'(%&)#%&*+,-./&

•! 0$&1%#"0%$'2-3-#4&.//./&+)"1'-)#/&".2.'.$&,0(5%*()'(6%7-*'.%&".3"./.4)+45#&2##"5.4+5+/&6%(&&

•! 067&!"#$%&'()*+,*-.,*-/**-./**-/**(.

•! 8.(9#14)/%&8.(:1$./%&8.(;3,14./&

•! ;.&8'9:-"#$.(!#"&-/+5#%&6%7,'.(<&1=4#"+5#>&

•! ;.&5%$;(#-&?05%$;4(!#"&-/+5#%&6%7,'.(<&1=4#"+5#>&

•! ;.&6%7,'.(!#"&-/+5#%&<*-0%&+9(.&$-(/@#&1=4#"+5#/&

•! A&*+,#"&5.!+-,)&5.&/%7/2-)'(<&5%/')%&,#=#&8'9="0'.(/."B&1=4#"+5#&3#"&5.!+-,)7&3+"+&-/+"%&$-5.&#&*+,#"&3+"+&7"#'%*(#-&)"./*'$'C&

•! 8'9!57"#'.(<&/-3#")+5#&4#"$+,$.4).&

DE&

Page 174: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()#(*+,-$+.#/'0',1(

•! !"#$%&$"'%()*+,"$-".(/%0)"$12#34)""

•! 51$")4$1$()"67)*+,"8$")#(,&%-)"+,"9,1"

:;"

!"#$%&'()*+,-'$#*&.$,+/012'($%)*3*&444&

&&&()*5&67839:&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&

&&&&&&;&6<<8667&7&387&<=>839:&&&&&&&&&&&&&&&&&&&&&&&&

&&&&&&;&6<<8667&7&787&67839:*?@&

!'A#B0&'()*#-'..#C*&D)*7*&E)*1377*&&

&&&&&&&DC'F/G%,0H)*I%0J'.%4"FB*&&

&&&&&&&%0'B%$)*K7*&2'($%)*677*&@&

&&&!#F'A#$05+$'+F&(L,)*37.*&&&&

& & &,0"0#$M+LF$)*'F(0H'F'$0*&&

& & &,+$#$0)*#L$+*&& & &

&&&&&&&&&&&N#CN5+(0)*."C'F0*&

&&&&& & &/0EI'A0.)*7O3*&&

& & &/0EP+'F$.)*7O3*&

&&&&&&&&&&&&&&/0EQ"C'F0.)*749:8746:&&&&

&&&&& & & &&&&&&&&746:8&749:*@&

&&&&!A"#$%&DC'F/G%,0H)*R+,-'$#*?@&

&&&!?#F'A#$05+$'+F@&

!?'A#B0@&

Page 175: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%"&'()*)+,-

•! !"#$%"&'()*)+,-!"#$%&"'()#%)#')'*+#',"'!#""-*.%$"-&+'+/',"'*+-&+#-+')+'0+-1+',+'&"$!+'•! 23')&#%4/&+3'.+)%5'/0'"'&)'+/'1"*2'3-#"*"4"$'()0+#"3',"'*+#'6"78'9:;5'#",5'#146<==>5=5=?5'"&*@?'

•! A'%-&"#!+0)BC+'D';"%&)''!"#*+##"-,+'()0+#"3'"-&#"''*+#"3',"')*+#,+'*+$'+'''34"5)-3678-6!),#C+?'

•! E'+'$"3$+')01+#%&$+'/3),+''!)#)'*+$!/&)#'1#),%"-&"3'

F<'

!"#$%&'(!)&

!"#$%"&'()*)+,-"*.'/01!"#$%&'()$%*"++,-$%.+/"1,,222,34,

!"#$%"&'()*)+,5+)%01!0.12$2$231,&)01!0.1455$455$45531,222,34,

Page 176: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%"&'()"#*+,)%-.

•! !"#$%&"'()"'*'*+%$*,-.'/*#%"'.'0"12.3*$"+&.4'#.&*,-.4'"13*2*'.)'3%1*25*$"+&.'0"')$'.67"&.'

•! 8&#%6)&.'&/0'.9':&#*+12*&"';'13*2"';'#.&*&"';'1<"=>';'1<"=?:'

•! @"&"#$%+*'.'AB.'0"'&#*+1C.#$*,-.''

•! 8&#%6)&.1'+),%4'1/."'&,.

•! D"3"6"$'/*2.#'3.$B*E/"2'3.$'.'AB.'0"'&#*+1C.#$*,-.'

•! 8&#%6)&.'2"34'*..

•! D"3"6"'2%1&*'0"'/*2.#"1'1"B*#*0.1'B.#'B.+&.F"F/G#H)2*'

•! I'"C"%&.'0"'*+%$*,J"1'&,.K'%+0"L+%0.'"$'MNOP'

•! D"3.$"+0*F1"')1*#'+),%5&,4'+),%51/..)'2"34'*.Q"'+-.'*B"+*1'&,'R'0"/%0.'S'C.#$*'3.$.'.B"#*4'/*2.#'%+%3%*2'K'%+0"L+%0.T'

•! 8'&#*+1C.#$*,-.'K'$)2AB2%3*0*'*.'"C"%&.'0*1'*+%$*,J"1'*+&"#%.#"1'Q()*+0.'*&#%6)&.'"66$72'9:1)$:TU'

VV'!"#$%&"'&()"*&")+$,"-#./")$012"3456537"

Page 177: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()#(*+,-$+.#/0+,12'0$3(

!"#

!"#$%&'()"*+,-.&/012-&3"4-56*%1'-&"%-701891':";7-01<991'(01=91'>01=91?'

''''!$*"#$7&2.$*4/@.#'!"#$%&'(!)!$&*+'(,%&-&*!(%&./&*$77."AB7&C$#&017.$*4/@.#1''

''''''''01'%&23&*4$567%&8968:&*/"))01/.&&D&1'E?'

''''!$*"#$7&2.$*4/@.#'!"#$%&!')739)!$&*!(%&;--<-&*/"))01/.&&D&1'

''''''''01'%&23&*4$567%&8968:&*F$)FG@;&0146)"*&1'$77."AB7&C$#&017.$*4/@.#1''

''''''''+&>2"#&4019HI1'+&>J6)"*&401959K95=''95=K'I591'$;;"7"L&014B#1E?'

''''!$*"#$7&2.$*4/@.#'!"#$%&'(!)!$&*!(%&=;-&*$77."AB7&C$#&017.$*4/@.#1''

''''''''01'%&>3&*4$567%&8968:?.@/3&*$;;"7"L&014B#1''/"))01/.&&D&1E?'

''''!$*"#$7&2.$*4/@.#'!"#$%&!')739)!$&*!(%&2--<-&*$77."AB7&C$#&017.$*4/@.#1''

''''''''01'%&>3&*4$567%&8968:?/3&*F$)FG@;&0146)"*&1''/"))01/.&&D&1'

''''''''+&>2"#&4019HI1'+&>J6)"*&40195<=K95M=''95<=K'I591''$;;"7"L&014B#1E?'

''''!$*"#$7&2.$*4/@.#'!"#$%&'(!)!$&*!(%&./&*$77."AB7&C$#&017.$*4/@.#1''

''''''''01'%&A3&*4$567%&8968:?.-3&*$;;"7"L&014B#1'''

''''''''+&>2"#&4019HI1'+&>J6)"*&40195<=K95M=''95<=K'I591'/"))01/.&&D&1E?'

!E"#$%&?'

•! $%&'()#(*'+(,-.)#)'+/012*.()#.#(3'45()#

Page 178: SVG - Scalable Vector Graphics: Uma Introdução Prática

!"#$%&'()"(*+!(,'-(.*/0(

!"#$"%&$'&()*+'&,+"#$"%-'%.)/'0123*)435%6&

Page 179: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()"(*+!(,'-(.*/0(

•! !"#$%&'($)(*$+(*,'&$,$%,*-*$'($.!/0$•! 1$2,3)$45637$+(*,*$8+9*,)$:5)36,)$;9($%,<=)>$

•! ?,)$%,<=)$%&'(2$)(*$+(*,',)$6&2$<(@<&A$(@%*())B()$(2$,C**3:9<($D,79($<(2%7,<()$E$>>>$F$&9$49GHB()$.I,<=$'($<(@<&A$6&2&$6&G6,<J>>>K$

•! L$G,2()%,6($'&$!"#$'(D($)(*$3G679M'&$G&$123453674"38""69(($GN&$G&$<(2%7,<($&G'($13:;9(O$'(67,*,'&$

P$

!"#$%&'"&()*#+,$'-./&0/&-'#1+0*23456'#57!89:;<=<9!0+&>()45?(@A(@AABB7!C"#$%&'"&7(

((((((((!"#$%D.E-'+1>(#'$'1&45F.G57(

((((((((((((!"#$%&'"&7(H!C"#$%&'"&7!"#$%I+$/'-.D(#'$'1&45@A(J(0.#*&*.2KLMN5C7(

((((((((((((OOO!C"#$%&'"&7(

((((((((!C"#$%D.E-'+1>7(

!"#$%&'"&()*#+,$'-./&0/&-'#1+0*23456'#57!89:;<=<95(C7BB7!C"#$%&'"&7(

!"#$%#&6$'#>''&((

(((((((((((((((("P$2#%"#$45>&&0%CCGGGOGQO.E3C@RRRCSTHC=E+2#D.EP5((

((((((((((((((((I'E#*.245@OA5(

(((((((((((((((("P$2#45>&&0%CCGGGOGQO.E3CUAAAC#I35(

(((((((((((((((("P$2#%"$*2V45>&&0%CCGGGOGQO.E3C@RRRC"$*2V57(((((

Page 180: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*#+,-.')/#)012)3'$)4056)

•! !"#$%&$'(%()*'()'%$+,&-)./)0#1'%2%&")'1'3$&%$',4'5$673)'(1'2%$$%*'

1"&2&0()'/78$#9+':)(1')281#)*'+,1'#109%4':;;<4'),'4%&*'

='

!"#"$%&'()*'+,-%+"')./010/,2'$'3$4'*#5'6')./078798090:/;,,,,!<*'=%$'";,,,,,!<*'=%$',#2./<8/,=)&%./>%+6?+#)/,!"#$%&'()$*+,-./+0111,&'""'@>./0070A1BAC/;111,!D<*'=%$';,,,,,!<*'=%$',#2./<0/,=)&%./E%=4"/,!"#$%&'()$*+1213,+0111,&'""'@>./C0FAAF1:8/;111,!D<*'=%$';,,,,,!<*'=%$',#2./<C/,=)&%./G%++'/,!"#$%&'()$*+12.45+0111,&'""'@>./C:HB881BI/;,,,,,,,,!"'$%*#$%,#2./<C18/,=)&%./J4'/,6'$%K)+#'./+%2)=2'/,,,,,,,,,,,,,,,,,,,!"#$%&'()$*+6,.4+0111,&'""'@>./F:781:HI/D;!D<*'=%$';,,,,,,,,111,,,,,!<*'=%$'9'='),#2./'8/,=)&%./L%+%"/,!"#$%&'()$*+/427,+0111,,&'""'@>./I017B:/,D;,,,,,!<*'=%$'9'='),#2./$=)8:C7/,=)&%./M*4$N)/,!"#$%&'()$*+2635+,111,&'""'@>./HAF18IC/;,,,,,,,,!"'$%*#$%,#2./"8CFCF718/,=)&%./L'+)=$%/,!"#$%&'()$*+1212+00111,&'""'@>./8781FC,D;,,,,,,,,!"'$%*#$%,#2./"8CFCF710/,=)&%./O#P/,!"#$%&'()$*+--+0111,D;,111,,!D<*'=%$'9'=');,,,,,!<*'=%$'9'='),#2./$=)077C14QC8C/,=)&%./R+#"/,!"#$%&'()$*+2623+0111,&'""'@>./888F1C:8/;,,,,,,,,!"'$%*#$%,#2./"8CI8::18/,=)&%./S#"=)&#'/,!"#$%&'()$*+1.,+0111,D;,111,!D<*'=%$'9'=');,,,,,,,,111,,,!D<*'=%$'";,,,!'"$%+)#2%";111!D'"$%+)#2%";,111,!6)&%$'";111!D6)&%$'";,111,!6%=$'4+)";,111,!D6%=$'4+)";,,,!$+'="9=%$4=#'=)";,,,,,!)QT%$),#2./'07701*&I7/,=)&%./U4')'+/,1110!"#$%&'()$*+-,2+;,,,,,,,,!"'$%*#$%,#2./"B777718/,=)&%./V%WX)$/,!"#$%&'()$*+.,+,111,D;,,,,,!D)QT%$);,,,,,!)QT%$),#2./'077C1-Q80/,=)&%./(%2='/,111,!"#$%&'()$*+1.33+D;,,,,111,,,!D$+'="9=%$4=#'=)";,!D"#"$%&'()*'+;,

Page 181: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&&'%&()*+,-(#+$+(%",$+.$(/+/0&(

•! !"#$%&'"(')*&%+)"%,'-.'/*&0("1&-,'2345'

•! 6-7"8,"1'9-('1-7-,'-,':1"$,'7-';&+#9-'7"'<*&&*,'

!!"#$%&'( ( (((""#$%&'()*+,-.)!/0!1223!

•! 6=("&-'7"'%1"$,'7-';&+#9-'7"'<*&&*,'

!!%)*$+,-$.#$%&'(4-56+78'+*69:!

•! >*%-&'7%0("1&-'7"$1&"'-,'%1"$,',"?"9%-$*7-,'@$"9",,+&%-'

/*&*'9*?9.?*&'7%("$,A",'7-';&+#9-'7"'<*&&*,B'

!!*/",+-"/*$#+,'(

!""#$6-+7%&'()*+,-.)!;!""#"%&'()*+,-.):3"%&'()*+,-.)!

•! !%)%7*'-',+1+2-0(13".10(/+(4+$$+(@"('.$%7*7",'7-'

)%"C<-DB'/"?-'1+.0$(/.51%,$0(/*&*'-<1"&'-'6+,0$((/%(

$%/7890'/*&*'9*?9.?*&'-'1*(*$E-'7*,'7"(*%,'<*&&*,''

F'

Page 182: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()'*+""+,-'."&/)0&'

!"

#$%&'" #()*&'+,%-&"-&"

.)/&'+,%0"('"%12'+%0"(%"0)0+'&*"0%3*,"4%&"566-&"%7"&*)0"

#()*&'+,%-&"8"9:&*;<*,,*=":&*)%,.)*&'+,%>"

#()*&'+,%-&"-&"#$%&'"

#()*&'+,%-&"-&"#$%&'"

?"@"A"@"B"."C" D3*$'+*0" D3*$'+*0E*$F%" G*+H3)+'0"9?7*0>" C0+',I)('0"'"%7+,%0"%12'+%0"

#()*&'+,%-&"-&"#$%&'"

JK"

LK"

MK"

NK"

:&*;<*,,*"9'&"7$)(*('0"(%"O)'P<%;>"

:*3+7,*<*,,*"

:'0Q*4%@$+,'<*,,*0"

:*3+7,*R)+73%"

:*3+7,*A,*S4%"""T""":$7&',%.'U+'$0"8"9:'0Q*4%@$+,'<*,,*0""V":*3+7,*<*,,*>"

Page 183: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'#()*+(

!"

!"#$%&'()"*+,--./00111213245$067770"#$+%%

%%%%%&'()"/&(8)9*+,--./00111213245$0:;;;0&(8)9+%

%%%%%#8<1=4&*+7%7%:>77%:677+%18?-,*+:677.&+%,<8$,-*+;77.&+@%

%%%%!?<A"@%

%%%%%%%!BCC%D8-E(4%CC@%

%%%%%%%!$%8?*+-8-E(4+@%222%!0$@%

%%%%%%%!BCC%F5GA8H4%?<%IG55G"%CC@%

%%%%%%%!$%8?*+$5GA8H4+%A4)-C"8J<*+:>+@%222%!0$@%

%%%%%%%!BCC%K<$<)?G%CC@%

%%%%%%%!5<H-%8?*+LEG?5G?4+%18?-,*+6M+%,<8$,-*+6M+0@%

%%%%%%%!$%8?*+(<$<)?G+%A4)-C"8J<*+:>+@%222%!0$@%

%%%%%%%!$%8?*+-E?4+%A4)-CAG'8(N*+O45I<(P%OG(8I58P%"G)"C"<58A+@%

%%%%%%%%%%%!E"<%&(8)9/,5<A*+Q-8-E(4+%%-5G)"A45'*+-5G)"(G-<R67PM7S+0@%

%%%%%%%%%%%!E"<%&(8)9/,5<A*+Q$5GA8H4+%-5G)"A45'*+-5G)"(G-<R67P:M7S+0@%

%%%%%%%%%%%!E"<%&(8)9/,5<A*+Q(<$<)?G+%-5G)"A45'*+-5G)"(G-<R67PMM7S+0@%

%%%%%%%!0$@%%%%%%%%

%%%%!0?<A"@%

%%%%!E"<%&(8)9/,5<A*+Q-E?4+%0@%%%%%%%%

!0"#$@%

Page 184: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'#()'*"$+,)-.*,)

!"

Page 185: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'#()'*"$+),*"-.,+/)

!"

!"#$%&'"()*$+,'#*,-./0$12&'34'5#

###!"#$%&'6)(()7!'5#

######!.28.#8&'9'#:&'3;'5!<#=-,>2!?.28.5#######!(2+.#8&'399'#:&'9'#@$%.A&'!"""'#A2$"A.&'B;'#*$CC&'("6DB;;E3F9E9G'?5#

######!.28.#8&'3339'#:&'3;'5=%$)>2.(,H>#H>!?.28.5#

###!?"5#

###!"#$%&'6)(()7#'5#

######!.28.#8&'9'#:&'33;'5#<#=-,>2!?.28.5#######!(2+.#8&'399'#:&'399'#@$%.A&'$%"'#A2$"A.&'B;'#*$CC&'("6DB;;E3F9E9G'?5#

######!.28.#8&'F49'#:&'33;'5=%$)>2.(,H>#H>!?.28.5#

###!?"5#

###!"#$%&'6)(()7&'5#

######!.28.#8&'9'#:&'B3;'5&<#=-,>2!?.28.5#######!(2+.#8&'399'#:&'B99'#@$%.A&'%""'#A2$"A.&'B;'#*$CC&'("6D3;9E9EB;;G'?5#

######!.28.#8&'439'#:&'B3;'5=%$)>2.(,H>#H>!?.28.5#

###!?"5#

!?"5#

#$%$&'"$()$"*+,-,"./($'./0,"

12+,'$("$3)'240,("02"5,/)$"

60.27$)',87"9":;723<2''2"=";72.,'>.27$)',?"

Page 186: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'(&()*#")&+,-./&0(12#%0(&34"&

!"

!"#$%#&'$(#)((&*+(,#-./012341*"5$/#%"#$01)&&6%778883893.,:72;;;7<=>7?,@/#A.,51*

****"5$/#01)&&6%778883893.,:7B4447#+:1**

****"5$/#%"$-/C01)&&6%778883893.,:72;;;7"$-/C1D*

****!"#$%.E&6E&*5(&).F01"5$17D!"#$%#&,-6G#6@H(*($(5(/&#01I17D*

****!"#$%F(H-5@$GA.,5@&*F(H-5@$G#(6@,@&.,01J1*:,.E6-/:G#(6@,@&.,01317D*

****!"#$%&(56$@&(*5@&H)01!1D*********!#+:*+-(8K."014*4*2B44*;441*8-F&)012B446"1*)(-:)&01;446"1D*

************!F(A#D*

****************!:*-F01&-&E$.1D*333*!7:D*

****************"#$%&'(#)*+%,-($+-./01%23'(45(6*

**********************"7189*::8;0/3<:8*/31$!6*****************"!#6*

****************!,(H&*-F01LE@F,@F.1*8-F&)012M1*)(-:)&012M17D*

****************!:*-F01$(:(/F@1*A./&G#-N(012O1D*333*!7:D*

****************!:*-F01&EF.1*A./&GA@5-$'01P.,Q($J*P@$-Q,-J*#@/#G#(,-A1D*

********************!E#(*"$-/C%),(A01R&-&E$.1*&,@/#A.,501&,@/#$@&(SB4JM4T17D*********************!E#(*"$-/C%),(A01R:,@A-H.1*&,@/#A.,501&,@/#$@&(SB4J244T17D*

********************!E#(*"$-/C%),(A01R$(:(/F@1*&,@/#A.,501&,@/#$@&(SB4JUV4T17D*

****************!7:D*

************!7F(A#D*

************!E#(*"$-/C%),(A01R&EF.1*7D*********!7#+:D*

****!7"#$%&(56$@&(D**

$$$$"7189/3<:8*/3$<*/,='(1%1/3<*>-8*)(6$???$"!7189/3<:8*/36*

!7"#$%#&'$(#)((&D*

#$%&'()*+"*+%"+&(,+%"($-.')($%"

%$,/"012'&3*+")4&0"

5)-$%.)2$%"*+"678"

9$-.')($"4&$"0,/".,+2$%%),"

2)*)"0($-"$:(,)3*+"*)";+1($"

<%($"($-.')($"=$,)"*)*+%">:+%""?1@+"&%)"

*)*+%"$:(,)3*+%"*)";+1($A"

Page 187: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'$()')*"#+,'-#.()/0.1"$()

•! !"#$%&'#()*23(04*"#",5)+(,&%*)&#*+"))",()*+&-"*"+-./"01(*23&*4"5*"*'#"6)4(#%"01(*

•! 789*"+-./"0:&)*;"<"=*+#(/&))",(#&)*)'"6,"-(6&=*&'/>*

?@*

!"#$%&'(')*+'),-.'$/0('1'(('.234!5"#$%&'(')2*

!"#$%&'(')*+'),-.,#&'678+/(,1'(('#.24!5"#$%&'(')2*

!"#$%&'(')*+'),-.)'"1'(('.29::!5"#$%&'(')2*

!"#$%&'(')*+'),-.67(;$'+,/'.2(<=>?44@39:@:A!5"#$%&'(')2*

!"#$%&'(')*+'),-.67(;$'+,/'B+'7.2(<=>?44@:@:A!5"#$%&'(')2*

!"#$%&'(')*+'),-.67(C0'.2(<=>34:@:@?44A!5"#$%&'(')2*

!"#$%&'(')*+'),-.67(D0/(7#.2(<=>:@?::@:A!5"#$%&'(')2*

!"#$%E'(F'=$,*+'),-.)'F7(GF'),/(7.**

************#,$,6/-.55HI+7/>JKF'),/(7L)*M$/N*55H5JKF'),/(7L)AO5JKF'),/(7L).*52*

!"#$%E'(F'=$,*+'),-.F/,+#.**************#,$,6/-.55HIJKF'),/(7L)*M</N-*P::O.*52*

Page 188: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*+,'(&-,./0-(+&

!!"

!"#$%&'()$*&'+(*&,-./#0#&'(*12$*3/4+

++!"#$%5236'*,-+#'$',&./!"#$%&/4+

++++!"#$%#23&+#'$',&./'(")*$#+,-*/+7*&*6&8)'./9:(;'3/+237'3./7'#,'9709</=4+

++++!"#$%>*30*;$'+9*('./.)+/0+)1)++)/+#'$',&./'(")*$#+,-*2?+!*)31)++)270>+!*)",+4")*$#+,/+=4+

++++!"#$%>*30*;$'+9*('./5,+/4+

++++++!"#$%,-22#'4+

++++++++!"#$%@-'9+&'#&./9*('ABC+.+D)$*9'&*D/4+

++++++++++!"#$%>*$:'625+#'$',&./!5,+6.)%$#)/=4+++++++++!="#$%@-'94+

++++++++++++++++BBB+

++++++++!"#$%2&-'3@0#'4+

++++++++++!"#$%>*$:'625+#'$',&./!5,+70#+,&/=4+

++++++++!="#$%2&-'3@0#'4+

++++++!="#$%,-22#'4+

++++!="#$%>*30*;$'4+

++++!<+07./;*33*EF8,&"#",%9:G/++

+++++++&3*9#523(./&3*9#$*&'AHI+FA8,&"#",%9:26+JC+?+A!).#0+)1)++)2K+!$&8)5,;%#+$1)++)&CGC/4+++++++!&'"&+"./H/+8./JH/4!"#$%9:(;'3+523(*&./JB+/+>*$:'./8,&"#",%9:/=4++++++++++++++++++++++++++!"#$%>*$:'625+#'$',&./'%,*$/=4!=&'"&4+

++++++!3',&+"./JLH/+8./H/+@07&-./F!.)+/0+)1)++)G/+-'0<-&./F!).#0+)1)++)G/+50$$./F!5,+G/=4+++++++!&'"&+"./F!.)+/0+)1)++)2K+JLMG/+8./JH/4+

++++++++++++++!"#$%>*$:'625+#'$',&./523(*&69:(;'3A'(")*$#+,-*I+DNNNBNNHINNDC/=4+O(!=&'"&4+++++!=<4+

++!="#$%5236'*,-4+

!="#$%&'()$*&'4+

#$%&%"'()"*)+,"+)-)./%"

Page 189: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*

!"#

!"#$%&'()"*+,--./00111213245$067770"#$+%%

%%%%%&'()"/&(8)9*+,--./00111213245$0:;;;0&(8)9+%%

%%%%%#8<1=4&*+7%7%:677%;77+%18>-,*+:677.&+%,<8$,-*+;77.&+?%

%%%!><@"?%

%%%%%%!$%8>*+-8-A(4+?%222%!0$?%

%%%%%%!$%8>*+$5B@8C4+%@4)-D"8E<*+:F+?%

!!!!!!!!!"#!$%&'()**)+,'!-*)./01*2&'-*)./3)-4567!68'9!

!!!!!!!!!!!!"-4:-!:&'6'!;&',6'9,<!=>?$-4*"@-4:-9!

!!!!!!!!!!!!"*4A-!:&',B6'!;&'6'!C$%-D&'E66'!D4$#D-&',F'!0$33&'*#(5BFF7,E6768'@9!

!!!!!!!!!!!!"-4:-!:&'GBF'!;&',6'9,HB<GEH!I2"@-4:-9!

!!!!!!!!!"@#9!

!!!!!!!!!"#!$%&'()**)+B'!-*)./01*2&'-*)./3)-4567!B68'9!

!!!!!!!!!!!!"-4:-!:&'6'!;&',6'9B<!J)-K*.1"@-4:-9!

!!!!!!!!!!!!"*4A-!:&',B6'!;&'6'!C$%-D&'LMH<H6BMN6NMFHBLL'!D4$#D-&',F'!0$33&'*#(5BFF7,E6768'@9!

!!!!!!!!!!!!"-4:-!:&'MGG<H6BMN6NMFHBLL'!;&',6'9,B6<FNL!I2"@-4:-9!

!!!!!!!!!"@#9!

!!!!!!!!!<<<!

!!!!!!!!!"#!$%&'()**)+NM'!-*)./01*2&'-*)./3)-4567!MB68'9!

!!!!!!!!!!!!"-4:-!:&'6'!;&',6'9NM<!O*AK/"@-4:-9!

!!!!!!!!!!!!"*4A-!:&',B6'!;&'6'!C$%-D&'F<6H,,BNHEBNHMLMF'!D4$#D-&',F'!0$33&'*#(567B66768'@9!

!!!!!!!!!!!!"-4:-!:&',N6<6H,,BNHEBNHMLM'!;&',6'9G6,!I2"@-4:-9!

!!!!!!!!!"@#9%

%%%%%%!0$?%

%%%%%%!5<C-%8>*+GAB>5B>4+%18>-,*+:H+%,<8$,-*+:H+0?%

%%%%%%!$%8>*+(<$<)>B+%@4)-D"8E<*+:F+?%222%!0$?%

%%%%%%!$%8>*+-A>4+%@4)-D@B'8(I*+J45K<(L%JB(8K58L%"B)"D"<58@+?%222%!0$?%

%%%!0><@"?%

%%%!A"<%&(8)9/,5<@*+M-A>4+0?%

!0"#$?%

$%&'(#)%*)+*%&'(#

$%&'(#,-./%0&'(#&%#1'2.,#

,#1'/3%.%&'(#

Page 190: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#$%&'()*

!"#

Page 191: SVG - Scalable Vector Graphics: Uma Introdução Prática

!"#$%&'()*)'+"#&,-$)'

&"!$.)*%'-/0*%'%'&1)*%.)*%'

",$*"&'$,$"*/)/&'%'+,*&"&'

!"#$"%&$'&()*+'&,+"#$"%-'%.)/'0123*)435%6&

Page 192: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"#"$%&'()*+

•! !"#$%&'%()*$"+•! ,-.+/0/+,$%123+!3&4120+!!!"!#"$%&'()'*+,'-

•! ,567+!!!"!#"$%&'()'*./0'-

•! 8,,+90:+!!!"!#"$%&'*1234'5**'-

•! ;<5+!!!"!#"$%&'67.'-

•! 7&=>1"+"1?>$+,-.+•! @A>B+8(CD$0+*+,-8%$&%9::;<&=-1>4-&%9?>;@93-A4B0+E#>$""0+9::90+

•! F>1"BG+.1$""$>G+H&>BID$>0+049%<-*+,=-(>4-A4B-,%9?>;@C-*19<D9%D0+!J?11K+C>L4"0+>E?=''!!!"349%<CF&"@$:'-

•! MAB1>&(&"+>$D(%&12(31"+•! H$D3$>+3(+N1%O(+PQQQ0(>C12(=&"0%1R0?>S+

•! G*0(-4-G891>-J+E>C1+T(=&"+UV::0++

•! H(.0I-4-5**-W+E>C1+T(=&"+XY::0++

•! J9F9*@%;?1-W+E>C1+T(=&"+XZ::+

9+

Page 193: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br

!"##$%"&'$()*#""+(,$#"-$#")

•! !"#$%&'()

•! !"#$%%&'()*+,-.(//(0*1/+*.1/23

•! !"#*%+)

•! !"#$%%1/+*.(//(0*.1/2%#%&'(4*53

•! ,-./012%)

•! 444.,67&18#*./9(3

•! !.%(/1)3(4'156)

•! !"#$%%444.7,:;-.1/2%#9/+;1-&%&7*-&83

•! !78'995%)

•! !"#$%%<20(98#!,1&.8#81!*./9(3

:)

Page 194: SVG - Scalable Vector Graphics: Uma Introdução Prática

arg

onavi

s.com

.br !"#$%&'("$&%&')'#"#%$*+*&'$,-+(*%.+/%&'

•! !"##$%$!&'$()*$+,-./0123/$4.567*$8*-1*9:;*0/$<#"#=$

•! >?-.1-1.*$@$?:,-*A@$!&'B$C*9:0*23/B$DEDB$@,60*0@?B$)/019*.:;*23/B$!&'$F7G@)*B$64/?$0@$0*0/?$

•! !H##$%$!I*-G$@$!F'E$8*-1*9:;*0/$<#"#=$

•! F/912J@?$1?*,0/$*4@,*?$!F'E$"K#L!I*-G$"K#B$@$1?*,0/$@A-@,?J@?B$!F'E$<K#$@$!I*-G$<K#$

•! MN##$%$OE&'P$@$QFFR$

•! QFF$<$@$QFF$H$

•! MS##$%$T*C*F7.:4-R$

•! >Q&UF7.:4-$4*.*$*$M@V$8OE&'LFWX=$7/)$DY&$<K#$

•! Z[1@.\$

•! MS]#$%$M@VX'$8,/C/=RR$

•! Y4@,X'$4*.*$*$M@V$

!"#$"%$%&'($")*&')+")*$+,-)+")',.)+""

""/01112"&+(3$"45+*$'67&5+"*)8)"4$9'-$)4"

!!":5'4)"'3$"45+*$'67&-"$'-5'&"

N$

Page 195: SVG - Scalable Vector Graphics: Uma Introdução Prática

!"#$"%&$'%()!'*+,'-#&)(,.

!"#$"%*'%+(/'0-1&)(,&2%.

!"