O que é SVG?

Scalable Vector Graphics (SVG) é um formato baseado em XML para gráficos vetoriais bidimensionais, texto, estilização, animação e interatividade. Seus elementos geométricos podem ser redimensionados sem perda de resolução por rasterização.

Um documento SVG é uma árvore XML de formas, caminhos, texto, regras de pintura, transformações e referências que um renderizador resolve em uma cena bidimensional. A geometria permanece editável e independente de resolução, embora imagens raster incorporadas e efeitos de filtro ainda tenham custos finitos de amostragem. O SVG pode ser usado como recurso de imagem ou integrado a um documento, e esses modos expõem comportamentos diferentes de execução de scripts, estilização e links. Ele se aplica à criação, otimização, entrega e geração de derivados raster para diagramas, ícones e ilustrações.

viewBox recebe quatro números (mínimo de x, mínimo de y, largura, altura) que definem qual retângulo das coordenadas do próprio desenho é mapeado para a área de exibição, independentemente dos valores exibidos de width e height. Com o valor padrão de preserveAspectRatio, que é xMidYMid meet, esse retângulo é redimensionado uniformemente, mantido inteiramente visível e centralizado. Portanto, um valor de viewBox que não corresponda à extensão da ilustração faz com que ela apareça descentralizada, reduzida ou cercada por espaço vazio em qualquer tamanho de renderização.
A forma como um SVG é carregado determina o que ele pode fazer. O SVG 2 prevê que um arquivo usado no lugar de uma imagem raster, como por meio de um elemento HTML img ou de uma propriedade de imagem CSS, opere em modo restrito, sem execução de scripts, referências externas ou interatividade, e a MDN lista limites correspondentes aplicados pelos navegadores. O SVG inline e o SVG incorporado como documento por meio de iframe, object ou embed não têm essa restrição, portanto a página pode manipulá-los por scripts e aplicar estilos.
Um SVG enviado por upload é um documento que pode conter scripts executáveis, não apenas uma imagem. Os limites do contexto de imagem não se aplicam quando o arquivo é aberto diretamente. Por isso, um SVG fornecido por um usuário e servido pelo seu próprio domínio pode executar scripts nesse domínio. O registro do tipo de mídia SVG também alerta que entidades XML construídas de forma maliciosa podem esgotar a memória de processadores XML. Sanitize ou rasterize SVGs não confiáveis antes de servi-los e trate a análise no servidor como processamento de entrada não confiável.
O texto em SVG permanece como caracteres, portanto pode ser pesquisado, selecionado e lido por tecnologias assistivas, mas o SVG 2 observa que a renderização correta pode depender da disponibilidade da fonte usada na criação. Uma fonte referenciada pelo arquivo por URL é um recurso externo, que contextos de imagem não carregam, a menos que esteja incorporada como uma URL data:. Converter texto em caminhos fixa a aparência e elimina essas propriedades do texto.

Use SVG para ícones, logotipos e diagramas independentes de resolução quando o navegador ou a ferramenta oferecer suporte aos recursos necessários. Sanitize arquivos não confiáveis, pois o SVG pode conter scripts, links e outros conteúdos ativos.

Os dados de formatos de imagem da Transloadit para /image/resize, /image/enhance e /document/thumbs listam SVG e SVGZ como formatos com suporte a leitura e gravação nos dois stacks do ImageMagick listados. Já /image/resize grava no formato indicado em seu parâmetro format, que é o caminho documentado para produzir um derivado raster, como um PNG, a partir do upload de um SVG.

Quando format não é definido, a documentação diz que o formato de entrada é usado para a saída. Os dados de formatos não informam quais recursos SVG o renderizador respeita, como referências externas, fontes ou filtros. Nenhuma Assembly foi executada para esta entrada; teste com seus próprios arquivos.

Explore os formatos de arquivo e os recursos de compressão da Transloadit

O que é SVG?

Como funciona o SVG

Informações essenciais

Quando o SVG é importante

Como a Transloadit ajuda com SVG

Fontes

Transforme conhecimento sobre mídia em um pipeline funcional