10 Regras de Ouro para SVGs responsivos

As muitas vantagens do SVG - incluindo imagens vetoriais infinitamente escaláveis, pequenos tamanhos de arquivos e integração direta com o Dom - tornam um ajuste natural para web design responsivo . Apesar da especificação SVG ser uma década antiga, é um suporte relativamente recente em muitos navegadores e ferramentas significa que ainda há um número de truques, lacunas e Gotchas que retiram ainda mais experientes web designers e desenvolvedores.

Aqui, resumi o mais importante destes como 10 regras de ouro.

01. Configure suas ferramentas corretamente

Assim como um artesão aguda suas ferramentas antes de começar a trabalhar, qualquer pessoa que trabalhe com o SVG deve definir seus aplicativos para entregar o formato vetorial no método mais eficiente e otimizado possível. Existem várias configurações para implementar.

Primeiro, a menos que haja razões convincentes para fazer o contrário, defina medições para 'pixels' em sua ferramenta vetorial. Embora não seja importante para o SVG (que medirá o Viewbox. e elementos alegremente em quase qualquer sistema de medição) faz sentido desenvolver o desenho do SVG usando unidades CSS comuns, em vez da impressão de polegadas; e também torna muito mais fácil adicionar @meios de comunicação consultas e outras intervenções mais tarde.

Não faça a área de lona maior do que precisa ser. Como imagens de bitmap, qualquer 'espaço em branco' no SVG não será usado e é melhor substituído por margens CSS. Observe que muitas ferramentas vetoriais, como esboço, serão automaticamente "cultivam" a área da tela para elementos selecionados.

Ao mesmo tempo, não corte a área de tela para as bordas exatas dos elementos. A antialiasing ainda será aplicada ao SVG, e o cortá-lo também pode cultivar o antialiasing. Em vez disso, deixe pelo menos 2px claro onde quer que a borda da tela chega perto de um elemento.

Responsividade e desempenho estão intimamente relacionados, conforme a precisão decimal para não ser mais do que dois pontos. O SVG não pensa em inteiros, então um ponto de vector pode ter um valor de 1,45882721px. Essa precisão extrema é inteiramente desnecessária e somente adiciona ao código Bloat e tamanho do arquivo, por isso é melhor truncá-lo neste momento.

Da mesma forma, desenhe formas vetoriais usando o menor número de pontos possível. Muitos novos designers assumem que mais pontos é melhor, quando o inverso é realmente verdadeiro: alguns pontos, bem colocados bem, proporcionam maior controle sobre um elemento, enquanto também reduz o tamanho do arquivo.

Se você receber arquivos vetoriais que não seguem esta regra, não se preocupe - a maioria Arte vetorial Os aplicativos têm uma opção 'simplificar' que você pode usar para reduzir o número de pontos em um elemento sem alterar sua forma. Alternativamente, para o trabalho detalhado eu sugiro um plugin como a vectorscração dos gráficos astutos.

02. Remova atributos de altura e largura

A maioria dos aplicativos adiciona muito código proprietário e desnecessário em sua exportação SVG. O único código requerido no início da maioria dos arquivos SVG é o seguinte:

 & lt; svg xmlns = "http://www.w3.org/2000/svg" Viewbox = "0 0 500 500" & gt;
& lt;! - código SVG aqui - & gt;
& lt; / svg & gt; 

Para nossos propósitos, o aspecto mais importante é a remoção do largura e altura Atributos que a maioria dos aplicativos inclui automaticamente. Isso torna o SVG totalmente responsivo em navegadores modernos.

Se você estiver processando muito SVGs, ou está com pressa, você não precisa completar este passo à mão. Em vez disso, você pode seguir as sugestões estabelecidas na terceira regra de ouro ...

03. Otimizar e minificar a saída SVG

Qualquer ferramenta que você use para criar seu conteúdo SVG, ele ainda vale a pena processar sua saída através de uma ferramenta como Svgomg. , que aparará o código marcadamente. Normalmente, você pode economizar cerca de 20 a 80% no tamanho do arquivo. O mesmo código pode ser integrado localmente Como uma tarefa Gulp ou Grunt .

04. Modificar código para IE

A regra 2 mencionou que os SVGs otimizados corretamente são totalmente responsivos em navegadores modernos. Isso é verdade, se contarmos o Microsoft Edge como um navegador moderno. Para o IE 9-11, temos alguns problemas para resolver. Se estivermos usando o SVG como uma imagem:

 & lt; img src = "countdown.svg alt =" contagem regressiva "& gt; 

Podemos forçar o IE9-11 para exibir a imagem corretamente usando o seletor de atributos CSS:

 img [SRC $ = ". SVG"] {largura: 100%;} 

As imagens SVG funcionam bem em produção geral, mas têm interatividade limitada: a maioria dos navegadores ignorará a interatividade e a animação dentro de um SVG colocado em uma página como um . Além disso, as imagens SVG são uma solicitação HTTP extra para o navegador.

Por essas e outras razões, o SVG é cada vez mais usado em linha. Nesse caso, o código SVG precisa de um pouco mais de tratamento para o IE:

 & lt; corpo e gt;
...
& lt; svg xmlns = "http://www.w3.org/2000/svg" Viewbox = "0 0 525 365" Preserveaspectratio = "Xmidymin Slice" & gt; 

Em adição ao preservaspectratio. Atributo, ou seja, precisa de um pouco mais de orientação para preservar a escala correta da imagem: Tome a largura do SVG ( 365. Neste caso), divida-o pela altura ( 525. ) e multiplicar o resultado em 100 por cento. Isso se tornará o padding-bottom. valor para o SVG, 'PROPTING' que ele abre o suficiente no IE para exibir o SVG em sua proporção correta:

 & lt; corpo e gt;
...
& lt; svg xmlns = "http://www.w3.org/2000/svg" Viewbox = "0 0 525 365"
preservaaspectratio = "fatia de xmidymin"
Estilo = "Largura: 100%; Padding - Bottom: 69,52%; Altura: 1px; Overflow: visível" & gt; 

Observe que, para manter as coisas concisas e claras, as amostras de código no restante deste artigo não incluem essas alterações. Amelia Bellamy-Royds escreveu um Artigo excelente em escalonamento SVG .

05. Considere SVG para o texto do herói

Atualmente não há padrão CSS para dimensionar texto ao seu contêiner. É possível escalar o texto usando unidades VW, mas que quase sempre exigirá pelo menos duas intervenções de consulta de mídia para 'grampo' o texto em determinados limites de viewport. No entanto, o texto SVG redimensionará para um contêiner automaticamente:

 & lt; cabeçalho e gt;
& lt; svg xmlns = "http://www.w3.org/2000/svg" Viewbox = "0 0 285 80" & gt;
& lt; texto x = "0" y = "66" & gt; kauai & lt; / text & gt;
& lt; / svg & gt;
& lt; / header & gt; 

O CSS:

 cabeçalho svg texto {
Peso de fonte: 900; Tamanho da fonte: 90px; Preencha: azul;
} 

Mantendo o SVG Inline preserva a acessibilidade e o valor de SEO, e permite que o texto seja denominado usando qualquer fonte já incorporada na página. Ver aqui Para maiores informações.

06. Deixe a largura e a altura no lugar para ícones progressivos

Uma exceção à regra 2 é ícones e pequenos logotipos, que devem manter sua largura e altura Atributos Se você quiser que eles sejam progressivamente aprimorados:

 & lt; a href = "http://codepen.io" & gt;
    & lt; svg role = "img" aria-label = "codepen" largura = "50" altura = "50" e gt;
        & lt; title & gt; codepen & lt; / title & gt;
        & lt; use xlink: href = "# codepen" / & gt;
    & lt; / svg & gt;
& lt; / a & gt;
...
& lt; svg style = "display: nenhum;" & gt;
    & lt; símbolo ID = "Codepen" Viewbox = "0 0 50 50" & gt;
        & lt; path d = "..." / & gt;
    & lt; / símbolo & gt;
& lt; / svg & gt; 

Você pode ver um exemplo dessa técnica em ação aqui .

Se somirmos apenas os ícones do SVG com CSS, e a folha de estilo do site não será carregada, os ícones aparecerão no tamanho padrão de um elemento substituído: 300px x 150px. Mantendo a altura e a largura como atributos, podemos distribuí-los ao tamanho de toque razoável mais próximo por padrão, e use nosso CSS para melhorar a maneira como eles são apresentados.

07. Use efeitos de vetor para manter as linhas finas

Por padrão, o SVG dimensiona tudo com a viewport, incluindo espessura de acidente vascular cerebral. Normalmente, isso funciona bem, mas em alguns casos - diagramas e derrames aplicados como efeitos na parte externa do texto em particular - você pode querer manter os golpes da mesma espessura, não importa qual o tamanho do desenho. Este é o domínio do pouco conhecido Efeito de vetor propriedade, que pode ser aplicada como atributo de apresentação ou em CSS:

 caminho {
    Preencher: #fff; acidente vascular cerebral: # 111;
    Largura de traço: 2;
    Efeito vetorial: não-escala;
} 

Dar uma olhada em um exemplo completo desta técnica .

08. Lembre-se de bitmaps.

Muitos desenvolvedores assumem o SVG só podem usar vetores, mas JPEGs e PNGs também podem ser aplicados a um desenho do SVG. E desde que você tenha seguido minhas regras até agora, essas imagens serão responsivas quando você adicionar um bitmap através do marcação:

 & lt; imagem largura = "1024" altura = "768" xlink: href = "lago-louise.jpg" x = "1300" y = "150" papel = "imagem" title = "Crowsnest Pass" & gt; & lt; / imagem & gt; 

09. Considere soluções adaptativas

Fazer as coisas vão 'Squish' é apenas uma parte de design responsivo. O que o RWD é sobre, na sensação maior de design adaptativo, está apresentando conteúdo apropriado em todos os tamanhos da viewport.

Isso pode ser alcançado de várias maneiras. ResponívelGos.co.uk fornece uma série de exemplos que usam sprites svg, mas eu prefiro integrar consultas de mídia no SVG para criar o que chamo de "módulos de marca". Essa abordagem me permite adicionar, remover e modificar a visibilidade dos componentes. Leia mais sobre módulos de marca adaptativos no meu artigo. .

Essa mesma técnica pode ser usada para diagramas, ilustrações, mapas e muito mais. Nos módulos mais simples, o próprio CSS pode ser escrito dentro do SVG, tornando-o utilizável em todos os lugares, conforme descrito na regra anterior.

10. Integre as consultas da mídia em SVG

Muitas pessoas não sabem que as consultas de mídia CSS podem ser escritas dentro do próprio SVG:

 & lt; svg xmlns = "http://www.w3.org/2000/svg" Viewbox = "14 82 272 139" & gt;
& lt; defs & gt;
& lt; estilo & gt;
svg g {transição: 1s; }
@media tudo e (largura máxima: 90rem) {
#drink, #coke {opacidade: 0; }
}
& lt; / style & gt;
& lt; / defs & gt;
& lt; g id = "coca-cola" & gt;
& lt; path d = "m109.6 ... & gt; 

É importante notar que a consulta da mídia só pode "ver" o elemento está dentro de: ou seja, qualquer medição se relaciona com o próprio elemento, não a página. Uma desvantagem potencial dessa abordagem é que a área da tela do SVG permanecerá sempre a mesma, em relação aos elementos dentro dela.

Isso pode resultar em elementos muito pequenos em tamanhos de pequenos viewport, enquadrados dentro de uma área de lona relativamente grande. Existem várias soluções para isso, incluindo Redimensionando a caixa de visualização e ampliando os elementos para compensar .

Conclusão

A escalabilidade infinita do SVG é seu maior ativo, mas uma característica ainda é certa-negrada por navegadores e editores gráficos vetoriais. Ao integrar essas diretrizes em seu fluxo de trabalho de produção e comunicá-los aos outros em sua equipe, você pode criar SVG suavemente responsivo para a Web, tornando-a parte dos ativos que você usa no desenvolvimento todos os dias.

Este artigo originalmente apareceu em Revista Net. edição 283; compre aqui !

Artigos relacionados:

• 12 ferramentas de teste de código obrigatórias
• Afie suas habilidades de esboço
• SuperCharge SVG Animações com GSAP