Criando experiências com


SVG

Willian Justen


Desenvolvedor Front End

GloboEsporte

As vezes eu escrevo...

willianjusten.com.br

E faço código open source também...

github.com/willianjusten

AVISO!

Os exemplos apresentados nesses slides são feitos totalmente em SVG.

Scalable Vector Graphics (SVG)
É uma imagem vetorial no formato XML que suporta interatividade e animações.

Histórico

Por que usar SVG?

  • Responsivo e Adaptativo
  • Ótimo suporte (até IE8!)
  • Pode ser minificado (GZIP)
  • Interativo e Estilizável
  • Possui efeitos próprios
  • Possui acessibilidade
  • E mais...

Criando

Illustrator

Illustrator

Sketch

Sketch

Inkscape

Inkscape

willianjusten.com.br/onde-baixar-svg

Otimizando

SVG OMGsSVG OMG

Como funciona?

Estrutura


	

  • SVG: elemento pai que irá conter o desenho
  • Version: versão utilizada para criação
  • xmlns: namespace do svg e sua especificação

Rect


	

Circle


  

Ellipse


  

Line


  

Polyline


  

Polygon


  

Path


  

Veja mais no codepen

Estruturando, agrupando e referenciando

Group

Group

	
	
		
		
		
		
	

Use

Exemplo do Use

Defs


	
		
		
		
		
	
	

Como estilizar?

Propriedades de estilo

Css compartilhado
Artigo da W3C sobre o assunto

Métodos para Estilizar

Estilo Inline


  

Útil quando não se tem acesso a uma folha de estilo independente ou se deseja fazer uma rápida modificação.

Estilo dentro do SVG


	
	

Útil quando se deseja componentizar um elemento SVG, visto que sua estrutura e todo o seu estilo pode ser facilmente movimentado entre sistemas diferentes.

Estilo no HTML



	

Pouco utilizado, manutenção não muito adequada.

Estilos externos





    

Quando se deseja separar o svg do estilo. Lembrando que podemos fazer chamadas comuns como se fosse css normal, utilizando "link href=style.css"

Como usar?

Como imagem

Company Logo
  • Imagens podem ser cacheadas.
  • Sem interação de CSS.
  • Sem edição no DOM.
  • Animações só funcionam se estiverem dentro do SVG.

Como background

.logo {
	background-image: url(logo.svg);
}
  • Imagens podem ser cacheadas.
  • Sem interação de CSS.
  • Sem edição no DOM.
  • Animações só funcionam se estiverem dentro do SVG.

Como object


	

  • Imagens podem ser cacheadas.
  • Permite edição no DOM.
  • Possui mecanismo de fallback.
  • Animações só funcionam se estiverem dentro do SVG.

Iframe e Embed




Só não usem isso...

Inline SVG


	

  • Imagens não podem ser cacheadas.
  • Permite edição no DOM.
  • Animações e Interações de CSS.
  • Sem requests HTTP adicionais.

Demo time!

Logo Responsiva

Link no Codepen

Interatividade

Menu Link do Codepen
Site do Exemplo

Drawing

Quer saber mais? github.com/willianjusten/awesome-svg

Obrigado!