Formato SVG: gráficos vectoriales escalables para la web
SVG (Scalable Vector Graphics) es un formato de imagen basado en XML que describe gráficos mediante ecuaciones matemáticas en lugar de píxeles. El resultado: imágenes que se escalan perfectamente a cualquier tamaño sin perder calidad.
Vectorial vs. rasterizado — la diferencia clave
| Característica | SVG (vectorial) | PNG/JPG (rasterizado) |
|---|---|---|
| Escalado | ✅ Perfecto a cualquier tamaño | ❌ Se pixela al ampliar |
| Tamaño de archivo | Pequeño para gráficos simples | Crece con la resolución |
| Fotografías | ❌ No apropiado | ✅ Ideal |
| Logos, iconos, ilustraciones | ✅ Ideal | Aceptable |
| Editable con texto | ✅ XML/código | ❌ Binario |
| Animable con CSS/JS | ✅ Sí | ❌ No |
| Indexado por buscadores | ✅ El texto es legible | ❌ No |
Regla práctica: usa SVG para logos, iconos, ilustraciones y gráficos de datos. Usa PNG/WebP para fotografías y capturas de pantalla.
Estructura interna de un SVG
Un SVG es un archivo XML estándar:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="200" height="200"
viewBox="0 0 200 200">
<!-- Rectángulo con esquinas redondeadas -->
<rect x="10" y="10" width="180" height="180"
rx="15" ry="15"
fill="#3b82f6" stroke="#1d4ed8" stroke-width="3"/>
<!-- Círculo -->
<circle cx="100" cy="100" r="50" fill="white" opacity="0.8"/>
<!-- Texto -->
<text x="100" y="107" text-anchor="middle"
font-family="Arial, sans-serif" font-size="18"
font-weight="bold" fill="#1e40af">SVG</text>
</svg>
Formas básicas
<!-- Línea -->
<line x1="0" y1="0" x2="200" y2="200" stroke="black" stroke-width="2"/>
<!-- Polígono (triángulo) -->
<polygon points="100,10 190,190 10,190" fill="#f59e0b"/>
<!-- Elipse -->
<ellipse cx="100" cy="60" rx="80" ry="40" fill="#10b981"/>
<!-- Path — forma libre con comandos -->
<path d="M 10,80 Q 95,10 180,80 T 360,80"
fill="none" stroke="#6366f1" stroke-width="3"/>
El comando path
| Comando | Significado | Ejemplo |
|---|---|---|
M x,y |
Move to (mover a) | M 10,20 |
L x,y |
Line to (línea a) | L 100,200 |
H x |
Línea horizontal | H 150 |
V y |
Línea vertical | V 80 |
C x1,y1 x2,y2 x,y |
Curva Bézier cúbica | C 30,10 70,10 100,50 |
Q x1,y1 x,y |
Curva Bézier cuadrática | Q 50,0 100,50 |
Z |
Cerrar path | Z |
ViewBox y sistemas de coordenadas
<!-- SVG ocupa el 100% del contenedor, coordenadas internas de 0 a 100 -->
<svg width="100%" height="auto" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="40" fill="#ef4444"/>
</svg>
Incrustar SVG en HTML
<!-- Como etiqueta img -->
<img src="logo.svg" alt="Logo" width="200" height="80">
<!-- Inline SVG — acceso total con CSS y JS -->
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24">
<path class="icon-path" d="M12 2L2 7l10 5 10-5-10-5z" fill="currentColor"/>
</svg>
Ventaja del SVG inline: puedes aplicar estilos con CSS directamente:
.icon-path { fill: #3b82f6; transition: fill 0.3s ease; }
.icon-path:hover { fill: #1d4ed8; }
Animación SVG
.spinner {
animation: rotar 2s linear infinite;
transform-origin: center;
}
@keyframes rotar {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
const circulo = document.querySelector('#mi-circulo');
circulo.setAttribute('fill', '#ef4444');
circulo.animate(
[{ transform: 'scale(1)' }, { transform: 'scale(1.2)' }, { transform: 'scale(1)' }],
{ duration: 800, iterations: Infinity }
);
Inkscape CLI
# SVG → PNG a 300 DPI
inkscape input.svg --export-type=png --export-dpi=300 --export-filename=output.png
# SVG → PDF
inkscape input.svg --export-type=pdf --export-filename=output.pdf
# Exportar elemento por ID
inkscape input.svg --export-id=logo --export-type=png --export-filename=logo.png
Python con CairoSVG
import cairosvg
cairosvg.svg2png(url="input.svg", write_to="output.png", output_width=800, dpi=150)
cairosvg.svg2pdf(url="input.svg", write_to="output.pdf")
svg_code = '<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" fill="red"/></svg>'
cairosvg.svg2png(bytestring=svg_code.encode(), write_to="circulo.png")
svgwrite — crear SVG con Python
import svgwrite
dwg = svgwrite.Drawing('grafico.svg', size=('400px', '300px'))
dwg.add(dwg.rect(insert=(0, 0), size=('100%', '100%'), fill='#f8fafc'))
datos = [('ENE', 80), ('FEB', 120), ('MAR', 95), ('ABR', 140), ('MAY', 110)]
colores = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6']
for i, (mes, valor) in enumerate(datos):
x = 40 + i * 70
y = 250 - valor
dwg.add(dwg.rect(insert=(x, y), size=(50, valor), fill=colores[i], rx=4, ry=4))
dwg.add(dwg.text(mes, insert=(x+25, 270), text_anchor='middle', font_size='12px'))
dwg.add(dwg.text(str(valor), insert=(x+25, y-5), text_anchor='middle', font_size='11px'))
dwg.save()
Optimizar con SVGO
npm install -g svgo
svgo logo.svg -o logo.min.svg
svgo -f ./icons/ -o ./icons-optimized/
Reducción típica: 40–70% del tamaño original.
Conversión SVG online
Para convertir SVG a PNG, PDF u otros formatos sin instalar software, KaijuConverter ofrece conversión directa en el navegador.
Conversiones relacionadas
Lo más habitual al trabajar con imágenes son estas direcciones de conversión: