En SVG (gráficos vectoriales escalables), el elemento <path> es una forma potente y versátil de crear formas y trazados complejos. El elemento <path> utiliza el atributo d para definir los datos de la ruta. Los datos de la ruta constan de una serie de comandos y parámetros que describen la forma de la ruta. Aquí hay algunas formas comunes de usar el elemento <path> en SVG:

1. Línea recta ( L o l ):

   • Utilice el comando M para moverse a un punto de partida.
   • Utilice el comando L para dibujar una línea recta hasta un punto específico.

    XML
    <path d="M10 10 L50 50" stroke="black" fill="transparent" />
   

2. Curva ( C o c ):

   • Utilice el comando C para dibujar una curva de Bézier cúbica.

    XML
    <path d="M10 80 C40 10, 65 10, 95 80 S150 150, 180 80" stroke="black" fill="transparent" />
   

3. Curva de Bézier cuadrática ( Q o q ):

   • Utilice el comando Q para dibujar una curva de Bézier cuadrática.

    XML
    <path d="M10 80 Q95 10 180 80" stroke="black" fill="transparent" />
   

4. Arco ( A o a ):

   • Utilice el comando A para dibujar arcos elípticos.

    XML
    <path d="M10 80 A50 50 0 0 0 110 80" stroke="black" fill="transparent" />
   

5. Cerrar ruta ( Z o z ):

   • Utilice el comando Z para cerrar el camino, conectando el último punto con el punto inicial.

    XML
    <path d="M10 10 L50 50 L90 10 Z" stroke="black" fill="transparent" />
   

6. Múltiples subrutas:

   • Puede tener varias subrutas en un solo elemento <path> separándolas con el comando M .

    XML
    <path d="M10 10 L50 50 M60 60 L100 100" stroke="black" fill="transparent" />
   

7. Coordenadas relativas:

   • Utilice letras minúsculas ( l , c , q , a ) para especificar coordenadas relativas.

    XML
    <path d="M10 10 l20 20" stroke="black" fill="transparent" />
   

Estos son sólo algunos ejemplos de cómo puedes usar el elemento <path> en SVG para crear diferentes formas y trazados. Experimentar con estos comandos y parámetros le ayudará a crear una amplia variedad de gráficos.