Visualizador y generador de rutas SVG

Cree e inspeccione datos de ruta SVG con renderizado en vivo, controles de transformación y marcado SVG listo para exportar para íconos, gráficos y recursos de interfaz de usuario vectoriales.

SVG Path Visualizer & Builder

Build and inspect SVG path commands with live rendering, transform controls, and export-ready SVG markup for icons, charts, and vector interface assets.

SVG Path Data

Canvas Width

Canvas Height

Stroke Color

Fill Color or none

Stroke Width

Scale

Rotate (deg)

Translate X

Translate Y

Live SVG Preview

Generated SVG Markup

<svg width="640" height="320" viewBox="0 0 640 320" xmlns="http://www.w3.org/2000/svg">
  <g
    transform="translate(0 0) rotate(0 320 160) scale(1)"
  >
    <path d="M 40 160 C 90 20,210 20,260 160 S 430 300,500 140" fill="none" stroke="#2596be" stroke-width="4" />
  </g>
</svg>

Path Analysis Report

SVG Path Builder Report
=======================
Normalized Length: 49 character(s)
Starts With Move Command: yes
Contains Unsupported Commands: no
Validation Status: valid-looking path

Command Frequency:
C: 1
M: 1
S: 1

Render Configuration
--------------------
Canvas: 640 x 320
Stroke: #2596be
Stroke Width: 4
Fill: none
Scale: 1
Rotate: 0deg
Translate: (0, 0)

Características

Visualización de comandos de ruta: renderice datos de ruta SVG al instante para que pueda inspeccionar curvas, segmentos y continuidad de formas mientras edita cadenas de comandos sin formato.
Controles de transformación: aplique ajustes de escala, rotación y traducción para probar el ajuste de iconos, la alineación de coordenadas y el comportamiento de composición dentro de las ventanas gráficas de destino.
Validación y estadísticas de comandos: detecte patrones de comandos no compatibles y revise resúmenes de frecuencia de comandos para depurar rápidamente definiciones de rutas con formato incorrecto.
Salida de exportación SVG: Exporte informes completos de análisis y marcado SVG para integrarlos en conjuntos de iconos, gráficos, datos visuales y activos del sistema de diseño.

Casos de uso

Depuración de rutas de iconos: inspeccione los datos de rutas de iconos exportados desde herramientas de diseño para verificar la calidad del comando y corregir rápidamente conjuntos de coordenadas con formato incorrecto o sobredimensionados.
Creación de formas de gráficos: cree prototipos de líneas y áreas personalizadas para los componentes del gráfico, luego ajuste el comportamiento de trazo, relleno y transformación antes de codificar.
Configuración de gráficos en movimiento: prepare definiciones de rutas para sistemas de animación validando comandos y generando marcado SVG limpio y predecible.
Control de calidad de los activos del sistema de diseño: revise la coherencia de los activos vectoriales en un sistema de diseño verificando la complejidad de la ruta y representando la salida en una ventana gráfica controlada.
Creación de prototipos frontend: pruebe rápidamente el estilo de ruta y las transformaciones en el navegador sin abrir editores de gráficos pesados, luego copie la salida en componentes.
Aprendizaje de la sintaxis SVG: utilice comentarios visuales para comprender cómo M, C, Q, A y los comandos relacionados afectan la geometría, lo que hace que la sintaxis de ruta sea más fácil de dominar.

Trabajar directamente con datos de ruta

Edite comandos de ruta en texto plano e inspeccione inmediatamente la salida renderizada, lo cual es ideal para ajustar curvas, corregir errores de coordenadas y optimizar estructuras vectoriales.

Controles de transformación y estilo

Aplique configuraciones de rotación, escala, traducción, trazo y relleno para probar cómo se comportan las rutas dentro de los contenedores de destino y los contextos de la interfaz de usuario.

Flujo de trabajo del navegador privado

Todas las operaciones se ejecutan localmente en su navegador, lo que hace que la herramienta sea rápida y adecuada para activos vectoriales confidenciales o propietarios.

Preguntas frecuentes

El visualizador admite comandos de ruta SVG comunes, incluidos M, L, H, V, C, S, Q, T, A y Z, tanto en mayúsculas como en minúsculas.

Sí. Puede aplicar controles de escala, rotación y traducción para inspeccionar el ajuste y la orientación en diferentes ventanas gráficas.

Sí. La herramienta genera un bloque de marcado SVG completo que incluye viewBox, grupo de transformación y atributos de estilo de ruta para una fácil reutilización.

Proporciona diagnósticos a nivel de comando y comprobaciones de validez básicas, lo que le ayuda a identificar rápidamente comandos no compatibles y problemas estructurales.

Sí. La herramienta es gratuita, no requiere inicio de sesión y se ejecuta completamente en el navegador.

Los comandos en mayúsculas como M y L usan coordenadas absolutas relativas al origen SVG, mientras que los equivalentes en minúsculas como myl usan coordenadas relativas al punto actual. El visualizador representa ambos correctamente y resalta cada comando en el panel de análisis.

Sí. Puede componer datos de ruta desde cero o pegar cadenas de ruta existentes, aplicar estilos de trazo y relleno y exportar el marcado SVG completo listo para incrustar en HTML o importar a un componente de React.