O que é SVG?
SVG (abreviação de Scalable Vector Graphics, ou Gráficos Vetoriais Escaláveis) é um formato de imagem baseado em XML utilizado para criar gráficos vetoriais bidimensionais.
Diferente de formatos de imagem rasterizados, como JPEG e PNG, que são compostos por pixels, ele utiliza formas geométricas, textos e efeitos definidos por fórmulas matemáticas, o que permite que as imagens sejam redimensionadas sem perda de qualidade.
O SVG é amplamente utilizado na web, em aplicações de design e em interfaces gráficas devido à sua flexibilidade e capacidade de interatividade.
Características
Vetorização: As imagens são baseadas em vetores, o que significa que podem ser escaladas para qualquer tamanho sem perder qualidade.
Formato baseado em texto: É escrito em XML, o que torna os arquivos editáveis com qualquer editor de texto e facilita a manipulação programática.
Interatividade e animação: Suporta interatividade via JavaScript e animações via CSS ou SMIL (Synchronized Multimedia Integration Language).
Acessibilidade: O texto dentro de arquivos SVG pode ser lido por leitores de tela, tornando-o uma escolha acessível para gráficos na web.
Compatibilidade: É suportado por todos os navegadores modernos e pode ser integrado diretamente em páginas HTML.
Benefícios do SVG
Escalabilidade: Podem ser redimensionadas para qualquer tamanho sem perda de qualidade, ideal para designs responsivos.
Tamanho de arquivo reduzido: Para gráficos simples, arquivos SVG são menores do que imagens rasterizadas, melhorando o desempenho de carregamento na web.
Edição fácil: Como é baseado em texto, pode ser editado com ferramentas simples ou programaticamente.
Interatividade: Permite a criação de gráficos interativos e animados, como mapas clicáveis ou ícones dinâmicos.
Exemplos de uso
“Ele colocou ícones SVG no site.”
“A empresa utilizou gráficos SVG interativos para criar um mapa clicável em seu site de turismo.”
“Ela animou um logotipo SVG usando CSS para adicionar um efeito dinâmico à página inicial.”
Curiosidades
• O SVG foi desenvolvido pelo World Wide Web Consortium (W3C) e lançado em 2001 como um padrão para gráficos vetoriais na web.
• Ferramentas populares de design, como Adobe Illustrator, Inkscape e Figma, permitem exportar gráficos em formato SVG.
• É amplamente utilizado em frameworks de front-end, como React e Vue.js, para criar componentes de interface reutilizáveis.
• O formato suporta filtros, gradientes, máscaras e efeitos avançados, permitindo a criação de gráficos complexos e visualmente ricos.
• O SVG é a base de bibliotecas de ícones populares, como FontAwesome e Material Icons, que oferecem ícones escaláveis para uso em projetos web.
• Apesar de suas vantagens, não é ideal para imagens fotográficas ou com muitos detalhes, onde formatos rasterizados como JPEG ou PNG são mais adequados.
Palavras relacionadas
html, xml, gif, css