Como (e por que) o SVG vai assumir o cargo em 2018

/2019-11-08 21:00:22/
Irving
/Gráficos/

2018 será o ano do SVG. O formato do arquivo de imagem tem crescido em popularidade e uso constantemente nos últimos anos, mas 2018 é quando ele realmente se concretizará.

Você tem a combinação de usuários com telas de alta resolução e a necessidade de um tempo de carregamento extremamente rápido para agradecer. E embora a mudança para o SVG possa parecer um grande problema; não é.

O SVG é fácil de usar e implementar, e você realmente não precisa alterar os arquivos existentes; basta adicionar novas imagens como SVG. Aqui está tudo o que você precisa saber quando se trata de SVG.

Explorar recursos de design

SVG é feito para a Web

A Mozilla descreve assim:

SVG é uma linguagem baseada em XML para descrever imagens vetoriais. É basicamente uma marcação, como HTML, exceto que você tem muitos elementos diferentes para definir as formas que deseja que apareçam na imagem e os efeitos que deseja aplicar a essas formas. SVG é para marcar gráficos, não conteúdo. No final mais simples do espectro, você tem elementos para criar formas simples, como e. Os recursos SVG mais avançados incluem (transformar cores usando uma matriz de transformação) (animar partes do seu gráfico vetorial) e (aplicar uma máscara sobre a parte superior da imagem).

As principais vantagens do SVG para web designers incluem a capacidade de criar renderizações SVG simples em um editor de código ou texto, enquanto gráficos complexos podem ser desenhados em um programa como o Adobe Illustrator; O texto SVG é acessível; SVGs são fáceis de estilizar e escrever; e você está criando com um formato vetorial que renderiza bem em qualquer tamanho. Os formatos SVG são suportados por navegadores modernos, são à prova de futuro e altamente compactáveis.

Algumas das desvantagens são que o design de SVGs pode ser complicado e um pouco mais difícil de criar inicialmente. A outra questão é que alguns navegadores degradados simplesmente não entendem o que são.

Precisa de uma melhor compreensão do SVG? Temos um guia para iniciantes em SVG.

Como os designers estão usando SVG

Um dos benefícios do SVG é que você pode fazer muitas coisas diferentes com ele. SVG pode ser usado para:

Logotipos
Fundos, padrões e texturas
Animação
Imagens responsivas
Ícones

Designers podem usar SVG para qualquer elemento em um design em que um formato vetorial seja uma solução aplicável. Pode substituir JPG, PNG e GIF, entre outros formatos.

Regra de formatos de vetor

Há uma boa chance de você usar mais formatos vetoriais. SVG é independente da resolução. E isso é um bônus enorme, porque você sabe que suas imagens ficarão ótimas em qualquer lugar.

O que é especialmente interessante em trabalhar com imagens SVG é que você realmente não precisa alterar seu fluxo de trabalho para implementá-las. Se você estiver projetando em software como o Illustrator ou o Sketch, o processo - exceto a exportação final - é idêntico. O único problema é que você provavelmente desejará transformar qualquer elemento de texto em estrutura de tópicos no Illustrator, mas muitas pessoas já o fazem.

Ao preparar arquivos SVG, há uma coisa importante a ser lembrada. Para mantê-los o menor possível, exclua todos os itens desnecessários que você não precisa. (Limpe a área de transferência!) O SVG na Web oferece ótimas dicas para desenhar elementos e salvar arquivos SVG da melhor maneira possível.

Formato baseado em texto é bom para SEO

O uso do SVG também oferece um bônus para designers experientes em mecanismos de pesquisa. Como o SVG usa texto real na formatação, os mecanismos de pesquisa podem ler melhor as imagens.

Sim, você pode adicionar informações alternativas com outras imagens, mas há muito espaço para palavras-chave. Com o SVG, você pode criar imagens mais fáceis de pesquisar e fazer o upload. O Google indexa todo o conteúdo SVG, incluindo arquivos autônomos e quando os SVGs são incorporados diretamente no HTML.

SVG é leve

Ao contrário de outros tipos de arquivos baseados em vetores que podem ficar pesados rapidamente, os SVGs são código. O código é rápido. É simples assim. Bem, quase.

Quando se trata de desenhos vetoriais sofisticados que você salvou como SVG, verifique os tamanhos dos arquivos antes de se demorar demais. Enquanto os formatos PNG podem crescer quase exponencialmente quando a transparência é adicionada, os SVGs tendem a crescer com base no número de caminhos e preenchimentos da imagem.

Se o SVG for grande, considere exportá-lo e um JPG ou PNG. (Mesmo que pareça contraditório. A realidade é que a maioria dos designers continuará a usar uma mistura de tipos de arquivos com imagens; apenas espere usar mais SVG do que você usava no passado.)

A edição é fácil

Se você está acostumado a desenhar ícones ou logotipos ou qualquer outro software de desenho vetorial, nada sobre o processo de edição muda para você.

Mas se você escreve SVG, é um prazer. Basta alterar a palavra ou coordenadas ou cor no editor de texto e no boom, a alteração é feita. É difícil facilitar a edição.

Crie imagens fixas ou animadas com SVG

Diferentemente da maioria dos outros formatos de imagem, que permitem ter uma imagem estática ou em movimento, o SVG também permite. Você pode criar uma imagem estática ou animação. E tudo funciona da mesma maneira. (Este exemplo bacana é um tutorial sobre como animar um elemento ao longo de um caminho SVG!)

Esses pequenos benefícios estão ajudando a colocar o SVG na vanguarda das mentes dos designers. Você não precisa aprender uma nova ferramenta ou técnica; você já tem tudo o que precisa à sua disposição com o SVG.

Conclusão

Aqui está a grande razão de 2018 ser o ano em que o SVG começa a assumir o controle: é prático.

Com todos que usam telas de alta resolução, os formatos vetoriais são realmente o caminho a percorrer. Tudo é dimensionado na perfeição e você não precisa se preocupar com pixelização. Os SVGs criam ótimos logotipos (estáticos ou responsivos), gráficos e planos de fundo, ícones e pequenas imagens e animações. Os arquivos são pequenos e carregam rápido, e não há uma grande curva de aprendizado na implementação de SVGs no design do site.

Você pode literalmente começar a usar imagens SVG agora.