Um guia para o formato de imagem Scalable Vector Graphics (SVG)

Há um aspecto da internet do qual você não pode fugir: imagens. Nos primeiros dias da web, era um assunto estrito, apenas de texto. No entanto, agora temos formatos de imagem dedicados para nos ajudar a exibir visuais nítidos. O formato Scalable Vector Graphics (SVG) é um dos mais novos e flexíveis disponíveis.

Explicaremos mais adiante, mas um SVG é uma coleção de dados que se apresenta como uma imagem no front-end. Isso significa que você pode usar Cascading StyleSheets (CSS) para manipular a imagem. Além disso, você pode redimensioná-lo conforme necessário sem perda de qualidade.

Para este post, vamos falar mais sobre Scalable Vector Graphics e como eles podem ajudá-lo. Também discutiremos como incluí-los em seu site WordPress.

Uma cartilha rápida sobre os formatos de imagem da Web mais comuns

Antes de passarmos para SVGs e como usá-los, vale a pena falar sobre os principais formatos de imagem que usamos para a web. Há três a serem observados:

• Grupo Conjunto de Especialistas em Fotografia (JPEG). Como o nome sugere, se você deseja exibir fotografias tiradas com uma câmera digital, este é o formato para você.
• Gráficos de Rede Portáteis (PNG). Você vai querer usar o formato PNG para exibir quaisquer gráficos criados, como os do Adobe Illustrator.
• Formato de intercâmbio gráfico (GIF). Ei, todo mundo gosta de clipes engraçados de programas de TV para usar como reação nas mídias sociais! GIF é o formato perfeito para gráficos animados que também são portáteis.

Embora alguns escolham o formato que quiserem, essa não será uma abordagem ideal. Por exemplo, se você optar por tornar cada imagem GIF, poderá ver tamanhos de arquivo astronômicos e recursos visuais de baixa qualidade. Por outro lado, você não vai querer usar JPEGS para gráficos, porque PNG é um formato mais ideal.

O que é o formato de gráficos vetoriais escaláveis

Você vai querer ter paciência conosco nesta seção, porque seremos técnicos em algumas áreas. Além disso, o conceito de SVGs pode ser confuso.

Gráficos vetoriais escaláveis ​​não existem (mais ou menos). Na verdade, eles não são gráficos ou imagens, mas uma forma de Extensible Markup Language (XML). Para quem não sabe, este é um irmão próximo do HTML, mas sem alguns dos aspectos dessa linguagem (como tags predefinidas).

Como uma comparação que você já deve entender, considere como você pode criar formas usando CSS. Isso é algo sobre o qual falaremos mais em breve. Bem, imagine esse CSS embutido em um wrapper de documento que você chama usando um formato e estrutura de arquivo padrão ( image.svg , por exemplo).

É mais correto dizer que, como o HTML fornece uma estrutura para definir cabeçalhos, parágrafos, seções, listas e muito mais, o SVG fornece a estrutura para definir formas como círculos e retângulos. No entanto, isso ainda não explica por que temos (e às vezes precisamos) do formato SVG. Falaremos sobre isso a seguir.

Por que temos SVGs

Antes dos SVGs, você usaria PNGs para exibir gráficos. As primeiras imagens na web podem ser GIFs, mas em geral, os PNGs são o formato de imagem dominante. A questão não é tanto: “Por que temos SVGs?”, mas “O que faltam nos formatos de imagem atuais que um SVG resolverá?” A resposta é: dinamismo.

Se você olhar para os principais formatos de imagem da Web, dois não combinam com os gráficos criados (JPEG e GIF). Isso deixa os PNGs para aguentar a tensão. No entanto, os PNGs sofrem alguns problemas que só agora são aparentes para a web moderna:

• Eles são estáticos, pois você cria a imagem offline e a exporta para esse formato específico. Isso significa que é um pouco inflexível.
• Por extensão, você não pode alterar a 'maquiagem' da imagem. Dado que temos vários dispositivos para criar e exibir, às vezes você precisa se adaptar a essas 'viewports'. Faça o esforço necessário para criar todos os tamanhos de logotipo apenas para desktop e principais dispositivos móveis usando PNGs.
• Embora os PNGs possam ser leves, é responsabilidade do designer e do proprietário do site garantir que a otimização da imagem ocorra. Um PNG pode ser pesado, às vezes mais de um megabyte, sem qualquer otimização.

Além disso, os PNGs preencheram parte de uma lacuna em um momento em que havia poucas opções que poderiam fornecer uma qualidade de imagem alta o suficiente. Na época, o CSS estava em sua infância, e ainda não tínhamos o escopo de design e desenvolvimento que temos agora.

Por exemplo, só conseguimos usar a propriedade border-radius desde 2010. Isso permite definir bordas arredondadas e até círculos. Você o verá muito em ação nos botões:

Você usará CSS para criar formas que podem ser dimensionadas e se adaptar à tela, mas os Scalable Vector Graphics podem fazer mais. Na verdade, você usará SVGs agora em vez de CSS para fazer isso, embora eles também não sejam uma bala mágica.

Os prós dos gráficos vetoriais escaláveis

Assim como qualquer outro formato de imagem, os Scalable Vector Graphics não são perfeitos. Há muitos pontos positivos, é claro:

• Um SVG se ajusta às dimensões de um dispositivo, geralmente sem nenhuma intervenção adicional de sua parte. Isso reduz o tempo de desenvolvimento ou criação.
• O arquivo associado a uma imagem é pequeno, pois você só precisa de um SVG. Por outro lado, um logotipo PNG precisa oferecer alguns tamanhos e dimensões diferentes. Isso ocupa espaço no servidor.
• Além disso, os SVGs têm melhor desempenho do que os PNGs, porque você só precisa carregar um arquivo a um custo de kilobytes. Esse pacote de arquivos PNG pode estar em megabytes dependendo da qualidade, quantidade e otimização deles.

No geral, você pode fazer mais com SVGs do que com qualquer outro formato de imagem. Tanto um desenvolvedor quanto um designer gráfico podem criar SVGs – seja por meio de código ou exportando uma criação típica de um aplicativo de desenho dedicado. Como eles se relacionam mais de perto com o desenvolvimento da web, a adoção está aumentando.

As desvantagens dos gráficos vetoriais escaláveis

No entanto, nem tudo são rosas. Os SVGs ainda têm alguns problemas dos quais você deve estar ciente:

• A tecnologia está se desenvolvendo, ao contrário da maioria dos outros aspectos centrais da web. Como muitas pessoas esperam muito dos Scalable Vector Graphics, há uma 'lacuna' entre o que você pode fazer e o que deseja fazer.
• Embora o suporte básico a SVG esteja disponível na maioria dos navegadores, o conjunto completo de recursos ainda não está disponível dependendo do navegador que você usa. Novamente, os SVGs têm mais potencial que ainda não é aparente: precisamos de um melhor suporte do navegador para funcionalidades mais avançadas para ver do que o formato é capaz.
• Em alguns casos, você pode achar que as imagens SVG são menos precisas ou parecem simplesmente erradas. Isso ocorre porque você precisa confiar em um site carregando conforme o esperado. Se você consegue se lembrar de um momento em que teve que recarregar uma página da Web por causa de erros, imagine isso acontecendo apenas com suas imagens SVG.

Também diríamos que é mais difícil criar SVGs sem conhecimento de codificação em alguns casos também. Há um suporte muito melhor em programas gráficos como o Affinity Designer e o Adobe Illustrator. Também há suporte para exportação de SVG em aplicativos como o Google Drawing:

Esta é uma área de melhoria, mas ainda está um pouco atrás em comparação com outros formatos de imagem.

Apesar dessas desvantagens, você pode mitigá-las. Certamente, para uso básico, você pode implementá-los quase imediatamente. Na verdade, o WordPress ainda oferece esse suporte em algumas etapas, e discutiremos isso a seguir.

Como usar SVGs em seu site WordPress

A má notícia é que, se você quiser enviar um SVG para o WordPress sem nenhum trabalho, não poderá. Um problema extra com o suporte atual a Scalable Vector Graphics é que o WordPress não permite que você carregue essas imagens como padrão por motivos de segurança:

As razões estão além do escopo deste artigo. Em resumo, como o formato SVG é um documento e não uma imagem real, um usuário mal-intencionado pode criar ataques de script em potencial. O que isso significa é que você precisará encontrar uma alternativa mais segura.

Em outros lugares da web, você encontrará instruções para adicionar algum código ao seu arquivo functions.php para habilitar uploads de SVG. No entanto, não vamos passar por esta etapa porque não podemos garantir que seja seguro. Em vez disso, você pode fazer o que costuma fazer com o WordPress: recorrer a um plugin. Recomendamos o suporte SVG:

Depois de instalar e ativar o plug-in, vá para a tela Configurações > Suporte SVG no WordPress. Isso mostrará algumas telas, mas você só precisa marcar a opção Restringir a administradores? caixa de seleção no painel Configurações.

Por padrão, o plugin permitirá que todos os usuários carreguem SVGs. Isso pode ser uma má notícia com base nos problemas de segurança inerentes, e é exatamente por isso que o WordPress não permite que você carregue esses arquivos em primeiro lugar. No entanto, se você marcar esta caixa, o plug-in restringirá o upload apenas aos administradores do site, além de tornar o uso de SVGs mais seguro como padrão.

Em suma

Há muitas maneiras de exibir imagens na web, e a maioria das pessoas não pensa duas vezes sobre o formato que usa. No entanto, se você dedicar algum tempo para combinar o formato com a necessidade, obterá imagens detalhadas e nítidas que ficarão impressionantes em todas as telas.

Ao longo deste post, oferecemos muitas informações sobre gráficos vetoriais escaláveis. Você usará CSS para adaptar a imagem às suas necessidades, e o escopo de manipulação é muito maior do que PNGs e JPEGs. Além disso, eles são leves – perfeitos para telas pequenas e conexões de internet ruins.

Você deseja usar Scalable Vector Graphics em seu site e, em caso afirmativo, este artigo o ajudará? Deixe-nos saber na seção de comentários abaixo!

Crédito da imagem: GDJ.