Cómo se usa
- Pega los datos del trazado, o un elemento path o svg copiado de un archivo o de una herramienta de diseño.
- Mira la vista previa: los puntos redondos son los puntos finales de los comandos, los cuadrados son puntos de control de Bézier y las líneas discontinuas, los manejadores.
- Lee la lista de comandos y el cuadro delimitador, y copia la versión absoluta si la necesitas.
Cómo funciona
Los datos se dividen en comandos y números según las reglas de SVG: los números pueden ir separados por espacios, comas o solo por el signo, los pares de más tras M son comandos de línea y los indicadores del arco pueden escribirse sin espacios. Los puntos relativos se suman al punto actual, y S y T reflejan el punto de control anterior. El cuadro delimitador usa los extremos exactos de cada segmento.
Ejemplo resuelto
El corazón de ejemplo es M10 30 A20 20 0 0 1 50 30 A20 20 0 0 1 90 30 Q90 60 50 90 Q10 60 10 30 Z. Los dos arcos son semicírculos de radio 20 con centro en (30, 30) y (70, 30), así que su parte superior llega a y = 10. Las curvas cuadráticas bajan hasta (50, 90). Por tanto, el cuadro va de 10 a 90 en x y de 10 a 90 en y: ancho 80, alto 80, con 6 comandos en 1 subtrazado.
Consejos
- Para centrar un trazado en un viewBox, usa el cuadro: pon el viewBox como «x y ancho alto», con un poco de margen.
- Muchos comandos relativos diminutos suelen venir de un optimizador; la forma absoluta los hace más fáciles de seguir.
- Si la vista previa está vacía, comprueba que no falte la letra de comando al principio de los datos.