Sobre os arquivos SVG

Imagem Vetorial SVG

Lançado em 2001 Por W3C

SVG (Scalable Vector Graphics) é o formato de gráficos vetoriais universal da web. Diferente de imagens raster (JPG/PNG), o SVG é matemático: descreve formas com instruções que escalam infinitamente sem perder qualidade. Perfeito para logos, ícones, diagramas e qualquer gráfico que precise se adaptar a diferentes tamanhos de tela.

Família

Raster & Vector Images

Extensão

.svg

Tipo MIME

image/svg+xml

Pode ser usado como

Entrada

A história

COMO NASCEU O
FORMATO SVG.

SVG — Scalable Vector Graphics — emerged from a 1999 W3C working group as the open answer to Adobe's proprietary Flash and SMIL. Unlike every other image format on this list, an SVG file is plain XML: a text document that describes shapes, strokes, and gradients as mathematical instructions rather than a grid of pixels. That means an SVG icon looks pin-sharp at any zoom level, from a favicon to a billboard.

The format struggled in the early 2000s due to patchy browser support, but when smartphones arrived with high-density Retina displays and responsive design became the norm, SVG was perfectly positioned. It is now the default format for logos, icons, charts, and UI illustrations across the web.

CURIOSIDADES E
FATOS INTERESSANTES.

An SVG file is just text — you can open one in any text editor and read the shape definitions.

SVG supports animations via SMIL, CSS keyframes, or embedded JavaScript.

A single SVG icon is often smaller than a 32×32 PNG because it describes the shape, not pixels.

SVG can embed raster images inside it using base64-encoded JPEG or PNG.

Because SVG is XML, it can contain JavaScript — which has made uploaded SVGs a classic XSS vector.

VANTAGENS E
LIMITAÇÕES.

Vantagens

Resolution-independent — crisp at any size, from 16px icon to 4K billboard.
Tiny file sizes for flat graphics, logos, and UI illustrations.
Editable with any text editor; programmatically manipulable via DOM.
Supports interactivity, CSS styling, and JavaScript inside the image.
Accessible — text inside SVG is readable by screen readers.

Limitações

Not suitable for photographs or complex raster imagery.
Uploading user-provided SVG is risky — embedded scripts are an XSS vector.
Complex SVGs with thousands of paths render more slowly than a PNG equivalent.
Inconsistent rendering across browsers for edge-case features (filters, gradients).
No native concept of layers or groups for design-tool round-tripping.

Tamanhos típicos de arquivo

Simple icon

200 B – 2 KB

Company logo

2–10 KB

Complex illustration

20–100 KB

Data-visualization chart

50–500 KB

Especificações técnicas

MIME type: image/svg+xml
Format: XML (text-based)
Current version: SVG 2 (W3C Recommendation, 2018)
Compression: Gzipped variant is .svgz
Resolution: Unlimited (vector)
Animation: SMIL, CSS, JavaScript

CONVERTER A PARTIR DE
SVG

svg jpg svg png svg webp svg avif svg gif svg bmp svg tiff svg ico svg pdf svg pcx svg sgi svg dpx svg pnm svg xbm svg xpm svg wbmp svg miff

CONVERTER PARA
SVG

pcx svg sgi svg dpx svg pnm svg xbm svg xpm svg fits svg wbmp svg cin svg miff svg raw svg ai svg jpg svg jpeg svg png svg bmp svg tiff svg gif svg webp svg

Casos de uso comuns

Web icons, logos, scalable illustrations, interactive graphics.