Marta González

Desarrollo Front-end
diseño & tecnología

Blog

Gráficos SVG, tus aliados en la Web

Los SVG (Scalable Vector Graphics) son un tipo de formato basado en vectores, por lo que es ideal para la web responsive, ya que ofrece una mayor flexibilidad y reducción del tiempo de carga sin pérdida de calidad.

Se trata de un formato idóneo para la inclusión de logos, iconos o ilustraciones simples en la web.

Los SVG ofrecen ventajas frente a las imágenes de mapa de bits entre las que cabe destacar:

  • Escalabilidad
  • Carga progresiva
  • Compatibilidad con navegadores modernos
  • Menor tamaño utilizando compresión GZIP 
  • Mediante el uso de etiquetas <svg></svg> y <object></object> permite la aplicación de estilos CSS e interacción con Javascript
  • Ayuda al SEO (Search Engine Optimization) ya que al ser XML(Extensible Markup Language) y permitir el uso de tipografía TrueType mejora la indexación en buscadores

También se han de tener en cuenta algunas particularidades de este formato, por lo que se desaconseja su uso:

  • Para webs que tengan que funcionar en navegadores antiguos, ya que el svg es incompatible con ellos. 
  • Para archivos que contengan fotografías o vectores con muchos detalles, ya que esto generaría un aumento considerable de su tamaño y, por tanto, del tiempo de carga.
HTML5
Sass
jQuery
Wordpress
Bootstrap
PHP
MySQL
Git