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.

Ventajas de usar SVG

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

Desventajas de usar SVG

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.

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on facebook
Share on twitter
Share on linkedin

Nuevas/ publicaciones

Nuevas/ publicaciones

📢 Paginación con scroll infinito en Posts de Elementor 🔗 https://martagonzalez.dev/blog/paginacion-con-scroll-infinito-en-posts-de-elementor/ #webdev #playground #code #frontend #dev #webdev #developerlife #wordpress #elementor #cms #codingdays #development #frontenddev
Diseño tarjeta de visita #taxi #taxidriver #barcelona #tarjetadepresentacion #printdesign #taxibarcelona #graphicdesign #design #visitbarcelona #diseñografico #businesscards #branding #brandidentity
Move By Bike Landing - 2022 - Proyecto experimental Desarrollo de una landing page para promover el uso de la bicicleta como medio de transporte mediante una aplicación de pagina única hecha con #Angular y estilada con #SCSS. El diseño es de #Freepik. 🔗https://martagonzalez.dev/playground/by-bike-landing/ #webdev #playground #code #bybike #landing #frontend #developerlife #coding #angulardeveloper #codingdays #development #frontenddev #womenwhocode #tech #webdeveloper #codinglife
Hola mundo! 👋 Soy Marta González y me dedico al desarrollo front-end. Tengo estudios de multimedia, administración de sistemas y desarrollo de aplicaciones informáticas. Trabajo asiduamente con lenguajes #HTML5, #CSS3 y #JavaScript.  Me gustan los retos, soy autodidacta, creativa y proactiva. Aprendo con facilidad y me adapto a nuevos entornos rápidamente. #webdev #code #frontend #aboutme #developerlife #codingdays #development #programmer #womeninstem #frontenddev #webdeveloper #developer #code #techcommunity #devgirls #womenwhocode #coding #codepeople #womwnintech
Aplicación #CRUD de notas y registro de usuarios con #NodeJS #MongoDB #webdev #code #developer #playground #developerslife #codeislife #tech #codingdays #development
Pet Shop Landing - 2021 - Experimental #webdev #playground #code #frontend #developerlife #codingdays #development #frontenddev #developerlife #tech #development #adoptdontshop #coding
📢 Aplicaciones de página única (SPA) 🔗 https://martagonzalez.dev/aplicaciones-de-pagina-unica-spa/ #webdev #playground #code #frontend #developerlife #codingdays #development #frontenddev #spa #angular #react #vue #nodejs #javascript
To-Do con #ReactJS - 2021 #webdev #playground #code #frontend #developerlife #codingdays #development #frontenddev