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?

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

Estruturando, agrupando e referenciando

Group

Use

Defs

Como usar?

Como imagem

• 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

	<!-- fallback here -->

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.

Como estilizar?

Propriedades de estilo

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"

Demo time!

Imagens Responsivas e Adaptativas

Fragment Identifiers

Interatividade

Animação CSS

Animações com Smill

Dasharray e dashoffset

Line Drawing

Filtros

Masks e Clip-paths

Patterns

E muito mais!

Obrigado!

Slides: