SVG, acronimo de “Scalable Vector Graphics”, que en español vendria a ser “gráficos vectoriales redimensionables”, es un formato estandar que nos permite insertar elementos gráficos vectoriales bidimensionales en un proyecto web, este formato define los graficos en formato XML y tiene muchas ventajas respecto al uso de imagenes, como por ejemplo que no se pierde calidad si se amplían o cambian de tamaño, la reduccion de la carga en el documento, la posibilidad de definir animaciones e implementar interactividad en los mismos.
Insertar SVG mediante Html
Para usar SVG en un documento web, insertamos un elemento SVG en el que definimos la altura y la anchura, dentro del elemento podemos definir elementos para dibujar diferentes objetos, cuadrados, rectangulos, circulos, formas ovaladas, lineas polilineas, poligonos, formas mas complejas y textos.
Los elementos mas importantes que podemos incluir en un elemento SVG son:
- <rect>
- <circle>
- <ellipse>
- <line>
- <polyline>
- <polygon>
- <path>
- <text>
Las coordenadas las definimos con “x” e “y” en <rect> y <text>, con “cx” y “cy” en <circle> y <ellipse>, cada elemento tiene sus propios atributos y son diferentes en cada uno de ellos
Con los atributos stroke y stroke-width definimos el color y la anchura del borde de la forma.
Con el atributo fill controlamos el color de la forma.
Debido a que SVG esta escrito en XML, todos los elementos deben ir debidamente cerrados.
El texto que se incluye dentro de este elemento, solo será visible en navegadores antiguos que no soporten este formato.
Ejemplo
<svg width="100" height="100">
Tu navegador no soporta este formato de imagen
<circle cx="50" cy="50" r="40" stroke="#0099CC" stroke-width="4" fill="#184583" />
</svg>
El area de dibujo
Para insertar un cuadrado o rectangulo utilizamos el elemento “rect”, para ir introduciendonos en materia, vamos a incluir en la hoja de estilos que el elemento SVG tenga un borde rojo, de esta forma veremos mejor el area (o contenedor) y su funcionamiento.
Definimos un area (svg) de 200X80 en el que incluimos un elemento “rect” de 150X50, con las coordenadas “x” e “y” definimos el numero de pixeles restantes dividido por dos para centrar el dibujo, por ultimo definimos el color con “fill”, que ya vimos anteriormente
Ejemplo
<svg width="200" height="80">
Tu navegador no soporta este formato de imagen
<rect x="25" y="15" width="150" height="50" fill="#184583" />
</svg>El atributo style
Podemos usar el atributo “style” para definir algunos aspectos de los elementos creados con SVG como “stroke” o “fill” entre otros, a continuación te muestro dos ejemplos con diferente estructura en el que el resultado es el mismo
Ejemplo 1
<svg width="200" height="80">
<rect x="25" y="15" width="150" height="50" style="fill: #184583;stroke: #0099FF;stroke-width: 2;" />
</svg>Ejemplo 2
<svg width="200" height="80">
<rect x="25" y="15" width="150" height="50" fill="#184583" stroke="#0099FF" stroke-width="2" />
</svg>Formas
SVG es un elemento sencillo de manejar, aunque su aprendizaje requiere algo de tiempo y de práctica, con un poco de dedicación podemos llegar a controlarlo y conocer todas las opciones que nos ofrece, como los filtros, las sombras y los degradados entre otros.
Respecto a las formas podemos definir circulos, formas cuadradas, formas poligonales, lineas, polilineas y seguramente alguna otra que no se me ocurre en este momento.
Ejemplos
Seria imposible explicar todo el funcionamiento de SVG en un solo articulo, por lo que os voy a insertar algunos ejemplos con una breve descripcion de lo que no hemos visto hasta ahora y no sea obvio en el codigo
Circulo con opacidad
<svg width="100" height="100">
Tu navegador no soporta este formato de imagen
<circle cx="50" cy="50" r="40" fill="#184583" fill-opacity="0.5"/>
</svg>Esto lo hacemos con el atributo fill-opacity, el atributo r indica el radio del circulo.
Forma ovalada con degradado
<svg height="130" width="200">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(0,153,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(24,69,131);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="65" rx="85" ry="55" fill="url(#grad1)" />
</svg>Una linea simple
<svg height="100" width="200">
<line x1="5" y1="5" x2="190" y2="95" style="stroke:#184583;stroke-width:2" />
</svg>Poligonos
<svg height="200" width="200">
<polygon points="100,0 200,200 0,200" fill="#184583"/>
</svg>Polilineas
<svg height="200" width="200">
<polyline points="0,0 0,20 20,20 20,40 40,40 50,150 80,20 100,200 120,0 130,40 200,40" style="fill: none;stroke: #184583;stroke-width: 2" />
</svg>Las polilineas las insertamos con <polyline>, con el atributo “points” le pasamos las coordenadas por pares (x,y) a cada punto de linea que vaya a tener.
Filtros (Sombras)
<svg width="100" height="100">
Tu navegador no soporta este formato de imagen
<circle cx="50" cy="50" r="40" fill="#184583" fill-opacity="0.5"/>
</svg>Filtros (Degradados)
<svg width="100" height="100">
Tu navegador no soporta este formato de imagen
<circle cx="50" cy="50" r="40" fill="#184583" fill-opacity="0.5"/>
</svg>Recomendación oficial del W3C
SVG pasó a ser recomendación del W3C en septiembre de 2001, en estos momentos lo admiten la mayoria de navegadores modernos aunque no todos los conceptos, si vas a empezar a usar este formato visita la Web oficial del W3C, donde encontrarás toda la documentación que necesites para trabajar con SVG.
Espero que os haya servido como una pequeña introducción al mundo de los gráficos vectoriales redimensionables, si quereis ir a lo fácil existen varias webs donde podemos descargar imagenes en formato .svg
FlatIcon,
iconmonstr,
Freepik,
IconMoon
Iconfinder.
Valoraciones
Sé el primero en valorar