Imagens SVG de exemplo

SVG é um formato para apresentar gráficos vetoriais. Gráfico vetorial é uma forma de codificar imagens como um conjunto de objetos geométricos elementares — pontos, linhas, círculos, retângulos. Abaixo estão as imagens de teste nesse formato disponíveis para download

Arquivo de exemplo: Rio na primavera
Rio na primavera
300 Kb
400x300
↓
Arquivo de exemplo: Parque na primavera
Parque na primavera
435 Kb
400x300
↓
Arquivo de exemplo: Imagem de teste grande com preenchimento vermelho
Imagem de teste grande com preenchimento vermelho
1 Kb
400x300
↓
Arquivo de exemplo: Imagem de teste grande com preenchimento verde
Imagem de teste grande com preenchimento verde
1 Kb
400x300
↓
Arquivo de exemplo: Imagem de teste grande com preenchimento azul
Imagem de teste grande com preenchimento azul
1 Kb
400x300
↓
Arquivo de exemplo: Imagem de teste pequena com preenchimento vermelho
Imagem de teste pequena com preenchimento vermelho
1 Kb
200x200
↓
Arquivo de exemplo: Imagem de teste pequena com preenchimento verde
Imagem de teste pequena com preenchimento verde
1 Kb
200x200
↓
Arquivo de exemplo: Imagem de teste pequena com preenchimento azul
Imagem de teste pequena com preenchimento azul
1 Kb
200x200
↓
Arquivo de exemplo: Imagem vermelha pequena
Imagem vermelha pequena
1 Kb
100x75
↓
Arquivo de exemplo: Imagem verde pequena
Imagem verde pequena
1 Kb
100x75
↓
Arquivo de exemplo: Imagem azul pequena
Imagem azul pequena
1 Kb
100x75
↓
Arquivo de exemplo: Imagem vermelha de um único pixel
Imagem vermelha de um único pixel
1 Kb
1x1
↓
Arquivo de exemplo: SVG animado (SMIL + CSS, pulsação, rotação, motion path)
SVG animado (SMIL + CSS, pulsação, rotação, motion path)
2 Kb
400x300
↓
Arquivo de exemplo: SVGZ — SVG comprimido com gzip (mesma imagem, tamanho menor)
SVGZ — SVG comprimido com gzip (mesma imagem, tamanho menor)
223 Kb
400x300
↓

🧠 Como o SVG funciona

SVG não é uma imagem de pixels, mas um arquivo XML de texto com instruções de desenho: linhas, curvas, formas, texto. Por isso o SVG é escalável sem perda de qualidade e tem tamanho pequeno. Pode ser estilizado com CSS e animado com JavaScript. Veja do que ele é feito:

📄 <xml> Declaração XML e namespace 🎯 <svg> viewBox, width, height 🎨 <defs> <style> gradientes, filtros estilos, marcadores 📐 Formas <rect> <circle> <path> <text> conteúdo principal 🌐 Renderização o navegador desenha como vetores, sem perdas