En esta lección conoceremos y aprenderemos sobre los gráficos SVG en HTML5, ahora es posible crear imágenes con código html, desde simples líneas hasta complejos gráficos bidimensionales de alta calidad, SVG es un formato de imagen particular y veremos por qué.
SVG en HTML5
Svg por sus siglas en inglés (scalable vector graphics) significa gráficos vectoriales escalables..
Prácticamente svg es un formato de imagen bidimensional.
Etiqueta <svg>
La etiqueta svg nos permite crear imágenes bidimensionales en formato svg.
Para crear imágenes svg primero crearemos la etiqueta con sus respectivos atributos como width (ancho) y height (alto), para que me entiendas esto creara un lienzo con sus respectivas dimensiones y dentro podremos crear nuestros gráficos vectoriales escalables.
<svg width="240" height="250">...</svg>
Si no se indica width y height el valor por defecto será del 100%.
Svg poseerá un sistema de coordenadas, donde el punto de origen (0,0) será la esquina superior izquierda, la coordenada x aumenta su valor haca la derecha y la coordenada y aumenta su valor hacia abajo.
Si no se indica width y height el valor por defecto será del 100%.
Svg poseerá un sistema de coordenadas, donde el punto de origen (0,0) será la esquina superior izquierda, la coordenada x aumenta su valor haca la derecha y la coordenada y aumenta su valor hacia abajo.
(0,0)
Dentro de podemos crear desde simples lineas, figuras geométricas como círculos, cuadrados, rectángulos, triángulos, polígonos, elipses, trayectorias, etc. Hasta complejas imágenes como logos o cualquier otra imagen.
Además podemos darle estilo con css y funcionalidades con JavaScript.
Los gráficos resultantes son vectoriales, por lo tanto nunca pierden su resolución aunque los agrandemos.
Seguro estas empezando con esto y no quiero reventarte la cabeza, ¡así que nos ponemos manos a la obra con ejemplos sencillos!.
Bordes y rellenos de gráficos dentro de SVG
De ahora en adelante aprenderemos a crear gráficos en svg, empezando por simples lineas, rectángulos, círculos, polígonos, elipses, curvas, etc.
En todos los gráficos mencionados anteriormente entra en juego dos aspectos muy importantes y será mejor conocerlos de una vez para que podamos trabajar con ejemplos concretos en las siguientes lecciones.
Pues bien todos los gráficos SVG poseen borde y relleno, la apariencia de estos dos aspectos pueden ser controlados mediante mediante varias propiedades que evidentemente irán en la etiqueta de apertura de cada gráfico.
Por ahora nos enfocaremos en conocer las propiedades que nos permitan controlar el borde y fondo, veamos.
Propiedad stroke SVG
Las propiedades relacionadas al borde son: el ancho de borde, el color, el estilo, etc.
- stroke.- permite definir el color.
- stroke-width.- ancho de borde.
- stroke-linecap.- estilo de terminación de borde.
- stroke-dasharray.- estilo de borde discontinua.
- stroke-opacity.- opacidad de borde.
Propiedad fill svg
Las propiedades relacionadas al estilo de fondo de figuras SVG
- fill.- color de fondo.
- fill-opacity.- opacidad de fondo.
- fill-rule.- color total o parcial.
Los valores que pueden tomar estas propiedades son diversos como los veremos en los respectivos ejemplo.
Lo importante aquí es que sepas que existen propiedades especificas que nos permiten controlar el borde y relleno de dibujos SVG. Por ahora es suficiente, vamos a las aplicaciones.