Formato SVG: Guía Técnica Completa
SVG (Scalable Vector Graphics) es un formato de imagen vectorial basado en XML estandarizado por el W3C. A diferencia de los formatos raster (JPEG, PNG, WebP) que almacenan píxeles, SVG almacena descripciones matemáticas de formas, trayectorias, texto y efectos visuales. La propiedad definitoria es la escalabilidad infinita — un SVG a 1×1 píxeles y a 10.000×10.000 píxeles se renderiza desde el mismo archivo con idéntica nitidez.
Estructura del Archivo SVG
SVG es XML. Un archivo SVG mínimo:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg"
width="200" height="200"
viewBox="0 0 200 200">
<circle cx="100" cy="100" r="80" fill="#e74c3c" stroke="#c0392b" stroke-width="4"/>
<text x="100" y="108" text-anchor="middle" font-size="24" fill="white">SVG</text>
</svg>
Elementos y atributos clave de SVG:
<svg>: Elemento raíz. Atributos requeridos:
xmlns: Espacio de nombres XMLhttp://www.w3.org/2000/svgwidth/height: Dimensiones intrínsecasviewBox:"minX minY ancho alto"— define el espacio de coordenadas
<path>: El elemento más poderoso — dibuja curvas y formas arbitrarias usando un lenguaje de comandos compacto.
<text>: Renderizado de texto. Atributos: x, y, font-size, font-family, text-anchor.
<defs>: Contenedor para elementos reutilizables (gradientes, filtros, símbolos, patrones) que se referencian pero no se renderizan directamente.
<use>: Instancia un elemento referenciado. <use href="#mi-icono" x="50" y="50"/> renderiza el elemento con id mi-icono en (50,50).
El Elemento Path: Lenguaje de Comandos
<path d="..."> usa un lenguaje de comandos compacto:
| Comando | Parámetros | Descripción |
|---|---|---|
M x,y |
x,y | Mover a punto (sin dibujar) |
L x,y |
x,y | Línea al punto |
H x |
x | Línea horizontal |
V y |
y | Línea vertical |
C x1,y1 x2,y2 x,y |
control1, control2, fin | Curva Bézier cúbica |
Q x1,y1 x,y |
control, fin | Curva Bézier cuadrática |
A rx ry rot laf sf x,y |
radios, rotación, indicadores, fin | Arco elíptico |
Z |
— | Cerrar trayectoria al inicio |
Gradientes y Patrones
<defs>
<!-- Gradiente lineal -->
<linearGradient id="puesta-sol" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#f39c12"/>
<stop offset="100%" stop-color="#e74c3c"/>
</linearGradient>
<!-- Gradiente radial -->
<radialGradient id="brillo" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="white" stop-opacity="1"/>
<stop offset="100%" stop-color="white" stop-opacity="0"/>
</radialGradient>
<!-- Patrón de baldosas repetido -->
<pattern id="puntos" width="10" height="10" patternUnits="userSpaceOnUse">
<circle cx="5" cy="5" r="3" fill="#3498db"/>
</pattern>
</defs>
Optimización
Los archivos SVG de herramientas de diseño (Illustrator, Inkscape, Figma) contienen metadatos innecesarios:
# SVGO (Node.js) — optimizador estándar de la industria
svgo entrada.svg -o salida.svg
# Verificar tamaño comprimido (SVG comprime muy bien con gzip/brotli)
gzip -k salida.svg && ls -lh salida.svg.gz
Optimizaciones típicas de SVGO: eliminar metadatos del editor, colapsar grupos, fusionar trayectorias, eliminar atributos redundantes, minimizar coordenadas.
Comandos de Conversión
# SVG a PNG a resolución específica
inkscape --export-filename=salida.png --export-width=1024 entrada.svg
convert -density 300 entrada.svg salida.png # ImageMagick
# SVG a PDF (vectorial, sin pérdida)
inkscape --export-filename=salida.pdf entrada.svg
cairosvg entrada.svg -o salida.pdf
# SVG a EPS
inkscape --export-filename=salida.eps entrada.svg
# Conversión masiva SVG a PNG 512px
for f in *.svg; do inkscape --export-filename="${f%.svg}.png" --export-width=512 "$f"; done
SVG en HTML5
SVG puede usarse en HTML de cuatro formas:
- SVG en línea:
<svg>directamente en el marcado HTML. Acceso completo a CSS/JS. Mejor para SVGs interactivos. <img src="logo.svg">: Incrustación simple. Sin acceso a CSS/JS, sin animación (por seguridad).- Fondo CSS:
background-image: url('icono.svg'). Mismas restricciones que<img>. <object data="logo.svg">: SVG completo incluyendo scripts en contexto incrustado.
Conversiones relacionadas
Lo más habitual al trabajar con imágenes son estas direcciones de conversión: