SVG para desenvolvedores: Noções básicas, benefícios e desvantagens

Os gráficos trazem expressões únicas em sites e também ajudam os desenvolvedores a comunicar sem esforço ideias e conceitos profundos aos usuários. É um elemento chave na internet e desde 1999 tornou-se scriptable, o que permite uma apresentação mais complexa de imagens na web.

Você pode estar muito familiarizado com o uso dos diferentes tipos de arquivo de imagem raster: JPG, PNG e GIF. Vamos relembrar um pouco. Com suporte para 256 cores (8 bits), o GIF (Graphic Interchange Format) é um formato excelente para animação e transparência, sem incluir a transparência alfa. O formato PNG (Portable Network Graphic) é muito melhor com suporte para mais de 16 milhões de cores (24 bits) e todos os tipos de transparência, desde que você não precise de animações.

O formato de imagem mais utilizado na web JPG ou JPEG (Joint Photographic Experts Group), principalmente por ser compressível, suporta mais de 16 milhões de cores; 24 bits ou 8 bits por pixel para escala de cinza, mas sem suporte para animação ou transparência. Portanto, o JPG é o principal formato gráfico que os desenvolvedores usam para fotografias estáticas. Eu não mencionei Bitmap (BMP), pois normalmente não é um formato de imagem para a web. O BMP armazena dados precisos de cada pixel em uma imagem, o que torna os arquivos realmente grandes (mais de 150 vezes o tamanho de JPGs com a mesma resolução) e impróprios para gráficos de sites.

Esses formatos gráficos dependentes de resolução são ótimos, principalmente quando usados ​​adequadamente. No entanto, todos eles compartilham uma deficiência comum, que levou à introdução do SVG – o único formato de imagem vetorial para a web.

O que é SVG?

Scalar Vector Graphics (SVG) é um formato de imagem baseado em Extensible Markup Language (XML) que descreve gráficos bidimensionais, como caminhos, linhas, círculos, padrões, cores de texto, etc. Em uma definição mais simples, refere-se a um formato de imagem com suporte para bidimensional, cujo comportamento e existência são controlados por um arquivo de texto XML.

Outra característica interessante é sua escalabilidade; você pode levar imagens SVG em qualquer escala sem perder sua resolução. Isso ocorre porque os SVGs renderizam imagens com formas, números e coordenadas, não com pixels como nos formatos de imagem raster que renderizam imagens definindo a cor que cada pixel deve ser pintado.

Vamos ver como você pode criar imagens SVG e algumas das razões pelas quais você deve considerar o uso de SVG em seus projetos.

Como criar imagens SVG

Você pode criar imagens SVG usando qualquer editor de texto, embora o processo seja um pouco técnico e exija algum conhecimento de design e matemática, especialmente se você estiver criando algumas formas complexas. Imagine desenhar um avião em uma tela usando apenas linhas de códigos. No entanto, existe uma maneira mais fácil, mas vamos usá-la para entender os conceitos básicos do SVG.

Usamos elementos gráficos SVG para criar imagens SVG em um editor de texto. O processo é simplesmente inserir seus elementos gráficos dentro das tags <svg> e </svg>, especificando sua coordenada, dimensão, cor, etc. Por exemplo, o elemento <rect> pode ser usado para desenhar um retângulo como visto na exemplo a seguir.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="300" width="300">
<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)"/>
</svg>

O código acima irá desenhar um retângulo azul de 300x por 300px no canto superior esquerdo do seu navegador se salvo como arquivo .svg e aberto com um navegador. Agora, você deve estar se perguntando por que temos duas alturas e duas larguras no documento. Vamos entender todo o código para ver o porquê. Como mencionado anteriormente, seu código SVG deve ser escrito dentro do elemento raiz (<svg> e </svg>) para notificar seu navegador sobre como interpretar essas linhas.

Assim como no HTML, o SVG requer uma declaração de namespace no elemento raiz. No exemplo acima, fornecemos o parâmetro xmlns “http://www.w3.org/2000/svg” e o SVG recomendado pelo W3C versão 1.1 dentro do elemento raiz. A dimensão dentro do elemento raiz é chamada de ponto de vista SVG, que é a janela ou tela através da qual a imagem SVG desenhada dentro da tag raiz apareceria. O ponto de vista deve ter pelo menos a mesma dimensão com seus objetos SVG inteiros antes que eles possam aparecer em seu navegador.

A segunda linha é mais fácil de entender. O elemento <rect>, que é usado para desenhar retângulos, incorpora os parâmetros do retângulo proposto começando com a dimensão. A largura do traço descreve a espessura da linha, enquanto os dois modelos de cores RGB informam ao navegador qual cor preencher o retângulo e a linha, respectivamente. Isso é bem simples certo?

Agora, podemos mover o retângulo dentro da página declarando um valor para x e y assim:

<rect width="300" height="300" stroke-width="1" fill="rgb(0,0,255)" stroke="rgb(0,0,0)" x=”15” y=”20”/>

Claro, não vamos esquecer de aumentar a dimensão do ponto de vista para acomodar o espaço extra que isso levaria.

A maneira mais fácil de criar imagens SVG é usando ferramentas de desenho como Adobe Illustrator, Inskape e Sketch. Em vez de construir do zero, algumas bibliotecas JavaScript, como Bonsai.js e D3.js, são boas fontes para imagens SVG se você estiver procurando por ícones, formas complexas etc.

Adicionando imagens SVG

Um dos benefícios de usar imagens SVG é a facilidade de integrá-las ao seu design. Você simplesmente faz referência a eles no atributo src de uma tag img. Isso deve se referir ao arquivo .svg salvo na pasta do seu site assim:

<img src='example.svg'>

Alternativamente, você pode inserir os códigos SVG em seu documento HTML, com as tags <svg></svg> iniciando e terminando o código como já mencionado anteriormente.

Você também pode consultar a imagem SVG em seu CSS para imagem de fundo como esta:

.main-header {
background-image: url(example.svg);
}

Benefícios de usar SVG para desenvolvedores

A necessidade de SVG em seus projetos web subsequentes não pode ser exagerada considerando os atuais requisitos gráficos da internet. Além do incontável número de novos dispositivos com resolução e tamanhos de tela poderosos, os sites agora apresentam tanta interatividade que, sem ter controle total de seus gráficos, pode ser difícil fornecer sites de nível profissional.

Alguns dos benefícios incluem:

Escalabilidade e capacidade de resposta

Como um formato de imagem não dependente de resolução, os SVGs podem ser dimensionados indefinidamente, sem ficarem pixelados. Isso permite que você, como desenvolvedor, forneça imagens gráficas de primeira linha para todos os usuários, independentemente da força da resolução e do tamanho da tela de seus dispositivos. Você pode combinar diferentes caminhos, formas e elementos de texto para criar visuais impressionantes que serão nítidos e nítidos em todos os tamanhos.

Isso não está disponível em nenhum dos formatos de imagem raster com dimensões fixas, simplesmente porque eles nunca teriam dados suficientes para preencher todos os espaços quando fossem extremamente dimensionados. O SVG calcula a distância entre os pontos para manter os caminhos constantemente conectados para que a imagem permaneça nítida em qualquer escala.

Extremamente flexível e suporta animação

Ao contrário das imagens raster, que fornecem a cópia final de uma imagem, as imagens SVG são completamente editáveis ​​ajustando os códigos usando um editor de texto ou ferramentas especiais de desenho. Usando nomes de classe ou IDs de seus elementos SVG, você pode estilizar ou animar suas imagens SVG usando CSS. A animação de imagens SVG também é possível com Web Animation API, SMIL ou WebGL.

Mais importante ainda, você pode integrar suas imagens SVG com outras tecnologias e documentos de plataforma aberta da Web proeminentes. SVGs podem ser roteirizados com JavaScript e estilizados com CSS como HTML.

Tamanho de arquivo pequeno e amigável para SEO

Existindo em formato de texto, as imagens SVG melhoram a acessibilidade de um site, o que é um grande trunfo na classificação da página. Além disso, os mecanismos de pesquisa são capazes de indexar o texto do elemento SVG e isso permite que os usuários encontrem seu site usando palavras-chave em seu arquivo SVG.

O SVG carrega muito mais rápido, pois não possui um arquivo para download e sem a necessidade de uma solicitação HTTP. Melhorar a resolução de um arquivo de imagem raster significa aumentar o número de pontos (pixels). Isso aumentará o tamanho da imagem, o que arrastará o tempo de carregamento do seu site. Isso está longe de ser o caso quando você usa SVG. Como uma imagem criada usando um conjunto de instruções e coordenadas, os tamanhos dos arquivos SVG são incrivelmente pequenos (quando otimizados) em comparação com qualquer outro tipo de arquivo de imagem. Isso resulta em tempo de carregamento mais rápido, maior desempenho da página, maior classificação do mecanismo de pesquisa e, ao mesmo tempo, melhora a experiência do usuário. Para mais informações sobre isso, visite SEO Consultant London

SVG tem seu próprio modelo de objeto de documento

O SVG existe como um documento separado, considerado como tendo sua própria estrutura e posicionado dentro do DOM normal. Essa reputação é crucial para o atributo viewBox, que nos permite criar um ponto de vista de qualquer dimensão, desenhar imagens em tamanhos variados de tela e exibi-las sem atualizar as propriedades SVG.

SVG é o formato de arquivo de imagem do futuro

Sem a chegada de dispositivos mais poderosos com resolução de tela insanamente magnífica, os desenvolvedores não teriam que lidar com as dores de cabeça esmagadoras de otimizar imagens para diferentes dispositivos. Mas isso não vai ficar mais fácil daqui a alguns anos, juntamente com a crescente fome por maior interatividade dos sites.

De alguma forma, gerenciar esses desafios servindo imagens diferentes para corresponder à dimensão do ponto de vista dos usuários não é econômico. E em prol da sustentabilidade dos negócios, economizando largura de banda, dinheiro e melhorando a experiência do usuário, os esforços para migrar para o formato de imagem SVG estão inevitavelmente se tornando uma prioridade. Há uma comunidade crescente de apoiadores de SVG.

Antes da introdução do SVG 1.1 (Segunda Edição) pelo W3C em 16 de agosto de 2011, que está potencialmente sob revisão para uma versão mais recente, o SVG 1.0 e 1.1 (Primeira Edição) já estavam mudando a maneira como lidamos com imagens na Internet. Esta é uma promessa de algo que vale mais do que o formato de imagem raster regular, que ainda é muito útil em nosso estado atual de programação web. SVG não é o melhor formato de imagem em todos os casos. Espera-se que as versões subsequentes do SVG resolvam algumas das desvantagens do SVG; a ser discutido mais adiante neste artigo.

Quando usar o formato de imagem SVG

É claro que os formatos de imagem dependentes de resolução ainda são os melhores para fotografias e outras imagens bem detalhadas. Aqui está uma lista de casos comuns em que os formatos de imagem SVG são os melhores.

1. Logos e ícones
2. Imagens interativas, como tabelas, gráficos, mapas, infográficos
3. Animações
4. Interfaces de aplicativos
5. Diagramas simples e ilustrações
6. Efeitos especiais, como pegajoso ou metamorfose de forma
7. Obras de arte de baixa intensidade e gráficos simples

Desvantagens do SVG para desenvolvedores

SVG não é suportado por todos os navegadores: navegadores antigos tratam SVGs da mesma forma que um Windows XP desatualizado trataria unidades flash ou sua Canon EOS 5DSr quando você tenta conectá-los. Em poucas palavras, o SVG não funciona em navegadores mais antigos; IE8 e inferior. No entanto, considerando que os navegadores legados não são realmente parte de nenhuma causa futura, juntamente com o fato de que apenas um punhado de pessoas ainda os usa, não é uma razão importante para não usar SVGs.

O SVG não suporta tantos detalhes: sendo uma mistura de caminhos e pontos, o SVG não tem a estrutura para exibir tantos detalhes quanto os formatos de imagem raster baseados em pixels. SVG não funciona com nada capturado com uma câmera. Assim, fotos e outras formas de gráficos com tantos detalhes são melhor exibidas usando formatos de imagem raster devido ao suporte para uma maior densidade de cores.

Entendendo o código SVG: Embora os desenvolvedores possam ser reconhecidos por saberem como usar várias linguagens de programação da Web, aumentar essa carga provou ser um desafio. O padrão de código SVG não é realmente difícil ou totalmente diferente das linguagens de programação da web. Mas criar ou manipular imagens atraentes requer algum esforço. Isso não é o que todo desenvolvedor gostaria de investir muito tempo fazendo quando as imagens de bitmap são úteis e não exigem nenhum esforço para serem incorporadas.

Conclusão

O comportamento dos gráficos em um site em resposta à sua ampla gama de usuários é um aspecto importante do desenvolvimento web hoje. E o formato de imagem SVG é a grande solução, em vez de renderizar vários tamanhos de imagem, como geralmente visto em nossos designs atuais. Isso ocorre porque os navegadores calculam como a imagem deve ser renderizada usando um conjunto de instruções que garante imagens claras e nítidas em qualquer escala.

As imagens bitmap continuam sendo as melhores para imagens altamente detalhadas, como fotografias, enquanto as imagens SVG são usadas para imagens menos detalhadas, como ícones, logotipos, gráficos, infográficos etc. criando imagens SVG e bibliotecas online para ícones e formas populares. A codificação só deve ser necessária quando você deseja manipular suas imagens SVG.

Por favor, deixe-nos saber como você usa SVG e sobre outras dicas legais não compartilhadas aqui.