Con soporte universal en computadoras de escritorio y dispositivos móviles, ahora es el momento de descubrir los beneficios de los gráficos SVG para el diseño de páginas web.
Los gráficos vectoriales escalables (SVG) son tipos de imágenes que son universalmente compatibles con todos los navegadores de escritorio y móviles. Los beneficios de usarlos para el diseño web y de aplicaciones son enormes. Permítanos explicarle las seis razones principales.
Las imágenes se pueden escalar de la misma manera en que escalas todos los demás elementos en el diseño web sensible. Debido a la naturaleza vectorial de SVG, la imagen es independiente de la resolución. La imagen se ve nítida en cualquier pantalla, desde las hermosas pantallas de densidad de píxeles de ~ 285 ppi encontradas en los nuevos teléfonos inteligentes, hasta las ~ 85 ppi de monitores estándar.
Bien, ahora que sabemos la diferencia, veamos las razones por las que debería estar usando SVG.
1. Resolución
No importa el tamaño de tu pantalla, el zoom que hagas en las imágenes o el tipo de pantalla que tengas, las imágenes en formato SVG están basadas en vectores, caminos, formas y rellenos. Esto permite una resolución infinita, como cuando creas ilustraciones para imprimir y usas formas, ¡se aplican los mismos principios!
Usar PNG significa que el gráfico está restringido a píxeles, lo que limita la calidad. Además, muchas veces necesita atender dispositivos de «retina», lo que significa que tiene dos PNG, y uno es casi siempre un tamaño de archivo absurdo.
2. Velocidad
Muchas veces, los archivos PNG pueden incluir archivos de gran tamaño, por lo general cuando se utilizan para pantallas HDPI. Obviamente, cuanto mayor sea el tamaño del archivo, más lento será el procesamiento/carga. Las personas tienden a usar PNG cuando necesitan transparencia en las imágenes, lo que genera un tamaño de imagen ridículo, que a su vez, incrementa con locura el tiempo de carga. Los SVG son solo códigos, lo que significa tamaños de archivo muy pequeños. Hay casos en que los SVG pueden demorarse en cargarse, por ejemplo, si tienes algún monumento con un millón de rutas y rellenos en los vectores. En este caso, lo más óptimo sería usar JPEG, o incluso PNG.
3. Animación
Los SVG se pueden animar y diseñar con CSS. Las animaciones – de transformación o transición – que utilizas en elementos HTML también se pueden usar también en un elemento SVG. Hay eventos en los que no siempre puedes usar CSS para animar SVG, pero estas instancias generalmente se pueden cubrir con JavaScript, y no hay ningún problema.
Esto abre todo un mundo de creatividad cuando se trata del diseño web.
4. Practicidad
Hay muchas maneras en que los archivos SVG se pueden usar en la web, desde mostrar logotipos hasta el diseño detallado de un motor en la web. Sea cual sea la necesidad de tu sitio, en general siempre requerirás logotipos, íconos y animaciones simples en formato SVG.
5. Accesibilidad y SEO.
Los SVGs se pueden indexar en Google, lo que siempre es una buena noticia para quien quiere estar bien posicionado en los buscadores. El contenido de SVG, ya sea en un archivo independiente o incrustado directamente en HTML, está indexado.
Desventajas:
No todo en esta vida puede ser perfecto, entonces también tenemos que hablar de algunos de los puntos malos que tiene cambiar completamente a este tipo de archivos. Si bien las desventajas son mucho menores, son elementos que tienes que considerar si planeas cambiarte de lleno a este tipo de formato.
En aras de la imparcialidad, aquí hay un par de puntos a considerar al usar SVG:
- Tendrás algunos problemas al tratar de usar SVG con navegadores antiguos, por lo que también tendrás que estar preparado con reemplazos de gráficos en PNG.
- Las ilustraciones complicadas con miles de nodos probablemente se adapten mejor a los JPEG, ya que los navegadores que intentan generar SVG complicados pueden sufrir un colapso.
- En general, tal como están, los SVG se utilizan mejor para obras de arte de baja intensidad; Logos, iconos y gráficos simples.
Incluso con lo poderoso que es el SVG es, estos gráficos no pueden reemplazar todos los demás formatos de imagen que se ha estado utilizando en los sitios web desde siempre. Las fotos que requieren una profundidad de color y textura aún tendrán que ser un archivo JPG o tal vez un archivo PNG. Sin embargo, las imágenes simples, como los iconos o cualquier logotipo, señalización o ícono están perfectamente preparadas para ser diseñadas como SVG.
SVG también puede ser apropiado para ilustraciones más complejas, como logotipos de empresas o gráficos y tablas. Al final, el diseño de páginas web puede ser tan sencillo o complejo como tú quieras, lo importante es mantenerlo optimizado y user-friendly.
CG Medios – Diseño web Playa del Carmen