Densidade de Pixel

Otimização

Automação

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

Group

Use

Defs

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

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.

Propriedades de estilo

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"

Imagens Responsivas e Adaptativas

Fragment Identifiers

Animações com Smill

Dasharray e dashoffset

Line Drawing

Obrigado!

Slides: