¿Que es un archivo SVG?
Guia para principiantes
Un SVG (Scalable Vector Graphics, graficos vectoriales escalables) es un formato de imagen basado en texto XML. En lugar de guardar pixeles como un JPG o PNG, un SVG guarda instrucciones matematicas: lineas, curvas, formas y colores. El navegador lee esas instrucciones y dibuja la imagen.
¿Por que es "escalable"?
Como se define con formulas y no con pixeles, un SVG se ve nitido a cualquier tamaño. Puedes ampliarlo de 16 px a una valla publicitaria y nunca se pixela ni se ve borroso. Por eso es ideal para logos, iconos e ilustraciones.
SVG vs PNG vs JPG
- SVG: vectorial, nitido a cualquier escala, peso bajo en graficos simples, editable como texto. Ideal para logos, iconos, graficos.
- PNG: rasterizado (pixeles), soporta transparencia, pero pierde calidad al ampliar. Bueno para capturas e imagenes con transparencia.
- JPG: rasterizado, comprimido con perdida. Bueno para fotos, malo para texto y bordes nitidos.
Ventajas del SVG
- Calidad infinita: nunca se pixela.
- Peso ligero en graficos con pocas formas.
- Editable: puedes abrir el codigo y cambiar colores o formas.
- Animable y estilizable con CSS y JavaScript.
- Accesible y compatible con todos los navegadores modernos.
¿Como se ve por dentro un SVG?
Un circulo azul es tan simple como esto:
<svg viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#6c8cff"/></svg>
Ese texto ES la imagen. Cambiar fill cambia el color al instante.
¿Para que se usa?
Logos, iconos de interfaz, ilustraciones, graficos y diagramas, mapas, y cualquier elemento que deba verse perfecto en pantallas de distinta resolucion (incluidas las pantallas Retina).
Edita tu SVG ahora
Con svgdesk puedes abrir un SVG, modificar sus formas, colores y nodos, y exportarlo de nuevo, todo gratis y desde el navegador.