Conjunto de iconos geométricos
sample-svg-icon-set.svg
480 × 120 pxviewBox: 0 0 480 120
DescargarLíneas y formas · 0,8 KB
SVG · 5 archivos SVG de muestra
Descargar archivos SVG de muestra
Descarga archivos SVG gratuitos para probar cargas, vistas previas, editores y proyectos web. Incluye iconos vectoriales originales, un distintivo, un diagrama, una paleta y un mapa urbano.
5 archivos SVG de muestra Gráficos vectoriales XML escalables
Muestras vectoriales SVG
Descargar archivos SVG gratuitos
5 archivos SVG de muestra
Previsualiza cada vector y descarga su código SVG. Se muestran el tamaño del lienzo, viewBox y peso de cada archivo.
Distintivo vectorial abstracto
sample-svg-logo-badge.svg
400 × 400 pxviewBox: 0 0 400 400
DescargarTrazados y degradados · 0,7 KB
Diagrama de proceso
sample-svg-flowchart.svg
960 × 420 pxviewBox: 0 0 960 420
DescargarFormas y conectores · 1,3 KB
Paleta de colores y degradados
sample-svg-color-palette.svg
600 × 360 pxviewBox: 0 0 600 360
DescargarMuestras de color · 1,2 KB
Mapa urbano estilizado
sample-svg-city-map.svg
900 × 600 pxviewBox: 0 0 900 600
DescargarManzanas y calles · 1,4 KB
Guía SVG: imágenes vectoriales, viewBox y escalado
SVG significa Scalable Vector Graphics, o gráficos vectoriales escalables. Es un formato basado en XML para describir gráficos bidimensionales mediante elementos como trazados, formas, texto y degradados. Al definir las ilustraciones con vectores, se pueden mostrar en distintos tamaños sin el pixelado típico al ampliar una imagen rasterizada pequeña.
Los vectores conservan bordes nítidos
SVG describe formas y trazados en lugar de guardar únicamente una cuadrícula fija de píxeles. El navegador puede dibujar el mismo vector a distintos tamaños, ideal para logotipos, iconos, diagramas y gráficos de interfaz.
viewBox define el espacio de dibujo
El viewBox de SVG define el sistema de coordenadas del dibujo. Los atributos de ancho y alto indican el tamaño de presentación preferido; los diseños adaptables pueden escalar el gráfico y conservar sus proporciones.
El código SVG se puede editar
El marcado SVG se abre en un editor de texto o en una aplicación de diseño vectorial. Estas muestras usan trazados, formas, colores y degradados originales para que puedas revisar o adaptar el código.
Preguntas sobre archivos SVG
¿Qué es un archivo SVG?
SVG significa Scalable Vector Graphics. Es un formato basado en XML para describir gráficos vectoriales bidimensionales, como iconos, diagramas e ilustraciones.
¿SVG pierde calidad al ampliarse?
Las formas vectoriales se dibujan para el tamaño de visualización y suelen conservar bordes nítidos al escalarse. Una imagen rasterizada incluida en un SVG sigue limitada por sus píxeles originales.
¿Qué significa viewBox en SVG?
viewBox define el rectángulo de coordenadas interno con el que se dibuja el SVG. Ayuda al navegador a escalar el gráfico a distintos tamaños sin cambiar sus proporciones.
¿Cuándo debería usar SVG en lugar de PNG?
SVG suele ser adecuado para logotipos, iconos y diagramas con formas limpias. PNG puede ser más apropiado para fotografías, arte complejo de píxeles o flujos que necesitan imágenes rasterizadas.
¿Puedo abrir y editar un archivo SVG?
Sí. Muchos editores vectoriales y de código pueden abrir el marcado SVG. La edición puede cambiar el dibujo, así que conserva una copia original si necesitas mantenerlo intacto.
Referencias SVG: Especificación SVG del W3C · Guía SVG de MDN