Datos de path SVG – ejemplos de códigos
El elemento <path> le permite dibujar los contornos de formas combinando líneas, curvas y arcos. Es un elemento SVG versátil y flexible para crear rutas SVG abiertas y cerradas, tanto simples como complejas. El elemento <path> se determina por un atributo: d. Por lo tanto, una definición de ruta incluye un elemento <path> que contiene un atributo d="(SVG path data)".
Los siguientes grupos de comandos son inherentes al atributo d:
moveto (M, m)
lineto (L, l, H, h, V, v)
closepath (Z, z)
El comando M establece el punto de origen para el dibujo de ruta SVG. El grupo de comandos que dibuja segmentos de línea recta incluye los comandos lineto (L, l, H, h, V y v) y closepath (Z y z). Los siguientes tres grupos de comandos dibujan curvas:
cubic Bézier curve (C, c, S, s)
quadratic Bézier curve (Q, q, T, t)
elliptical Arc (A, a)
Todos los comandos se pueden especificar con letras mayúsculas y minúsculas. Las mayúsculas indican que las coordenadas posteriores son absolutas y las minúsculas indican las relativas. Las coordenadas siempre se escriben sin especificar unidades y se refieren al sistema de coordenadas del usuario. Generalmente están en píxeles. La ruta se describe mediante la posición del punto actual: una “pluma virtual”. El “pluma” se mueve a lo largo de las secciones del camino desde el punto inicial hasta el final. Estos puntos son los parámetros clave para todos los comandos de dibujo. Cada comando tiene parámetros; están indicados entre paréntesis.
Líneas y caminos – Lines and Paths
Cualquier ruta SVG comienza con el comando moveto M (x,y). Las coordenadas x y y indican el punto actual donde debe comenzar el camino.
Tres comandos lineto dibujan líneas rectas desde el punto actual hasta el nuevo:
L (x, y) – el comando toma dos parámetros – coordenadas x y y de un punto y dibuja una línea desde la posición actual hasta este punto (x,y).
H (x): dibuja una línea horizontal desde la posición actual hasta el punto con la coordenada x. La coordenada y no cambia el valor.
V (y): dibuja una línea vertical desde la posición actual hasta el punto con la coordenada y. La coordenada x no cambia el valor.
Los comandos H y V solo usan un argumento ya que solo se mueven en una dirección.
Después de realizar cualquier comando, el punto del “pluma virtual” se ubicará al final de ese comando de dibujo. El siguiente comando de dibujo comenzará desde este punto.
Closepath Z finaliza la ruta SVG actual y la devuelve al punto de partida. El comando Z dibuja una línea recta desde la posición actual hasta el primer punto de la ruta. El comando no tiene parámetros.
Dibujemos un cuadrado usando los comandos lineto ( lineto.svg):
1<svg height="400" width="400" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
2 <path d="M 30 30 L 110 30 L 110 110 L 30 110 L 30 30" fill="transparent" stroke-width="2" stroke="black" />
3 <path d="M 50 50 H 130 V 130 H 50 Z" fill="transparent" stroke-width="2" stroke="blue" />
4 <path d="M 70 70 h 80 v 80 h -80 Z" fill="transparent" stroke-width="2" stroke="red" />
5</svg>
Se crea un cuadrado negro utilizando secuencialmente el comando L, que dibuja una línea hasta el punto especificado (x, y). Esta es la forma más común de realizar una amplia variedad de trazados en línea recta.
Sin embargo, en el caso del rectángulo u otras formas con 90 ángulos, puedes usar los comandos H y V. Para dibujar el cuadrado azul, el código es más corto. El comando Z no requiere que el punto final especifique el cierre de la forma, lo que también reduce la escritura del código de ruta. Para la construcción del cuadrado rojo se aplicaron los comandos h y v, utilizando coordenadas relativas. La figura de la izquierda muestra todas las notas adicionales. La vista de los gráficos SVG renderizados está a la derecha.
En el artículo Editar archivo SVG se puede encontrar cómo agregar elementos, incluidas rutas SVG, a un documento SVG y editarlos usando la API Aspose.SVG.
Visite el artículo Path Builder para aprender cómo usar SVG Path Builder para crear rutas SVG mediante programación, un grupo de comandos para dibujar varios contornos o formas combinando líneas SVG, arcos SVG y curvas Bézier.
Dibujo de arco SVG – Drawing SVG Arc
Los arcos se utilizan para dibujar secciones de círculos y elipses. Para la creación de arcos SVG, no basta con especificar solo los radios de elipse. Debes tener en cuenta diferentes caminos posibles a lo largo del arco entre dos puntos: el “bolígrafo” moviéndose en una dirección de “ángulo positivo” o al revés; el “pluma” se mueve a lo largo del “arco grande” o del “arco pequeño”.
Por lo tanto, dos elipses pueden conectar dos puntos cualesquiera y se pueden dibujar cuatro arcos diferentes entre estos puntos. Los parámetros del comando A indican cuál de los cuatro arcos se elegirá.
El comando A permite hacer un trazado con arcos a mano: A (rx ry x-axis-rotation large-arc-flag sweep-flag x y).
rx, ry – radios de elipse (el centro se calcula automáticamente).
x, y – coordenadas del punto final del arco SVG.
x-axis-rotation: el ángulo de rotación del eje x relativo al sistema de coordenadas, especificado en grados.
bandera de arco grande – puede ser 0 o 1. Un valor de “0” significa que se dibujará el “arco pequeño”, un valor de “1” – se elegirá el “arco grande” .
sweep-flag: puede ser 0 o 1. Si un valor es “1”, entonces el arco se dibujará en una dirección de “ángulo positivo”. Un valor de “0” indica que el “bolígrafo” se mueve en una dirección de “ángulo negativo”.
El comando a es el mismo que A pero interpreta las coordenadas relativas al punto “pluma” actual.
1<svg height="500" width="700" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
2 <path d="M10,20 A 30,30 0 0,0 40,70" style="stroke:#FFA500; stroke-width:1; fill:none" />
3 <path d="M10,20 A 30,30 0 1 0 40,70" style="stroke: #FF0000; stroke-width:1; fill:none" />
4 <path d="M10,20 A 30,30 0 0 0 40,70 A 30,30 0 1 1 10,20" style="stroke: #FFA500; stroke-width:1; fill:#FFD700" transform="translate(70,0)" />
5</svg> 
Considere la ruta escrita en la línea 2 del código de ejemplo: d="M10,20 A 30,30 0 0,0 40,70".
El comando M establece un punto actual (inicio) (10, 20). El punto final del arco está en el comando A (40,70). Entre los puntos 1 (10, 20) y 2 (40,70), puedes dibujar dos círculos con un radio de 30 (ver figura arriba). El valor de x-axis-rotation es 0; large-arc-flag = 0 – esto significa que se dibujará el “arco pequeño”, sweep-flag = 0 – lo que significa que se seleccionará el arco 1-2, el movimiento de la “pluma” en la dirección del “ángulo negativo”, es decir, en el sentido contrario a las agujas del reloj. Este es un arco SVG de color dorado (
svg-arc.svg).
Dibujar curvas de Bézier – Draw Bézier Curves
Las curvas de Bézier son una herramienta importante para los programas de gráficos por computadora. Hay dos tipos de curvas de Bézier disponibles en elementos SVG <path>: una cúbica (C) y una cuadrática (Q). La curva tiene un punto inicial, un punto final y puntos de control. Una curva cuadrática tiene un punto de control y una cúbica tiene dos. La posición de los puntos de control determina la forma de la curva.
Curvas de Bézier cuadráticas
Cualquier curva de Bézier como punto actual (inicial) toma la ubicación del lápiz después de ejecutar el comando anterior. El comando Q de la curva cuadrática se especifica mediante solo dos puntos: el punto de control (x1, y1) y el punto final de la curva (x, y ). El comando q también viene dado por dos puntos, cuyas coordenadas son relativas al punto actual.
Consideremos un ejemplo:
1<svg width="600" height="600" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
2 <path d="M 10 100 Q 25 10 180 100" stroke="black" stroke-width="1" fill="transparent" />
3</svg>
Si conecta el punto de control a los puntos inicial y final de la curva con segmentos, la línea que conecta los centros de los segmentos será tangente al vértice de la curva.
¿Cómo afecta la posición del punto de control a la vista de la curva? Demostremos esto con ejemplos. Cambiemos el valor de y1 en el punto de control de la curva anterior ( bezier-curve2.svg):
1<svg width="600" height="600" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
2 <g stroke-width="1" fill="none">
3 <path d="M 10 100 Q 25 10 180 100" stroke="black" />
4 <path d="M 10 100 Q 25 -60 180 100" stroke="blue" />
5 <path d="M 10 100 Q 25 100 180 100" stroke="red" />
6 <path d="M 10 100 Q 25 190 180 100" stroke="green" />
7 </g>
8</svg>
Tomemos la curva negra como base y cambiemos el valor del punto de control x1 ( bezier-curve3.svg):
1<svg width="600" height="600" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
2 <g stroke-width="1" fill="none">
3 <path d="M 10 100 Q 25 10 180 100" stroke="black" />
4 <path d="M 10 100 Q -40 10 180 100" stroke="red" />
5 <path d="M 10 100 Q 165 10 180 100" stroke="green" />
6 <path d="M 10 100 Q 245 10 180 100" stroke="blue" />
7 </g>
8</svg>
1<svg width="700" height="600" xmlns="http://www.w3.org/2000/svg">
2 <path d="M 10 100 Q 25 10 180 100 T 250 100 T 320 100 T 390 100" stroke="orange" stroke-width="3" fill="none" />
3 <path d="M 10 200 Q 25 110 180 200 T 300 250 T 420 250 T 490 150" stroke="grey" stroke-width="3" fill="none" />
4</svg>Se pueden usar varios comandos Q secuencialmente para encadenar curvas extendidas, pero es posible que la curva resultante no sea suave. Puedes combinar múltiples Béziers cuadráticos sin perder suavidad con la ayuda del comando T.
El comando T dibuja la curva de Bézier cuadrática desde el punto actual hasta el punto final (x,y). Los parámetros del comando son solo las coordenadas del punto final (x,y). El comando T genera el nuevo punto de control utilizando las coordenadas del anterior. Esto funciona si el último comando fue Q o T. Al final del comando T, el par de coordenadas final (x,y) se convierte en el nuevo punto actual utilizado en el polibézier. A continuación se muestra un ejemplo de una curva creada con el comando T. Aquí, las coordenadas x de los segmentos de curva son equidistantes, la coordenada y no cambia.
1<svg width="700" height="600" xmlns="http://www.w3.org/2000/svg">
2 <path d="M 10 100 Q 25 10 180 100 T 350 100 T 520 100 T 690 100" stroke="black" stroke-width="3" fill="none" />
3</svg>
Si intenta variar las coordenadas del punto final (x,y) del comando T, puede obtener una amplia variedad de curvas ( bezier-curve5.svg).
1<svg height="700" width="750" xmlns="http://www.w3.org/2000/svg">
2 <path d="M 10 100 Q 25 10 180 100 T 250 100 T 320 100 T 390 100" stroke="#FFA500" stroke-width="3" fill="none" />
3 <path d="M 10 200 Q 25 110 180 200 T 300 250 T 420 250 T 490 150" stroke="grey" stroke-width="3" fill="none" />
4</svg>
Curva de Bézier cúbica
La curva de Bézier cúbica es más compleja que la cuadrática. Dos puntos de control describen la apariencia de la curva al principio y al final. Para crear una curva de Bézier cúbica, necesita especificar tres conjuntos de coordenadas en el comando C: las coordenadas de dos puntos de control (x1 y1, x2 y2) y el punto final de la curva (x y): C x1 y1, x2 y2, x y.
La posición de los puntos de control determina la pendiente de la línea tangente en el punto inicial y final. La función Bézier crea una curva suave que recorre desde la pendiente establecida al principio de la línea hasta la pendiente al final de la curva. Puede especificar varios comandos C en un elemento <path>; se realizarán secuencialmente. El punto final del primer comando C se convierte en el punto de partida del nuevo comando C.
El siguiente ejemplo de código crea una forma usando dos caminos ( cubic-bezier-curves.svg):
1<svg height="700" width="750" xmlns="http://www.w3.org/2000/svg">
2 <!--shape two paths-->
3 <path d="M 100 250 C 150 60 355 140 328 260 " stroke="black" stroke-width="3" fill="none" />
4 <path d="M 100 250 C 40 500 240 510 328 260" stroke="red" stroke-width="3" fill="none" />
5</svg>En la figura se muestran diferentes caminos en negro y rojo.
El siguiente ejemplo de código crea la misma forma usando una ruta:
1<svg height="700" width="750" xmlns="http://www.w3.org/2000/svg">
2 <!--shape 1 path-->
3 <path d="M 100 250 C 150 60 355 140 328 260 C 240 510 40 500 100 250" stroke="black" stroke-width="3" fill="none" />
4</svg>En el ejemplo anterior hemos conectado en un camino dos curvas con la ayuda de comandos C. Las curvas que se unen de esta manera pueden provocar una pérdida de suavidad en los puntos de conexión.
Para crear curvas largas y suaves, puede utilizar una versión abreviada del Bézier cúbico, designado por el comando S x2 y2, x y. ¿Qué hace el comando S? Permite encadenar múltiples Béziers cúbicos de forma similar al comando T para los Béziers cuadráticos. Para el comando S, el primer punto de control se considera un reflejo del anterior, que es necesario para una pendiente constante y una conexión suave de las curvas. Se deben especificar las coordenadas del segundo punto de control (x2 y2) y del punto final (x y).
Usando las curvas de Bézier, puedes hacer un dibujo simple al estilo primitivista. Hemos dibujado un cuadro similar al “Búho” de Picasso ( owl.svg):
1<svg height="700" width="750" xmlns="http://www.w3.org/2000/svg">
2 <g stroke="black" stroke-width="3" fill="none">
3 <!--body 1 path-->
4 <path d="M 100 250 C 150 60 355 140 328 260 C 240 510 40 500 100 250" />
5 <!--wing-->
6 <path d="M 110 260 C 220 200, 250 280, 120 410" />
7 <!--1 eyebrow-->
8 <path d="M 110 240 C 130 220, 220 130, 231 230" />
9 <!--2 eyebrow-->
10 <path d="M 231 231 C 230 220, 280 130, 329 258" />
11 <!--line-->
12 <path d="M 30 380 l 63 0" />
13 <path d="M 266 380 c 33 8 63 -8 90 5" />
14 <!--eyes-->
15 <circle cx="204" cy="209" r="3" />
16 <circle cx="205" cy="210" r="9" />
17 <circle cx="265" cy="209" r="3" />
18 <circle cx="265" cy="210" r="8" />
19 </g>
20</svg>
Para obtener más información sobre los archivos SVG, su estructura, los pros y los contras de este formato y el historial de SVG, visite el artículo de documentación ¿Qué es un archivo SVG?
En el artículo Element Builders – Crear y editar elementos SVG, aprenderá cómo crear y editar mediante programación elementos SVG, incluidas rutas SVG, en C# usando la API Aspose.SVG Builder. También verá cuán efectivo es SVG Builder y cómo simplifica la programación SVG. Aspose.SVG ofrece Aplicaciones web gratuitas SVG para convertir archivos SVG o de imágenes, fusionar archivos SVG, vectorizar imágenes, generar sprites SVG, codificar datos SVG a base64 y vectorizar texto. Estas aplicaciones en línea funcionan en cualquier sistema operativo con un navegador web y no requieren instalación de software adicional. ¡Es una manera rápida y fácil de resolver de manera eficiente y efectiva sus tareas relacionadas con SVG!