SVG es un formato de gráficos vectoriales estandarizado empleado en programas de edición de gráficos. Con HTML5 es posible insertar etiquetas SVG en HTML, lo que permite crear dibujos vectoriales directamente en la web: círculos, líneas, arcos o cualquier otra forma que se nos ocurra.
Como puedes ver existen muchas posibilidades a la hora de dibujar. En este artículo explicaremos cómo crear las figuras más elementales: líneas, círculos y polígonos.
SVG en HTML: Reglas generales
Para comenzar a dibujar utilizaremos la etiqueta <svg> </svg>. El primer requisito a la hora de dibujar es que debemos darle dimensiones a la etiqueta (width y height). Esta etiqueta permite, al igual que sucede con las imágenes, asignarle estilos en línea sin que se produzcan errores de validación del código.
El modo de introducir cada figura es escribiendo sus etiquetas con sus propiedades dentro de la etiqueta svg. Dependiendo de cada figura definiremos sus coordenadas de un modo u otro.
<svg width="200" height="200"> <line x1="4" y1="4" x2="90%" y2="94%" stroke="#aaaaaa" /> </svg> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" fill="#F1EDA9" /> </svg>
Líneas SVG
Las líneas se definen con la etiqueta <line />. Para definirla tenemos que introducir las coordenadas del punto inicial y final(x1 y1 x2 y2), en pixeles o porcentaje. Si es en pixeles no hay que añadir “px” al valor. Además tenemos que asignarle un color (“stroke”) para que la muestre:
<svg width="200" height="200"> <line x1="4" y1="4" x2="90%" y2="94%" stroke="#aaaaaa" /> </svg>
Podemos añadir más propiedades como el grosor de línea, el tipo de línea o la forma de los extremos:
– Stroke-width: Grosor de la línea
– Stroke-dasharray: Líneas discontínuas. Requiere 2 valores, para la longitud de cada raya y la separación en ellas (ejemplo: “5,5”).
– Stroke-linecap: forma de los extremos (butt=recto, round=redondo, square=cuadrado)
Si, por ejemplo, queremos hacer una línea de puntos, podríamos hacerlo de este modo:
<svg width="300px" height="40px">
<line x1="40" x2="260" y1="20" y2="20" stroke="#5184AF" stroke-width="20" stroke-linecap="round" stroke-dasharray="1, 30"/>
</svg>
Círculos SVG
Los círculos se definen con la etiqueta <circle />. En este caso debemos introducir el centro del círculo y su radio (cx cy r). Podemos personalizar el contorno con los mismos parámetros “stroke” empleados para la línea. Para el relleno utilizaremos la propiedad “fill” y para cambiar su opacidad “fill-opacity”, con valores entre 0 y 1.
<svg width="100" height="100"> <line x1="0" x2="100" y1="00" y2="100" stroke="green" stroke-width="3" /> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="#F1EDA9" fill-opacity="0.8" stroke-dasharray="10,11" /> </svg>
Polígonos SVG
Los polígonos se definen con la etiqueta <poligon />. Los puntos del polígono en este caso se introducen todos con la propiedad “points” (ejemplo: points=”0,0 0,1 1,1 1,0”, que sería un cuadrado). Las propiedades para el contorno y el relleno son las mismas que ya hemos explicado, añadiendo una nueva propiedad para el relleno, “fill-rule”. Con esta propiedad podemos jugar con lo que se rellena, aceptando los valores “nonzero” y “evenodd”.
<svg width="200" height="210"> <polygon points="100,10 190,78 160,198 40,198 10,78 " style="fill:#D7DAD7;stroke:purple;stroke-width:5" /> </svg> <svg width="200" height="210"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:#D7DAD7;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg> <svg width="200" height="210"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:#D7DAD7;stroke:purple;stroke-width:5;fill-rule:nonzero;" /> </svg>
Como veis, es bastante sencillo dibujar directamente en la web.
Se pueden crear elementos en svg más complejos
Los programas de diseño vectorial como Inkscape o Adobe Illustrator nos van a permitir realizar composiciones más complejas que podemos incluir en nuestros diseños webs o aplicaciones webs. Con estos programas podemos exportar los dibujos vectorial en formato SVG, y este formato incluye todo el código html explicado anteriormente.
Si tienes una imagen en formato SVG puedes comprobarlo abríendola desde un navegador e inspeccionando el código. Verás todo el código de que compone el dibujo. Aquí un ejemplo.
Si después utilizamos programas de edición de video como Adobe After Effects podemos darle incluso efectos de movimiento.
Utilizar elementos en formato SVG como el logotipo de la cabecera tiene otra ventaja y es que al ser código HTML que se dibuja directamente en la pantalla no pierde calidad, cosa que sí sucede utilizando imágenes en formato JPG y PNG, sobre todo al redimensionarlas.
Como ejemplo compartimos cómo se introdujo el logo con efectos realizado en SVG en la web de nuestro partner de desarrollo de marcas Creatique:
En este caso se creó el logo y se le creó toda una animación con las letras. El SVG que se generó se subió la web de manera que conseguimos un efecto sobre el logo por un lado y por otro el logo no pierde calidad en ningún tamaño.
El SVG al estar creado como código HTML se le puede dar estilos con CSS lo que nos permite jugar por ejemplo con su tamaño y color.
En este caso os compartimos cómo lo hemos utilizado en una aplicación web para que el usuario pueda cambiar el color a un elemento en pantalla y poder ver cómo va quedando la composición.
En este caso se dibujó el elemento y se guardó en formato SVG. Esto nos permitió después por CSS cambiar el color según la selección de color que haga el usuario.
De esta manera se ahorró mucho tiempo de desarrollo ya que la alternativa sería generar una imagen distinta para cada color, y si os habéis fijado el número de colores RAL es brutal.
Estés donde estés, si necesitas un página web en WordPress, tienda online Woocemmerce, Desarollo de un plugin para WordPress, campañas de Google Ads, Shopping y Remarketing, así como una estrategia SEO no dudes en contactar con nosotros (Equipo de diseño web ubicados en Valencia) a través de nuestro formulario y te informaremos al respecto.
Deja una respuesta