SVG cheat sheet

svg.md

Introdução

É possível utilizar svg na página web importando por meio da tag :

<img src='meu_svg.svg'>

Ou utilizá-lo diretamente usando as tags de <svg> no código html:

<svg>
</svg>

Porém, é necessário informar ao browser que nós vamos usar uma versão diferente de XML, sem usar tags HTML, e qual versão do svg não vamos usar:

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

Mais informações sobre o namespace do svg aqui.

Definindo a altura e largura do svg:

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

#Responsividade

Para tornar o svg responsivo use o atributo viewBox. Com ele é definido um ponto de origem, uma largura e altura do tamanho estático do svg. Já no css deve-se definir a altura e largura utilizando unidades responsivas:

HTML:

<svg version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 268 268"

CSS:

svg {
    height: auto;
    width: 50%;
}

Acessibilidade

Svg possui as tags <title> e <desc> que podem ser úteis para leitores de tela:

<svg>
    <title>Icone de celular</title>
    <desc>Um celular grande com cantos arredondados e com um botão em baixo </desc>
</svg>

Retângulos

Desenha-se retângulos usando a tag <rect>:

<rect height="50" width="80"/>

Pode-se usar os atributos rx e ry para colocar cantos arredondados no retângulo:

<rect height="100" width="70" fill="white" stroke="FF2626" stroke-width="10" x="5" y="5" rx="5" ry="5"
<!-- Neste caso se não for fornecido o ry, então o valor do ry vai ser o mesmo do rx -->

Atributos interessantes

fill="white", fill=#FFFFFF -> preenche o elemento com uma cor
stroke="#FF2626" -> define a cor da borda
stroke-width="10" -> define a largura da borda
x="5", y="10" -> define as coordenadas do elemento na página)

Grupos

É possível utilizar grupos para agrupar diferentes elementos e inclusive utilizar parâmetros na tag do grupo que serão aplicadas em todos os elementos dentro do grupo, tais como: transform="translate(121,5,211)" Para criar um grupo englobe os elementos com a tag <g></g>

Reutilizar elementos

As vezes pode ser necessário reutilizar o mesmo svg diversas vezes. Para evitar repetir a definição de todo o código novamente, use a tag <symbol>

<!-- Svg que será reutilizado -->
<svg xmlns="http://www.w3.org/2000/svg" class="definicao_de_icone"> <!-- no css defina esse svg com display: none -->
    <symbol id="telefone"> <!-- Deve sempre ser usado um id, não funcionará com classe -->
        <rect x="5" y="5" width="70" heigth="100" rx="5"/>
        <circle r="3" cy="105" cx="40"/>
    </symbol>
<svg>

<!-- Iremos utilizá-lo aqui: -->
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
    class="visualizacao_do_icone"
    viewBox="0 0 80 110"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <use xlink:href="telefone"/>
</svg>

Outras informações importantes

1. Atributos sobre coordenadas das tags do svg sempre devem estar na própria tag.
2. Atributos que tratam de cor, altura, largura, borda (stroke) podem ficar separados no css.
3. Ao utilizar atributos que lidam com tamanho no css deve-se utilizar a unidade (px,...). Se utilizar direto nas tags do svg isso não é necessário
4. Se incluir o svg pela tag não será possível selecionar elementos individuais com o css.