O que é um arquivo SVG? Tudo o que você precisa saber sobre o formato SVG

Um arquivo SVG descreve gráficos bidimensionais com marcação baseada em XML. Diferente de JPEG ou PNG, o SVG é um formato vetorial: ele armazena formas, caminhos, texto, gradientes e transformações em vez de uma grade fixa de pixels. Um SVG bem formado pode ir de um ícone a um outdoor sem ficar borrado.

Como o SVG funciona?

Um documento SVG contém elementos como <path>, <circle>, <text> e <image>. Um navegador ou renderizador interpreta essas instruções no tamanho de exibição solicitado. O CSS pode estilizar os elementos, e o SVG pode incluir links, filtros, animações, scripts ou recursos externos.

Essa flexibilidade é poderosa, mas significa que uploads de SVG não confiáveis devem ser tratados como conteúdo ativo, e não como pixels inofensivos.

Vantagens do SVG

Independência de resolução: continua nítido em qualquer tamanho ou densidade de pixels.
Recursos geométricos pequenos: logotipos e ícones podem ser menores que os equivalentes raster.
Estrutura editável: cores, texto e formas podem ser alterados sem redesenhar pixels.
Conteúdo acessível: títulos e textos significativos podem ser representados no documento.
Animação e estilização: integra-se ao layout da web e ao CSS.

Limitações e considerações de segurança

O SVG é ineficiente para fotografias detalhadas. Caminhos e efeitos complexos também podem ser custosos de renderizar. Como o SVG pode conter scripts, manipuladores de eventos, links e referências externas, não insira um upload não confiável diretamente em um documento HTML sem sanitizá-lo ou rasterizá-lo.

Use PNG, WebP ou AVIF quando você precisar de uma imagem de pixels previsível ou de um derivado seguro para entrega.

SVG comparado com PNG

Formato	Melhor uso	Escalonamento	Modelo de conteúdo
SVG	Logotipos, ícones, diagramas, ilustrações	Sem perdas em qualquer tamanho	Instruções vetoriais em XML
PNG	Capturas de tela e pixel art	Exige reamostragem	Pixels raster fixos

Como rasterizar arquivos SVG com a Transloadit

O Robot 🤖/image/resize pode renderizar um SVG enviado em um PNG previsível, nas dimensões de que o seu produto precisa:

{
  "steps": {
    ":original": { "robot": "/upload/handle" },
    "png": {
      "use": ":original",
      "robot": "/image/resize",
      "format": "png",
      "width": 1200,
      "height": 1200,
      "resize_strategy": "fit"
    }
  }
}

Perguntas frequentes sobre SVG

O SVG é um formato de imagem ou um formato de documento?

É um formato de imagem representado como um documento XML. Essa estrutura de documento é o motivo pelo qual o SVG pode incluir mais comportamentos do que uma imagem raster.

O SVG pode conter JavaScript?

Sim. O SVG pode conter conteúdo ativo, então sanitize ou rasterize os uploads antes de incorporar um SVG não confiável em uma página.

Fotografias devem ser convertidas para SVG?

Não. O SVG é adequado para formas e ilustrações. Use JPEG, WebP ou AVIF para conteúdo fotográfico.