Conjunto de ícones geométricos
sample-svg-icon-set.svg
480 × 120 pxviewBox: 0 0 480 120
BaixarLinhas e formas · 0,8 KB
SVG · 5 arquivos SVG de exemplo
Baixar arquivos SVG de exemplo
Baixe arquivos SVG grátis para testar uploads, prévias, editores e projetos web. A coleção inclui ícones vetoriais originais, um emblema, um fluxograma, uma paleta e um mapa urbano.
5 arquivos SVG de exemplo Gráficos vetoriais XML escaláveis
Amostras vetoriais SVG
Arquivos SVG grátis para baixar
5 arquivos SVG de exemplo
Visualize cada vetor e baixe seu código SVG. O tamanho da tela, o viewBox e o tamanho do arquivo aparecem na tabela.
Emblema vetorial abstrato
sample-svg-logo-badge.svg
400 × 400 pxviewBox: 0 0 400 400
BaixarCaminhos e gradientes · 0,7 KB
Fluxograma de processo
sample-svg-flowchart.svg
960 × 420 pxviewBox: 0 0 960 420
BaixarFormas e conexões · 1,3 KB
Paleta de cores e gradientes
sample-svg-color-palette.svg
600 × 360 pxviewBox: 0 0 600 360
BaixarAmostras de cores · 1,2 KB
Mapa urbano estilizado
sample-svg-city-map.svg
900 × 600 pxviewBox: 0 0 900 600
BaixarQuadras e ruas · 1,4 KB
Guia SVG: imagens vetoriais, viewBox e escala
SVG significa Scalable Vector Graphics. É um formato baseado em XML para descrever gráficos bidimensionais com elementos como caminhos, formas, textos e gradientes. Como os desenhos vetoriais são descritos matematicamente, eles podem ser exibidos em vários tamanhos sem a pixelização que ocorre ao ampliar uma imagem raster pequena.
Vetores permanecem nítidos ao redimensionar
SVG descreve formas e caminhos em vez de armazenar apenas uma grade fixa de pixels. O navegador pode desenhar o mesmo vetor em diferentes tamanhos, ideal para logotipos, ícones, diagramas e elementos de interface.
viewBox define o espaço de coordenadas
O viewBox do SVG define o sistema de coordenadas do desenho. Os atributos de largura e altura indicam o tamanho de exibição preferido; layouts responsivos podem escalar o gráfico mantendo as proporções.
O código SVG pode ser editado
A marcação SVG pode ser aberta em um editor de texto ou aplicativo vetorial. Estas amostras usam caminhos, formas, cores e gradientes originais para você inspecionar ou adaptar o código.
Dúvidas sobre arquivos SVG
O que é um arquivo SVG?
SVG significa Scalable Vector Graphics. É um formato baseado em XML para descrever gráficos vetoriais bidimensionais, como ícones, diagramas e ilustrações.
SVG perde qualidade ao ampliar?
As formas vetoriais são desenhadas para o tamanho de exibição e geralmente continuam nítidas ao serem escaladas. Uma imagem raster incluída no SVG ainda tem os limites dos pixels originais.
O que significa viewBox em SVG?
O viewBox define o retângulo de coordenadas interno usado para desenhar o SVG. Ele ajuda o navegador a escalar o gráfico para diferentes tamanhos sem alterar as proporções.
Quando devo usar SVG em vez de PNG?
SVG costuma ser adequado para logotipos, ícones e diagramas com formas simples. PNG pode ser mais indicado para fotografias, arte complexa em pixels ou fluxos que exigem uma imagem raster.
Posso abrir e editar um arquivo SVG?
Sim. Muitos editores vetoriais e de código abrem a marcação SVG. A edição pode alterar o desenho; guarde uma cópia original se precisar preservá-lo.
Referências SVG: Especificação SVG do W3C · Guia SVG da MDN