Tamanhos responsivos

Como os elementos SVG podem responder ao estilo CSS, os mesmos @mediacomandos que tornam os layouts de página overal “responsivos” podem ser aplicados aos elementos dentro de uma imagem SVG:

<svg>
<g class="container large" />
<g class="container med" />
<g class="container small" />
</svg>

svg .container { display:none; }
@media screen and (max-width:10em) {
  svg .container.small { display:inline; }
}
@media screen and (max-width:15em) {
  svg .container.med { display:inline; }
}
@media screen and (max-width:20em) {
  svg .container.large { display:inline; }
}

Veja em ação no conjunto de ícones Iconic , que não só altera o tamanho de seus ícones com layouts diferentes, mas também o nível de detalhe.

CSS “Sprite”

Incorporar as imagens dentro do arquivo CSS, para que ambas sejam buscadas em uma solicitação, ajuda a acelerar o carregamento da página:

.my-svg {
  background-image: url('data:image/svg+xml;charset=US-ASCII,%3C%3Fsvg ...');
  background-repeat: no-repeat;
}

Generator em Grumpicon.com

Fallbacks de imagem

Use CSS “sprite” com image/svg+xml;charset=US-ASCIIURI de dados em navegadores que podem suportar SVG, image/png;base64naqueles que não podem, mas podem suportar URIs de dados (ainda oferece o benefício de um download do arquivo CSS que obtém todas as imagens em uma solicitação) ou PNG padrão imagem de fundo se não houver outra opção.

Lista completa de navegadores do Grunticon

Para melhor desempenho, os arquivos CSS que têm os dois tipos diferentes de URI de dados devem ser dois arquivos CSS separados e devem ser substituídos por Javascript quando a página for carregada. Se eles fossem mesclados em um arquivo CSS, cada navegador baixaria duas versões de cada imagem, aumentando a largura de banda necessária para o site.

Mais informações:

• Apresentação de Deixando Pixels para Trás