Comparación entre WebFonts y SVG: Ventajas y Desventajas

Contenido del curso

Entendiendo el rendimiento

Antes de optimizar...

Crítical Rendering Path

CSS

WebFonts

14
Optimización de WebFonts para Mejorar el Rendimiento Web
15:30 min

Imágenes, Iconos y SVG

Aplicaciones JavaScript

Caché

Performance Budget

Conclusiones

38
Optimización del Critical Render Path en Aplicaciones Web
02:04 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:58

Comparación entre WebFonts y SVG: Ventajas y Desventajas

Curso de Optimización Web

Clase 17 de 38

Clase 17 / 38

Recursos

¿Qué son SVG y WebFont y cómo se diferencian de las imágenes?

Al sumergirse en el apasionante mundo del desarrollo web, es crucial entender las diferencias entre SVG, WebFont y las imágenes tradicionales. Estas últimas son bitmaps compuestos por una matriz de píxeles. A medida que acercamos la imagen, ésta se va pixelando y perdiendo calidad. Por otro lado, tanto SVG como WebFont son vectores, generados matemáticamente por los navegadores, lo que les permite mantener su nitidez sin importar el zoom.

Los vectores ofrecen múltiples ventajas en términos de calidad visual, pero es esencial distinguir cuándo es mejor usar un formato sobre otro, considerando las ventajas y desventajas que presenta cada opción.

¿Cuándo es mejor usar WebFonts?

Los WebFonts son útiles y convenientes para la distribución en Internet. Un excelente ejemplo es Font Awesome, la mayor y más popular librería de íconos que utiliza WebFonts. Sin embargo, presentan ciertas desventajas:

Bloqueo de carga: Pueden ser bloqueantes en la carga de la página al requerir una conexión HTTP.
Impacto en el rendimiento: Afectan potencialmente el rendimiento del sitio.
Accesibilidad limitada: Generalmente, no son muy accesibles para todos los usuarios.

¿Cuándo es ideal usar SVG?

El formato SVG ofrece un enfoque más ligero que puede ser integrado directamente en el HTML, brindando mejor accesibilidad y control sobre los elementos. Aquí te dejamos consejos sobre cuándo usarlo:

Logotipos y gráficos simples: Especialmente aquellos con pocos colores.
Iconos en la parte visible: Los primeros 500 a 600 píxeles de la pantalla, cruciales para una buena primera impresión.
Ilustraciones y animaciones: Gracias al control que permite sobre sus elementos y la posibilidad de animarlos con JavaScript.

Pese a sus ventajas, trabajar con SVG requiere de ciertos cuidados. Se necesita un diseñador que proporcione los formatos SVG en lugar de imágenes tradicionales, y puede incrementar el tamaño del HTML, lo cual puede resultar incomodo para los desarrolladores.

¿Cómo convertir imágenes en SVG en un proyecto?

A la hora de transformar una imagen tradicional en SVG, el proceso involucra identificar elementos gráficos simples que pueden beneficiarse del formato SVG. Recuerda que no necesitas realizar la conversión tú mismo, ya que es tarea de un diseñador gráfico. Sin embargo, es valioso saber cómo integrar un archivo SVG en un proyecto existente.

Consulta el SVG creado por el diseñador: Usa los recursos proporcionados por él.
Incorpora el SVG en el HTML: Copia el código SVG directamente reemplazando la etiqueta <img>.
Ajusta el CSS: Modifica los estilos CSS existentes para aplicar el margen y tamaño al nuevo elemento SVG.

Un manejo eficiente de SVG puede mejorar significativamente la experiencia del usuario, asegurando gráficos siempre nítidos que cargan inmediatamente junto con el contenido HTML.

Tomar decisiones informadas sobre cuándo usar SVG frente a WebFont o imágenes tradicionales puede no sólo optimizar el rendimiento de tu sitio, sino también ofrecer interfaces más accesibles y visualmente atractivas a tus usuarios. ¡Continúa explorando y experimentando con estas tecnologías para enriquecer tus habilidades como desarrollador web!

Andres Rodriguez

Hace 6 años

SVG Los SVG, junto con los webfonts, son elementos de tipo Vector. Y existe una diferencia importante entre lo que es una imagen, y lo que es un vector.

Una imagen es una matriz que se divide en cuadros, y cada cuadro representa un pixel. Mientras tanto los vectores son figuras generados matemáticamente por el navegador. Esa diferencia es notoria cuando haces bastante Zoom a la imagen comenzará a verse pixelada. Y en el vector nunca se verá pixelada.

Entre los Webfonts y los SVG es importante saber determinar cuando usar uno o el otro. Y para esto requiere analizar las ventajas y desventajas de ambos.

WebFonts

Son muy fáciles de usar y de distribuir en Internet, por ejemplo: La librería mas popular para usar iconos font-awesome utiliza webfonts para distribuirse.

Sin embargo como desventaja, dependiendo como lo cargue, puede ser bloqueante al momento de render del HTML, porque sería un recurso mas a descargar por HTTP que afecta el performance.

SVG (Scalable Vector Graphics)

Es un formato liviano, ya que es basado en XML que funciona perfectamente dentro del HTML, también permite animaciones porque otorga mucho control en los elementos que lo componen.

Sin embargo como desventaja, no es fácil de trabajarlo porque requieres de un Diseñador para crear los formatos, y en muchas ocasiones, aunque no es un problema para el navegador puede incrementar bastante el HTML si se usa de manera excesiva.

Cuando es perfecto usar SVG?

Es muy bueno usarlo en los logotipos. Cuando los logotipos son gráficas simples y maneja pocos colores, los SVG vienen bien y sobre todo cuando son iconos que están "Above the fold". Es decir en los primeros 500 o 600 pixeles de la página. Pues son los pixeles mas importantes porque es lo primero que va a ver los usuarios.

SVG también viene bien con ilustraciones y mas si son ilustraciones animadas, gracias a que SVG es HTML puedes controlar los elementos internos de los SVG incluso con Javascript.

Comentarios (20)20 comentarios

carlos matayoshi

Jonathan 🦑 Alvarez

Profesor

Diego Bastidas

Fernando Quinteros Gutierrez

Luis Felipe Medina Rodriguez

Paolo Joaquin Pinto Perez

Jose Anibal Garcia Giraldo

Hace 5 años

Luis Alejandro Vera Hernandez

Juan Fernando Montufar Juárez

Alber Vera

Silvana Ramos

Jesus Adrian Berrio Valdes

Juan Manuel Velez

Sebastian Pedroza

Hace 4 años

Legnar Rangel

Alejandro Daniel Calderón Prin

Brandon Argel Verdeja Domínguez

Jose R. Torrens Acosta

Diana Velásquez

Kenneth Angulo L

Hace 2 meses

Rubén Ernesto Aragón Gil

Cristhian Camilo Delgado Pazos

Naldo Duran

Entendiendo el rendimiento

Optimización Avanzada de Páginas Web con Técnicas Prácticas

Optimización de Sitios Web para Mejorar Conversión y Experiencia Usuario

Optimización del Rendimiento Web: Modelo RAIL de Google

Antes de optimizar...

Medición del Rendimiento Web con Chrome DevTools y Lighthouse

Métricas de Experiencia de Usuario: LCP, FID y CLS

Instalación y Configuración de Proyecto Web con Git y Webpack

Crítical Rendering Path

Entendiendo el Critical Rendering Path en Navegadores Web

Optimización de JavaScript para mejorar rendimiento web

Priorización de recursos CSS para mejorar rendimiento web

Optimización de Carga de Recursos con Preload, Prefetch y Preconnect

Optimización de Animaciones CSS para Mejorar el Renderizado

CSS

Optimización de Animaciones CSS para Mejorar Rendimiento

Optimización de CSS: Reducir Complejidad y Mejorar Rendimiento

WebFonts

Optimización de WebFonts para Mejorar el Rendimiento Web

Imágenes, Iconos y SVG

Optimización de Imágenes para Web: Formatos y Herramientas Efectivas

Optimización de Imágenes para Web: Uso de Tamaños y Formatos Adecuados

Comparación entre WebFonts y SVG: Ventajas y Desventajas

Lazy Loading de Imágenes: Técnicas y Estrategias Efectivas

Carga Adaptativa de Imágenes con Gatsby y Web API

Aplicaciones JavaScript

Optimización de JavaScript para Producción Web

Análisis y Optimización de Bundles con Webpack

Optimización de Bundles en Proyectos Web con Webpack

Code Splitting con Webpack: Optimización de Bundles en Proyectos Web

Lazy Loading de Videos con JavaScript y Modales

Event Propagation y Filtrado de Eventos en JavaScript

Integración de Librerías en Proyectos JavaScript

Optimización de Carga de Modales con Lazy Loading en Webpack

Renderizado en Cliente vs. Servidor: Diferencias y Funciones

Implementación de Server Side Rendering en NodeJS

Optimización de Sitios con Static Site Generation

Caché

Funcionamiento de Caché y Redes de Distribución de Contenido (CDN)

Configuración y despliegue de sitios web con Netlify y Github Actions

Automatización de despliegues con Github Actions y Cron en Netlify

Implementación de Caché con Service Workers en JavaScript

Performance Budget

Auditoría de Performance Web con Github Actions y Lighthouse

Creación de Pull Request y Auditorías con Github Actions

Monitoreo de Métricas en Sitios Web en Producción

Conclusiones

Optimización del Critical Render Path en Aplicaciones Web

Comparación entre WebFonts y SVG: Ventajas y Desventajas