¿Qué comandos de ruta SVG son compatibles?

Todos los comandos estándar: M/m, L/l, H/h, V/v, C/c, S/s, Q/q, T/t, A/a, Z/z. Se admiten las variantes absolutas (período) y relativas (bajo caso).

¿Cómo se muestran los puntos de control?

Para curvas cúbicas (C/c), dos puntos de control azul están conectados a cada ancla por líneas recortadas, mostrándole exactamente cómo se moldea la curva. Para curvas cuadráticas (Q/q), se muestra un único punto de control púrpura. Los puntos de anclaje se dibujan como puntos rojos pequeños.

¿Puedo editar el camino en el visualizador?

Actualmente edita el texto de datos de ruta y las actualizaciones de visualización en vivo. La manipulación directa de los puntos de control arrastrando sobre el lienzo está planeada para una actualización futura.

SVG Path Visualizer

Pruebe cualquier ruta SVG d-attribute y vea que se renderizó al instante con la visualización de puntos de control.

Control points Grid

SVG Path Data (d attribute)

Preview

Was this tool helpful?

Send output to:

How to use SVG Path Visualizer

Pegue una cadena de atributo SVG en la caja de entrada.
El camino se realiza al instante en el panel de vista previa con vista autocalculadaBox.
Los puntos azules muestran puntos de control cúbicos de persiana, puntos púrpuras muestran puntos de control cuadráticos de persiana y puntos rojos muestran puntos de anclaje.
Toggle the grid overlay for precise positioning, or use the Copy/Download buttons to export your path.
Edite los datos de ruta y vea los resultados actualizados en tiempo real.

¿Cómo se llama?

Las cadenas de datos pueden ser crípticas, una larga cadena de letras y números que es difícil de depurar leyendo solo. Esta herramienta hace que sus datos de ruta vivan, mostrando la forma real, puntos de control para curvas de persiana, y puntos de anclaje. Es invalorable cuando usted está arreglando los caminos SVG o depurando por qué una curva no se ve como se espera. La herramienta es compatible con todos los comandos estándar de ruta SVG: M/m (move), L/l (line), H/h (horizontal), V/v (vertical), C/c (bezier cúbico), S/s (smooth cubic), Q/q (bezier q cuadratico), T/t (cuadráctico), A/a (arco), y Z/z (carril). Los puntos de control se muestran como puntos de color conectados por líneas desgarradas a sus anclas

FAQ

¿Qué comandos de ruta SVG son compatibles?: Todos los comandos estándar: M/m, L/l, H/h, V/v, C/c, S/s, Q/q, T/t, A/a, Z/z. Se admiten las variantes absolutas (período) y relativas (bajo caso).
¿Cómo se muestran los puntos de control?: Para curvas cúbicas (C/c), dos puntos de control azul están conectados a cada ancla por líneas recortadas, mostrándole exactamente cómo se moldea la curva. Para curvas cuadráticas (Q/q), se muestra un único punto de control púrpura. Los puntos de anclaje se dibujan como puntos rojos pequeños.
¿Puedo editar el camino en el visualizador?: Actualmente edita el texto de datos de ruta y las actualizaciones de visualización en vivo. La manipulación directa de los puntos de control arrastrando sobre el lienzo está planeada para una actualización futura.

Related tools

Author

Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 SVG Path Visualizer on Wikipedia·Developer Tools on Wikipedia·SVG Path Visualizer on Britannica

People also use

← Back to Developer Tools · All tags

Last updated: 2026-06-06

SVG Path Visualizer

Something went wrong

How to use SVG Path Visualizer

¿Cómo se llama?

FAQ

Related tools

Author

People also use

Ad blocker detected

Keyboard shortcuts