¿Qué es SVG?
SVG (Scalable Vector Graphics) es un formato de imagen vectorial basado en XML que escala a cualquier tamaño sin perder calidad. Aprende qué es SVG, cómo funciona y cuándo usarlo.
SVG es un lenguaje de marcado basado en XML para describir gráficos vectoriales 2D. A diferencia de los formatos rasterizados (PNG, JPG) que almacenan imágenes como cuadrículas de píxeles, SVG describe formas matemáticamente — usando trazados, círculos, rectángulos y curvas Bézier. Esto significa que las imágenes SVG pueden escalar a cualquier tamaño — desde un favicon de 16×16 hasta un fondo de 4K — sin ninguna pérdida de calidad.
Cómo Funciona SVG
Un archivo SVG es un archivo de texto con marcado XML: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="40" fill="#FF5733" /> <text x="50" y="55" text-anchor="middle" fill="white">Hola</text> </svg> Este SVG renderiza un círculo rojo con "Hola" dentro. El navegador lee el XML y lo renderiza como gráficos nítidos a cualquier resolución.
Ventajas de SVG
• Independiente de la resolución — perfecto a cualquier tamaño, sin pixelación • Archivo pequeño — los gráficos simples son mucho más pequeños que los PNG equivalentes • Editable con un editor de texto o herramientas de diseño (Figma, Illustrator) • Animable — CSS y JavaScript pueden animar elementos SVG • Accesible — el texto en SVGs es texto real, legible por lectores de pantalla y motores de búsqueda • Estilizable con CSS — cambiar colores y estilos sin editar el archivo • Puede insertarse directamente en HTML
Cuándo Usar SVG
SVG es ideal para: • Logos e iconos de marca — deben ser nítidos en todos los tamaños • Iconos de UI e ilustraciones • Gráficos y visualizaciones de datos • Gráficos interactivos y animaciones • Favicons (los navegadores modernos soportan favicons SVG) • Gráficos geométricos simples NO uses SVG para: • Fotografías — los formatos rasterizados (JPG/WebP) son mucho más eficientes • Imágenes fotorrealistas complejas • Imágenes con muchos colores y degradados — el tamaño del archivo se vuelve grande
Try it yourself
Generar Favicon desde SVGAcerca de SVG
SVG fue desarrollado por el W3C y se convirtió en Recomendación W3C en 2001. Ahora todos los navegadores modernos lo soportan de forma nativa sin plugins. SVG se ha convertido en el estándar para iconos y logos web, reemplazando las fuentes de iconos y los sprites. La especificación SVG 2.0 agrega manejo de texto mejorado, nuevas funciones de color y mejor integración con CSS y HTML.
FAQ
- ¿Qué significa SVG?
- SVG significa Scalable Vector Graphics (Gráficos Vectoriales Escalables).
- ¿Cuál es la diferencia entre SVG y PNG?
- SVG es un formato vectorial que almacena descripciones matemáticas de formas, lo que permite escalarlo infinitamente sin pérdida de calidad. PNG es un formato rasterizado que almacena píxeles, que se vuelven borrosos al ampliarlos. SVG es mejor para logos e iconos; PNG es mejor para fotografías e imágenes complejas.
- ¿Puedo usar SVG en un sitio web?
- Sí. Todos los navegadores modernos soportan SVG de forma nativa. Puedes usar SVG como src de <img>, como background-image de CSS, o insertarlo directamente en HTML. El SVG en línea es especialmente potente ya que permite estilización CSS e interacción JavaScript.