SlideShare uma empresa Scribd logo
1 de 117
Baixar para ler offline
gráficos
vetoriais
na
web
helderdarocha helder@argonavis.com.br
Setembro/2015
com
Uma introdução abrangente a SVG 1.1
Como criar e usar com HTML5 e CSS
Breve Tutorial
1. Elementos gráficos: figuras, caminhos e texto
2. Grupos e elementos estruturais
3. Sistema de coordenadas e transformadas 2D
4. Cores, filtros, máscaras, gradientes
5. SVG DOM + CSS + JavaScript
6. Animações declarativas com SMIL
Alternativas e bibliotecas
SVG2
Programa
Quem sou eu? Who am I? Кто я?
Helder da Rocha
argonavis.com.br
Tecnologia * Ciência * Arte
HTML & tecnologias Web desde 1995
Autor de cursos e livros sobre

Java, XML e tecnologias Web
helderdarocha.com.br
O que é SVG?
Scalable Vector Graphics
O que é SVG
Scalable Vector Graphics
curvas, polígonos, texto
elipses, retângulos, linhas
imagens, máscaras
gradientes, padrões, filtros
símbolos, fontes
O que é SVG
Scalable Vector Graphics
Ideal para
logotipos, desenhos
diagramas, gráficos
ícones, fontes, sprites
interfaces responsivas
O que é SVG
Scalable Vector Graphics
Guarda a fórmula do gráfico
(não é mapa de pixels)
Coordenadas, ângulos, dimensões
Arcos, curvas Bézier
Transformadas
Tesselações
Vetores vs bitmaps
Bitmap, 10kB
Bitmap ampliado, 10kB
Vetor, 1kB
Vetor ampliado, 1kB
Vetores vs bitmaps
Bitmap, 10kB
Bitmap maior, 250kB
Vetor, 1kB
Vetor ampliado, 1kB
Origens
• 1998 (W3C, Adobe, Microsoft)
Origens
• 1998 (W3C, Adobe, Microsoft)
• Influências
• VML da Microsoft (com HP, Autodesk e
Macromedia)
• PGML, da Adobe (com IBM, Netscape e Sun)
• CSS e HTML (W3C)
Origens
• 1998 (W3C, Adobe, Microsoft)
• Influências
• VML da Microsoft (com HP, Autodesk e Macromedia)
• PGML, da Adobe (com IBM, Netscape e Sun)
• CSS e HTML (W3C)
• Versão atual: SVG 1.1
• W3C Recommendation (segunda edição) 16/08/2011
• Suporte razoável na maior parte dos browsers (ótimo
em Firefox, Chrome, Safari e Opera)
Plataformas
SVG Full
• SVG 1.0 e SVG 1.1
• Formato SVGZ (SVG comprimido com ZIP)
SVG Mobile
• SVG 1.2 Tiny (SVGT) e SVG Basic (SVGB)
• A 3GPP adotou SVG Tiny como padrão de mídia vetorial
• Em desenvolvimento
• SVG2 (antes chamado de SVG 1.2 e SVG 2.0)
• SVG Print (Canon, HP, Adobe e Corel) – impressão
Como criar um SVG
Elemento raiz
<svg>
Namespace
http://www.w3.org/2000/svg
<?xml	
  version="1.0"	
  encoding="UTF-­‐8"?>

<svg	
  xmlns="http://www.w3.org/2000/svg"	
  

	
  	
  	
  	
  	
  viewBox="0	
  0	
  200	
  200"	
  height="100px"	
  width="100px">

	
  	
  	
  	
  <circle	
  r="50"	
  cx="100"	
  cy="100"	
  fill="green"/>	
  

</svg>
svgdemo.svg
Como criar um SVG
<?xml	
  version="1.0"	
  encoding="UTF-­‐8"?>

<svg	
  xmlns="http://www.w3.org/2000/svg"	
  

	
  	
  	
  	
  	
  viewBox="0	
  0	
  200	
  200"	
  height="100px"	
  width="100px">

	
  	
  	
  	
  <circle	
  r="50"	
  cx="100"	
  cy="100"	
  fill="green"/>	
  

</svg>
svgdemo.svg
100 px
100px
Dimensões (opcional)
Como criar um SVG
<?xml	
  version="1.0"	
  encoding="UTF-­‐8"?>

<svg	
  xmlns="http://www.w3.org/2000/svg"	
  

	
  	
  	
  	
  	
  viewBox="0	
  0	
  200	
  200"	
  height="100px"	
  width="100px">

	
  	
  	
  	
  <circle	
  r="50"	
  cx="100"	
  cy="100"	
  fill="green"/>	
  

</svg>
svgdemo.svg
200
200
(0,0)
(100,100)
r = 50
Sistema de coordenadas
viewBox
origem + dimensões
Como criar um SVG
<?xml	
  version="1.0"	
  encoding="UTF-­‐8"?>

<svg	
  xmlns="http://www.w3.org/2000/svg"	
  

	
  	
  	
  	
  	
  viewBox="0	
  0	
  200	
  200"	
  height="100px"	
  width="100px">

	
  	
  	
  	
  <circle	
  r="50"	
  cx="100"	
  cy="100"	
  fill="green"/>	
  

</svg>
svgdemo.svg(0,0)
(50px,50px)
r = 25px
100 px
100px
Sistema de coordenadas
viewBox
origem + dimensões
Como gerar: ferramentas
XMLXSLT
Como exibir
Abra em um browser!
Opera
Chrome
Safari
Firefox
circle.svg
Como exibir
Opera
Chrome
Safari
Firefox
Internet	
  Explorercircle.svg
Qualquer plataforma
Como exibir
Opera
Chrome
Safari
Firefox
Internet	
  Explorercircle.svg
Desktop ou Mobile
Como usar em HTML5 (1)
Três maneiras de referenciar
<html>	
  
	
  	
  	
  	
  	
  <head>...</head>	
  
<body>

	
  	
  	
  <h1>SVG	
  referenciado</h1>	
  


	
  	
  	
  <p>Com	
  Img</p>

	
  	
  	
  	
  <img	
  src="circle.svg"/>	
  


	
  	
  	
  	
  <p>Com	
  Object</p>

	
  	
  	
  	
  <object	
  data="circle.svg"></object>	
  


	
  	
  	
  	
  <p>Com	
  Embed</p>

	
  	
  	
  	
  <embed	
  src="circle.svg"/>

</body>	
  
</html>
comousar.html
Como usar em HTML5 (2)
<html>	
  
	
  	
  	
  	
  <head>	
  
	
  	
  	
  	
  <style>	
  
	
  	
  	
  	
  	
  	
  	
  	
  svg	
  {	
  border:	
  red	
  dashed	
  1px;	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  height:	
  200px;	
  width:	
  200px;	
  
	
  	
  	
  	
  	
  	
  	
  	
  }	
  
	
  	
  	
  	
  	
  	
  	
  	
  circle	
  {fill:	
  red}	
  
	
  	
  	
  	
  </style>	
  
	
  	
  	
  	
  </head>	
  
	
  	
  	
  	
  <body>	
  
	
  	
  	
  	
  	
  	
  	
  	
  <h1>SVG	
  embutido</h1>	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  <svg	
  viewBox="0	
  0	
  200	
  200">	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  <circle	
  r="50"	
  cx="100"	
  cy="100"	
  fill="green"	
  />	
  
	
  	
  	
  	
  	
  	
  	
  	
  </svg>	
  
	
  	
  	
  	
  </body>	
  
</html>
Embutir no código
comoembutir.html
Como usar em CSS
<html>

	
  	
  	
  	
  <head>

	
  	
  	
  	
  	
  	
  	
  	
  <style>

	
  	
  	
  	
  	
  	
  	
  	
  #circulo	
  {

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  background-­‐image:	
  url(circle.svg);

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  height:	
  100%;	
  width:	
  100%;

	
  	
  	
  	
  	
  	
  	
  	
  }

	
  	
  	
  	
  	
  	
  	
  	
  #container	
  {

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  height:	
  200px;	
  width:	
  200px;

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  border:	
  blue	
  dashed	
  1px;

	
  	
  	
  	
  	
  	
  	
  	
  }

	
  	
  	
  	
  </style>

	
  	
  	
  	
  </head>

	
  	
  	
  	
  <body>

	
  	
  	
  	
  	
  	
  	
  	
  <h1>SVG	
  background	
  CSS</h1>

	
  	
  	
  	
  	
  	
  	
  	
  <div	
  id="container">

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  <div	
  id="circulo"></div>

	
  	
  	
  	
  	
  	
  	
  	
  </div>

	
  	
  	
  	
  </body>

</html>
comousaremcss.html
<html>

	
  	
  	
  <head>

	
  	
  	
  	
  	
  	
  <style>	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  #paraiba	
  {

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  -­‐webkit-­‐mask-­‐image:	
  url(svgdemo.svg);

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  -­‐webkit-­‐mask-­‐origin:	
  padding;

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  -­‐webkit-­‐mask-­‐position:	
  180px	
  220px;

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  -­‐webkit-­‐transform:	
  scale(2.8);

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  }

	
  	
  	
  	
  	
  	
  	
  </style>

	
  	
  	
  </head>

	
  	
  	
  <body>

	
  	
  	
  	
  	
  	
  <h1>Mascaras	
  SVG	
  e	
  CSS3</h1>

	
  	
  	
  	
  	
  	
  <img	
  src="imagens/paraiba2005.jpg"	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  id="paraiba">

	
  	
  	
  </body>

</html>	
  
Como usar em CSS 3
Máscara SVG em CSS 3
css3_mascara.html
SVG vs. Canvas
Objetos em XML vs
Operações JavaScript


<h1>HTML5	
  Canvas</h1>

<canvas	
  id="desenho1"	
  height="300"	
  

	
  	
  	
  	
  	
  	
  	
  	
  width="300"></canvas>	
  
<script>

	
  	
  	
  	
  var	
  acanvas	
  =	
  

	
  	
  	
  	
  	
  	
  document.getElementById("desenho1");

	
  	
  	
  	
  var	
  ctx	
  =	
  acanvas.getContext("2d");

	
  	
  	
  	
  ctx.fillStyle	
  =	
  "#ff459a";

	
  	
  	
  	
  ctx.fillRect(50,50,	
  150,150);

</script>	
  


<h1>SVG	
  (usando	
  tags)</h1>

<svg	
  height="300"	
  width="300">

	
  	
  	
  <rect	
  x="50"	
  y="50"	
  width="150"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  height="150"	
  fill="#ff459a"	
  />

</svg> canvas_svg1.html
Estilos em SVG
CSS: atributo style
<rect	
  x="50"	
  y="20"	
  width="120"	
  height="100"	
  	
  	
  	
  

	
  	
  	
  style="stroke-­‐width:4;	
  stroke:blue;	
  fill:red"/>	
  
XML: atributos do SVG
	
  <rect	
  x="50"	
  y="20"	
  width="120"	
  height="100"	
  

	
  	
  	
  	
  	
  stroke-­‐width="4"	
  stroke="blue"	
  fill="red"/>	
  
+ atributos id, style e class como HTML
+ folhas de estilo (bloco <style> ou arquivo .css externo)
CSS externo
SVG embutido: HTML e SVG podem
compartilhar mesmas folhas de estilo CSS
Arquivo SVG ou referenciado em HTML: CSS 

embutido ou vinculado ao próprio SVG
<?xml-­‐stylesheet	
  type="text/css"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  href="estilo.css"?>	
  
<svg	
  xmlns="..."	
  >	
  
	
  	
  	
  	
  <circle	
  class="t1"	
  ...>	
  
</svg>
<svg	
  xmlns="..."	
  >	
  
	
  	
  	
  <style>

	
  	
  	
  	
  	
  	
  .t1	
  {fill:	
  green;}

	
  	
  	
  </style>	
  
	
  	
  	
  <circle	
  class="t1"	
  ...>	
  
</svg>
<html>	
  
	
  	
  <style>.t1	
  {fill:	
  green;}</style>	
  
	
  	
  <svg>	
  
	
  	
  	
  	
  <circle	
  class="t1"	
  ...>	
  
	
  	
  </svg>	
  
</html>
<html>	
  
	
  	
  <link	
  rel="stylesheet"	
  

	
  	
  	
  	
  	
  	
  	
  	
  href="estilo.css"/>	
  
	
  	
  <svg>	
  
	
  	
  	
  	
  	
  	
  <circle	
  class="t1"	
  ...>	
  
	
  	
  </svg>	
  
</html>
.t1	
  {

	
  	
  fill:	
  green;

}
estilo.css
arquivo.svg
arquivo.html
SVG DOM
API de Document Object Model para SVG
<h1>SVG	
  (usando	
  SVG	
  DOM)</h1>

<svg	
  id="desenho2"	
  height="300"	
  width="300"></svg>

<script>

	
  	
  	
  var	
  svgns	
  =	
  "http://www.w3.org/2000/svg";

	
  	
  	
  var	
  ansvg	
  =	
  

	
  	
  	
  	
  	
  document.getElementById("desenho2");

	
  	
  	
  var	
  rect	
  =	
  

	
  	
  	
  	
  	
  document.createElementNS(svgns,	
  "rect");

	
  	
  	
  rect.setAttribute("x",50);

	
  	
  	
  rect.setAttribute("y",50);

	
  	
  	
  rect.setAttribute("height",150);

	
  	
  	
  rect.setAttribute("width",150);

	
  	
  	
  rect.setAttribute("fill","#ff459a");

	
  	
  	
  ansvg.appendChild(rect);

</script>
canvas_svg1.html
E se não funcionar?
Workarounds
Às vezes funciona se escrever o SVG de outro jeito
E se não funcionar?
Workarounds
Às vezes funciona se escrever o SVG de outro jeito
Fallbacks
Em caso de erro, use tecnologia alternativa (HTML/CSS/PNG)
<img	
  src="svgdemo.svg"	
  

	
  	
  	
  	
  	
  onerror="this.src='circle.png'"/>
E se não funcionar?
Workarounds
Às vezes funciona se escrever o SVG de outro jeito
Fallbacks
Em caso de erro, use tecnologia alternativa (HTML/CSS/PNG)
Polyfills
• Modernizr + bibliotecas snap.svg, raphaël e d3.js
• FakeSmile
<img	
  src="svgdemo.svg"	
  

	
  	
  	
  	
  	
  onerror="this.src='circle.png'"/>
breve tutorial
Componentes gráficos
<rect> – Retângulo
<circle> – Círculo
<ellipse> – Elipse
<line> – Linha reta
<polyline> – Linha com múltiplos segmentos
<polygon> – Polígono
<image> - Imagem bitmap
<text> - Texto
<path> - Caminho arbitrário (curvas, linhas, etc.)
Pintura
Dois atributos para pintar componentes
preenchimento (fill)
contorno, ou traço (stroke)
Pintura
Dois atributos para pintar componentes
preenchimento (fill)
contorno, ou traço (stroke)
Três tipos de "tinta"
cores sólidas (sRGB) - mesma spec do CSS. 

Ex: red,	
  lightblue,	
  #a09,	
  #AA0099,	
  rgb(128,64,32)
gradientes
texturas (patterns)
Preenchimento
fill (atributo ou CSS) = cor
<rect	
  ...	
  fill="rgb(255,255,0%)"	
  />	
  
<rect	
  ...	
  style="fill:	
  rgb(100%,100%,0%)"	
  />	
  
fill-opacity = componente alfa (transparência)
De 0 (transparente) a 1 (opaco).
<svg	
  xmlns="http://www.w3.org/2000/svg">

	
  	
  	
  	
  <circle	
  r="50"	
  cx="100"	
  cy="100"	
  fill="green"/>	
  

	
  	
  	
  	
  <circle	
  r="50"	
  cx="125"	
  cy="125"	
  fill="#008000"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  fill-­‐opacity="0.5"/>	
  

	
  	
  	
  	
  <circle	
  r="50"	
  cx="150"	
  cy="150"	
  fill="#080"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  fill-­‐opacity="0.2"/>	
  

</svg>
fill.svg
Traço
stroke: cor
stroke-width: espessura
stroke-opacity: transparência (alfa)
stroke-dasharray
Valores para tracejado (seqüência de traços e vazios)
<?xml	
  version="1.0"	
  encoding="UTF-­‐8"?>

<svg	
  xmlns="http://www.w3.org/2000/svg"	
  viewBox="0	
  0	
  300	
  300">

	
  	
  	
  	
  <circle	
  r="50"	
  cx="100"	
  cy="100"	
  fill-­‐opacity="0"	
  

	
  	
  	
  	
   	
   stroke="green"	
  stroke-­‐width="1"	
  	
  stroke-­‐dasharray="5	
  5"/>	
  

	
  	
  	
  	
  <circle	
  r="50"	
  cx="125"	
  cy="125"	
  fill-­‐opacity="0"	
  

	
   	
   	
  	
  	
  stroke="green"	
  stroke-­‐width="5"	
  	
  stroke-­‐opacity="0.5"/>	
  

	
  	
  	
  	
  <circle	
  r="50"	
  cx="150"	
  cy="150"	
  fill-­‐opacity="0"	
  

	
   	
   	
  	
  	
  stroke="green"	
  stroke-­‐width="20"	
  stroke-­‐opacity="0.2"/>	
  

</svg>
traco.svg
Retângulo <rect>
x, y – coords de posição (default: 0)
width, height – largura, altura (obrigatório)
rx, ry – raios horizontal e vertical para 

cantos arredondados (opcional)
<rect	
  x="25"	
  y="50"	
  width="90"	
  height="90"	
  	
  
	
   	
   stroke="green"	
  fill-­‐opacity="0"	
  stroke-­‐width="1"	
  	
  
	
   	
   stroke-­‐dasharray="5	
  5"/>	
  	
  
<rect	
  x="50"	
  y="150"	
  width="125"	
  height="125"	
  rx="40"	
  ry="40"	
  
	
   	
   stroke="red"	
  fill-­‐opacity="0"	
  stroke-­‐width="5"	
  	
  
	
   	
   stroke-­‐opacity="0.5"	
  />	
  

<rect	
  x="150"	
  y="50"	
  width="150"	
  height="150"	
  	
  
	
   	
   stroke="green"	
  fill="blue"	
  fill-­‐opacity="0.2"	
  	
  
	
   	
   stroke-­‐width="20"	
  stroke-­‐opacity="0.2"	
  />
rect.svg
Círculo <circle>
cx, cy – coords. do centro (default: 0)
r – raio (obrigatório)
<?xml-­‐stylesheet	
  type="text/css"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  href="circulos.css"?>	
  
<svg	
  xmlns="http://www.w3.org/2000/svg"	
  
	
  	
  	
  	
  	
  viewBox="0	
  0	
  300	
  300">	
  
	
  	
  	
  <circle	
  r="75"	
  cx="100"	
  cy="100"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  id="c2"/>	
  
	
  	
  	
  <circle	
  r="50"	
  cx="150"	
  cy="150"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  id="c1"/>	
  
</svg>
circle	
  {

	
  	
  stroke-­‐width:	
  10;	
  

	
  	
  stroke-­‐opacity:	
  0.5;

}

#c1	
  {

	
  	
  fill:	
  green;

	
  	
  stroke:	
  blue;

	
  	
  fill-­‐opacity:	
  0.6;

}

#c2	
  {

	
  	
  fill:	
  #f00;

	
  	
  stroke:	
  yellow;

}
circulos.css
circulocss.svg
Linha simples <line>
x1, y1 – coords do primeiro ponto
x2, y2 – coords do segundo ponto
<line	
  x1="25"	
  y1="50"	
  x2="190"	
  y2="190"	
  

	
   stroke="blue"	
  stroke-­‐width="1"	
  stroke-­‐dasharray="5	
  5"/>	
  	
  


<line	
  x1="50"	
  y1="150"	
  x2="125"	
  y2="125"	
  

	
   stroke="red"	
  stroke-­‐width="5"	
  stroke-­‐opacity="0.5"/>	
  
	
  

<line	
  x1="150"	
  y1="50"	
  x2="150"	
  y2="150"	
  

	
   stroke="green"	
  stroke-­‐width="20"	
  stroke-­‐opacity="0.2"	
  />	
  
line.svg
Elipse <ellipse>
cx, cy – coordenadas do centro
rx, ry – raios horizontal e vertical
<svg	
  xmlns="http://www.w3.org/2000/svg">

	
  	
  	
  	
  <ellipse	
  cx="200"	
  cy="100"	
  rx="190"	
  ry="90"	
  

	
   	
   fill="yellow"	
  fill-­‐opacity="0.5"	
  stroke="#00f"	
  

	
   	
   stroke-­‐width="1"	
  stroke-­‐dasharray="5	
  5"/>	
  

	
  	
  	
  	
  <ellipse	
  cx="250"	
  cy="150"	
  rx="75"	
  ry="125"	
  

	
   	
   fill="red"	
  fill-­‐opacity="0.2"	
  	
  stroke="#f00"	
  

	
   	
   stroke-­‐width="5"	
  stroke-­‐opacity="0.5"/>	
  

	
  	
  	
  	
  <ellipse	
  cx="300"	
  cy="200"	
  rx="40"	
  ry="150"	
  

	
   	
   fill="black"	
  fill-­‐opacity="0"	
  stroke="#0f0"	
  

	
   	
   stroke-­‐width="20"	
  stroke-­‐opacity="0.2"	
  />	
  

</svg>
ellipse.svg
Polígono aberto <polyline>
points – lista de coords x,y 

com pontos da linha
<polyline	
  points="150,150	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  50,150	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  100,20	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  150,50	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  200,200	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  50,200	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  20,154	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  48,82	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  32,20"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  fill="yellow"	
  fill-­‐opacity="0.2"	
  	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  stroke="red"	
  stroke-­‐width="10"/>	
  
polyline.svg
(0,0)
150
150
Polígono fechado <polygon>
Similar a <polyline>, mas sempre fechada
points – lista de coords x,y com vértices
<polygon	
  points="150,150	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  50,250	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  50,150	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  100,50	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  200,50	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  250,100	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  300,150	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  350,250	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  250,250"	
  

	
   	
   fill="red"	
  fill-­‐opacity="0.2"	
  	
  

	
   	
   stroke-­‐opacity="0.5"	
  stroke="navy"	
  

	
   	
   stroke-­‐width="10"	
  stroke-­‐linecap="round"	
  

	
   	
   stroke-­‐linejoin="round"	
  stroke-­‐dasharray="40	
  20	
  5	
  20"/>	
  
polygon.svg
Texto <text>
• Não quebra linha! Use <tspan>:
<text>

	
  	
  	
  <tspan>linha	
  1</tspan>

	
  	
  	
  <tspan	
  x="0"	
  dy="16">linha	
  2</tspan>

</text>
<svg	
  ...	
  viewBox="-­‐10	
  -­‐50	
  200	
  200">

	
  	
  <rect	
  x="0"	
  y="0"	
  height="36"	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  width="180"	
  ...	
  />

	
  	
  <text	
  font-­‐size="36"	
  
	
  	
  	
  	
  	
  	
  	
  	
  x="0"	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  y="0">Agora</text>

</svg>
Posição (0,0): baseline
só esta parte é visível se
viewBox começar em 0,0
Retângulo e texto com
mesmas coordenadas x,y
linha 1
linha 2
Imagens <image>
Insere PNG ou JPEG em SVG
Ou clipping, mask, fill, patterns
Namespace xlink opcional se embutido em HTML
<svg	
  width="4in"	
  height="4in"	
  version="1.1"

	
  	
  xmlns="http://www.w3.org/2000/svg"	
  

	
  	
  xmlns:xlink="http://www.w3.org/1999/xlink">



	
  	
  <image	
  x="200"	
  y="200"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  width="100px"	
  height="100px"

	
  	
  	
  	
  	
  	
  	
  	
  	
  xlink:href="pluto.png">

	
  	
  	
  	
  <title>Imagem	
  de	
  Plutão</title>

	
  	
  </image>

</svg> Imagem de Plutão
Referências e IDs
Objetos referenciáveis têm atributo id
Podem ser referenciados 'por 

objetos locais ou remotos <circle	
  

	
  	
  	
  	
  id="obj1"	
  .../>	
  
<gradient	
  

	
  	
  	
  	
  id="grad"	
  .../>
Referências e IDs
Objetos referenciáveis têm atributo id
Podem ser referenciados 'por 

objetos locais ou remotos
Referência pode ser direta 

via atributos XLink xlink:href
	
  	
  	
  <use	
  xlink:href="#obj1"	
  />	
  
	
  	
  	
  <use	
  xlink:href="http://w.com/outro.svg#obj1"	
  />
<circle	
  

	
  	
  	
  	
  id="obj1"	
  .../>	
  
<gradient	
  

	
  	
  	
  	
  id="grad"	
  .../>
Referências e IDs
Objetos referenciáveis têm atributo id
Podem ser referenciados 'por 

objetos locais ou remotos
Referência pode ser direta 

via atributos XLink xlink:href
	
  	
  	
  <use	
  xlink:href="#obj1"	
  />	
  
	
  	
  	
  <use	
  xlink:href="http://w.com/outro.svg#obj1"	
  />	
  
Ou indireta, através da função url(), 

em atributos SVG
	
  	
  	
  <rect	
  fill="url(#grad)"	
  />	
  
	
  	
  	
  <rect	
  fill="url(http://w.com/outro.svg#grad)"	
  />
<circle	
  

	
  	
  	
  	
  id="obj1"	
  .../>	
  
<gradient	
  

	
  	
  	
  	
  id="grad"	
  .../>
<defs> e <use>
Elementos em bloco <defs> não são desenhados
Para desenhar, referencie com <use>
<svg	
  ...>

	
  	
  <defs>

	
  	
  	
  	
  <rect	
  id="preto"	
  x="0"	
  y="0"	
  width="20"	
  height="20"

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  fill="rgb(64,32,32)"	
  />

	
  	
  	
  	
  <rect	
  id="branco"	
  x="0"	
  y="0"	
  width="20"	
  height="20"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  fill="rgb(255,225,200)"	
  />

	
  	
  </defs>



	
  	
  <use	
  xlink:href="#preto"	
  />

	
  	
  <use	
  xlink:href="#branco"	
  transform="translate(20)"/>

	
  	
  <use	
  xlink:href="#branco"	
  transform="translate(0,20)"/>

	
  	
  <use	
  xlink:href="#preto"	
  	
  transform="translate(20,20)"/>

</svg>
Grupos <g>
Trata conjunto de objetos como um
Elementos herdam estilos e atributos
Pode conter outros grupos
<svg	
  ...>

	
  	
  <defs>	
  
	
  	
  	
  	
  ...

	
  	
  	
  	
  <g	
  id="quatroCasas"	
  transform="translate(10,10)">

	
  	
  	
  	
  	
  	
  <use	
  xlink:href="#preto"	
  />

	
  	
  	
  	
  	
  	
  <use	
  xlink:href="#branco"	
  transform="translate(20)"/>

	
  	
  	
  	
  	
  	
  <use	
  xlink:href="#branco"	
  transform="translate(0,20)"/>

	
  	
  	
  	
  	
  	
  <use	
  xlink:href="#preto"	
  	
  transform="translate(20,20)"/>

	
  	
  	
  	
  </g>

	
  	
  </defs>	
  
	
  	
  <use	
  xlink:href="#quatroCasas"	
  />

</svg>
Por que usar <defs> e <use>?
Tabuleiro de xadrez SVG

sem <defs> e <use>
<svg	
  xmlns="http://www.w3.org/2000/svg"	
  width="1050"	
  height="600"	
  viewBox="0	
  0	
  1050	
  600">

	
  	
  	
  	
  <rect	
  x="0"	
  y="0"	
  width="20"	
  height="20"	
  fill="rgb(64,32,32)"	
  transform="translate(20)"	
  />

	
  	
  	
  	
  <rect	
  x="0"	
  y="0"	
  width="20"	
  height="20"	
  fill="rgb(255,225,200)"	
  	
  transform="translate(40)"	
  />

	
  	
  	
  	
  <rect	
  x="0"	
  y="0"	
  width="20"	
  height="20"	
  fill="rgb(64,32,32)"	
  transform="translate(60)"	
  />

	
  	
  	
  	
  <rect	
  x="0"	
  y="0"	
  width="20"	
  height="20"	
  fill="rgb(255,225,200)"	
  	
  transform="translate(80)"	
  />

	
  	
  	
  	
  <rect	
  x="0"	
  y="0"	
  width="20"	
  height="20"	
  fill="rgb(64,32,32)"	
  transform="translate(100)"	
  />

	
  	
  	
  	
  <rect	
  x="0"	
  y="0"	
  width="20"	
  height="20"	
  fill="rgb(255,225,200)"	
  	
  transform="translate(120)"	
  />

	
  	
  	
  	
  <rect	
  x="0"	
  y="0"	
  width="20"	
  height="20"	
  fill="rgb(64,32,32)"	
  transform="translate(140)"	
  />

	
  	
  	
  	
  <rect	
  x="0"	
  y="0"	
  width="20"	
  height="20"	
  fill="rgb(255,225,200)"	
  	
  transform="translate(160)"	
  />

	
  	
  	
  	
  <rect	
  x="0"	
  y="0"	
  width="20"	
  height="20"	
  fill="rgb(255,225,200)"	
  transform="translate(20,20)"	
  />

	
  	
  	
  	
  <rect	
  x="0"	
  y="0"	
  width="20"	
  height="20"	
  fill="rgb(64,32,32)"	
  transform="translate(40,20)"	
  />

	
  	
  	
  	
  <rect	
  x="0"	
  y="0"	
  width="20"	
  height="20"	
  fill="rgb(255,225,200)"	
  transform="translate(60,20)"	
  />

	
  	
  	
  	
  <rect	
  x="0"	
  y="0"	
  width="20"	
  height="20"	
  fill="rgb(64,32,32)"	
  transform="translate(80,20)"	
  />

	
  	
  	
  	
  <rect	
  x="0"	
  y="0"	
  width="20"	
  height="20"	
  fill="rgb(255,225,200)"	
  transform="translate(100,20)"	
  />

	
  	
  	
  	
  <rect	
  x="0"	
  y="0"	
  width="20"	
  height="20"	
  fill="rgb(64,32,32)"	
  transform="translate(120,20)"	
  />

	
  	
  	
  	
  <rect	
  x="0"	
  y="0"	
  width="20"	
  height="20"	
  fill="rgb(255,225,200)"	
  transform="translate(140,	
  20)"	
  />

	
  	
  	
  	
  	
  ...

	
  	
  	
  	
  <rect	
  x="0"	
  y="0"	
  width="20"	
  height="20"	
  fill="rgb(255,225,200)"	
  transform="translate(140,140)"	
  />

	
  	
  	
  	
  <rect	
  x="0"	
  y="0"	
  width="20"	
  height="20"	
  fill="rgb(64,32,32)"	
  transform="translate(160,140)"	
  />

</svg>
64	
  quadrados:	
  32	
  +	
  32
66	
  linhas	
  
~3500	
  chars
Tabuleiro com <defs> e <use>
<defs>

	
  	
  <rect	
  id="preto"	
  	
  ...	
  fill="rgb(64,32,32)"	
  />

	
  	
  <rect	
  id="branco"	
  ...	
  fill="rgb(255,225,200)"	
  />

</defs>
<defs>

	
  	
  <rect	
  id="preto"	
  	
  ...	
  fill="rgb(64,32,32)"	
  />

	
  	
  <rect	
  id="branco"	
  ...	
  fill="rgb(255,225,200)"	
  />

	
  	
  	
  	
  	
  	
  	
  	
  

	
  	
  <g	
  id="quatroCasas">

	
  	
  	
  	
  <use	
  xlink:href="#preto"	
  />

	
  	
  	
  	
  <use	
  xlink:href="#branco"	
  transform="translate(20)"/>

	
  	
  	
  	
  <use	
  xlink:href="#branco"	
  transform="translate(0,20)"/>

	
  	
  	
  	
  <use	
  xlink:href="#preto"	
  	
  transform="translate(20,20)"/>

	
  	
  </g>	
  
</defs>
Tabuleiro com <defs> e <use>
<defs>

	
  	
  <rect	
  id="preto"	
  	
  ...	
  fill="rgb(64,32,32)"	
  />

	
  	
  <rect	
  id="branco"	
  ...	
  fill="rgb(255,225,200)"	
  />

	
  	
  	
  	
  	
  	
  	
  	
  

	
  	
  <g	
  id="quatroCasas">

	
  	
  	
  	
  <use	
  xlink:href="#preto"	
  />

	
  	
  	
  	
  <use	
  xlink:href="#branco"	
  transform="translate(20)"/>

	
  	
  	
  	
  <use	
  xlink:href="#branco"	
  transform="translate(0,20)"/>

	
  	
  	
  	
  <use	
  xlink:href="#preto"	
  	
  transform="translate(20,20)"/>

	
  	
  </g>

	
  	
  	
  	
  	
  	
  	
  	
  

	
  	
  <g	
  id="filaDupla">

	
  	
  	
  	
  <use	
  xlink:href="#quatroCasas"	
  />

	
  	
  	
  	
  <use	
  xlink:href="#quatroCasas"	
  transform="translate(40)"	
  />

	
  	
  	
  	
  <use	
  xlink:href="#quatroCasas"	
  transform="translate(80)"	
  />

	
  	
  	
  	
  <use	
  xlink:href="#quatroCasas"	
  transform="translate(120)"	
  />

	
  	
  </g>



</defs>
Tabuleiro com <defs> e <use>
<defs>

	
  	
  <rect	
  id="preto"	
  	
  ...	
  fill="rgb(64,32,32)"	
  />

	
  	
  <rect	
  id="branco"	
  ...	
  fill="rgb(255,225,200)"	
  />

	
  	
  	
  	
  	
  	
  	
  	
  

	
  	
  <g	
  id="quatroCasas">

	
  	
  	
  	
  <use	
  xlink:href="#preto"	
  />

	
  	
  	
  	
  <use	
  xlink:href="#branco"	
  transform="translate(20)"/>

	
  	
  	
  	
  <use	
  xlink:href="#branco"	
  transform="translate(0,20)"/>

	
  	
  	
  	
  <use	
  xlink:href="#preto"	
  	
  transform="translate(20,20)"/>

	
  	
  </g>

	
  	
  	
  	
  	
  	
  	
  	
  

	
  	
  <g	
  id="filaDupla">

	
  	
  	
  	
  <use	
  xlink:href="#quatroCasas"	
  />

	
  	
  	
  	
  <use	
  xlink:href="#quatroCasas"	
  transform="translate(40)"	
  />

	
  	
  	
  	
  <use	
  xlink:href="#quatroCasas"	
  transform="translate(80)"	
  />

	
  	
  	
  	
  <use	
  xlink:href="#quatroCasas"	
  transform="translate(120)"	
  />

	
  	
  </g>

	
  	
  	
  	
  	
  	
  	
  	
  

	
  	
  <g	
  id="tabuleiro">

	
  	
  	
  	
  <use	
  xlink:href="#filaDupla"	
  />

	
  	
  	
  	
  <use	
  xlink:href="#filaDupla"	
  transform="translate(0,40)"	
  />

	
  	
  	
  	
  <use	
  xlink:href="#filaDupla"	
  transform="translate(0,80)"	
  />

	
  	
  	
  	
  <use	
  xlink:href="#filaDupla"	
  transform="translate(0,120)"	
  />

	
  	
  </g>

</defs>
Tabuleiro com <defs> e <use>
+ reuso!<defs>

	
  	
  <rect	
  id="preto"	
  	
  ...	
  fill="rgb(64,32,32)"	
  />

	
  	
  <rect	
  id="branco"	
  ...	
  fill="rgb(255,225,200)"	
  />

	
  	
  	
  	
  	
  	
  	
  	
  

	
  	
  <g	
  id="quatroCasas">

	
  	
  	
  	
  <use	
  xlink:href="#preto"	
  />

	
  	
  	
  	
  <use	
  xlink:href="#branco"	
  transform="translate(20)"/>

	
  	
  	
  	
  <use	
  xlink:href="#branco"	
  transform="translate(0,20)"/>

	
  	
  	
  	
  <use	
  xlink:href="#preto"	
  	
  transform="translate(20,20)"/>

	
  	
  </g>

	
  	
  	
  	
  	
  	
  	
  	
  

	
  	
  <g	
  id="filaDupla">

	
  	
  	
  	
  <use	
  xlink:href="#quatroCasas"	
  />

	
  	
  	
  	
  <use	
  xlink:href="#quatroCasas"	
  transform="translate(40)"	
  />

	
  	
  	
  	
  <use	
  xlink:href="#quatroCasas"	
  transform="translate(80)"	
  />

	
  	
  	
  	
  <use	
  xlink:href="#quatroCasas"	
  transform="translate(120)"	
  />

	
  	
  </g>

	
  	
  	
  	
  	
  	
  	
  	
  

	
  	
  <g	
  id="tabuleiro">

	
  	
  	
  	
  <use	
  xlink:href="#filaDupla"	
  />

	
  	
  	
  	
  <use	
  xlink:href="#filaDupla"	
  transform="translate(0,40)"	
  />

	
  	
  	
  	
  <use	
  xlink:href="#filaDupla"	
  transform="translate(0,80)"	
  />

	
  	
  	
  	
  <use	
  xlink:href="#filaDupla"	
  transform="translate(0,120)"	
  />

	
  	
  </g>

</defs>	
  


<use	
  xlink:href="#tabuleiro"	
  />
28	
  linhas	
  
~1400	
  chars
Caminhos (paths)
• Seqüências de comandos (letras) + coordenadas
• Ex: M 50,50 L 120,120 z
• Comando afeta coordenadas seguintes (até novo comando)
• Maiúsculas = coords absolutas / Minúsculas = relativas
Caminhos (paths)
• Seqüências de comandos (letras) + coordenadas
• Ex: M 50,50 L 120,120 z
• Comando afeta coordenadas seguintes (até novo comando)
• Maiúsculas = coords absolutas / Minúsculas = relativas
• Quatro tipos de movimentos
• M: move até um ponto sem desenhar
• L, H, V: desenha linha reta até um ponto (L,	
  l,	
  H,	
  h,	
  V,	
  v)
• C, S, Q, T, A (curve to): desenha curva a um ponto; pode ser
• Bézier cúbica com dois pontos tangenciais (C,	
  c,	
  S,	
  s)
• Bézier quadrática com um ponto tangencial (Q,	
  q,	
  T,	
  t)
• Arco elíptico ou circular (A,	
  a)
• Z: fecha a figura (Z ou z)
Linhas retas
H ou h + coordenadas x linhas retas horizontais
V ou v + coordenadas y linhas retas verticais
L ou l + pares de coords x,y linhas retas em qq direção
1. M100,100	
  L150,200	
  z	
  
(0,0)
(100,100)
(150,200)
1. Move para (100,100)
2. Desenha linha até (150,200)
3. Fecha figura (não faz nada)
Linhas retas
H ou h + coordenadas x linhas retas horizontais
V ou v + coordenadas y linhas retas verticais
L ou l + pares de coords x,y linhas retas em qq direção
1. M100,100	
  L150,200	
  z	
  
2. M100,100	
  L150,200	
  h50	
  z	
  
(
(
(0,0)
(200,200)
z
1. Parte de (150,200)
2. Avança 50 unidades na horizontal
3. Fecha figura (desenha linha)
Linhas retas
H ou h + coordenadas x linhas retas horizontais
V ou v + coordenadas y linhas retas verticais
L ou l + pares de coords x,y linhas retas em qq direção
1. M100,100	
  L150,200	
  z	
  
2. M100,100	
  L150,200	
  h50	
  z	
  
3. M100,100	
  L150,200	
  h50	
  v-­‐100	
  z	
  
(
( (
(200,100)z
z
(0,0)
1. Parte de (200,200)
2. Sobe 100 unidades na vertical
3. Fecha figura (desenha linha)
Linhas retas
H ou h + coordenadas x linhas retas horizontais
V ou v + coordenadas y linhas retas verticais
L ou l + pares de coords x,y linhas retas em qq direção
1. M100,100	
  L150,200	
  z	
  
2. M100,100	
  L150,200	
  h50	
  z	
  
3. M100,100	
  L150,200	
  h50	
  v-­‐100	
  z	
  
4. M100,100	
  L150,200	
  h50	
  v-­‐100	
  l-­‐50,50	
  z	
  
(0,0)
(150,150)
z
(100,100)
(
(200,z
z
1. Parte de (200,100)
2. Volta 50 un. e desce 50 un.
3. Fecha figura (desenha linha)
Linhas retas
H ou h + coordenadas x linhas retas horizontais
V ou v + coordenadas y linhas retas verticais
L ou l + pares de coords x,y linhas retas em qq direção
1. M100,100	
  L150,200	
  z	
  
2. M100,100	
  L150,200	
  h50	
  z	
  
3. M100,100	
  L150,200	
  h50	
  v-­‐100	
  z	
  
4. M100,100	
  L150,200	
  h50	
  v-­‐100	
  l-­‐50,50	
  z	
  
5. M100,100	
  L150,200	
  h50	
  v-­‐100	
  l-­‐50,50	
  L150,50	
  100,50	
  z
(100,100)
(150,200) (200,200)
(200,100) (
(150,50)
(100,50)
z
z
z
z
(0,0)
1. Parte de (150,150)
2. Desenha linha para (150,50)
3. Desenha linha para (100,50)
4. Fecha figura (desenha linha)
Curvas Bézier cúbicas
Curva normal: C ou c com coordenadas x1,y1	
  x2,y2 x,y onde
x,y = coordenadas do ponto final
x1,y1	
  = coordenadas do controle tangencial do ponto inicial
x2,y2	
  = coordenadas do controle tangencial do ponto final
Curva suave: S ou s com coordenadas x2,y2 x,y
Controle tangencial do ponto inicial é implícito (simétrico a controle
final da curva anterior) = junção suave
<path	
  

	
  d="M100,200	
  	
  
	
  	
  	
  	
  C100,100	
  250,100	
  250,200	
  	
  
	
  	
  	
  	
  S400,300	
  400,200"	
  ...	
  />
M100,200
C100,100 250,100
250,200
400,200
S400,300
Ponto	
  de	
  controle	
  simétrico	
  x1,y1	
  
calculado	
  automaticamente
Curvas Bézier quadráticas
Curva normal: Q ou q com coordenadas	
  x1,y1	
   x,y	
  onde
x,y = coordenadas do ponto final
x1,y1 = coordenadas do (único) controle tangencial
Curva suave: T ou t com coordenadas x,y
Controle tangencial é implícito (simétrico a controle
tangencial da curva anterior) = junção suave
<path	
  

	
  d="M	
  200,300	
  	
  
	
  	
  	
  	
  Q	
  400,50	
  600,300	
  	
  
	
  	
  	
  	
  T	
  1000,300"	
  	
  
...	
  /> (200,300)
(400,50)
(600,300)
(1000,300)
Ponto	
  de	
  controle	
  simétrico	
  
calculado	
  automaticamente
Arcos
Arco em SVG = curva na borda de um elipse
Comando A ou a; sintaxe: A	
  rx,ry	
  θ	
  laf,sf	
  x,y onde
rx e ry = raio horizontal e vertical do elipse
θ = ângulo de rotação do eixo x onde está o elipse
laf = flag do arco maior, sf = sweep flag (veja exemplo)
x,y = coordenadas do ponto final
ry
rx
θ	
   x
y
Flags de arcos
M-­‐100,-­‐100	
  	
  L0,-­‐100	
  

A100,100	
  0	
  0,1	
  -­‐100,0	
  

L-­‐100,-­‐100	
  z	
  
M0,0	
  	
  L0,-­‐100	
  

A100,100	
  0	
  0,0	
  -­‐100,0	
  

L0,0	
  z	
  
M-­‐100,-­‐100	
  	
  L0,-­‐100	
  

A100,100	
  0	
  1,0	
  -­‐100,0	
  

L-­‐100,-­‐100	
  z	
  
M0,0	
  	
  L0,-­‐100	
  

A100,100	
  0	
  1,1	
  -­‐100,0	
  

L0,0	
  z
Exemplos de arcos simples
<path	
  d="M300,200	
  h-­‐150	
  a150,150	
  0	
  1,0	
  150,-­‐150	
  z"

	
  	
  	
  	
  	
  	
  fill="red"	
  stroke="blue"	
  stroke-­‐width="5"	
  />	
  


<path	
  d="M275,175	
  v-­‐150	
  a150,150	
  0	
  0,0	
  -­‐150,150	
  z"

	
  	
  	
  	
  	
  	
  fill="yellow"	
  stroke="blue"	
  

	
  	
  	
  	
  	
  	
  stroke-­‐width="5"	
  />
<path	
  d="M600,350	
  l	
  50,-­‐50	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  a25,25	
  -­‐30	
  0,1	
  50,-­‐25	
  l	
  50,-­‐25	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  a25,50	
  -­‐30	
  0,1	
  50,-­‐25	
  l	
  50,0	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  a25,75	
  	
  	
  0	
  0,1	
  50,0	
  	
  	
  l	
  50,25	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  a25,100	
  30	
  0,1	
  50,25	
  	
  l	
  50,50"	
  


	
  	
  	
  	
  	
  	
  	
  fill="none"	
  stroke="red"	
  	
  
	
  	
  	
  	
  	
  	
  	
  stroke-­‐width="5"	
  	
  />
Fonte:	
  W3C	
  (SVG	
  spec)
<defs>

	
  	
  	
  <path	
  d="M100,200	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  C100,100	
  250,100	
  250,200

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  S100,300	
  100,200"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  id="circulo"	
  stroke="red"	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  stroke-­‐width="1"	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  fill-­‐opacity="0">

	
  	
  	
  </path>

</defs>	
  
...	
  


<use	
  xlink:href="#circulo"	
  stroke-­‐dasharray="5	
  5"	
  />

<text	
  font-­‐size="15"	
  x="100"	
  dy="-­‐10"	
  id="texto"	
  	
  
	
  	
  	
  	
  	
  	
  font-­‐family="monospace">

	
  	
  	
  <textPath	
  xlink:href="#circulo">	
  
	
   palavras	
  que	
  giram	
  confundem	
  as	
  letras	
  
	
  	
  	
  </textPath>

</text>
<textPath>
View Port
• Área onde o SVG é desenhado
• Dois sistemas de coordenadas (inicialmente idênticos)
• Dimensões, proporções, unidade, etc. herdadas pelos
objetos contidos no SVG
View Port
• Área onde o SVG é desenhado
• Dois sistemas de coordenadas (inicialmente idênticos)
• Dimensões, proporções, unidade, etc. herdadas pelos
objetos contidos no SVG
• Cada componente SVG pode ter seu próprio
sistema de coordenadas, ou herdá-lo
• Atributo viewBox="min-x min-y largura altura" + outros
atributos com unidades, dimensões, aspect ratio, etc.
• Atributo transform="funções de transformação 2D"
Atributo transform
Altera sistema de coordenadas relativo
matrix(a11,a12,a13,a21,a22,a23)

	
  	
  	
  matriz de transformações

translate(tx)	
  ou	
  translate(tx,	
  ty)

deslocamento da origem

scale(sx)	
  ou	
  scale(sx,	
  sy)

	
  	
  	
  redimensionamento	
  
rotate(θ)	
  ou	
  rotate(θ,	
  cx,	
  cy)

	
  	
  	
  giro de θ graus sobre origem ou cx,cy	
  
skewX(θ)	
  e	
  skewY(θ)

	
  	
  	
  cisalhamento de θ graus
[ ]
a11	
  a12	
  a13

a21	
  a22	
  a23

0	
  	
  	
  0	
  	
  	
  1
translate()
<defs>

	
  	
  	
  <g	
  id="coords">

	
  	
  	
  	
  	
  <line	
  x1="10"	
  y1="10"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  x2="200"	
  y2="10"/>

	
  	
  	
  	
  	
  <line	
  x1="10"	
  y1="10"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  x2="10"	
  y2="200"/>

	
  	
  	
  	
  	
  <text	
  x="200"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  y="20">x</text>

	
  	
  	
  	
  	
  <text	
  x="20"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  y="200">y</text>

	
  	
  	
  </g>	
  
</defs>

	
  	
  	
  	
  

<use	
  xlink:href="#coords"	
  	
  
	
  	
  	
  	
  	
  stroke="black"	
  />

	
  	
  	
  	
  

<use	
  xlink:href="#coords"	
  	
  
	
  	
  	
  	
  	
  stroke="red"

	
  	
  	
  	
  transform="translate(100,100)"	
  />
translate.svg
scale()

e rotate()
rotate_scale.svg
...	
  


<use	
  xlink:href="#coords"	
  	
  
	
  	
  	
  	
  	
  stroke="black"	
  	
  
/>

	
  	
  	
  	
  

<use	
  xlink:href="#coords"	
  	
  
	
  	
  	
  	
  	
  stroke="red"

	
  	
  	
  	
  	
  transform="translate(200,100)	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  rotate(30)	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  scale(1.5)"	
  />	
  
skew()
Distorção	
  de	
  	
  
cisalhamento

(graus)
...

	
  	
  	
  	
  

<use	
  xlink:href="#coords"	
  	
  
	
  	
  	
  	
  	
  stroke="black"	
  />

	
  	
  	
  	
  

<use	
  xlink:href="#coords"	
  	
  
	
  	
  	
  	
  	
  stroke="red"

	
  	
  	
  	
  	
  transform="translate	
  (100,100)	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  skewX(50)"	
  />

skew.svg
Em cascata
<g	
  transform="translate(-­‐10,-­‐20)">

	
  	
  <g	
  transform="scale(2)">

	
  	
  	
  	
  <g	
  transform="rotate(45)">

	
  	
  	
  	
  	
  	
  <g	
  transform="translate(5,10)">

	
  	
  	
  	
  	
  	
  	
  	
  <!-­‐-­‐	
  elementos	
  -­‐-­‐>

	
  	
  	
  	
  	
  	
  </g>

	
  	
  	
  	
  </g>

	
  	
  </g>

</g>
<g	
  transform="translate(-­‐10,-­‐20)	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  scale(2)	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  rotate(45)	
  	
  	
  	
  	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  translate(5,10)">

	
  	
  	
  	
  <!-­‐-­‐	
  elementos	
  -­‐-­‐>

</g>
Fonte:	
  W3C	
  (especificação	
  SVG)
Transformações equivalentes
Gradientes
<linearGradient> 

Atributos x1/x2 e y1/y2
<radialGradient> 

Atributos cx, cy e r
Valores relativos ao gráfico (0 - 100%)
Pontos de parada marcados com <stop>
offset	
  
x2	
  
90%
y1	
  	
  	
  
10%
vetor	
  perpendicular
<linearGradient	
  x1="0"	
  y1="0.1"	
  x2="0.9"	
  y2="0"	
  id="arcoiris">

	
  	
  	
  <stop	
  offset="0"	
  	
  	
  stop-­‐color="rgb(255,0,0)"	
  />

	
  	
  	
  <stop	
  offset="0.3"	
  stop-­‐color="rgb(180,180,0)"	
  />

	
  	
  	
  <stop	
  offset="0.6"	
  stop-­‐color="rgb(0,180,0)"	
  />

	
  	
  	
  <stop	
  offset="0.8"	
  stop-­‐color="blue"	
  />

	
  	
  	
  <stop	
  offset="1"	
  	
  	
  stop-­‐color="rgb(128,0,220)"	
  />

</linearGradient>
Máscaras <mask>
Multiplicação com luminância de fonte (imagem ou gráfico)
Referenciada em <image> com atributo mask
<defs>

	
  	
  <mask	
  id="fishMask"	
  x="0"	
  y="0"	
  width="300"	
  height="150">

	
  	
  	
  	
  <image	
  xlink:href="TheFishMask.png"	
  ...	
  />

	
  	
  </mask>

</defs>

<rect	
  x="0"	
  y="0"	
  width="600"	
  height="300"	
  fill="aquamarine"	
  />

<g	
  transform="translate(100,50)">

	
  	
  <image	
  xlink:href="TheFish.png"	
  mask="url(#fishMask)"	
  />

</g>
TheFishMask.png	
  
(fonte)
TheFish.png
Resultadox =
Clipping <clipPath>
<defs>

	
  	
  	
  	
  <clipPath	
  id="poly">

	
  	
  	
  	
  	
  	
  <circle	
  r="152"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  cx="254"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  cy="245"/>

	
  	
  	
  	
  </clipPath>

</defs>

<image	
  xlink:href="pluto.png"	
  	
  
	
  	
  	
  	
  	
  	
  	
  x="0"	
  y="0"	
  	
  	
  

	
  	
  	
  	
  	
  	
  	
  height="500"	
  	
  	
  	
  

	
  	
  	
  	
  	
  	
  	
  width="500"	
  

	
  	
  	
  	
  	
  	
  	
  clip-­‐path="url(#poly)"/>
Faz o mesmo que <mask>
de 1-bit (P & B)
++
ClippedImage.svgClippedMoon.svg
Filtros <filter>
<defs>	
  
	
  	
  <filter	
  id="f2"	
  x="-­‐100"	
  y="-­‐100"	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  height="200"	
  width="200">

	
  	
  	
  	
  <feGaussianBlur	
  stdDeviation="50,0"	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  in="SourceGraphic"/>

	
  	
  </filter>	
  


	
  	
  <filter	
  id="f1">

	
  	
  	
  	
  <feGaussianBlur	
  stdDeviation="5"	
  />

	
  	
  </filter>

</defs>	
  


<text	
  font-­‐size="48"	
  ...	
  filter="url(#f1)">Voce	
  precisa	
  de	
  oculos?</text>	
  


<polygon	
  points="..."	
  fill="red"	
  fill-­‐rule="evenodd"/>

<circle	
  cx="250"	
  cy="283"	
  r="75"	
  fill="blue"	
  filter="url(#f1)"	
  />



<image	
  xlink:href="TheFish.png"	
  ...	
  filter="url(#f2)"	
  />
Símbolos e marcadores
Ícones e setas reutilizáveis
<polyline	
  points="0,50	
  25,50"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  marker-­‐end="url(#setaPNP)"/>	
  


<symbol	
  id="transistorPNP"

	
  	
  	
  	
  	
  	
  	
  	
  viewBox="-­‐1	
  -­‐1	
  22	
  22">	
  
	
  	
  <use	
  xlink:href="#baseColetor"	
  />

	
  	
  <line	
  x1="0"	
  x2="9"	
  y1="20"	
  y2="10"	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  marker-­‐end="url(#seta)"	
  />	
  	
  	
  	
  	
  	
  
</symbol>	
  


<marker	
  id="setaPNP"	
  viewBox="0	
  0	
  10	
  10"	
  

	
  	
  	
  	
  	
  	
  	
  	
  refX="0"	
  refY="5"	
  orient="auto"	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  markerUnits="userSpaceOnUse"	
  

	
  	
  	
  	
  	
  	
  	
  	
  markerWidth="50"	
  markerHeight="50">

	
  	
  <use	
  xlink:href="#transistorPNP"	
  x="0"	
  y="0"	
  height="10"	
  

	
  	
  	
  	
  	
  	
  	
  width="10"	
  transform="rotate(-­‐90,5,5)"	
  />

</marker>
Símbolo
"transistorPNP"
sendo reusado
como "seta" de
uma polyline
Image sprites e fontes
Símbolos podem ser agrupados em um SVG e
referenciados pelo ID para reuso
• Coleção de fontes usando <font>, <glyph>, ...
• Coleção de ícones usando <symbol>, ...
Referenciáveis via ID / XLink
<defs>	
  

	
  	
  	
  	
  <symbol	
  id="twitter-­‐icon"	
  viewBox="0	
  0	
  32	
  32">

	
  	
  	
  	
  	
  	
  	
  <path	
  d="..."	
  />

	
  	
  	
  	
  </symbol>	
  ...

</defs>

<use	
  xlink:href="#twitter-­‐icon"	
  />	
  
<svg	
  ...>	
  ...

	
  	
  	
  <use	
  xlink:href="/sprites/icons.svg#twitter-­‐icon"	
  />

</svg>
SVG com JavaScript
<svg	
  xmlns="http://www.w3.org/2000/svg">

	
  	
  <script><![CDATA[

	
  	
  	
  	
  function	
  acende(evt)	
  {	
  

	
  	
  	
  	
  	
  	
  	
  evt.target.setAttribute("opacity",	
  "1.0");	
  

	
  	
  	
  	
  }	
  

	
  	
  	
  	
  function	
  apaga(evt)	
  {	
  

	
  	
  	
  	
  	
  	
  	
  evt.target.setAttribute("opacity",	
  "0.4");	
  

	
  	
  	
  	
  }

	
  	
  ]]></script>	
  

	
  	
  <g>	
  

	
  	
  	
  	
  <rect	
  x="10"	
  y="100"	
  width="45"	
  height="45"	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  fill="red"	
  opacity="0.4"	
  
	
   	
   	
   	
  	
  	
  onmouseover="acende(evt)"	
  onmouseout="apaga(evt)"/>	
  

	
  	
  	
  	
  <rect	
  x="65"	
  y="100"	
  width="45"	
  height="45"	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  fill="blue"	
  opacity="0.4"	
  
	
   	
   	
   	
  	
  	
  onmouseover="acende(evt)"	
  onmouseout="apaga(evt)"/>	
  

	
  	
  </g>	
  	
  

</svg>
DOM 2.0 + namespaces
Necessário para elementos e atributos

que usam namespaces (ex: xlink)
Em vez de getAttribute, getElement, etc.
use getAttributeNS, getElementNS, etc.
var	
  svgNS	
  =	
  "http://www.w3.org/2000/svg";

var	
  xlinkNS	
  =	
  "http://www.w3.org/1999/xlink";	
  


var	
  circle	
  =	
  document.createElementNS(svgNS,"use");

circle.setAttributeNS(null,"x",500);

circle.setAttributeNS(null,"y",500);

circle.setAttributeNS(xlinkNS,	
  "href",	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  "#tabuleiro");
Criação dinâmica de objetos
function	
  criarCirculo(evt)	
  {	
  


	
  	
  	
  var	
  randomX	
  =	
  Math.floor(	
  Math.random()	
  *	
  

	
  	
  	
  	
  	
  	
  	
  document.rootElement.getAttributeNS(null,	
  "width"));	
  


	
  	
  	
  var	
  randomY	
  =	
  Math.floor(	
  Math.random()	
  *	
  	
  	
  	
  	
  	
  

	
  	
  	
  	
  	
  	
  	
  document.rootElement.getAttributeNS(null,	
  "height"));	
  


	
  	
  	
  var	
  color	
  =	
  "rgb("	
  +	
  Math.floor(Math.random()	
  *	
  256)	
  +",	
  "+	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  Math.floor(Math.random()	
  *	
  256)	
  +",	
  "+	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  Math.floor(Math.random()	
  *	
  256)	
  +")";	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  ...
script_3.js
randomY
randomX
width
height
Calculando valores para
criar círculos SVG em
posições e cores aleatórias
Dimensões	
  do	
  SVG
(exemplo: parte 1 de 3)
function	
  criarCirculo(evt)	
  {	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  ...

var	
  svgNS	
  =	
  "http://www.w3.org/2000/svg";

	
  	
  	
  var	
  circulo	
  =	
  

	
  	
  	
  	
  	
  	
  	
  document.createElementNS(svgNS,	
  "circle");

	
  	
  	
  circulo.setAttributeNS(null,	
  "cx",	
  randomX);

	
  	
  	
  circulo.setAttributeNS(null,	
  "cy",	
  randomY);

	
  	
  	
  circulo.setAttributeNS(null,	
  "fill",	
  color);

	
  	
  	
  circulo.setAttributeNS(null,	
  "r",	
  	
  
	
  	
  	
  	
  	
  	
  	
  evt.target.getAttributeNS(null,	
  "r"));

	
  	
  	
  

	
  	
  	
  circulo.addEventListener("click",	
  criarCirculo,	
  false);

	
  	
  	
  

	
  	
  	
  evt.target.parentNode.appendChild(circulo);

}
script_3.js
Criação dinâmica de objetos
(exemplo: parte 2 de 3)
Círculo criado com cx, cy e fill aleatórios

adicionado ao parentNode (<svg>)
<svg	
  xmlns="http://www.w3.org/2000/svg"	
  

	
  	
  	
  	
  	
  width="500"	
  height="500">	
  


	
  	
  	
  <script	
  xlink:href="script_3.js"	
  />	
  


	
  	
  	
  <circle	
  cx="125"	
  cy="40"	
  	
  r="5"	
  	
  fill="green"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  onclick="criarCirculo(evt)"/>

	
  	
  	
  <circle	
  cx="225"	
  cy="100"	
  r="10"	
  fill="blue"	
  	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  onclick="criarCirculo(evt)"/>

	
  	
  	
  <circle	
  cx="325"	
  cy="170"	
  r="15"	
  fill="red"	
  	
  	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  onclick="criarCirculo(evt)"/>	
  


</svg>
script_3.svg
Criação dinâmica de objetos
(exemplo: parte 3 de 3)
SVG carrega o script e
cria três círculos iniciais
<svg	
  xmlns="http://www.w3.org/2000/svg"	
  

	
  	
  	
  	
  	
  width="500"	
  height="500">	
  


	
  	
  	
  <script	
  xlink:href="script_3.js"	
  />	
  


	
  	
  	
  <circle	
  cx="125"	
  cy="40"	
  	
  r="5"	
  	
  fill="green"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  onclick="criarCirculo(evt)"/>

	
  	
  	
  <circle	
  cx="225"	
  cy="100"	
  r="10"	
  fill="blue"	
  	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  onclick="criarCirculo(evt)"/>

	
  	
  	
  <circle	
  cx="325"	
  cy="170"	
  r="15"	
  fill="red"	
  	
  	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  onclick="criarCirculo(evt)"/>	
  


</svg>
script_3.svg
Criação dinâmica de objetos
(exemplo: parte 3 de 3)
SVG carrega o script e
cria três círculos iniciais
Tesselações e outros algoritmos
Diagrama de Voronoi
http://bl.ocks.org/mbostock/4060366
com
SVG DOM
ou
d3.js
Animação sem scripts
<set>

<animate>

<animateColor>

<animateMotion>

<animateTransform>
<rect	
  x="50"	
  y="50"	
  fill="red"	
  >	
  
	
  	
  	
  <animate	
  attributeName="x"	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  to="200"	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  dur="3s"	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  begin="click"	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  fill="freeze"	
  />	
  
</rect>	
  
<rect	
  x="200"	
  y="50"	
  fill="blue"	
  opacity="0.5"/>
SMIL

animações declarativas 

(como em CSS3)
atributo que irá variar ("x")
valor final do atributo "x"
duração da animação
evento que dispara a animação
o que fazer no final
Animação sem scripts
<set>

<animate>

<animateColor>

<animateMotion>

<animateTransform>
<rect	
  x="50"	
  y="50"	
  fill="red"	
  >	
  
	
  	
  	
  <animate	
  attributeName="x"	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  to="200"	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  dur="3s"	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  begin="click"	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  fill="freeze"	
  />	
  
</rect>	
  
<rect	
  x="200"	
  y="50"	
  fill="blue"	
  opacity="0.5"/>
smil_2.svg
SMIL

animações declarativas 

(como em CSS3)
Animação sem scripts
<set>

<animate>

<animateColor>

<animateMotion>

<animateTransform>
<rect	
  x="50"	
  y="50"	
  fill="red"	
  >	
  
	
  	
  	
  <animate	
  attributeName="x"	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  to="200"	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  dur="3s"	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  begin="click"	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  fill="freeze"	
  />	
  
</rect>	
  
<rect	
  x="200"	
  y="50"	
  fill="blue"	
  opacity="0.5"/>
smil_2.svg
SMIL

animações declarativas 

(como em CSS3)
<animate values>
Animação ignora to/from e usa valores especificados
calcMode determina como os valores são usados

(discreto, linear, uniforme, spline, etc.)
<svg	
  xmlns="http://www.w3.org/2000/svg">

	
  	
  	
  	
  <image	
  id="trends"	
  xlink:href="TrendsMonster.svg"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  height="100"	
  width="250"	
  x="50"	
  y="50"	
  />

	
  	
  	
  	
  <g	
  stroke="blue"	
  stroke-­‐width="2">

	
  	
  	
  	
  	
  	
  	
  	
  <line	
  x1="200"	
  x2="200"	
  y1="175"	
  y2="225"/>	
  ...	
  </g>	
  ...

	
  	
  	
  	
  <animate	
  attributeName="x"	
  calcMode="linear"	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  values="50;150;200;500"	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  dur="4s"	
  begin="click"	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  fill="freeze"	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  xlink:href="#trends"	
  />

</svg>
smil_3_values.svg
Ex: o monstro leva
o mesmo tempo
em cada trecho
values + keyTimes
keyTimes associa intervalo a cada valor em values
0.0 a 0.1: 10% do tempo para ir de x=50 a x=200
0.1 a 0.9: 90% do tempo para ir de x=200 a x=350
0.9 a 1.0: 10% do tempo para ir de x=350 a x=500
0s 0.4s 3.6s
<svg	
  xmlns="http://www.w3.org/2000/svg">	
  	
  
	
  	
  <image	
  id="openweb"	
  xlink:href="OpenWebMonster.svg"	
  x="50"	
  y="50"/>

	
  	
  <animate	
  	
  	
  	
  values="50	
  ;	
  200;	
  350;	
  500"	
  attributeName="x"	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  keyTimes="0.0;	
  0.1;	
  0.9;	
  1.0"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  begin="click"	
  fill="freeze"	
  dur="4s"	
  xlink:href="#openweb"	
  />

</svg>
smil_4_keyTimes.svg
values + keyTimes + keySplines
Trecho 1: movimento linear
Trecho 2: começa lento, acelera no meio, depois desacelera
Trecho 3: dispara no início e desacelera até parar
	
  <animate	
  	
  attributeName="x"	
  values="50;	
  	
  200;	
  	
  	
  350;	
  500"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  dur="4s"	
  	
  	
  	
  	
  	
  	
  	
  keyTimes="0;	
  0.333;	
  0.667;	
  1"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  begin="click"	
  keySplines="0.0,0.0	
  	
  	
  	
  1.0,1.0;	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  0.5,0.0	
  	
  	
  	
  0.5,1.0;	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
   	
   	
   	
   	
   	
   	
  	
  	
  	
  0.0,0.75	
  	
  0.25,1.0;"

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
   	
   	
   	
   	
   	
  	
  	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  calcMode="spline"

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  fill="freeze"	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  xlink:href="#security"	
  />
smil_5_keySplines.svg
<animateTransform>
Porque <animate> não funciona com
funções de transformação de coordenadas
<animateTransform	
  

	
  	
  	
  	
  	
  attributeName="transform"

	
  	
  	
  	
  	
  type="rotate	
  	
  	
  	
  ou 

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  translate	
  ou	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  scale	
  	
  	
  	
  	
  ou	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  skewX	
  	
  	
  	
  	
  ou	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  skewY	
  	
  	
  	
  	
   "/>
<svg	
  ...>	
  
	
  	
  	
  	
  <defs>	
  
	
  	
  	
  	
  	
  	
  	
  	
  <rect	
  id="r"	
  x="50"	
  y="-­‐10"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  height="20"	
  width="75"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  rx="10"	
  fill="blue"	
  />	
  
	
  	
  	
  	
  </defs>	
  
	
  	
  	
  	
  <g	
  id="g">	
  
	
  	
  	
  	
  	
  	
  	
  	
  <use	
  xlink:href="#r"	
  opacity="1"/>	
  
	
  	
  	
  	
  </g>	
  
</svg>
Exemplo <animateTransform> 

(parte 1 de 3)
Um retângulo com
cantos arredondados
<g>	
  
	
  	
  	
  <use	
  xlink:href="#r"	
  opacity="1"/>	
  
	
  	
  	
  <use	
  xlink:href="#r"	
  opacity=".9"	
  	
  transform="rotate(30)	
  	
  scale(0.95)"	
  />	
  
	
  	
  	
  <use	
  xlink:href="#r"	
  opacity=".8"	
  	
  transform="rotate(60)	
  	
  scale(0.9)"	
  	
  />	
  
	
  	
  	
  <use	
  xlink:href="#r"	
  opacity=".7"	
  	
  transform="rotate(90)	
  	
  scale(0.85)"	
  />	
  
	
  	
  	
  <use	
  xlink:href="#r"	
  opacity=".6"	
  	
  transform="rotate(120)	
  scale(0.8)"	
  	
  />	
  
	
  	
  	
  <use	
  xlink:href="#r"	
  opacity=".5"	
  	
  transform="rotate(150)	
  scale(0.75)"	
  />	
  
	
  	
  	
  <use	
  xlink:href="#r"	
  opacity=".4"	
  	
  transform="rotate(180)	
  scale(0.7)	
  "	
  />	
  
	
  	
  	
  <use	
  xlink:href="#r"	
  opacity=".35"	
  transform="rotate(210)	
  scale(0.65)"	
  />	
  
	
  	
  	
  <use	
  xlink:href="#r"	
  opacity=".3"	
  	
  transform="rotate(240)	
  scale(0.6)	
  "	
  />	
  
	
  	
  	
  <use	
  xlink:href="#r"	
  opacity=".25"	
  transform="rotate(270)	
  scale(0.55)"	
  />	
  
	
  	
  	
  <use	
  xlink:href="#r"	
  opacity=".2"	
  	
  transform="rotate(300)	
  scale(0.5)"	
  	
  />	
  
	
  	
  	
  <use	
  xlink:href="#r"	
  opacity=".15"	
  transform="rotate(330)	
  scale(0.45)"	
  />	
  
</g>	
  
Exemplo <animateTransform> 

(parte 2 de 3)
"Escadaria" 

em espiral
<svg	
  ...>	
  
	
  	
  <defs>	
  
	
  	
  	
  	
  <rect	
  id="r"	
  x="50"	
  y="-­‐10"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  height="20"	
  width="75"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  rx="10"	
  fill="blue"	
  />	
  
	
  	
  </defs>	
  
	
  	
  <g	
  transform="translate(150,150)"	
  
	
  	
  	
  	
  <animateTransform	
  attributeName="transform"	
  
	
  	
  	
  	
  	
  	
  	
  type="rotate"	
  begin="0s"	
  dur="1s"	
  calcMode="discrete"	
  
	
  	
  	
  	
  	
  	
  	
  values="330;300;270;240;210;180;150;120;90;60;30"	
  
	
  	
  	
  	
  	
  	
  	
  repeatCount="indefinite"/>	
  
	
  	
  	
  	
  	
  <use	
  xlink:href="#r"	
  opacity="1"/>	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  ...	
  
	
  	
  	
  	
  	
  <use	
  xlink:href="#r"	
  opacity=".15"	
  

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  transform="rotate(330)	
  scale(0.45)"	
  />	
  
	
  	
  </g>	
  
</svg>
Exemplo <animateTransform> 

(parte 3 de 3)
"Escadaria" 

girando
<animateMotion>
Objeto move-se por caminho que pode ser
• xlink:href="#path" (referência para um <path> )
• Atributo path: sintaxe do atributo d do elemento <path>
• Elemento filho <mpath xlink:href="#path" />
Atributos keyPoints + keyTimes
• keyPoints: valores = % da distância percorrida: 0 a 1

% do caminho total. Ex: 0;	
  .25;	
  .5;	
  .75;	
  0
• keyTimes: valores = % do tempo transcorrido: 0 a 1

% da duração total. Ex: 0;	
  .25;	
  .5;	
  .75;	
  0
Exemplo: <animateMotion>
O alienígena em órbita
elíptica acelera quando
se aproxima do Sol
<path	
  id="orbita"	
  ...

	
  	
  	
  d="M	
  20,175	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  
	
  	
  	
  	
  	
  	
  A	
  244,220	
  0	
  1,0	
  493,175	
  	
  	
  	
  	
  	
  	
  
	
  	
  	
  	
  	
  	
  A	
  244,220	
  0	
  0,0	
  	
  20,175"/>



<image	
  x="0"	
  y="-­‐100"	
  	
  
	
  	
  	
  	
  	
  	
  	
  xlink:href="PayMonster.svg"	
  	
  
	
  	
  	
  	
  	
  	
  	
  height="80"	
  width="200"	
  >

	
  	
  	
  <animateMotion	
  dur="10s"	
  	
  	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  repeatCount="indefinite"	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  rotate="auto"	
  	
   	
   	
   	
   	
  	
  	
  	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  calcMode="spline"

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  keyTimes="0;1"	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  keyPoints="0;1"

	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  keySplines="0.75,	
  0.25	
  	
  	
  	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  0.25,	
  0.75">

	
   	
  	
  	
  <mpath	
  xlink:href="#orbita"/>

	
  	
  	
  </animateMotion>

</image>
smil_6_motion.svg
SMIL vs. JS
SMIL é padrão W3C e parte da spec SVG 1.1
SMIL é mais eficiente (menos uso de CPU)
SMIL é declarativo (+ simples, + reuso)
SMIL vs. JS
SMIL é padrão W3C e parte da spec SVG 1.1
SMIL é mais eficiente (menos uso de CPU)
SMIL é declarativo (+ simples, + reuso)
SMIL é limitado (dependendo da complexidade,
pode ser mais fácil usar scripts)
SMIL não é suportado no MSIE (troque

por polyfills em JS: + uso de CPU
SMIL vs. JS
SMIL é padrão W3C e parte da spec SVG 1.1
SMIL é mais eficiente (menos uso de CPU)
SMIL é declarativo (+ simples, + reuso)
SMIL é limitado (dependendo da complexidade,
pode ser mais fácil usar scripts)
SMIL não é suportado no MSIE (troque

por polyfills em JS: + uso de CPU
SMIL foi marcado como deprecated pelo Google!
(agosto 2015)
Qual a alternativa?
• Google sugere usar polyfills
• Solução rápida mas ineficiente (scripts, +CPU)
Qual a alternativa?
• Google sugere usar polyfills
• Solução rápida mas ineficiente (scripts, CPU)
• Bibliotecas que geram SVG e CSS
http://d3js.org/http://snapsvg.io/
Qual a alternativa?
• Google sugere usar polyfills
• Solução rápida mas ineficiente (scripts, CPU)
• Bibliotecas que geram SVG e CSS
• Animações CSS 3!
http://d3js.org/http://snapsvg.io/
Alternativas W3C
HTML5 Canvas CSS
SVG
Gradientes
Filtros
Animação

declarativa
DOM
Figuras
Caminhos
Manipulação
de pixels
Figuras

são objetos
Estilos
Patterns
Curvas
Fontes
Transform 2D
Transformadas

+ anim 3D
Masks Transições
Grupos
Texto
Image
XML
Fill/stroke
Clipping
Símbolos
Há uma sobreposição de soluções
Sombras
Reflexos
SVG + animações SMIL
<g	
  class="monster-­‐trends__left-­‐arm">	
  
	
  	
  <use	
  xlink:href="#left-­‐arm-­‐background"	
  

	
  	
  	
  	
  	
  	
  	
  fill="pink"	
  stroke="blue"/>	
  
	
  	
  <use	
  xlink:href="#left-­‐arm-­‐detail"	
  fill="blue"	
  />	
  
	
  	
  <animateTransform	
  attributeName="transform"	
  dur="2s"	
  	
  
	
  	
  	
  	
  	
  	
  values="0	
  60	
  30;-­‐45	
  60	
  35;0	
  60	
  30"	
  

	
  	
  	
  	
  	
  	
  type="rotate"	
  

	
  	
  	
  	
  	
  	
  repeatCount="indefinite"/>	
  	
  	
  	
  	
  
</g>	
  
<g	
  class="monster-­‐trends__right-­‐arm">	
  
	
  	
  <use	
  xlink:href="#right-­‐arm-­‐background"	
  

	
  	
  	
  	
  	
  	
  	
  fill="yellow"	
  stroke="blue"/>	
  
	
  	
  <use	
  xlink:href="#right-­‐arm-­‐detail"	
  fill="blue"	
  />	
  
	
  	
  <animateTransform	
  attributeName="transform"	
  dur="2s"	
  	
  
	
  	
  	
  	
  	
  	
  type="rotate"	
  values="0	
  120	
  30;45	
  120	
  35;0	
  120	
  30"	
  

	
  	
  	
  	
  	
  	
  repeatCount="indefinite"/>	
  
</g>
SVG + animações CSS3
<g	
  class="monster-­‐trends__right-­‐arm">	
  
	
  	
  <use	
  xlink:href="#right-­‐arm-­‐background"	
  

	
  	
  	
  	
  	
  	
  	
  fill="yellow"	
  stroke="blue"/>	
  
	
  	
  <use	
  xlink:href="#right-­‐arm-­‐detail"	
  fill="blue"	
  />	
  
</g>
<style	
  type="text/css">	
  
	
  	
  .monster-­‐trends__right-­‐arm	
  {	
  
	
  	
  	
  	
  	
  	
  animation:	
  right-­‐arm-­‐values	
  2s	
  infinite;	
  
	
  	
  	
  	
  	
  	
  transform-­‐origin:	
  30%	
  70%;	
  
	
  	
  }	
  
	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  	
  
	
  	
  @keyframes	
  right-­‐arm-­‐values	
  {	
  
	
  	
  	
  	
  	
  	
  0%	
  	
  	
  {	
  transform:	
  rotate(0deg);	
  }	
  
	
  	
  	
  	
  	
  	
  50%	
  	
  {	
  transform:	
  rotate(45deg);	
  }	
  
	
  	
  	
  	
  	
  	
  100%	
  {	
  transform:	
  rotate(0deg);	
  }	
  
	
  	
  }	
  
</style>
SVG2
Working draft!
• Muito mais integração com CSS
• CSS compositing & blending
• CSS3 2D+3D transforms
• CSS masking
• Filter Effects 1.0
• CSS Color
• Paint servers (+CSS gradients em SVG)
• Elemento <star>
• Interoperabilidade com HTML5 Canvas
• Novos objetos em SVG DOM
• ...
Conclusões
SVG 1.1 é solução eficiente para gráficos vetoriais
• Leve, escalável, reusável e padrão aberto W3C
• Elementos e estilos manipuláveis como objetos
• Compatibilidade com HTML5 e CSS3
• Suporte quase universal para gráficos estáticos na Web
• Amplo suporte em ferramentas gráficas
Conclusões
SVG 1.1 é solução eficiente para gráficos vetoriais
• Leve, escalável, reusável e padrão aberto W3C
• Elementos e estilos manipuláveis como objetos
• Compatibilidade com HTML5 e CSS3
• Suporte quase universal para gráficos estáticos na Web
• Amplo suporte em ferramentas gráficas
Ainda existem problemas
• Compatibilidade (resolvidos com workarounds)
• Falta de suporte para animações
• Duplicação de funcionalidades
Conclusões
SVG 1.1 é solução eficiente para gráficos vetoriais
• Leve, escalável, reusável e padrão aberto W3C
• Elementos e estilos manipuláveis como objetos
• Compatibilidade com HTML5 e CSS3
• Suporte quase universal para gráficos estáticos na Web
• Amplo suporte em ferramentas gráficas
Ainda existem problemas
• Compatibilidade (resolvidos com workarounds)
• Falta de suporte para animações
• Duplicação de funcionalidades
SVG2: +interoperabilidade com CSS3 e HTML5
Referências
Este material é baseado em Tutorial SVG (Helder da Rocha, 2010) disponível em
http://www.argonavis.com.br/download/download_xml-svg.html
Especificações
• SVG 1.1 Second Edition. www.w3.org/TR/SVG/ August 2011
• SVG 2 Working Draft. http://www.w3.org/TR/SVG2/ July 2015
• SMIL 3 www.w3.org/TR/SMIL/ December 2008
• CSS 2 http://www.w3.org/TR/2008/REC-CSS2-20080411/ April 2008
• DOM 3 http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/ April 2004
Livros sobre SVG
• Kurt Cagle. SVG Programming: the graphical Web. Apress. 2002.
• Frost, Goesser, Hirtzler. Learn SVG: The Web Graphics Standard. http://www.learnsvg.com/
• Mike Dewar. Getting Started with D3. O'Reilly. 2012.
• J. David Eisenberg, Amelia Bellamy-Royds. SVG Essentials 2nd. Edition. O'Reilly. 2014.
• J. Frost, D. Dailey, D. Strazzullo, Building Web Applications with SVG. MS Press. 2012.
Produtos
• d3.js http://d3js.org/ Biblioteca JavaScript para dados e gráficos (gera SVG)
• snap.js http://snapsvg.io/ Biblioteca JavaScript para SVG
Exemplos
• Aplicação Orbitas (gera órbitas planetárias em SVG): www.argonavis.com.br/astronomia/orbitas escrito em
Java, XSLT e SVG. Código-fonte em https://github.com/helderdarocha/orbits
• Monstrinhos em SVG originalmente do site da conferência conferenciaweb.w3c.br alterados para
fazer animações em olhos e braços; código disponível em GitHub (veja slide seguinte)
helder@argonavis.com.br
https://github.com/argonavisbr/SVGExamples
http://www.argonavis.com.br/download/w3c_2015_svg.html
Outros formatos para esta palestra em
Código-fonte dos exemplos
Este material pode ser usado de acordo
com os termos da licença Creative
Commons Attribution Share-Alike

Mais conteúdo relacionado

Mais procurados

FIWARE Wednesday Webinars - Architecting Your Smart Solution Powered by FIWARE
FIWARE Wednesday Webinars - Architecting Your Smart Solution Powered by FIWAREFIWARE Wednesday Webinars - Architecting Your Smart Solution Powered by FIWARE
FIWARE Wednesday Webinars - Architecting Your Smart Solution Powered by FIWAREFIWARE
 
Session 5 - NGSI-LD Advanced Operations | Train the Trainers Program
Session 5 -  NGSI-LD Advanced Operations | Train the Trainers ProgramSession 5 -  NGSI-LD Advanced Operations | Train the Trainers Program
Session 5 - NGSI-LD Advanced Operations | Train the Trainers ProgramFIWARE
 
Fiware IoT_IDAS_intro_ul20_v2
Fiware IoT_IDAS_intro_ul20_v2Fiware IoT_IDAS_intro_ul20_v2
Fiware IoT_IDAS_intro_ul20_v2FIWARE
 
JavaScript
JavaScriptJavaScript
JavaScriptSunil OS
 
FIWARE Wednesday Webinars - Introduction to NGSI-LD
FIWARE Wednesday Webinars - Introduction to NGSI-LDFIWARE Wednesday Webinars - Introduction to NGSI-LD
FIWARE Wednesday Webinars - Introduction to NGSI-LDFIWARE
 
Договір купівлі-продажу частки у статутному капіталі ТОВ "Офіно-торговий центр"
Договір купівлі-продажу частки у статутному капіталі ТОВ "Офіно-торговий центр"Договір купівлі-продажу частки у статутному капіталі ТОВ "Офіно-торговий центр"
Договір купівлі-продажу частки у статутному капіталі ТОВ "Офіно-торговий центр"SylaPravdy
 
Kotlin의 코루틴은 어떻게 동작하는가
Kotlin의 코루틴은 어떻게 동작하는가Kotlin의 코루틴은 어떻게 동작하는가
Kotlin의 코루틴은 어떻게 동작하는가Chang W. Doh
 
Securing Java EE apps using WildFly Elytron
Securing Java EE apps using WildFly ElytronSecuring Java EE apps using WildFly Elytron
Securing Java EE apps using WildFly ElytronJan Kalina
 
K2 for SharePoint Brochure
K2 for SharePoint BrochureK2 for SharePoint Brochure
K2 for SharePoint BrochureGemma Adair
 
[11]Android DataBinding : 기초에서 고급까지
[11]Android DataBinding : 기초에서 고급까지[11]Android DataBinding : 기초에서 고급까지
[11]Android DataBinding : 기초에서 고급까지NAVER Engineering
 
Managing user's data with Spring Session
Managing user's data with Spring SessionManaging user's data with Spring Session
Managing user's data with Spring SessionDavid Gómez García
 
온톨로지 & 규칙 추론 시스템
온톨로지 & 규칙 추론 시스템온톨로지 & 규칙 추론 시스템
온톨로지 & 규칙 추론 시스템Sang-Kyun Kim
 

Mais procurados (20)

Introduction to SPARQL
Introduction to SPARQLIntroduction to SPARQL
Introduction to SPARQL
 
Auto disciplina-en -diez--dc3adas-theodore-bryant
Auto disciplina-en -diez--dc3adas-theodore-bryantAuto disciplina-en -diez--dc3adas-theodore-bryant
Auto disciplina-en -diez--dc3adas-theodore-bryant
 
Neo4J 사용
Neo4J 사용Neo4J 사용
Neo4J 사용
 
FIWARE Wednesday Webinars - Architecting Your Smart Solution Powered by FIWARE
FIWARE Wednesday Webinars - Architecting Your Smart Solution Powered by FIWAREFIWARE Wednesday Webinars - Architecting Your Smart Solution Powered by FIWARE
FIWARE Wednesday Webinars - Architecting Your Smart Solution Powered by FIWARE
 
Local storage
Local storageLocal storage
Local storage
 
Session 5 - NGSI-LD Advanced Operations | Train the Trainers Program
Session 5 -  NGSI-LD Advanced Operations | Train the Trainers ProgramSession 5 -  NGSI-LD Advanced Operations | Train the Trainers Program
Session 5 - NGSI-LD Advanced Operations | Train the Trainers Program
 
Fiware IoT_IDAS_intro_ul20_v2
Fiware IoT_IDAS_intro_ul20_v2Fiware IoT_IDAS_intro_ul20_v2
Fiware IoT_IDAS_intro_ul20_v2
 
Cda 01-introducción a hl7 cda
Cda 01-introducción a hl7 cdaCda 01-introducción a hl7 cda
Cda 01-introducción a hl7 cda
 
JavaScript
JavaScriptJavaScript
JavaScript
 
FIWARE Wednesday Webinars - Introduction to NGSI-LD
FIWARE Wednesday Webinars - Introduction to NGSI-LDFIWARE Wednesday Webinars - Introduction to NGSI-LD
FIWARE Wednesday Webinars - Introduction to NGSI-LD
 
Договір купівлі-продажу частки у статутному капіталі ТОВ "Офіно-торговий центр"
Договір купівлі-продажу частки у статутному капіталі ТОВ "Офіно-торговий центр"Договір купівлі-продажу частки у статутному капіталі ТОВ "Офіно-торговий центр"
Договір купівлі-продажу частки у статутному капіталі ТОВ "Офіно-торговий центр"
 
SHACL Overview
SHACL OverviewSHACL Overview
SHACL Overview
 
Oim Poc1.0
Oim Poc1.0Oim Poc1.0
Oim Poc1.0
 
Kotlin의 코루틴은 어떻게 동작하는가
Kotlin의 코루틴은 어떻게 동작하는가Kotlin의 코루틴은 어떻게 동작하는가
Kotlin의 코루틴은 어떻게 동작하는가
 
FIWARE Overview
FIWARE OverviewFIWARE Overview
FIWARE Overview
 
Securing Java EE apps using WildFly Elytron
Securing Java EE apps using WildFly ElytronSecuring Java EE apps using WildFly Elytron
Securing Java EE apps using WildFly Elytron
 
K2 for SharePoint Brochure
K2 for SharePoint BrochureK2 for SharePoint Brochure
K2 for SharePoint Brochure
 
[11]Android DataBinding : 기초에서 고급까지
[11]Android DataBinding : 기초에서 고급까지[11]Android DataBinding : 기초에서 고급까지
[11]Android DataBinding : 기초에서 고급까지
 
Managing user's data with Spring Session
Managing user's data with Spring SessionManaging user's data with Spring Session
Managing user's data with Spring Session
 
온톨로지 & 규칙 추론 시스템
온톨로지 & 규칙 추론 시스템온톨로지 & 규칙 추론 시스템
온톨로지 & 규칙 추론 시스템
 

Destaque

TDC 2010: Ambiente de Integração Contínua
TDC 2010: Ambiente de Integração ContínuaTDC 2010: Ambiente de Integração Contínua
TDC 2010: Ambiente de Integração ContínuaHelder da Rocha
 
Conexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao AjaxConexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao AjaxHelder da Rocha
 
JSR 375 Segurança em Java EE 8
JSR 375 Segurança em Java EE 8JSR 375 Segurança em Java EE 8
JSR 375 Segurança em Java EE 8Helder da Rocha
 
Novas APIs do Java EE 7: JMS e Web Services
Novas APIs do Java EE 7: JMS e Web ServicesNovas APIs do Java EE 7: JMS e Web Services
Novas APIs do Java EE 7: JMS e Web ServicesHelder da Rocha
 
Java EE 8 Adopt a JSR : JSON-P 1.1 & MVC 1.0
Java EE 8 Adopt a JSR : JSON-P 1.1 & MVC 1.0Java EE 8 Adopt a JSR : JSON-P 1.1 & MVC 1.0
Java EE 8 Adopt a JSR : JSON-P 1.1 & MVC 1.0David Delabassee
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBFábio Flatschart
 
Minicurso JSON & Ajax
Minicurso JSON & AjaxMinicurso JSON & Ajax
Minicurso JSON & AjaxWilker Iceri
 
CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011Davidson Fellipe
 
New MVC 1.0 JavaEE 8 API
New MVC 1.0 JavaEE 8 APINew MVC 1.0 JavaEE 8 API
New MVC 1.0 JavaEE 8 APITrayan Iliev
 
O Poderoso AngularJS
O Poderoso AngularJSO Poderoso AngularJS
O Poderoso AngularJSBeto Muniz
 

Destaque (20)

TDC 2010: Ambiente de Integração Contínua
TDC 2010: Ambiente de Integração ContínuaTDC 2010: Ambiente de Integração Contínua
TDC 2010: Ambiente de Integração Contínua
 
Olha pro ceu (2013)
Olha pro ceu (2013)Olha pro ceu (2013)
Olha pro ceu (2013)
 
Conexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao AjaxConexão Java 2006: Introdução ao Ajax
Conexão Java 2006: Introdução ao Ajax
 
Tutorial EJB 3.0 (2009)
Tutorial EJB 3.0 (2009)Tutorial EJB 3.0 (2009)
Tutorial EJB 3.0 (2009)
 
Dark Java (2009)
Dark Java (2009)Dark Java (2009)
Dark Java (2009)
 
J530 9 jms
J530 9 jmsJ530 9 jms
J530 9 jms
 
MVC 1.0 / JSR 371
MVC 1.0 / JSR 371MVC 1.0 / JSR 371
MVC 1.0 / JSR 371
 
HTML5 Media Elements
HTML5 Media ElementsHTML5 Media Elements
HTML5 Media Elements
 
JSR 375 Segurança em Java EE 8
JSR 375 Segurança em Java EE 8JSR 375 Segurança em Java EE 8
JSR 375 Segurança em Java EE 8
 
Tutorial JSF 2.0 (2012)
Tutorial JSF 2.0 (2012)Tutorial JSF 2.0 (2012)
Tutorial JSF 2.0 (2012)
 
Novas APIs do Java EE 7: JMS e Web Services
Novas APIs do Java EE 7: JMS e Web ServicesNovas APIs do Java EE 7: JMS e Web Services
Novas APIs do Java EE 7: JMS e Web Services
 
Java EE 8 Adopt a JSR : JSON-P 1.1 & MVC 1.0
Java EE 8 Adopt a JSR : JSON-P 1.1 & MVC 1.0Java EE 8 Adopt a JSR : JSON-P 1.1 & MVC 1.0
Java EE 8 Adopt a JSR : JSON-P 1.1 & MVC 1.0
 
SVG Essencial
SVG EssencialSVG Essencial
SVG Essencial
 
SVG como exemplo de XML
SVG como exemplo de XMLSVG como exemplo de XML
SVG como exemplo de XML
 
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEBHTML5 - A nova fronteira no desenvolvimento de aplicações WEB
HTML5 - A nova fronteira no desenvolvimento de aplicações WEB
 
Minicurso JSON & Ajax
Minicurso JSON & AjaxMinicurso JSON & Ajax
Minicurso JSON & Ajax
 
CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011CANVAS vs SVG @ FrontInRio 2011
CANVAS vs SVG @ FrontInRio 2011
 
New MVC 1.0 JavaEE 8 API
New MVC 1.0 JavaEE 8 APINew MVC 1.0 JavaEE 8 API
New MVC 1.0 JavaEE 8 API
 
O Poderoso AngularJS
O Poderoso AngularJSO Poderoso AngularJS
O Poderoso AngularJS
 
Desenvolvimento de Aplicações
Desenvolvimento de AplicaçõesDesenvolvimento de Aplicações
Desenvolvimento de Aplicações
 

Semelhante a Uma introdução abrangente a SVG 1.1: Como criar e usar gráficos vetoriais na web com HTML5 e CSS

Semelhante a Uma introdução abrangente a SVG 1.1: Como criar e usar gráficos vetoriais na web com HTML5 e CSS (20)

HTML + CSS
HTML + CSSHTML + CSS
HTML + CSS
 
Pew2012
Pew2012Pew2012
Pew2012
 
SVG - De volta e para o futuro
SVG - De volta e para o futuroSVG - De volta e para o futuro
SVG - De volta e para o futuro
 
XHTML Básico
XHTML BásicoXHTML Básico
XHTML Básico
 
Mini Curso - jQuery - FMU
Mini Curso - jQuery - FMUMini Curso - jQuery - FMU
Mini Curso - jQuery - FMU
 
Criando sites com estilos
Criando sites com estilosCriando sites com estilos
Criando sites com estilos
 
TDC2016SP - Trilha BigData
TDC2016SP - Trilha BigDataTDC2016SP - Trilha BigData
TDC2016SP - Trilha BigData
 
Web em grande estilo com CSS 3
Web em grande estilo com CSS 3Web em grande estilo com CSS 3
Web em grande estilo com CSS 3
 
Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3Laboratório Web 2013-2014 - CSS3
Laboratório Web 2013-2014 - CSS3
 
Canvas element
Canvas elementCanvas element
Canvas element
 
Arquitetura CSS
Arquitetura CSSArquitetura CSS
Arquitetura CSS
 
TDC 2019: transformando 
dados
públicos
em mapas interativos
TDC 2019: transformando 
dados
públicos
em mapas interativosTDC 2019: transformando 
dados
públicos
em mapas interativos
TDC 2019: transformando 
dados
públicos
em mapas interativos
 
Um guia bem básico de Bootstrap + Less
Um guia bem básico de Bootstrap + LessUm guia bem básico de Bootstrap + Less
Um guia bem básico de Bootstrap + Less
 
Dream 06
Dream 06Dream 06
Dream 06
 
CSS
CSSCSS
CSS
 
CSS
CSSCSS
CSS
 
HTML
HTMLHTML
HTML
 
Básico em (X)HTML e CSS
Básico em (X)HTML e CSSBásico em (X)HTML e CSS
Básico em (X)HTML e CSS
 
Dream 06
Dream 06Dream 06
Dream 06
 
Design Responsivo com Sass
Design Responsivo com SassDesign Responsivo com Sass
Design Responsivo com Sass
 

Mais de Helder da Rocha

Como criar um mapa temático interativo com dados abertos e D3.js
Como criar um mapa temático interativo com dados abertos e D3.jsComo criar um mapa temático interativo com dados abertos e D3.js
Como criar um mapa temático interativo com dados abertos e D3.jsHelder da Rocha
 
Transforming public data into thematic maps (TDC2019 presentation)
Transforming public data into thematic maps (TDC2019 presentation)Transforming public data into thematic maps (TDC2019 presentation)
Transforming public data into thematic maps (TDC2019 presentation)Helder da Rocha
 
Padrões essenciais de mensageria para integração de sistemas
Padrões essenciais de mensageria para integração de sistemasPadrões essenciais de mensageria para integração de sistemas
Padrões essenciais de mensageria para integração de sistemasHelder da Rocha
 
Visualização de dados e a Web
Visualização de dados e a WebVisualização de dados e a Web
Visualização de dados e a WebHelder da Rocha
 
Eletrônica Criativa: criando circuitos com materiais alternativos
Eletrônica Criativa: criando circuitos com materiais alternativosEletrônica Criativa: criando circuitos com materiais alternativos
Eletrônica Criativa: criando circuitos com materiais alternativosHelder da Rocha
 
Introdução à Visualização de Dados (2015)
Introdução à Visualização de Dados (2015)Introdução à Visualização de Dados (2015)
Introdução à Visualização de Dados (2015)Helder da Rocha
 
API de segurança do Java EE 8
API de segurança do Java EE 8API de segurança do Java EE 8
API de segurança do Java EE 8Helder da Rocha
 
Curso de Java Persistence API (JPA) (Java EE 7)
Curso de Java Persistence API (JPA) (Java EE 7)Curso de Java Persistence API (JPA) (Java EE 7)
Curso de Java Persistence API (JPA) (Java EE 7)Helder da Rocha
 
Curso de Enterprise JavaBeans (EJB) (JavaEE 7)
Curso de Enterprise JavaBeans (EJB) (JavaEE 7)Curso de Enterprise JavaBeans (EJB) (JavaEE 7)
Curso de Enterprise JavaBeans (EJB) (JavaEE 7)Helder da Rocha
 
Introdução a JPA (2010)
Introdução a JPA (2010)Introdução a JPA (2010)
Introdução a JPA (2010)Helder da Rocha
 
Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)
Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)
Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)Helder da Rocha
 
Minicurso de Segurança em Java EE 7
Minicurso de Segurança em Java EE 7Minicurso de Segurança em Java EE 7
Minicurso de Segurança em Java EE 7Helder da Rocha
 
Curso de WebServlets (Java EE 7)
Curso de WebServlets (Java EE 7)Curso de WebServlets (Java EE 7)
Curso de WebServlets (Java EE 7)Helder da Rocha
 
Atualização Java 8 (2014)
Atualização Java 8 (2014)Atualização Java 8 (2014)
Atualização Java 8 (2014)Helder da Rocha
 
Curso de Java: Introdução a lambda e Streams
Curso de Java: Introdução a lambda e StreamsCurso de Java: Introdução a lambda e Streams
Curso de Java: Introdução a lambda e StreamsHelder da Rocha
 
Threads 07: Sincronizadores
Threads 07: SincronizadoresThreads 07: Sincronizadores
Threads 07: SincronizadoresHelder da Rocha
 
Threads 08: Executores e Futures
Threads 08: Executores e FuturesThreads 08: Executores e Futures
Threads 08: Executores e FuturesHelder da Rocha
 

Mais de Helder da Rocha (20)

Como criar um mapa temático interativo com dados abertos e D3.js
Como criar um mapa temático interativo com dados abertos e D3.jsComo criar um mapa temático interativo com dados abertos e D3.js
Como criar um mapa temático interativo com dados abertos e D3.js
 
Transforming public data into thematic maps (TDC2019 presentation)
Transforming public data into thematic maps (TDC2019 presentation)Transforming public data into thematic maps (TDC2019 presentation)
Transforming public data into thematic maps (TDC2019 presentation)
 
Padrões essenciais de mensageria para integração de sistemas
Padrões essenciais de mensageria para integração de sistemasPadrões essenciais de mensageria para integração de sistemas
Padrões essenciais de mensageria para integração de sistemas
 
Visualização de dados e a Web
Visualização de dados e a WebVisualização de dados e a Web
Visualização de dados e a Web
 
Eletrônica Criativa: criando circuitos com materiais alternativos
Eletrônica Criativa: criando circuitos com materiais alternativosEletrônica Criativa: criando circuitos com materiais alternativos
Eletrônica Criativa: criando circuitos com materiais alternativos
 
Introdução à Visualização de Dados (2015)
Introdução à Visualização de Dados (2015)Introdução à Visualização de Dados (2015)
Introdução à Visualização de Dados (2015)
 
API de segurança do Java EE 8
API de segurança do Java EE 8API de segurança do Java EE 8
API de segurança do Java EE 8
 
Java 9, 10, 11
Java 9, 10, 11Java 9, 10, 11
Java 9, 10, 11
 
Curso de Java Persistence API (JPA) (Java EE 7)
Curso de Java Persistence API (JPA) (Java EE 7)Curso de Java Persistence API (JPA) (Java EE 7)
Curso de Java Persistence API (JPA) (Java EE 7)
 
Curso de Enterprise JavaBeans (EJB) (JavaEE 7)
Curso de Enterprise JavaBeans (EJB) (JavaEE 7)Curso de Enterprise JavaBeans (EJB) (JavaEE 7)
Curso de Enterprise JavaBeans (EJB) (JavaEE 7)
 
Introdução a JPA (2010)
Introdução a JPA (2010)Introdução a JPA (2010)
Introdução a JPA (2010)
 
Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)
Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)
Curso de RESTful WebServices em Java com JAX-RS (Java EE 7)
 
Minicurso de Segurança em Java EE 7
Minicurso de Segurança em Java EE 7Minicurso de Segurança em Java EE 7
Minicurso de Segurança em Java EE 7
 
Curso de WebServlets (Java EE 7)
Curso de WebServlets (Java EE 7)Curso de WebServlets (Java EE 7)
Curso de WebServlets (Java EE 7)
 
Curso de Java: Threads
Curso de Java: ThreadsCurso de Java: Threads
Curso de Java: Threads
 
Atualização Java 8 (2014)
Atualização Java 8 (2014)Atualização Java 8 (2014)
Atualização Java 8 (2014)
 
Curso de Java: Introdução a lambda e Streams
Curso de Java: Introdução a lambda e StreamsCurso de Java: Introdução a lambda e Streams
Curso de Java: Introdução a lambda e Streams
 
Threads 07: Sincronizadores
Threads 07: SincronizadoresThreads 07: Sincronizadores
Threads 07: Sincronizadores
 
Threads 09: Paralelismo
Threads 09: ParalelismoThreads 09: Paralelismo
Threads 09: Paralelismo
 
Threads 08: Executores e Futures
Threads 08: Executores e FuturesThreads 08: Executores e Futures
Threads 08: Executores e Futures
 

Uma introdução abrangente a SVG 1.1: Como criar e usar gráficos vetoriais na web com HTML5 e CSS

  • 2. Uma introdução abrangente a SVG 1.1 Como criar e usar com HTML5 e CSS Breve Tutorial 1. Elementos gráficos: figuras, caminhos e texto 2. Grupos e elementos estruturais 3. Sistema de coordenadas e transformadas 2D 4. Cores, filtros, máscaras, gradientes 5. SVG DOM + CSS + JavaScript 6. Animações declarativas com SMIL Alternativas e bibliotecas SVG2 Programa
  • 3. Quem sou eu? Who am I? Кто я? Helder da Rocha argonavis.com.br Tecnologia * Ciência * Arte HTML & tecnologias Web desde 1995 Autor de cursos e livros sobre
 Java, XML e tecnologias Web helderdarocha.com.br
  • 4. O que é SVG? Scalable Vector Graphics
  • 5. O que é SVG Scalable Vector Graphics curvas, polígonos, texto elipses, retângulos, linhas imagens, máscaras gradientes, padrões, filtros símbolos, fontes
  • 6. O que é SVG Scalable Vector Graphics Ideal para logotipos, desenhos diagramas, gráficos ícones, fontes, sprites interfaces responsivas
  • 7. O que é SVG Scalable Vector Graphics Guarda a fórmula do gráfico (não é mapa de pixels) Coordenadas, ângulos, dimensões Arcos, curvas Bézier Transformadas Tesselações
  • 8. Vetores vs bitmaps Bitmap, 10kB Bitmap ampliado, 10kB Vetor, 1kB Vetor ampliado, 1kB
  • 9. Vetores vs bitmaps Bitmap, 10kB Bitmap maior, 250kB Vetor, 1kB Vetor ampliado, 1kB
  • 10. Origens • 1998 (W3C, Adobe, Microsoft)
  • 11. Origens • 1998 (W3C, Adobe, Microsoft) • Influências • VML da Microsoft (com HP, Autodesk e Macromedia) • PGML, da Adobe (com IBM, Netscape e Sun) • CSS e HTML (W3C)
  • 12. Origens • 1998 (W3C, Adobe, Microsoft) • Influências • VML da Microsoft (com HP, Autodesk e Macromedia) • PGML, da Adobe (com IBM, Netscape e Sun) • CSS e HTML (W3C) • Versão atual: SVG 1.1 • W3C Recommendation (segunda edição) 16/08/2011 • Suporte razoável na maior parte dos browsers (ótimo em Firefox, Chrome, Safari e Opera)
  • 13. Plataformas SVG Full • SVG 1.0 e SVG 1.1 • Formato SVGZ (SVG comprimido com ZIP) SVG Mobile • SVG 1.2 Tiny (SVGT) e SVG Basic (SVGB) • A 3GPP adotou SVG Tiny como padrão de mídia vetorial • Em desenvolvimento • SVG2 (antes chamado de SVG 1.2 e SVG 2.0) • SVG Print (Canon, HP, Adobe e Corel) – impressão
  • 14. Como criar um SVG Elemento raiz <svg> Namespace http://www.w3.org/2000/svg <?xml  version="1.0"  encoding="UTF-­‐8"?>
 <svg  xmlns="http://www.w3.org/2000/svg"  
          viewBox="0  0  200  200"  height="100px"  width="100px">
        <circle  r="50"  cx="100"  cy="100"  fill="green"/>  
 </svg> svgdemo.svg
  • 15. Como criar um SVG <?xml  version="1.0"  encoding="UTF-­‐8"?>
 <svg  xmlns="http://www.w3.org/2000/svg"  
          viewBox="0  0  200  200"  height="100px"  width="100px">
        <circle  r="50"  cx="100"  cy="100"  fill="green"/>  
 </svg> svgdemo.svg 100 px 100px Dimensões (opcional)
  • 16. Como criar um SVG <?xml  version="1.0"  encoding="UTF-­‐8"?>
 <svg  xmlns="http://www.w3.org/2000/svg"  
          viewBox="0  0  200  200"  height="100px"  width="100px">
        <circle  r="50"  cx="100"  cy="100"  fill="green"/>  
 </svg> svgdemo.svg 200 200 (0,0) (100,100) r = 50 Sistema de coordenadas viewBox origem + dimensões
  • 17. Como criar um SVG <?xml  version="1.0"  encoding="UTF-­‐8"?>
 <svg  xmlns="http://www.w3.org/2000/svg"  
          viewBox="0  0  200  200"  height="100px"  width="100px">
        <circle  r="50"  cx="100"  cy="100"  fill="green"/>  
 </svg> svgdemo.svg(0,0) (50px,50px) r = 25px 100 px 100px Sistema de coordenadas viewBox origem + dimensões
  • 19. Como exibir Abra em um browser! Opera Chrome Safari Firefox circle.svg
  • 22. Como usar em HTML5 (1) Três maneiras de referenciar <html>            <head>...</head>   <body>
      <h1>SVG  referenciado</h1>   
      <p>Com  Img</p>
        <img  src="circle.svg"/>   
        <p>Com  Object</p>
        <object  data="circle.svg"></object>   
        <p>Com  Embed</p>
        <embed  src="circle.svg"/>
 </body>   </html> comousar.html
  • 23. Como usar em HTML5 (2) <html>          <head>          <style>                  svg  {  border:  red  dashed  1px;                              height:  200px;  width:  200px;                  }                  circle  {fill:  red}          </style>          </head>          <body>                  <h1>SVG  embutido</h1>                                    <svg  viewBox="0  0  200  200">                      <circle  r="50"  cx="100"  cy="100"  fill="green"  />                  </svg>          </body>   </html> Embutir no código comoembutir.html
  • 24. Como usar em CSS <html>
        <head>
                <style>
                #circulo  {
                        background-­‐image:  url(circle.svg);
                        height:  100%;  width:  100%;
                }
                #container  {
                        height:  200px;  width:  200px;
                        border:  blue  dashed  1px;
                }
        </style>
        </head>
        <body>
                <h1>SVG  background  CSS</h1>
                <div  id="container">
                        <div  id="circulo"></div>
                </div>
        </body>
 </html> comousaremcss.html
  • 25. <html>
      <head>
            <style>  
                  #paraiba  {
                        -­‐webkit-­‐mask-­‐image:  url(svgdemo.svg);
                        -­‐webkit-­‐mask-­‐origin:  padding;
                        -­‐webkit-­‐mask-­‐position:  180px  220px;
                        -­‐webkit-­‐transform:  scale(2.8);
                    }
              </style>
      </head>
      <body>
            <h1>Mascaras  SVG  e  CSS3</h1>
            <img  src="imagens/paraiba2005.jpg"                          id="paraiba">
      </body>
 </html>   Como usar em CSS 3 Máscara SVG em CSS 3 css3_mascara.html
  • 26. SVG vs. Canvas Objetos em XML vs Operações JavaScript 
 <h1>HTML5  Canvas</h1>
 <canvas  id="desenho1"  height="300"  
                width="300"></canvas>   <script>
        var  acanvas  =  
            document.getElementById("desenho1");
        var  ctx  =  acanvas.getContext("2d");
        ctx.fillStyle  =  "#ff459a";
        ctx.fillRect(50,50,  150,150);
 </script>   
 <h1>SVG  (usando  tags)</h1>
 <svg  height="300"  width="300">
      <rect  x="50"  y="50"  width="150"  
                  height="150"  fill="#ff459a"  />
 </svg> canvas_svg1.html
  • 27. Estilos em SVG CSS: atributo style <rect  x="50"  y="20"  width="120"  height="100"        
      style="stroke-­‐width:4;  stroke:blue;  fill:red"/>   XML: atributos do SVG  <rect  x="50"  y="20"  width="120"  height="100"  
          stroke-­‐width="4"  stroke="blue"  fill="red"/>   + atributos id, style e class como HTML + folhas de estilo (bloco <style> ou arquivo .css externo)
  • 28. CSS externo SVG embutido: HTML e SVG podem compartilhar mesmas folhas de estilo CSS Arquivo SVG ou referenciado em HTML: CSS 
 embutido ou vinculado ao próprio SVG <?xml-­‐stylesheet  type="text/css"  
                                  href="estilo.css"?>   <svg  xmlns="..."  >          <circle  class="t1"  ...>   </svg> <svg  xmlns="..."  >        <style>
            .t1  {fill:  green;}
      </style>        <circle  class="t1"  ...>   </svg> <html>      <style>.t1  {fill:  green;}</style>      <svg>          <circle  class="t1"  ...>      </svg>   </html> <html>      <link  rel="stylesheet"  
                href="estilo.css"/>      <svg>              <circle  class="t1"  ...>      </svg>   </html> .t1  {
    fill:  green;
 } estilo.css arquivo.svg arquivo.html
  • 29. SVG DOM API de Document Object Model para SVG <h1>SVG  (usando  SVG  DOM)</h1>
 <svg  id="desenho2"  height="300"  width="300"></svg>
 <script>
      var  svgns  =  "http://www.w3.org/2000/svg";
      var  ansvg  =  
          document.getElementById("desenho2");
      var  rect  =  
          document.createElementNS(svgns,  "rect");
      rect.setAttribute("x",50);
      rect.setAttribute("y",50);
      rect.setAttribute("height",150);
      rect.setAttribute("width",150);
      rect.setAttribute("fill","#ff459a");
      ansvg.appendChild(rect);
 </script> canvas_svg1.html
  • 30. E se não funcionar? Workarounds Às vezes funciona se escrever o SVG de outro jeito
  • 31. E se não funcionar? Workarounds Às vezes funciona se escrever o SVG de outro jeito Fallbacks Em caso de erro, use tecnologia alternativa (HTML/CSS/PNG) <img  src="svgdemo.svg"  
          onerror="this.src='circle.png'"/>
  • 32. E se não funcionar? Workarounds Às vezes funciona se escrever o SVG de outro jeito Fallbacks Em caso de erro, use tecnologia alternativa (HTML/CSS/PNG) Polyfills • Modernizr + bibliotecas snap.svg, raphaël e d3.js • FakeSmile <img  src="svgdemo.svg"  
          onerror="this.src='circle.png'"/>
  • 34. Componentes gráficos <rect> – Retângulo <circle> – Círculo <ellipse> – Elipse <line> – Linha reta <polyline> – Linha com múltiplos segmentos <polygon> – Polígono <image> - Imagem bitmap <text> - Texto <path> - Caminho arbitrário (curvas, linhas, etc.)
  • 35. Pintura Dois atributos para pintar componentes preenchimento (fill) contorno, ou traço (stroke)
  • 36. Pintura Dois atributos para pintar componentes preenchimento (fill) contorno, ou traço (stroke) Três tipos de "tinta" cores sólidas (sRGB) - mesma spec do CSS. 
 Ex: red,  lightblue,  #a09,  #AA0099,  rgb(128,64,32) gradientes texturas (patterns)
  • 37. Preenchimento fill (atributo ou CSS) = cor <rect  ...  fill="rgb(255,255,0%)"  />   <rect  ...  style="fill:  rgb(100%,100%,0%)"  />   fill-opacity = componente alfa (transparência) De 0 (transparente) a 1 (opaco). <svg  xmlns="http://www.w3.org/2000/svg">
        <circle  r="50"  cx="100"  cy="100"  fill="green"/>  
        <circle  r="50"  cx="125"  cy="125"  fill="#008000"  
                                                                          fill-­‐opacity="0.5"/>  
        <circle  r="50"  cx="150"  cy="150"  fill="#080"  
                                                                          fill-­‐opacity="0.2"/>  
 </svg> fill.svg
  • 38. Traço stroke: cor stroke-width: espessura stroke-opacity: transparência (alfa) stroke-dasharray Valores para tracejado (seqüência de traços e vazios) <?xml  version="1.0"  encoding="UTF-­‐8"?>
 <svg  xmlns="http://www.w3.org/2000/svg"  viewBox="0  0  300  300">
        <circle  r="50"  cx="100"  cy="100"  fill-­‐opacity="0"  
           stroke="green"  stroke-­‐width="1"    stroke-­‐dasharray="5  5"/>  
        <circle  r="50"  cx="125"  cy="125"  fill-­‐opacity="0"  
          stroke="green"  stroke-­‐width="5"    stroke-­‐opacity="0.5"/>  
        <circle  r="50"  cx="150"  cy="150"  fill-­‐opacity="0"  
          stroke="green"  stroke-­‐width="20"  stroke-­‐opacity="0.2"/>  
 </svg> traco.svg
  • 39. Retângulo <rect> x, y – coords de posição (default: 0) width, height – largura, altura (obrigatório) rx, ry – raios horizontal e vertical para 
 cantos arredondados (opcional) <rect  x="25"  y="50"  width="90"  height="90"         stroke="green"  fill-­‐opacity="0"  stroke-­‐width="1"         stroke-­‐dasharray="5  5"/>     <rect  x="50"  y="150"  width="125"  height="125"  rx="40"  ry="40"       stroke="red"  fill-­‐opacity="0"  stroke-­‐width="5"         stroke-­‐opacity="0.5"  />  
 <rect  x="150"  y="50"  width="150"  height="150"         stroke="green"  fill="blue"  fill-­‐opacity="0.2"         stroke-­‐width="20"  stroke-­‐opacity="0.2"  /> rect.svg
  • 40. Círculo <circle> cx, cy – coords. do centro (default: 0) r – raio (obrigatório) <?xml-­‐stylesheet  type="text/css"  
                                  href="circulos.css"?>   <svg  xmlns="http://www.w3.org/2000/svg"            viewBox="0  0  300  300">        <circle  r="75"  cx="100"  cy="100"  
                      id="c2"/>        <circle  r="50"  cx="150"  cy="150"  
                      id="c1"/>   </svg> circle  {
    stroke-­‐width:  10;  
    stroke-­‐opacity:  0.5;
 }
 #c1  {
    fill:  green;
    stroke:  blue;
    fill-­‐opacity:  0.6;
 }
 #c2  {
    fill:  #f00;
    stroke:  yellow;
 } circulos.css circulocss.svg
  • 41. Linha simples <line> x1, y1 – coords do primeiro ponto x2, y2 – coords do segundo ponto <line  x1="25"  y1="50"  x2="190"  y2="190"  
   stroke="blue"  stroke-­‐width="1"  stroke-­‐dasharray="5  5"/>     
 <line  x1="50"  y1="150"  x2="125"  y2="125"  
   stroke="red"  stroke-­‐width="5"  stroke-­‐opacity="0.5"/>    
 <line  x1="150"  y1="50"  x2="150"  y2="150"  
   stroke="green"  stroke-­‐width="20"  stroke-­‐opacity="0.2"  />   line.svg
  • 42. Elipse <ellipse> cx, cy – coordenadas do centro rx, ry – raios horizontal e vertical <svg  xmlns="http://www.w3.org/2000/svg">
        <ellipse  cx="200"  cy="100"  rx="190"  ry="90"  
     fill="yellow"  fill-­‐opacity="0.5"  stroke="#00f"  
     stroke-­‐width="1"  stroke-­‐dasharray="5  5"/>  
        <ellipse  cx="250"  cy="150"  rx="75"  ry="125"  
     fill="red"  fill-­‐opacity="0.2"    stroke="#f00"  
     stroke-­‐width="5"  stroke-­‐opacity="0.5"/>  
        <ellipse  cx="300"  cy="200"  rx="40"  ry="150"  
     fill="black"  fill-­‐opacity="0"  stroke="#0f0"  
     stroke-­‐width="20"  stroke-­‐opacity="0.2"  />  
 </svg> ellipse.svg
  • 43. Polígono aberto <polyline> points – lista de coords x,y 
 com pontos da linha <polyline  points="150,150                                          50,150                                        100,20                                        150,50                                        200,200                                          50,200                                          20,154                                          48,82                                          32,20"  
                        fill="yellow"  fill-­‐opacity="0.2"                              stroke="red"  stroke-­‐width="10"/>   polyline.svg (0,0) 150 150
  • 44. Polígono fechado <polygon> Similar a <polyline>, mas sempre fechada points – lista de coords x,y com vértices <polygon  points="150,150                                      50,250                                      50,150                                    100,50  
                                  200,50                                    250,100                                    300,150                                    350,250                          250,250"  
     fill="red"  fill-­‐opacity="0.2"    
     stroke-­‐opacity="0.5"  stroke="navy"  
     stroke-­‐width="10"  stroke-­‐linecap="round"  
     stroke-­‐linejoin="round"  stroke-­‐dasharray="40  20  5  20"/>   polygon.svg
  • 45. Texto <text> • Não quebra linha! Use <tspan>: <text>
      <tspan>linha  1</tspan>
      <tspan  x="0"  dy="16">linha  2</tspan>
 </text> <svg  ...  viewBox="-­‐10  -­‐50  200  200">
    <rect  x="0"  y="0"  height="36"                    width="180"  ...  />
    <text  font-­‐size="36"                  x="0"                    y="0">Agora</text>
 </svg> Posição (0,0): baseline só esta parte é visível se viewBox começar em 0,0 Retângulo e texto com mesmas coordenadas x,y linha 1 linha 2
  • 46. Imagens <image> Insere PNG ou JPEG em SVG Ou clipping, mask, fill, patterns Namespace xlink opcional se embutido em HTML <svg  width="4in"  height="4in"  version="1.1"
    xmlns="http://www.w3.org/2000/svg"  
    xmlns:xlink="http://www.w3.org/1999/xlink">
 
    <image  x="200"  y="200"  
                  width="100px"  height="100px"
                  xlink:href="pluto.png">
        <title>Imagem  de  Plutão</title>
    </image>
 </svg> Imagem de Plutão
  • 47. Referências e IDs Objetos referenciáveis têm atributo id Podem ser referenciados 'por 
 objetos locais ou remotos <circle  
        id="obj1"  .../>   <gradient  
        id="grad"  .../>
  • 48. Referências e IDs Objetos referenciáveis têm atributo id Podem ser referenciados 'por 
 objetos locais ou remotos Referência pode ser direta 
 via atributos XLink xlink:href      <use  xlink:href="#obj1"  />        <use  xlink:href="http://w.com/outro.svg#obj1"  /> <circle  
        id="obj1"  .../>   <gradient  
        id="grad"  .../>
  • 49. Referências e IDs Objetos referenciáveis têm atributo id Podem ser referenciados 'por 
 objetos locais ou remotos Referência pode ser direta 
 via atributos XLink xlink:href      <use  xlink:href="#obj1"  />        <use  xlink:href="http://w.com/outro.svg#obj1"  />   Ou indireta, através da função url(), 
 em atributos SVG      <rect  fill="url(#grad)"  />        <rect  fill="url(http://w.com/outro.svg#grad)"  /> <circle  
        id="obj1"  .../>   <gradient  
        id="grad"  .../>
  • 50. <defs> e <use> Elementos em bloco <defs> não são desenhados Para desenhar, referencie com <use> <svg  ...>
    <defs>
        <rect  id="preto"  x="0"  y="0"  width="20"  height="20"
                    fill="rgb(64,32,32)"  />
        <rect  id="branco"  x="0"  y="0"  width="20"  height="20"  
                    fill="rgb(255,225,200)"  />
    </defs>
 
    <use  xlink:href="#preto"  />
    <use  xlink:href="#branco"  transform="translate(20)"/>
    <use  xlink:href="#branco"  transform="translate(0,20)"/>
    <use  xlink:href="#preto"    transform="translate(20,20)"/>
 </svg>
  • 51. Grupos <g> Trata conjunto de objetos como um Elementos herdam estilos e atributos Pode conter outros grupos <svg  ...>
    <defs>          ...
        <g  id="quatroCasas"  transform="translate(10,10)">
            <use  xlink:href="#preto"  />
            <use  xlink:href="#branco"  transform="translate(20)"/>
            <use  xlink:href="#branco"  transform="translate(0,20)"/>
            <use  xlink:href="#preto"    transform="translate(20,20)"/>
        </g>
    </defs>      <use  xlink:href="#quatroCasas"  />
 </svg>
  • 52. Por que usar <defs> e <use>? Tabuleiro de xadrez SVG
 sem <defs> e <use> <svg  xmlns="http://www.w3.org/2000/svg"  width="1050"  height="600"  viewBox="0  0  1050  600">
        <rect  x="0"  y="0"  width="20"  height="20"  fill="rgb(64,32,32)"  transform="translate(20)"  />
        <rect  x="0"  y="0"  width="20"  height="20"  fill="rgb(255,225,200)"    transform="translate(40)"  />
        <rect  x="0"  y="0"  width="20"  height="20"  fill="rgb(64,32,32)"  transform="translate(60)"  />
        <rect  x="0"  y="0"  width="20"  height="20"  fill="rgb(255,225,200)"    transform="translate(80)"  />
        <rect  x="0"  y="0"  width="20"  height="20"  fill="rgb(64,32,32)"  transform="translate(100)"  />
        <rect  x="0"  y="0"  width="20"  height="20"  fill="rgb(255,225,200)"    transform="translate(120)"  />
        <rect  x="0"  y="0"  width="20"  height="20"  fill="rgb(64,32,32)"  transform="translate(140)"  />
        <rect  x="0"  y="0"  width="20"  height="20"  fill="rgb(255,225,200)"    transform="translate(160)"  />
        <rect  x="0"  y="0"  width="20"  height="20"  fill="rgb(255,225,200)"  transform="translate(20,20)"  />
        <rect  x="0"  y="0"  width="20"  height="20"  fill="rgb(64,32,32)"  transform="translate(40,20)"  />
        <rect  x="0"  y="0"  width="20"  height="20"  fill="rgb(255,225,200)"  transform="translate(60,20)"  />
        <rect  x="0"  y="0"  width="20"  height="20"  fill="rgb(64,32,32)"  transform="translate(80,20)"  />
        <rect  x="0"  y="0"  width="20"  height="20"  fill="rgb(255,225,200)"  transform="translate(100,20)"  />
        <rect  x="0"  y="0"  width="20"  height="20"  fill="rgb(64,32,32)"  transform="translate(120,20)"  />
        <rect  x="0"  y="0"  width="20"  height="20"  fill="rgb(255,225,200)"  transform="translate(140,  20)"  />
          ...
        <rect  x="0"  y="0"  width="20"  height="20"  fill="rgb(255,225,200)"  transform="translate(140,140)"  />
        <rect  x="0"  y="0"  width="20"  height="20"  fill="rgb(64,32,32)"  transform="translate(160,140)"  />
 </svg> 64  quadrados:  32  +  32 66  linhas   ~3500  chars
  • 53. Tabuleiro com <defs> e <use> <defs>
    <rect  id="preto"    ...  fill="rgb(64,32,32)"  />
    <rect  id="branco"  ...  fill="rgb(255,225,200)"  />
 </defs>
  • 54. <defs>
    <rect  id="preto"    ...  fill="rgb(64,32,32)"  />
    <rect  id="branco"  ...  fill="rgb(255,225,200)"  />
                
    <g  id="quatroCasas">
        <use  xlink:href="#preto"  />
        <use  xlink:href="#branco"  transform="translate(20)"/>
        <use  xlink:href="#branco"  transform="translate(0,20)"/>
        <use  xlink:href="#preto"    transform="translate(20,20)"/>
    </g>   </defs> Tabuleiro com <defs> e <use>
  • 55. <defs>
    <rect  id="preto"    ...  fill="rgb(64,32,32)"  />
    <rect  id="branco"  ...  fill="rgb(255,225,200)"  />
                
    <g  id="quatroCasas">
        <use  xlink:href="#preto"  />
        <use  xlink:href="#branco"  transform="translate(20)"/>
        <use  xlink:href="#branco"  transform="translate(0,20)"/>
        <use  xlink:href="#preto"    transform="translate(20,20)"/>
    </g>
                
    <g  id="filaDupla">
        <use  xlink:href="#quatroCasas"  />
        <use  xlink:href="#quatroCasas"  transform="translate(40)"  />
        <use  xlink:href="#quatroCasas"  transform="translate(80)"  />
        <use  xlink:href="#quatroCasas"  transform="translate(120)"  />
    </g>
 
 </defs> Tabuleiro com <defs> e <use>
  • 56. <defs>
    <rect  id="preto"    ...  fill="rgb(64,32,32)"  />
    <rect  id="branco"  ...  fill="rgb(255,225,200)"  />
                
    <g  id="quatroCasas">
        <use  xlink:href="#preto"  />
        <use  xlink:href="#branco"  transform="translate(20)"/>
        <use  xlink:href="#branco"  transform="translate(0,20)"/>
        <use  xlink:href="#preto"    transform="translate(20,20)"/>
    </g>
                
    <g  id="filaDupla">
        <use  xlink:href="#quatroCasas"  />
        <use  xlink:href="#quatroCasas"  transform="translate(40)"  />
        <use  xlink:href="#quatroCasas"  transform="translate(80)"  />
        <use  xlink:href="#quatroCasas"  transform="translate(120)"  />
    </g>
                
    <g  id="tabuleiro">
        <use  xlink:href="#filaDupla"  />
        <use  xlink:href="#filaDupla"  transform="translate(0,40)"  />
        <use  xlink:href="#filaDupla"  transform="translate(0,80)"  />
        <use  xlink:href="#filaDupla"  transform="translate(0,120)"  />
    </g>
 </defs> Tabuleiro com <defs> e <use>
  • 57. + reuso!<defs>
    <rect  id="preto"    ...  fill="rgb(64,32,32)"  />
    <rect  id="branco"  ...  fill="rgb(255,225,200)"  />
                
    <g  id="quatroCasas">
        <use  xlink:href="#preto"  />
        <use  xlink:href="#branco"  transform="translate(20)"/>
        <use  xlink:href="#branco"  transform="translate(0,20)"/>
        <use  xlink:href="#preto"    transform="translate(20,20)"/>
    </g>
                
    <g  id="filaDupla">
        <use  xlink:href="#quatroCasas"  />
        <use  xlink:href="#quatroCasas"  transform="translate(40)"  />
        <use  xlink:href="#quatroCasas"  transform="translate(80)"  />
        <use  xlink:href="#quatroCasas"  transform="translate(120)"  />
    </g>
                
    <g  id="tabuleiro">
        <use  xlink:href="#filaDupla"  />
        <use  xlink:href="#filaDupla"  transform="translate(0,40)"  />
        <use  xlink:href="#filaDupla"  transform="translate(0,80)"  />
        <use  xlink:href="#filaDupla"  transform="translate(0,120)"  />
    </g>
 </defs>   
 <use  xlink:href="#tabuleiro"  /> 28  linhas   ~1400  chars
  • 58. Caminhos (paths) • Seqüências de comandos (letras) + coordenadas • Ex: M 50,50 L 120,120 z • Comando afeta coordenadas seguintes (até novo comando) • Maiúsculas = coords absolutas / Minúsculas = relativas
  • 59. Caminhos (paths) • Seqüências de comandos (letras) + coordenadas • Ex: M 50,50 L 120,120 z • Comando afeta coordenadas seguintes (até novo comando) • Maiúsculas = coords absolutas / Minúsculas = relativas • Quatro tipos de movimentos • M: move até um ponto sem desenhar • L, H, V: desenha linha reta até um ponto (L,  l,  H,  h,  V,  v) • C, S, Q, T, A (curve to): desenha curva a um ponto; pode ser • Bézier cúbica com dois pontos tangenciais (C,  c,  S,  s) • Bézier quadrática com um ponto tangencial (Q,  q,  T,  t) • Arco elíptico ou circular (A,  a) • Z: fecha a figura (Z ou z)
  • 60. Linhas retas H ou h + coordenadas x linhas retas horizontais V ou v + coordenadas y linhas retas verticais L ou l + pares de coords x,y linhas retas em qq direção 1. M100,100  L150,200  z   (0,0) (100,100) (150,200) 1. Move para (100,100) 2. Desenha linha até (150,200) 3. Fecha figura (não faz nada)
  • 61. Linhas retas H ou h + coordenadas x linhas retas horizontais V ou v + coordenadas y linhas retas verticais L ou l + pares de coords x,y linhas retas em qq direção 1. M100,100  L150,200  z   2. M100,100  L150,200  h50  z   ( ( (0,0) (200,200) z 1. Parte de (150,200) 2. Avança 50 unidades na horizontal 3. Fecha figura (desenha linha)
  • 62. Linhas retas H ou h + coordenadas x linhas retas horizontais V ou v + coordenadas y linhas retas verticais L ou l + pares de coords x,y linhas retas em qq direção 1. M100,100  L150,200  z   2. M100,100  L150,200  h50  z   3. M100,100  L150,200  h50  v-­‐100  z   ( ( ( (200,100)z z (0,0) 1. Parte de (200,200) 2. Sobe 100 unidades na vertical 3. Fecha figura (desenha linha)
  • 63. Linhas retas H ou h + coordenadas x linhas retas horizontais V ou v + coordenadas y linhas retas verticais L ou l + pares de coords x,y linhas retas em qq direção 1. M100,100  L150,200  z   2. M100,100  L150,200  h50  z   3. M100,100  L150,200  h50  v-­‐100  z   4. M100,100  L150,200  h50  v-­‐100  l-­‐50,50  z   (0,0) (150,150) z (100,100) ( (200,z z 1. Parte de (200,100) 2. Volta 50 un. e desce 50 un. 3. Fecha figura (desenha linha)
  • 64. Linhas retas H ou h + coordenadas x linhas retas horizontais V ou v + coordenadas y linhas retas verticais L ou l + pares de coords x,y linhas retas em qq direção 1. M100,100  L150,200  z   2. M100,100  L150,200  h50  z   3. M100,100  L150,200  h50  v-­‐100  z   4. M100,100  L150,200  h50  v-­‐100  l-­‐50,50  z   5. M100,100  L150,200  h50  v-­‐100  l-­‐50,50  L150,50  100,50  z (100,100) (150,200) (200,200) (200,100) ( (150,50) (100,50) z z z z (0,0) 1. Parte de (150,150) 2. Desenha linha para (150,50) 3. Desenha linha para (100,50) 4. Fecha figura (desenha linha)
  • 65. Curvas Bézier cúbicas Curva normal: C ou c com coordenadas x1,y1  x2,y2 x,y onde x,y = coordenadas do ponto final x1,y1  = coordenadas do controle tangencial do ponto inicial x2,y2  = coordenadas do controle tangencial do ponto final Curva suave: S ou s com coordenadas x2,y2 x,y Controle tangencial do ponto inicial é implícito (simétrico a controle final da curva anterior) = junção suave <path  
  d="M100,200            C100,100  250,100  250,200            S400,300  400,200"  ...  /> M100,200 C100,100 250,100 250,200 400,200 S400,300 Ponto  de  controle  simétrico  x1,y1   calculado  automaticamente
  • 66. Curvas Bézier quadráticas Curva normal: Q ou q com coordenadas  x1,y1   x,y  onde x,y = coordenadas do ponto final x1,y1 = coordenadas do (único) controle tangencial Curva suave: T ou t com coordenadas x,y Controle tangencial é implícito (simétrico a controle tangencial da curva anterior) = junção suave <path  
  d="M  200,300            Q  400,50  600,300            T  1000,300"     ...  /> (200,300) (400,50) (600,300) (1000,300) Ponto  de  controle  simétrico   calculado  automaticamente
  • 67. Arcos Arco em SVG = curva na borda de um elipse Comando A ou a; sintaxe: A  rx,ry  θ  laf,sf  x,y onde rx e ry = raio horizontal e vertical do elipse θ = ângulo de rotação do eixo x onde está o elipse laf = flag do arco maior, sf = sweep flag (veja exemplo) x,y = coordenadas do ponto final ry rx θ   x y
  • 68. Flags de arcos M-­‐100,-­‐100    L0,-­‐100  
 A100,100  0  0,1  -­‐100,0  
 L-­‐100,-­‐100  z   M0,0    L0,-­‐100  
 A100,100  0  0,0  -­‐100,0  
 L0,0  z   M-­‐100,-­‐100    L0,-­‐100  
 A100,100  0  1,0  -­‐100,0  
 L-­‐100,-­‐100  z   M0,0    L0,-­‐100  
 A100,100  0  1,1  -­‐100,0  
 L0,0  z
  • 69. Exemplos de arcos simples <path  d="M300,200  h-­‐150  a150,150  0  1,0  150,-­‐150  z"
            fill="red"  stroke="blue"  stroke-­‐width="5"  />   
 <path  d="M275,175  v-­‐150  a150,150  0  0,0  -­‐150,150  z"
            fill="yellow"  stroke="blue"  
            stroke-­‐width="5"  /> <path  d="M600,350  l  50,-­‐50  
                  a25,25  -­‐30  0,1  50,-­‐25  l  50,-­‐25  
                  a25,50  -­‐30  0,1  50,-­‐25  l  50,0  
                  a25,75      0  0,1  50,0      l  50,25  
                  a25,100  30  0,1  50,25    l  50,50"   
              fill="none"  stroke="red"                  stroke-­‐width="5"    /> Fonte:  W3C  (SVG  spec)
  • 70. <defs>
      <path  d="M100,200  
                        C100,100  250,100  250,200
                        S100,300  100,200"  
                  id="circulo"  stroke="red"                      stroke-­‐width="1"                      fill-­‐opacity="0">
      </path>
 </defs>   ...   
 <use  xlink:href="#circulo"  stroke-­‐dasharray="5  5"  />
 <text  font-­‐size="15"  x="100"  dy="-­‐10"  id="texto"                font-­‐family="monospace">
      <textPath  xlink:href="#circulo">     palavras  que  giram  confundem  as  letras        </textPath>
 </text> <textPath>
  • 71. View Port • Área onde o SVG é desenhado • Dois sistemas de coordenadas (inicialmente idênticos) • Dimensões, proporções, unidade, etc. herdadas pelos objetos contidos no SVG
  • 72. View Port • Área onde o SVG é desenhado • Dois sistemas de coordenadas (inicialmente idênticos) • Dimensões, proporções, unidade, etc. herdadas pelos objetos contidos no SVG • Cada componente SVG pode ter seu próprio sistema de coordenadas, ou herdá-lo • Atributo viewBox="min-x min-y largura altura" + outros atributos com unidades, dimensões, aspect ratio, etc. • Atributo transform="funções de transformação 2D"
  • 73. Atributo transform Altera sistema de coordenadas relativo matrix(a11,a12,a13,a21,a22,a23)
      matriz de transformações
 translate(tx)  ou  translate(tx,  ty)
 deslocamento da origem scale(sx)  ou  scale(sx,  sy)
      redimensionamento   rotate(θ)  ou  rotate(θ,  cx,  cy)
      giro de θ graus sobre origem ou cx,cy   skewX(θ)  e  skewY(θ)
      cisalhamento de θ graus [ ] a11  a12  a13
 a21  a22  a23
 0      0      1
  • 74. translate() <defs>
      <g  id="coords">
          <line  x1="10"  y1="10"  
                      x2="200"  y2="10"/>
          <line  x1="10"  y1="10"  
                      x2="10"  y2="200"/>
          <text  x="200"  
                      y="20">x</text>
          <text  x="20"  
                      y="200">y</text>
      </g>   </defs>
        
 <use  xlink:href="#coords"              stroke="black"  />
        
 <use  xlink:href="#coords"              stroke="red"
        transform="translate(100,100)"  /> translate.svg
  • 75. scale()
 e rotate() rotate_scale.svg ...   
 <use  xlink:href="#coords"              stroke="black"     />
        
 <use  xlink:href="#coords"              stroke="red"
          transform="translate(200,100)                                rotate(30)                              scale(1.5)"  />  
  • 76. skew() Distorção  de     cisalhamento
 (graus) ...
        
 <use  xlink:href="#coords"              stroke="black"  />
        
 <use  xlink:href="#coords"              stroke="red"
          transform="translate  (100,100)                                    skewX(50)"  />
 skew.svg
  • 77. Em cascata <g  transform="translate(-­‐10,-­‐20)">
    <g  transform="scale(2)">
        <g  transform="rotate(45)">
            <g  transform="translate(5,10)">
                <!-­‐-­‐  elementos  -­‐-­‐>
            </g>
        </g>
    </g>
 </g> <g  transform="translate(-­‐10,-­‐20)                                scale(2)                                rotate(45)                                        translate(5,10)">
        <!-­‐-­‐  elementos  -­‐-­‐>
 </g> Fonte:  W3C  (especificação  SVG) Transformações equivalentes
  • 78. Gradientes <linearGradient> 
 Atributos x1/x2 e y1/y2 <radialGradient> 
 Atributos cx, cy e r Valores relativos ao gráfico (0 - 100%) Pontos de parada marcados com <stop> offset   x2   90% y1       10% vetor  perpendicular <linearGradient  x1="0"  y1="0.1"  x2="0.9"  y2="0"  id="arcoiris">
      <stop  offset="0"      stop-­‐color="rgb(255,0,0)"  />
      <stop  offset="0.3"  stop-­‐color="rgb(180,180,0)"  />
      <stop  offset="0.6"  stop-­‐color="rgb(0,180,0)"  />
      <stop  offset="0.8"  stop-­‐color="blue"  />
      <stop  offset="1"      stop-­‐color="rgb(128,0,220)"  />
 </linearGradient>
  • 79. Máscaras <mask> Multiplicação com luminância de fonte (imagem ou gráfico) Referenciada em <image> com atributo mask <defs>
    <mask  id="fishMask"  x="0"  y="0"  width="300"  height="150">
        <image  xlink:href="TheFishMask.png"  ...  />
    </mask>
 </defs>
 <rect  x="0"  y="0"  width="600"  height="300"  fill="aquamarine"  />
 <g  transform="translate(100,50)">
    <image  xlink:href="TheFish.png"  mask="url(#fishMask)"  />
 </g> TheFishMask.png   (fonte) TheFish.png Resultadox =
  • 80. Clipping <clipPath> <defs>
        <clipPath  id="poly">
            <circle  r="152"  
                            cx="254"  
                            cy="245"/>
        </clipPath>
 </defs>
 <image  xlink:href="pluto.png"                  x="0"  y="0"      
              height="500"        
              width="500"  
              clip-­‐path="url(#poly)"/> Faz o mesmo que <mask> de 1-bit (P & B) ++ ClippedImage.svgClippedMoon.svg
  • 81. Filtros <filter> <defs>      <filter  id="f2"  x="-­‐100"  y="-­‐100"                        height="200"  width="200">
        <feGaussianBlur  stdDeviation="50,0"                                            in="SourceGraphic"/>
    </filter>   
    <filter  id="f1">
        <feGaussianBlur  stdDeviation="5"  />
    </filter>
 </defs>   
 <text  font-­‐size="48"  ...  filter="url(#f1)">Voce  precisa  de  oculos?</text>   
 <polygon  points="..."  fill="red"  fill-­‐rule="evenodd"/>
 <circle  cx="250"  cy="283"  r="75"  fill="blue"  filter="url(#f1)"  />
 
 <image  xlink:href="TheFish.png"  ...  filter="url(#f2)"  />
  • 82. Símbolos e marcadores Ícones e setas reutilizáveis <polyline  points="0,50  25,50"  
                    marker-­‐end="url(#setaPNP)"/>   
 <symbol  id="transistorPNP"
                viewBox="-­‐1  -­‐1  22  22">      <use  xlink:href="#baseColetor"  />
    <line  x1="0"  x2="9"  y1="20"  y2="10"                    marker-­‐end="url(#seta)"  />             </symbol>   
 <marker  id="setaPNP"  viewBox="0  0  10  10"  
                refX="0"  refY="5"  orient="auto"                    markerUnits="userSpaceOnUse"  
                markerWidth="50"  markerHeight="50">
    <use  xlink:href="#transistorPNP"  x="0"  y="0"  height="10"  
              width="10"  transform="rotate(-­‐90,5,5)"  />
 </marker> Símbolo "transistorPNP" sendo reusado como "seta" de uma polyline
  • 83. Image sprites e fontes Símbolos podem ser agrupados em um SVG e referenciados pelo ID para reuso • Coleção de fontes usando <font>, <glyph>, ... • Coleção de ícones usando <symbol>, ... Referenciáveis via ID / XLink <defs>  
        <symbol  id="twitter-­‐icon"  viewBox="0  0  32  32">
              <path  d="..."  />
        </symbol>  ...
 </defs>
 <use  xlink:href="#twitter-­‐icon"  />   <svg  ...>  ...
      <use  xlink:href="/sprites/icons.svg#twitter-­‐icon"  />
 </svg>
  • 84. SVG com JavaScript <svg  xmlns="http://www.w3.org/2000/svg">
    <script><![CDATA[
        function  acende(evt)  {  
              evt.target.setAttribute("opacity",  "1.0");  
        }  
        function  apaga(evt)  {  
              evt.target.setAttribute("opacity",  "0.4");  
        }
    ]]></script>  
    <g>  
        <rect  x="10"  y="100"  width="45"  height="45"                        fill="red"  opacity="0.4"              onmouseover="acende(evt)"  onmouseout="apaga(evt)"/>  
        <rect  x="65"  y="100"  width="45"  height="45"                        fill="blue"  opacity="0.4"              onmouseover="acende(evt)"  onmouseout="apaga(evt)"/>  
    </g>    
 </svg>
  • 85. DOM 2.0 + namespaces Necessário para elementos e atributos
 que usam namespaces (ex: xlink) Em vez de getAttribute, getElement, etc. use getAttributeNS, getElementNS, etc. var  svgNS  =  "http://www.w3.org/2000/svg";
 var  xlinkNS  =  "http://www.w3.org/1999/xlink";   
 var  circle  =  document.createElementNS(svgNS,"use");
 circle.setAttributeNS(null,"x",500);
 circle.setAttributeNS(null,"y",500);
 circle.setAttributeNS(xlinkNS,  "href",  
                                                              "#tabuleiro");
  • 86. Criação dinâmica de objetos function  criarCirculo(evt)  {   
      var  randomX  =  Math.floor(  Math.random()  *  
              document.rootElement.getAttributeNS(null,  "width"));   
      var  randomY  =  Math.floor(  Math.random()  *            
              document.rootElement.getAttributeNS(null,  "height"));   
      var  color  =  "rgb("  +  Math.floor(Math.random()  *  256)  +",  "+  
                                                Math.floor(Math.random()  *  256)  +",  "+  
                                                Math.floor(Math.random()  *  256)  +")";                                                      ... script_3.js randomY randomX width height Calculando valores para criar círculos SVG em posições e cores aleatórias Dimensões  do  SVG (exemplo: parte 1 de 3)
  • 87. function  criarCirculo(evt)  {                                          ...
 var  svgNS  =  "http://www.w3.org/2000/svg";
      var  circulo  =  
              document.createElementNS(svgNS,  "circle");
      circulo.setAttributeNS(null,  "cx",  randomX);
      circulo.setAttributeNS(null,  "cy",  randomY);
      circulo.setAttributeNS(null,  "fill",  color);
      circulo.setAttributeNS(null,  "r",                  evt.target.getAttributeNS(null,  "r"));
      
      circulo.addEventListener("click",  criarCirculo,  false);
      
      evt.target.parentNode.appendChild(circulo);
 } script_3.js Criação dinâmica de objetos (exemplo: parte 2 de 3) Círculo criado com cx, cy e fill aleatórios
 adicionado ao parentNode (<svg>)
  • 88. <svg  xmlns="http://www.w3.org/2000/svg"  
          width="500"  height="500">   
      <script  xlink:href="script_3.js"  />   
      <circle  cx="125"  cy="40"    r="5"    fill="green"  
                      onclick="criarCirculo(evt)"/>
      <circle  cx="225"  cy="100"  r="10"  fill="blue"    
                      onclick="criarCirculo(evt)"/>
      <circle  cx="325"  cy="170"  r="15"  fill="red"      
                      onclick="criarCirculo(evt)"/>   
 </svg> script_3.svg Criação dinâmica de objetos (exemplo: parte 3 de 3) SVG carrega o script e cria três círculos iniciais
  • 89. <svg  xmlns="http://www.w3.org/2000/svg"  
          width="500"  height="500">   
      <script  xlink:href="script_3.js"  />   
      <circle  cx="125"  cy="40"    r="5"    fill="green"  
                      onclick="criarCirculo(evt)"/>
      <circle  cx="225"  cy="100"  r="10"  fill="blue"    
                      onclick="criarCirculo(evt)"/>
      <circle  cx="325"  cy="170"  r="15"  fill="red"      
                      onclick="criarCirculo(evt)"/>   
 </svg> script_3.svg Criação dinâmica de objetos (exemplo: parte 3 de 3) SVG carrega o script e cria três círculos iniciais
  • 90. Tesselações e outros algoritmos Diagrama de Voronoi http://bl.ocks.org/mbostock/4060366 com SVG DOM ou d3.js
  • 91. Animação sem scripts <set>
 <animate>
 <animateColor>
 <animateMotion>
 <animateTransform> <rect  x="50"  y="50"  fill="red"  >        <animate  attributeName="x"                          to="200"                            dur="3s"                          begin="click"                          fill="freeze"  />   </rect>   <rect  x="200"  y="50"  fill="blue"  opacity="0.5"/> SMIL
 animações declarativas 
 (como em CSS3) atributo que irá variar ("x") valor final do atributo "x" duração da animação evento que dispara a animação o que fazer no final
  • 92. Animação sem scripts <set>
 <animate>
 <animateColor>
 <animateMotion>
 <animateTransform> <rect  x="50"  y="50"  fill="red"  >        <animate  attributeName="x"                          to="200"                            dur="3s"                          begin="click"                          fill="freeze"  />   </rect>   <rect  x="200"  y="50"  fill="blue"  opacity="0.5"/> smil_2.svg SMIL
 animações declarativas 
 (como em CSS3)
  • 93. Animação sem scripts <set>
 <animate>
 <animateColor>
 <animateMotion>
 <animateTransform> <rect  x="50"  y="50"  fill="red"  >        <animate  attributeName="x"                          to="200"                            dur="3s"                          begin="click"                          fill="freeze"  />   </rect>   <rect  x="200"  y="50"  fill="blue"  opacity="0.5"/> smil_2.svg SMIL
 animações declarativas 
 (como em CSS3)
  • 94. <animate values> Animação ignora to/from e usa valores especificados calcMode determina como os valores são usados
 (discreto, linear, uniforme, spline, etc.) <svg  xmlns="http://www.w3.org/2000/svg">
        <image  id="trends"  xlink:href="TrendsMonster.svg"  
                      height="100"  width="250"  x="50"  y="50"  />
        <g  stroke="blue"  stroke-­‐width="2">
                <line  x1="200"  x2="200"  y1="175"  y2="225"/>  ...  </g>  ...
        <animate  attributeName="x"  calcMode="linear"                            values="50;150;200;500"                              dur="4s"  begin="click"                              fill="freeze"                            xlink:href="#trends"  />
 </svg> smil_3_values.svg Ex: o monstro leva o mesmo tempo em cada trecho
  • 95. values + keyTimes keyTimes associa intervalo a cada valor em values 0.0 a 0.1: 10% do tempo para ir de x=50 a x=200 0.1 a 0.9: 90% do tempo para ir de x=200 a x=350 0.9 a 1.0: 10% do tempo para ir de x=350 a x=500 0s 0.4s 3.6s <svg  xmlns="http://www.w3.org/2000/svg">        <image  id="openweb"  xlink:href="OpenWebMonster.svg"  x="50"  y="50"/>
    <animate        values="50  ;  200;  350;  500"  attributeName="x"                        keyTimes="0.0;  0.1;  0.9;  1.0"  
                  begin="click"  fill="freeze"  dur="4s"  xlink:href="#openweb"  />
 </svg> smil_4_keyTimes.svg
  • 96. values + keyTimes + keySplines Trecho 1: movimento linear Trecho 2: começa lento, acelera no meio, depois desacelera Trecho 3: dispara no início e desacelera até parar  <animate    attributeName="x"  values="50;    200;      350;  500"  
                      dur="4s"                keyTimes="0;  0.333;  0.667;  1"  
                      begin="click"  keySplines="0.0,0.0        1.0,1.0;  
                                                                            0.5,0.0        0.5,1.0;  
                                                            0.0,0.75    0.25,1.0;"
                                                                                                                                      calcMode="spline"
                                                                        fill="freeze"                                                                            xlink:href="#security"  /> smil_5_keySplines.svg
  • 97. <animateTransform> Porque <animate> não funciona com funções de transformação de coordenadas <animateTransform  
          attributeName="transform"
          type="rotate        ou 
                      translate  ou  
                      scale          ou  
                      skewX          ou  
                      skewY           "/>
  • 98. <svg  ...>          <defs>                  <rect  id="r"  x="50"  y="-­‐10"  
                            height="20"  width="75"  
                            rx="10"  fill="blue"  />          </defs>          <g  id="g">                  <use  xlink:href="#r"  opacity="1"/>          </g>   </svg> Exemplo <animateTransform> 
 (parte 1 de 3) Um retângulo com cantos arredondados
  • 99. <g>        <use  xlink:href="#r"  opacity="1"/>        <use  xlink:href="#r"  opacity=".9"    transform="rotate(30)    scale(0.95)"  />        <use  xlink:href="#r"  opacity=".8"    transform="rotate(60)    scale(0.9)"    />        <use  xlink:href="#r"  opacity=".7"    transform="rotate(90)    scale(0.85)"  />        <use  xlink:href="#r"  opacity=".6"    transform="rotate(120)  scale(0.8)"    />        <use  xlink:href="#r"  opacity=".5"    transform="rotate(150)  scale(0.75)"  />        <use  xlink:href="#r"  opacity=".4"    transform="rotate(180)  scale(0.7)  "  />        <use  xlink:href="#r"  opacity=".35"  transform="rotate(210)  scale(0.65)"  />        <use  xlink:href="#r"  opacity=".3"    transform="rotate(240)  scale(0.6)  "  />        <use  xlink:href="#r"  opacity=".25"  transform="rotate(270)  scale(0.55)"  />        <use  xlink:href="#r"  opacity=".2"    transform="rotate(300)  scale(0.5)"    />        <use  xlink:href="#r"  opacity=".15"  transform="rotate(330)  scale(0.45)"  />   </g>   Exemplo <animateTransform> 
 (parte 2 de 3) "Escadaria" 
 em espiral
  • 100. <svg  ...>      <defs>          <rect  id="r"  x="50"  y="-­‐10"  
                    height="20"  width="75"  
                    rx="10"  fill="blue"  />      </defs>      <g  transform="translate(150,150)"          <animateTransform  attributeName="transform"                type="rotate"  begin="0s"  dur="1s"  calcMode="discrete"                values="330;300;270;240;210;180;150;120;90;60;30"                repeatCount="indefinite"/>            <use  xlink:href="#r"  opacity="1"/>                      ...            <use  xlink:href="#r"  opacity=".15"  
                    transform="rotate(330)  scale(0.45)"  />      </g>   </svg> Exemplo <animateTransform> 
 (parte 3 de 3) "Escadaria" 
 girando
  • 101. <animateMotion> Objeto move-se por caminho que pode ser • xlink:href="#path" (referência para um <path> ) • Atributo path: sintaxe do atributo d do elemento <path> • Elemento filho <mpath xlink:href="#path" /> Atributos keyPoints + keyTimes • keyPoints: valores = % da distância percorrida: 0 a 1
 % do caminho total. Ex: 0;  .25;  .5;  .75;  0 • keyTimes: valores = % do tempo transcorrido: 0 a 1
 % da duração total. Ex: 0;  .25;  .5;  .75;  0
  • 102. Exemplo: <animateMotion> O alienígena em órbita elíptica acelera quando se aproxima do Sol <path  id="orbita"  ...
      d="M  20,175                                                        A  244,220  0  1,0  493,175                          A  244,220  0  0,0    20,175"/>
 
 <image  x="0"  y="-­‐100"                  xlink:href="PayMonster.svg"                  height="80"  width="200"  >
      <animateMotion  dur="10s"                            repeatCount="indefinite"                        rotate="auto"                                        calcMode="spline"
                        keyTimes="0;1"                          keyPoints="0;1"
                    keySplines="0.75,  0.25                                                    0.25,  0.75">
        <mpath  xlink:href="#orbita"/>
      </animateMotion>
 </image> smil_6_motion.svg
  • 103. SMIL vs. JS SMIL é padrão W3C e parte da spec SVG 1.1 SMIL é mais eficiente (menos uso de CPU) SMIL é declarativo (+ simples, + reuso)
  • 104. SMIL vs. JS SMIL é padrão W3C e parte da spec SVG 1.1 SMIL é mais eficiente (menos uso de CPU) SMIL é declarativo (+ simples, + reuso) SMIL é limitado (dependendo da complexidade, pode ser mais fácil usar scripts) SMIL não é suportado no MSIE (troque
 por polyfills em JS: + uso de CPU
  • 105. SMIL vs. JS SMIL é padrão W3C e parte da spec SVG 1.1 SMIL é mais eficiente (menos uso de CPU) SMIL é declarativo (+ simples, + reuso) SMIL é limitado (dependendo da complexidade, pode ser mais fácil usar scripts) SMIL não é suportado no MSIE (troque
 por polyfills em JS: + uso de CPU SMIL foi marcado como deprecated pelo Google! (agosto 2015)
  • 106. Qual a alternativa? • Google sugere usar polyfills • Solução rápida mas ineficiente (scripts, +CPU)
  • 107. Qual a alternativa? • Google sugere usar polyfills • Solução rápida mas ineficiente (scripts, CPU) • Bibliotecas que geram SVG e CSS http://d3js.org/http://snapsvg.io/
  • 108. Qual a alternativa? • Google sugere usar polyfills • Solução rápida mas ineficiente (scripts, CPU) • Bibliotecas que geram SVG e CSS • Animações CSS 3! http://d3js.org/http://snapsvg.io/
  • 109. Alternativas W3C HTML5 Canvas CSS SVG Gradientes Filtros Animação
 declarativa DOM Figuras Caminhos Manipulação de pixels Figuras
 são objetos Estilos Patterns Curvas Fontes Transform 2D Transformadas
 + anim 3D Masks Transições Grupos Texto Image XML Fill/stroke Clipping Símbolos Há uma sobreposição de soluções Sombras Reflexos
  • 110. SVG + animações SMIL <g  class="monster-­‐trends__left-­‐arm">      <use  xlink:href="#left-­‐arm-­‐background"  
              fill="pink"  stroke="blue"/>      <use  xlink:href="#left-­‐arm-­‐detail"  fill="blue"  />      <animateTransform  attributeName="transform"  dur="2s"                values="0  60  30;-­‐45  60  35;0  60  30"  
            type="rotate"  
            repeatCount="indefinite"/>           </g>   <g  class="monster-­‐trends__right-­‐arm">      <use  xlink:href="#right-­‐arm-­‐background"  
              fill="yellow"  stroke="blue"/>      <use  xlink:href="#right-­‐arm-­‐detail"  fill="blue"  />      <animateTransform  attributeName="transform"  dur="2s"                type="rotate"  values="0  120  30;45  120  35;0  120  30"  
            repeatCount="indefinite"/>   </g>
  • 111. SVG + animações CSS3 <g  class="monster-­‐trends__right-­‐arm">      <use  xlink:href="#right-­‐arm-­‐background"  
              fill="yellow"  stroke="blue"/>      <use  xlink:href="#right-­‐arm-­‐detail"  fill="blue"  />   </g> <style  type="text/css">      .monster-­‐trends__right-­‐arm  {              animation:  right-­‐arm-­‐values  2s  infinite;              transform-­‐origin:  30%  70%;      }                                  @keyframes  right-­‐arm-­‐values  {              0%      {  transform:  rotate(0deg);  }              50%    {  transform:  rotate(45deg);  }              100%  {  transform:  rotate(0deg);  }      }   </style>
  • 112. SVG2 Working draft! • Muito mais integração com CSS • CSS compositing & blending • CSS3 2D+3D transforms • CSS masking • Filter Effects 1.0 • CSS Color • Paint servers (+CSS gradients em SVG) • Elemento <star> • Interoperabilidade com HTML5 Canvas • Novos objetos em SVG DOM • ...
  • 113. Conclusões SVG 1.1 é solução eficiente para gráficos vetoriais • Leve, escalável, reusável e padrão aberto W3C • Elementos e estilos manipuláveis como objetos • Compatibilidade com HTML5 e CSS3 • Suporte quase universal para gráficos estáticos na Web • Amplo suporte em ferramentas gráficas
  • 114. Conclusões SVG 1.1 é solução eficiente para gráficos vetoriais • Leve, escalável, reusável e padrão aberto W3C • Elementos e estilos manipuláveis como objetos • Compatibilidade com HTML5 e CSS3 • Suporte quase universal para gráficos estáticos na Web • Amplo suporte em ferramentas gráficas Ainda existem problemas • Compatibilidade (resolvidos com workarounds) • Falta de suporte para animações • Duplicação de funcionalidades
  • 115. Conclusões SVG 1.1 é solução eficiente para gráficos vetoriais • Leve, escalável, reusável e padrão aberto W3C • Elementos e estilos manipuláveis como objetos • Compatibilidade com HTML5 e CSS3 • Suporte quase universal para gráficos estáticos na Web • Amplo suporte em ferramentas gráficas Ainda existem problemas • Compatibilidade (resolvidos com workarounds) • Falta de suporte para animações • Duplicação de funcionalidades SVG2: +interoperabilidade com CSS3 e HTML5
  • 116. Referências Este material é baseado em Tutorial SVG (Helder da Rocha, 2010) disponível em http://www.argonavis.com.br/download/download_xml-svg.html Especificações • SVG 1.1 Second Edition. www.w3.org/TR/SVG/ August 2011 • SVG 2 Working Draft. http://www.w3.org/TR/SVG2/ July 2015 • SMIL 3 www.w3.org/TR/SMIL/ December 2008 • CSS 2 http://www.w3.org/TR/2008/REC-CSS2-20080411/ April 2008 • DOM 3 http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/ April 2004 Livros sobre SVG • Kurt Cagle. SVG Programming: the graphical Web. Apress. 2002. • Frost, Goesser, Hirtzler. Learn SVG: The Web Graphics Standard. http://www.learnsvg.com/ • Mike Dewar. Getting Started with D3. O'Reilly. 2012. • J. David Eisenberg, Amelia Bellamy-Royds. SVG Essentials 2nd. Edition. O'Reilly. 2014. • J. Frost, D. Dailey, D. Strazzullo, Building Web Applications with SVG. MS Press. 2012. Produtos • d3.js http://d3js.org/ Biblioteca JavaScript para dados e gráficos (gera SVG) • snap.js http://snapsvg.io/ Biblioteca JavaScript para SVG Exemplos • Aplicação Orbitas (gera órbitas planetárias em SVG): www.argonavis.com.br/astronomia/orbitas escrito em Java, XSLT e SVG. Código-fonte em https://github.com/helderdarocha/orbits • Monstrinhos em SVG originalmente do site da conferência conferenciaweb.w3c.br alterados para fazer animações em olhos e braços; código disponível em GitHub (veja slide seguinte)
  • 117. helder@argonavis.com.br https://github.com/argonavisbr/SVGExamples http://www.argonavis.com.br/download/w3c_2015_svg.html Outros formatos para esta palestra em Código-fonte dos exemplos Este material pode ser usado de acordo com os termos da licença Creative Commons Attribution Share-Alike