O documento discute a linguagem SVG para descrever gráficos bidimensionais em XML, incluindo sua história, ferramentas de edição, elementos, atributos, estrutura, exemplos, inserção em HTML e funcionalidades como estilização, acessibilidade, animações e interações.

2. Maujor
Maurício Samy Silva

4. Dmitry
Baranovskiy
“If you don't know SVG you can't
call yourself a web developer, call
yourself a web enthusiast”
Webdirections, Melbourne – maio 2014

6. Tecnologia do W3C - fevereiro 1999
SVG 1.0 – setembro 2001
SVG 1.1 – janeiro 2003

7. SVG Tiny 1.2 – dezembro 2008
SVG Full 1.1 - 2ª. Ed – agosto 2011

8. até
2012
2013 março
2014
julho
2014
agosto
2014
- >0,1% 0,2% 0,3% 0,4%
2014 – O ano da SVG

9. SVG 2 – agosto 2012
Rascunho de trabalho do W3C

10. http://caniuse.com

11. SVG é uma linguagem
para descrever gráficos
bi-dimensionais em
XML.

12. 215 x 195px
9K
940 x 850 px
60K
JPG
JPG
∞ x ∞ px
5K
SVG

16. <picture>
<source srcset=
“fantasma-small.jpeg” media=“(max-width: 400px)”>
<source srcset=
“fantasma-medium.jpeg” media=“(max-width: 900px)”>
<source srcset=“fantasma-large.jpeg” >
<img src=
“fantasma-medium.jpeg” alt=“fantasma que anda”>
</picture>

18. <img src=“fantasma.svg”
alt=“o fantasma que anda”>
<style>
img { width: 100%; }
</style>

19. Escrevendo
SVG

21. SVG Edit
Editor online
Inkscape
Download free
Adobe Illustrator
R$44,00/mês
Sketch (Mac)
U$99,00

26. Elementos da SVG
svg
title
desc
circle rect
ellipse
line
defspolyline
use
text poligon
g

27. Atributos da SVG
x
style
ry
height
rx
strokexlink:href
widthfill cx
cy
y
stroke-width

28. Atributo de
apresentação????

30. Estrutura
de um
documento SVG

32. Exemplo
de
gráfico SVG

41. Inserir
SVG
na HTML

42. <img
src=“imagem.svg”
alt=“descrição”>

43. .el {
background-image:
url(imagem.svg);
}

44. <object
type="image/svg+xml"
data=“imagem.svg">
<!-- fallback here -->
</object>

45. <iframe
src=“imagem.svg">
<!-- fallback here -->
</iframe>

46. <embed
type="image/svg+xml"
src=“imagem.svg" />

47. <svg version="1.1"
xmlns="http://www.w3.org
/2000/svg" …>
<!– marcação svg -->
</svg>

48. SVG é acessível

49. elementos
<title> e <desc>
atributos ARIA
aria-labelledby="title"
aria-describedby="desc"
textos (vetores acessíveis)
atributorole

50. SVG é estilizável

51. Sintaxe
Propriedade CSS
Atributo de apresentação SVG
background-color  fill
border-color  stroke
border-width  stroke-width
borda-style  stroke-dasharray

52. <circle cx="225" cy="225" r="200"
stroke-width="50"
stroke="red"
fill="white" />

53. circle {
stroke-width: 50;
stroke: red;
fill: white;
}
<circle cx=“225”
cy=“225”
r=“200”/>

54. .aB {
stroke-width: 50;
stroke: red;
fill: white;
}
<circle class=“aB”
cx=“225”
cy=“225”
r=“200”/>

55. <?xml version="1.0?>
<circle
cx=“225”
cy=“225”
r=“200”/>
<?xml-stylesheet type="text/css“
href="style.css"?>

56. filtros,
máscaras,
transformações,
gradientes,
animações,
interações, ...
SVG admite:
(SMIL)

57. INTERAÇÃO

58. <style>
circle:hover {
cursor: pointer;
fill: orange;
stroke: blue;
stroke-width: 10;
stroke-dasharray: 5, 5;
}
</style>
<circle cx="125" cy="75" r="60" fill="red"
stroke="black" stroke-width="5"/>

59. ANIMAÇÕES

60. Dmitry
Baranovskiy
Raphaël Snap.svg

61. <svg>
<style>
rect {
transform-origin: 550px 400px;
animation: rodar 4s linear infinite;
}
@keyframes rodar {
100% { transform: rotate(360deg); }
}
</style>
<rect x="400" y="300" width="300“ height="200“
fill="red" stroke=“green" stroke-width="10"/>
</svg>

62. <svg>
<style>
rect {
transform-origin: 550px 400px;
animation: rodar 4s linear infinite;
}
@keyframes rodar {
100% { transform: rotate(360deg); }
}
</style>
<rect
x="400"
y="300"
width="300“
height="200“
fill="red"
stroke=“green"
stroke-width="10"/>
</svg>

63. <svg>
<path id="curva" stroke="white" fill="none" stroke-
width="5" d="M 110,200 C 300,130 400,350 450,150
500,-50 -90,270 110,200"/>
<ellipse cx="7" cy="0" rx="20" ry="14" fill="#f00"
stroke="#666" stroke-width="2" opacity=".8">
<animateMotion dur="6s" rotate="auto“
repeatCount="indefinite">
<mpath xlink:href="#curva"/>
</animateMotion>
</ellipse>
</svg>

64. <svg>
<path id="curva" stroke="white" fill="none" stroke- width="5" d="M
110,200 C 300,130 400,350 450,150 500,-50 -90,270 110,200"/>
<ellipse cx="7" cy="0" rx="20" ry="14" fill="#f00" stroke="#666" stroke-
width="2" opacity=".8">
<animateMotion dur="6s" rotate="auto" repeatCount="indefinite">
<mpath xlink:href="#curva"/>
</animateMotion>
</ellipse>
</svg>

65. <animate
attributeName = "rx"
dur = "4s"
values = "10;110;10"
repeatCount = "indefinite"/>

66. Animando gradientes

67. HTML5 + CSS3
Bernard De Luna
http://kwz.me/AD
.eye {
animation: eyes 4s infinite
step-start 0s;
}
@keyframes eyes {
0%, 100% {
background:#fed61e;
border-top: none;
border-radius: 50%;
border:2px solid #000;
}
}

68. SVG + SMIL
Maujor
http://kwz.me/AX
<animate
attributeName="fill-opacity"
keyTimes="0; 0.47; 0.48;
0.55; 0.56; 1"
repeatCount="indefinite"
values="1; 1; 0; 0; 1; 1;"
dur="4s"
begin="2s"/>

69. MÁSCARAS E FILTROS

70. <clipPath> ... </clipPath>

71. <mask> ... </mask>

72. <filter> ... </filter>

74. pajucara.svg

77. http://kwz.me/AV (Site SVG do Maujor)
http://kwz.me/wQ (Editor online SVG Edit)
http://kwz.me/AR (Site para download Inkscape)
http://kwz.me/AM (Ícones SVG para download)
http://kwz.me/AU (Recomendação W3C para SVG 1.1)
http://kwz.me/wR (SVG Primer do W3C)
http://kwz.me/wU (Tutorial SVG da MDN)
http://livrosvg.com.br/ (Site do livro SVG do Maujor)
http://kwz.me/AQ (Site para download Sketch - pago)
http://kwz.me/AG (Otimização de código SVG)
http://kwz.me/AI (Recomendação W3C para SMIL)
http://kwz.me/AW (Converter imagem para SVG)