Convertidor de imágenes Convertidor de vídeo Convertidor de audio Convertidor de documentos
Precios Guías Formatos API
Iniciar sesión
🇬🇧 Switch to English
Guía

Formato SVG: Guía Técnica Completa

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 XML http://www.w3.org/2000/svg
  • width / height: Dimensiones intrínsecas
  • viewBox: "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:

  1. SVG en línea: <svg> directamente en el marcado HTML. Acceso completo a CSS/JS. Mejor para SVGs interactivos.
  2. <img src="logo.svg">: Incrustación simple. Sin acceso a CSS/JS, sin animación (por seguridad).
  3. Fondo CSS: background-image: url('icono.svg'). Mismas restricciones que <img>.
  4. <object data="logo.svg">: SVG completo incluyendo scripts en contexto incrustado.