Gráficos vetoriais são um método de comunicar uma série de formas, coordenadas e caminhos ao contexto de renderização. Elas são um conjunto de instruções sobre como uma imagem deve ser desenhada. Quando essa imagem é dimensionada para cima ou para baixo, o conjunto de pontos e linhas que ela representa é redesenhado na escala. Uma curva suave entre dois pontos é redesenhada com a mesma facilidade em qualquer tamanho, semelhante ao modo como uma borda definida pelo CSS em um elemento HTML é redesenhada à medida que esse elemento é dimensionado na janela de visualização.
Elementos gráficos vetoriais escaláveis (SVG) é uma linguagem de marcação baseada em XML desenvolvida pelo W3C. É um formato de imagem vetorial projetado para a Web moderna.
Qualquer software de design dedicado à edição de artes vetoriais permite exportar uma imagem como um SVG. No entanto, por ser uma linguagem de marcação padronizada e legível, o SVG também pode ser criado e editado com qualquer software de edição de texto, independentemente do software usado para criá-lo. No entanto, isso rapidamente se torna irreal para imagens de qualquer complexidade real. O SVG pode ser estilizado com CSS ou conter JavaScript que cria comportamentos e interações nas imagens.
Mesmo além do óbvio apelo para designers e desenvolvedores, o SVG também é um formato incrivelmente eficiente em termos de experiência do usuário final. As informações descritivas contidas em uma origem SVG geralmente são altamente compactas em comparação com as informações mais prescritivas baseadas em grade de pixels dos formatos simples, no caso de formas simples. Para simplificar um pouco, a diferença entre dizer ao navegador "desenhar uma linha vermelha de 1 px entre 1 x 1 e 1 x 5" e "1 x 1 é um pixel vermelho. 1x2 é um pixel vermelho. 1x3 é um pixel vermelho. 1x4 é um pixel vermelho. 1 x 5 é um pixel vermelho." Por outro lado, a natureza descritiva do SVG requer mais interpretação (mais "pensando") do navegador. Por esse motivo, SVGs complexos podem ser mais desgastantes de renderizar. Da mesma forma, uma imagem altamente complexa pode significar um conjunto detalhado de instruções e um grande tamanho de transferência.
Pode demorar um pouco de tentativa e erro até que você seja capaz de reconhecer instantaneamente um candidato a fonte de imagem como mais bem atendido pelo SVG em vez de um formato de varredura convencional. No entanto, existem algumas diretrizes: elementos de interface como ícones quase sempre são veiculados adequadamente pelo SVG. Arte com linhas nítidas, cores sólidas e formas claramente definidas provavelmente serão uma boa candidata para SVG.
O SVG é um assunto enorme: uma linguagem de marcação inteira feita para coexistir com HTML, com opções de estilo e recursos exclusivos. Para uma introdução mais detalhada ao SVG, consulte o tutorial do MDN SVG.