Visualizador de Rutas SVG e Inspector de Curvas

Acerca de Visualizador de Rutas SVG e Inspector de Curvas

Pega el atributo d de un trazado SVG y esta herramienta lo divide en segmentos, dibuja cada uno y muestra los puntos de control de las curvas de Bézier y los centros de los arcos. Puedes pegar un fragmento <svg> completo: extrae el d del primer path. Informa del número de comandos de cada tipo, cuántos subtrazados hay y si están cerrados, el rectángulo envolvente y la longitud, y señala errores como un comando con argumentos incompletos, indicando dónde está.

El formateador convierte todas las coordenadas a absolutas (mayúsculas) o relativas (minúsculas), recorta decimales (3 por defecto) y presenta el resultado legible o compactado al máximo. La longitud se aproxima muestreando 72 puntos por segmento, así que puede diferir en los decimales de getTotalLength() del navegador.

Seis comandos cubren casi todos los trazados

Un trazado es una lista de instrucciones para un lápiz: dónde apoyarlo y cómo moverlo. Estos son los comandos que aparecen en casi cualquier icono. El resto son abreviaturas: H y V trazan líneas horizontales y verticales, y S y T continúan una curva reflejando el punto de control anterior.

• M x y — levanta el lápiz y lo mueve. Empieza un subtrazado nuevo. Los pares de coordenadas que sigan a una M se tratan como L.
• L x y — línea recta desde el punto actual.
• C x1 y1 x2 y2 x y — Bézier cúbica. Los dos puntos de control fijan la dirección con la que la curva sale y llega.
• Q x1 y1 x y — Bézier cuadrática. Un solo punto de control y formas más simples; los contornos de las fuentes TrueType se construyen con ellas.
• A rx ry rotación bandera-arco-grande bandera-sentido x y — un arco tomado de una elipse.
• Z — traza una recta hasta el inicio del subtrazado y lo cierra. El relleno funciona sin Z, pero el contorno une la esquina de otra manera.

Por qué confunden las dos banderas del arco

El comando A solo da el punto inicial, el final y los radios. Por dos puntos suelen pasar dos circunferencias de radio r, y en cada una hay un camino corto y uno largo entre los puntos. Son cuatro arcos posibles, y las dos banderas eligen uno. large-arc = 1 elige el arco de más de 180°; 0, el menor. sweep = 1 elige el sentido de ángulo creciente; como el eje y de SVG apunta hacia abajo, en pantalla es el sentido horario.

Si el radio es menor que la mitad de la distancia entre los puntos, no cabe ninguna circunferencia. La especificación indica agrandar los radios hasta que quepa una, y esta herramienta hace lo mismo. Por eso un arco con radio 10 puede dibujarse como un gran semicírculo. Si el radio es exactamente la mitad, solo existe un semicírculo y la bandera large-arc deja de importar.

Las banderas son un solo carácter, así que pueden escribirse sin separadores. En un archivo minificado, «a60 60 0 01100 0» significa banderas 0 y 1 seguidas de x = 100, y = 0. El analizador de esta herramienta lo entiende.

Coordenadas absolutas y relativas

Los comandos en mayúscula usan coordenadas medidas desde el origen del lienzo; los de minúscula, desplazamientos desde la posición actual del lápiz. Para mover un trazado absoluto hay que editar todos los números; en uno relativo basta con cambiar la primera m. Los optimizadores como SVGO generan sobre todo minúsculas por un motivo parecido: los desplazamientos pequeños tienen menos cifras y el archivo pesa menos.

Un error frecuente: en una c relativa, los tres pares de coordenadas se miden desde el punto inicial del segmento, no desde el punto de control anterior. Partiendo de (10, 10), C 20 20, 40 20, 50 10 se convierte en c 10 10 30 10 40 0: cada par es el valor absoluto menos (10, 10).

Una m minúscula justo después de una z se mide desde el inicio del subtrazado al que volvió la z. Si al unir dos trazados a mano una forma aparece en un sitio raro, revisa eso primero.

Depurar un trazado que se ve mal

Los números pueden separarse con un signo o con un segundo punto decimal, no solo con espacios y comas. «10-5» son 10 y -5, y «.5.5» son 0,5 y 0,5. Cuesta leerlo, pero es válido. En cambio, una L con un solo número es un error, y los navegadores suelen dejar de dibujar el trazado en ese punto, por eso puede desaparecer medio icono.

Si una forma con agujero, como un anillo o la letra O, se ve rellena, revisa la regla de relleno. Con la regla por defecto, nonzero, el subtrazado interior debe girar en sentido contrario al exterior para formar el agujero. Con evenodd hay agujero sea cual sea el sentido.

Si un trazado se ve bien pero su caja envolvente es mayor de lo esperado, busca puntos de control muy alejados de la forma. La caja de esta herramienta sigue la curva dibujada, pero algunas aplicaciones y bibliotecas antiguas incluyen los puntos de control, lo que puede desalinear iconos.

Ejemplos

Cómo se usa

1. Pega una cadena d o código SVG, o carga un ejemplo.
2. Haz clic en un segmento para ver sus puntos de control, el centro del arco y sus extremos.
3. Elige el modo de coordenadas y la precisión, y copia el trazado formateado.

Preguntas frecuentes