Las herramientas de desarrollo que usas cada día, todas en un mismo lugar.

Conversores, formateadores, hashes, validadores y las pequeñas utilidades que no dejas de reabrir se quedan juntos en lugar de perderse entre pestañas.

GitHub

/ Herramientas

■

/ Buscador de herramientas

109 herramientas

/ Visor de SVG

Código SVG

Ancho de la vista previa (px)

Alto de la vista previa (px)

/ Herramienta seleccionada

■

Visor de SVG - herramienta de formateo gratuita

Visualiza y previsualiza código SVG con resaltado de sintaxis

■ 01

¿Qué es SVG?

SVG (Scalable Vector Graphics) es un formato de imagen vectorial basado en XML para gráficos bidimensionales. A diferencia de las imágenes rasterizadas, los SVG se pueden escalar a cualquier tamaño sin perder calidad, lo que los hace ideales para logos, iconos e ilus…

■ 02

¿Cómo funciona?

Pega tu código SVG en el área de texto. La herramienta renderizará una vista previa en vivo y mostrará el código con resaltado de sintaxis. Ajusta las dimensiones de la vista previa para ver cómo se escala el SVG. Usa el botón Copiar para copiar el código SVG…

■ 03

Casos de ejemplo

Cubre Círculo simple y Elemento de trazado (path) para que puedas comparar entradas y salidas comunes rápidamente.

/ Herramientas relacionadas

/ Código

■

Código fuente de la herramienta seleccionada, mostrado aquí junto a la versión en vivo a la derecha.

/ Código fuente

TypeScript

typescript

// No external dependencies needed - SVG is native to browsers

// Create an SVG programmatically
function createSvg(width: number, height: number): string {
  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
  <!-- Add your SVG elements here -->
</svg>`;
}

// Example: Create a circle SVG