¿Qué es un archivo SVG? Todo lo que necesitas saber sobre el formato SVG

Un archivo SVG describe gráficos bidimensionales mediante un lenguaje de marcado basado en XML. A diferencia de JPEG o PNG, SVG es un formato vectorial: almacena formas, trazados, texto, degradados y transformaciones, en lugar de una cuadrícula fija de píxeles. Un SVG bien formado puede ampliarse desde el tamaño de un icono hasta el de una valla publicitaria sin volverse borroso.

¿Cómo funciona SVG?

Un documento SVG contiene elementos como <path>, <circle>, <text> e <image>. Un navegador o renderizador interpreta esas instrucciones con el tamaño de visualización solicitado. CSS puede aplicar estilos a los elementos, y SVG puede incluir enlaces, filtros, animaciones, scripts o recursos externos.

Esa flexibilidad es muy útil, pero implica que las subidas SVG que no sean de confianza deben tratarse como contenido activo y no como simples píxeles inofensivos.

Ventajas de SVG

Independencia de la resolución: conserva la nitidez con cualquier tamaño o densidad de píxeles.
Recursos geométricos pequeños: los logotipos e iconos pueden ocupar menos que sus equivalentes rasterizados.
Estructura editable: los colores, el texto y las formas pueden modificarse sin volver a dibujar los píxeles.
Contenido accesible: el documento puede representar títulos y texto con significado.
Animación y estilos: se integra con el diseño web y CSS.

Limitaciones y consideraciones de seguridad

SVG no es eficiente para fotografías detalladas. Los trazados y efectos complejos también pueden requerir muchos recursos para su renderización. Como SVG puede contener scripts, controladores de eventos, enlaces y referencias externas, no insertes una subida que no sea de confianza directamente en un documento HTML sin sanearla o rasterizarla.

Usa PNG, WebP o AVIF cuando necesites una imagen de píxeles predecible o una versión derivada segura para la distribución.

Comparación de SVG con PNG

Formato	Uso ideal	Escalado	Modelo de contenido
SVG	Logotipos, iconos, diagramas e ilustraciones	Sin pérdida con cualquier tamaño	Instrucciones vectoriales XML
PNG	Capturas de pantalla y arte pixelado	Requiere remuestreo	Píxeles rasterizados fijos

Cómo rasterizar archivos SVG con Transloadit

🤖/image/resize puede renderizar un SVG subido como un PNG predecible con las dimensiones que necesita tu producto:

{
  "steps": {
    ":original": { "robot": "/upload/handle" },
    "png": {
      "use": ":original",
      "robot": "/image/resize",
      "format": "png",
      "width": 1200,
      "height": 1200,
      "resize_strategy": "fit"
    }
  }
}

Preguntas frecuentes sobre SVG

¿SVG es un formato de imagen o de documento?

Es un formato de imagen representado como un documento XML. Esa estructura documental es la razón por la que SVG puede incluir más funciones que una imagen rasterizada.

¿SVG puede contener JavaScript?

Sí. SVG puede contener contenido activo, así que sanea o rasteriza las subidas antes de insertar en una página un SVG que no sea de confianza.

¿Se deben convertir las fotografías a SVG?

No. SVG es adecuado para formas e ilustraciones. Usa JPEG, WebP o AVIF para contenido fotográfico.