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

* Tu valoración puede tardar hasta 72 horas en publicarse.

He leido y acepto el Aviso legal y condiciones de uso

Utilizamos cookies propias y de terceros para personalizar el contenido y los anuncios, ofrecer funciones de medios sociales y analizar el tráfico. Además compartimos información sobre el uso que haces de nuestra web con nuestros partners de medios sociales, de publicidad y de análisis web. Si continúas navegando estás dando tu consentimiento para la aceptación de nuestra Política de cookies.

ACEPTAR
Aviso de cookies