Visor de Código SVG Online - Inspecciona y Previsualiza SVG

¿Qué es SVG?

SVG (Scalable Vector Graphics) es un formato de imagen basado en XML que describe formas matemáticamente en lugar de almacenar datos de píxeles. A diferencia de JPEG o PNG, los gráficos SVG se ven perfectamente nítidos a cualquier tamaño, desde un pequeño favicon hasta una pantalla gigante. Por eso se ha convertido en el estándar para iconos, logotipos, ilustraciones y gráficos de interfaz en la web.

¿Cómo se ve el código SVG?

SVG es simplemente XML. Ejemplo de un círculo rojo:

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="red" />
</svg>

Los archivos SVG reales son mucho más complejos. Los SVG exportados de Figma, Illustrator o Sketch contienen docenas de elementos <path> con largas cadenas de coordenadas, a menudo comprimidas en una sola línea ilegible.

¿Para qué sirve un Visor de Código SVG?

• Vista previa visual instantánea: Pega el código SVG y ve el gráfico vectorial en tiempo real.
• Depurar SVG roto: Ver el código junto a la vista previa facilita encontrar el problema.
• Formatear SVG minificado: Convierte código de una sola línea en marcado legible y bien indentado.
• Copiar código limpio: Obtén el código formateado listo para incrustar en HTML.
• Aprender la sintaxis SVG: Pega cualquier icono y explora cómo están construidas las formas.

Cómo incrustar SVG en HTML

El método recomendado para iconos es SVG inline — permite estilos CSS, modo oscuro y no requiere peticiones HTTP adicionales:

<svg width="24" height="24" viewBox="0 0 24 24">
  <path d="M..." fill="currentColor"/>
</svg>