En la actualidad, el formato SVG es uno de los utilizados en la web. Los navegadores más modernos admiten este tipo de formato, de manera que muchos sitios web los emplean con mayor frecuencia y en diferentes ocasiones.
A pesar de la creciente popularidad de este formato de imagen, en pocas ocasiones el porcentaje de uso de estos archivos sobrepasa los formatos de imagen más comunes y que tienen mayor tiempo de vigencia en la web.
Pero es definitivo que en ciertas ocasiones y para algunos recursos se prefiere utilizar el formato SVG. En este artículo definimos qué es SVG, mencionamos sus usos adecuados, así como sus ventajas y desventajas.
¿Qué es SVG?
SVG es un tipo de formato de imagen que se utiliza en la web. No solo es la extensión de este tipo de archivo sino que también son las siglas de Scalable Vector Graphics, lo que en español podría entenderse como Gráficos Vectoriales Redimensionales. Como su propio nombre indica, a diferencia de los formatos de imagen más populares, SVG es un archivo vectorial. Esto implica que el tamaño de la imagen puede ser fácilmente modificada y se seguirá viendo igual de nítida en sus diferentes versiones.
Este formato ha incrementado su popularidad en los últimos años gracias a la importancia de los monitores en alta definición y nuevas tecnologías que permiten acumular una mayor densidad de pixeles en las pantallas lo que mejora el aspecto y la exhibición de imágenes en nuevos dispositivos. Asimismo, su popularidad reciente también se debe a la utilización del diseño responsive y la necesidad de exportar archivos de imagen de alta calidad para diferentes tamaños de pantalla estándar.
Usos comunes del formato SVG
SVG puede ser un formato bastante práctico para ciertos recursos web. Este formato no sólo puede ser redimensionado sin perder la calidad o definición de las imágenes que forman parte del SVG, sino que se suelen generar archivos ligeros. Por supuesto, mientras más complicada sea la ilustración o forma, el archivo SVG tendrá mayor peso, así que en ciertas situaciones puede que sea más conveniente optar por otro formato más apto.
Sin embargo, SVG es un formato ideal para ciertos recursos, los cuales mencionaremos a continuación:
- Logos
- Iconos
- Botones
- Patrones sencillos
- Ilustraciones simples
- Mapas
- Gráficos estadísticos
SVG es un formato de archivo el cual sencillo de modificar. Además puedes añadir interactividad y animar ilustraciones SVG para incluir como pantalla de bienvenida o si simplemente quieres experimentar con este popular formato de imagen.
Cabe destacar que, como regla general, el formato SVG es más apropiado para imágenes que poseen formas sencillas y necesitan ser modificadas como es el caso del diseño responsive. Asimismo, pueden incluir animación u otro tipo de efectos dinámicos.
Ventajas de emplear SVG
En apartados anteriores hemos mencionado algunos de los principales beneficios que presenta este formato, así como las ocasiones y usos prácticos que se le puede dar. Pero, por si no ha quedado claro, resumimos las principales características que se presentan como verdaderos beneficios.
- SVG es un formato vectorial, ideal para el diseño responsive en donde se utilizan diferentes tamaños de imagen según el dispositivos. Ya que se ha creado en base a vectores, sin importar el tipo de modificaciones que se realicen, este formato no perderá calidad y se verá igual de nítido en todas las pantallas
- El comportamiento de las imágenes en SVG son definidos a través de XML, esto implica que este formato puede ser indexado, comprimido y programado.
- El tamaño estándar de un archivo SVG es bastante ligero y puede comprimirse aún más de ser necesario y si deseas mantener los tiempos de carga al mínimo.
- Puedes cambiar el tamaño, aplicar filtros y modos de fusión, crear máscaras de capa, agregar sombras paralelas y realizar una gran cantidad de modificaciones en un archivo SVG. Las posibilidades son casi tan amplias como las de cualquier imagen en JPG o PNG.
Desventajas de emplear el formato SVG
Después de revisar la lista de ventajas que posee el formato SVG, probablemente ya estés convencido de emplearlo. Incluso tal vez te hayas planteado utilizar como elemento decorativo en la página de inicio o alguna otras sección de tu interfaz. Pero existen ciertas desventajas que posee este formato, así que asegúrate de tenerlas en cuenta antes de decidir utilizar archivos SVG en tus proyectos. A continuación te mencionamos sus principales desventajas:
- Podría no ser compatible en navegadores antiguos como Internet Explorer 8, por ejemplo. Verifica la compatibilidad de este formato y crea un plan para que las imágenes correctas se muestren en estos casos.
- Se pueden generar archivos pesados si el diseño contiene muchos detalles, por ejemplo si la imagen consta de varias formas pequeñas. Recuerda que el SVG es mucho más útil en la web cuando se crean formas simples.
- Formato no apto para fotografías. Si estás pensando en añadir fotografías de fondo o crear una galería, recuerda que el formato más apto para ellas es JPG. SVG es un formato idóneo solo para líneas y formas. Imágenes complejas deberán ser exportadas en otro formato.