Criando experiências com

SVG

Willian Justen

Software Engineer

As vezes eu escrevo...

Por que vetor?

Devices e mais devices...

Densidade de Pixel

Mas é só para isso?

Mais motivos para 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...

Por onde começo?

Criar

Otimização

Automação

Como funciona?

Plano cartesiano

Estrutura

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
	<!-- código para o desenho -->
</svg>

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

Rect

<svg height="200" width="500" viewBox="0 0 500 200">
	<rect x="50" y="30" width="300" height="200" fill="#0562dc"></rect>
</svg>

Circle

<svg height="200" width="200" viewBox="0 0 200 200">
  <circle cx="100" cy="100" r="100" fill="#0562dc"></circle>
</svg>

Ellipse

<svg height="200" width="200" viewBox="0 0 200 200">
  <ellipse cx="100" cy="60" rx="100" ry="50" fill="#0562DC"></ellipse>
</svg>

Line

<svg height="200" width="200" viewBox="0 0 200 200">
  <line x1="20" y1="10" x2="180" y2="60" stroke="#0562DC" stroke-width="4"></line>
</svg>

Polyline

<svg height="200" width="200" viewBox="0 0 200 200">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160, 160, 160, 160, 200" fill="red" stroke="#0562DC" stroke-width="4"></polyline>
</svg>

Polygon

<svg height="200" width="200" viewBox="0 0 200 200">
  <polygon points="50,5 100,5 125,30 125,80 100,105 50,105 25,80 25,30" fill="#0562DC" stroke="#000" stroke-width="4"></polygon>
</svg>

Path

<svg height="200" width="200" viewBox="0 0 200 200">
  <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="#0562DC" stroke-width="5" fill="transparent"></path>
</svg>

Estruturando, agrupando e referenciando

Group

<g id="bird">
	<g id="body"><!-- desenho do corpo --></g>
	<g id="head">
		<path id="beak" d=" <!-- bico -->"></path>
		<path class="eye-ball" d="<!-- parte clara do olho-->"></path>
		<path id="pupil" d="<!-- pupila -->"></path>
		<path class="eye-ball" d="<!-- parte escura do olho-->"></path>
	</g>
</g>

Use

<use xlink:href="#bird" transform="translate(100, 100)">
</use>

Defs

<svg>
	<defs>
		<linearGradient id="gradient">
		<stop offset="0%" style="stop-color: deepPink"></stop>
		<stop offset="100%" style="stop-color: #009966"></stop>
		
	</linearGradient></defs>
	<rect width="200" height="200" stroke="#eee" stroke-width="5" fill="url(#gradient)"></rect>
</svg>

Como usar?

Como imagem

<img src="logo.svg" alt="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

<object type="”image/svg+xml”" data="”mySVG.svg”">
	<!-- fallback here -->
</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

<iframe src="”mySVG.svg”">
	<!-- fallback here -->
</iframe>

<embed type="”image/svg+xml”" src="”mySVG.svg”">

Só não usem isso...

Inline SVG

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" ..="">
	<!-- svg content -->
</svg>

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

Como estilizar?

Propriedades de estilo

Métodos para Estilizar

Estilo Inline

<svg>
  <polygon points="..." style="fill:#0562DC; stroke: #000; stroke-width: 5;"></polygon>
</svg>

Ú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

<svg>
	<style type="text/css">
		polygon {
			fill:#0562DC;
			stroke: #000;
			stroke-width: 5;
		}
	</style>
	<polygon points="..."></polygon>
</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

<style type="text/css">
	polygon {
		fill:#0562DC;
		stroke: #000;
	}
</style>
<svg>
	<polygon points="..."></polygon>
</svg>

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

Estilos externos

<!--?xml version="1.0" standalone="no"?-->
<!--?xml-stylesheet type="text/css" href="styles.css"?-->

<svg>
    <!-- Conteúdo do SVG -->
</svg>

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

Demo time!

Imagens Responsivas e Adaptativas

Fragment Identifiers

    
        <img class="animais" src="assets/img/animals-sprite.svg#icon-pig">
    

Interatividade

Animação CSS

Animações com Smill

Dasharray e dashoffset

Line Drawing

Filtros

Masks e Clip-paths

Patterns

E muito mais!

Obrigado!

Slides: