Tutorial: Formas complejas con path SVG

No creerás lo fácil que es utilizar path en SVG. Te explicaré paso a paso como dibujar formas complejas.

hace un año   •   6 min de lectura

Por Andrés Tuñón
Tabla de contenidos

Hay veces que tú como frontend o diseñador quieres crear formas complejas exactas sobre un sitio web; pero dependes siempre de un programa externo para algo que puede ser más simple o te limitas a pegar una imagen.

Hay alternativas como div y el CSS art o buscar alguien que haya hecho lo mismo en codepen por ahí. ¿Cansado de depender de alguien más? ¡Te ayudaré!

¿Qué aprenderás?

Te explicaré paso a paso como lograr un polígono irregular para lograr aplicarlo en un portal administrativo como este:

Ejemplo de Polígono aplicado en un Portal Admin
Ejemplo de Polígono aplicado en un Portal Admin

Y por último un encabezado curvo como este:

Ejemplo de un Header curvo aplicado a un Landing Page
Ejemplo de un encabezado curvo aplicado a un Landing Page

No tengo un diseño final, pero tal vez hayas visto sitios aplicando encabezados similares:

Ejemplo e Headers curvos y lo que podrías lograr
Ejemplo e encabezados curvos y lo que podrías lograr

Empecemos por la base

Antes de continuar debes saber 4 conceptos importantes:

  • Para trabajar sobre un SVG debes imaginartelo como un tablero o canvas en el que dibujas sin levantar la mano. Más adelante te demostraré a que me refiero.
  • Para decirle sobre donde debe dibujar, se lo indicas con coordenadas en un plano cartesiano con la Y positiva hacia abajo.
Lo que debes imaginar en tu mente
Lo que debes imaginar en tu mente

Si alguna vez has dibujado sobre un canvas, dibujado formas con C o tienes nociones de como se dibuja formas en una pantalla, es lo mismo.

¡Sí, matemáticas! Siempre dicen que no sirven pero aquí les estoy demostrando lo útiles que son
¡Sí, matemáticas! Siempre dicen que no sirven pero aquí les estoy demostrando lo útiles que son
  • Para determinar el espacio disponible en un SVG, utilizas el viewbox y puedes escalarlo como gustes. Si no queda muy claro ahora lo demostraré a continuación.
  • Puedes aplicarle estilos a un SVG, pero no esperes que funcione exactamente igual que un div.

Formas Básicas

SVG no solo trabaja con el elemento path, sin embargo es el más poderoso de ellos. También dispone de cuadrados, círculos, polígonos regulares y más; pero todos estos, se pueden lograr con path igual. No es muy común usar las formas básicas ya que:

  • Para que quiero un cuadrado, si tengo un simple div.
  • Para que quiero un círculo, si tengo un div con border-radius: 100%.
  • Tal vez para polígonos regulares, pero es raro que te pidan una estrella o un  pentágono.

De todas maneras les dejo un tutorial rápido de como aplicar formas básicas, por si las dudas:

Basic shapes - SVG: Scalable Vector Graphics | MDN
There are several basic shapes used for most SVG drawing. The purpose of these shapes is fairly obvious from their names. Some of the parameters that determine their position and size are given, but an element reference would probably contain more accurate and complete descriptions along with other…

1. Un simple Cuadrado

La base y viewbox

Digamos que quiero un plano 7 x 7 que igual puedo escalarlo a 70 x 70; para esto el viewbox sería "0 0 70 70".

El viewbox es como un rectangulo, el cual defines, para decir desde donde quieres ver y hasta donde quieres ver. Los 2 primeros números son para la coordenada desde donde empieza el rectangulo y las últimas son para definir el largo y alto (en ese orden).

Ejemplo visual  del viewbox
Ejemplo visual del viewbox

Move To y Line To

Para definir donde deseas empezar, se utilizar "Move To" y se representa por una M. Es como donde colocas inicialmente el lápiz.

Para definir hacia donde quieres hacer una lína seria con "Line To" y se representa con L.

Con esto ya podemos hacer formas rectas, hagamos un triangulo:

<path fill="blue" d="M 30 30 L 50 30 L 50 50"></path>
<path fill="blue" d="M 30 30 L 50 30 L 50 50"></path>

Igual "Line To" tiene formas abreviadas para una linea horizontal y una vertical, por ejemplo se puede lograr lo anterior con: d="M 30 30 H 50 V 50".

¿Recuerdas lo de no levantar la mano?

Aquí puedes apreciar que se completa la forma que hiciste; hay formas de hacer líneas, pero como estoy usando fill ocurre esto.

Ya lo siguiente facilito...

<path fill="blue" d="M 30 30 H 50 V 50 H 30"></path>
<path fill="blue" d="M 30 30 H 50 V 50 H 30"></path>

Y finalmente para decir que cierre el path, podrías agregar una L, H o V con su coordenada; pero más fácil una simple Z que dice "regresame a donde empecé".

<path fill="blue" d="M 30 30 H 50 V 50 H 30 Z"></path>
<path fill="blue" d="M 30 30 H 50 V 50 H 30 Z"></path>

Resultado Final

(Puede que no se vea en la versión para celular, te dejo el enlace)

2. Un Polígono Irregular

Sabiendo lo anterior podemos hacer algo super cool:

Resultado Final

(Puede que no se vea en la versión para celular, te dejo el enlace)

3. Una curva simple

Digamos que quiero lograr un curva simple en un encabezado, esto fácil lo logro con un div y border-radius; pero digamos que quiero una curvatura específica.

La curvatura cuadrática

Esta vez el comando es un poco más complicado, tienes que decirle donde acaba y a partir de que punto, se representa por la letra Q:

Q <Punto domina curvatura> <Punto final de la curva>

El rojo de arriba es el punto que domina la curva
El rojo de arriba es el punto que domina la curva

A continuación un ejemplo aplicado para un encabezado. Si actualizas el código a d="M 0 0 Q 500 200 1000 0 Z" verás como la curva es más pronunciada.

Resultado Final

(Puede que no se vea en la versión para celular, te dejo el enlace)

4. Una curva un poco más complicada

Para aplicar esta versión debes conocer T que es solamente una extensión de una cuadrática. Si ya el path conoce que empezaste con una cuadrática, puedes extenderlo con T solo dandole el punto final al cual debe llegar:

Q <Punto domina curvatura> <Punto final de la curva> T <Punto final de la curva>

El punto rojo de abajo es el que extiende en espejo la primera curva
El punto rojo de abajo es el que extiende en espejo la primera curva
Resultado Final

(Puede que no se vea en la versión para celular, te dejo el enlace)

Hay muchas otras versiones y formas que puedes lograr, te lo dejo todo en las referencias.

Referencia

7 Concepts- Why Your SVG Is the Way It Is?
If you have already worked with SVGs or you are new to it, this article is for you. I am sharing a few important concepts which will help you debug and create SVGs.
Basic shapes - SVG: Scalable Vector Graphics | MDN
There are several basic shapes used for most SVG drawing. The purpose of these shapes is fairly obvious from their names. Some of the parameters that determine their position and size are given, but an element reference would probably contain more accurate and complete descriptions along with other…
Paths - SVG: Scalable Vector Graphics | MDN
The <path> element is the most powerful element in the SVG library of basic shapes. It can be used to create lines, curves, arcs, and more.
Get Waves – Create SVG waves for your next design
A free SVG wave generator to make unique SVG waves for your next web design. Choose a curve, adjust complexity, randomize!

Corre la voz

Sigue leyendo