Gráficos vectoriales escalables: Internet ha recorrido un largo camino desde la HTML5 se hizo popular y la gente empezó a mirar el JavaScript como un lenguaje que es capaz de desarrollar aplicaciones mucho más complejas. Como resultado, varios API han surgido y hay abundante contenido sobre cómo los navegadores pueden manejarlos todos con SVG (Scalable Vector Graphics).
Hace unos años, el Microsoft aplicó un enfoque de diseño diferenciado a todas sus aplicaciones y servicios, así como a todas las interfaces de usuario para dispositivos móviles. Con el advenimiento de ios 7, Apple ha reemplazado sus principios de apariencia y formato en favor de buenos diseño limpio y minimalista. Aun así, el lanzamiento de Google de “Diseño de materiales”que se puede utilizar en cualquier lugar, desde aplicaciones hasta la web.
Inicialmente, la principal ventaja de SVG, muy publicitada en Internet, es su naturaleza escalable. Al ensamblar un ícono, el diseñador no necesita preocuparse por “como sera el”en diferentes dimensiones o en dispositivos móviles con diferentes densidades de píxeles, y se enfoca justo en hacer el recurso de la mejor manera.
Con SVG no es necesario exportar dos formatos de archivo diferentes basados en píxeles para mostrarlos en modo retina y no retina. De hecho, no hay necesidad de preocuparse por la densidad de píxeles de cada dispositivo, especialmente considerando su naturaleza no estandarizada, sino que debe centrarse en la obra de arte.
Una vez que el ícono está listo, el diseñador lo exporta a un solo archivo en el formato “.SVG”, que el desarrollador puede cambiar de tamaño sin pérdida de calidad, simplemente aplicando los atributos “ancho" y "altura”con sus respectivos valores.
Puede ver un ejemplo del logotipo del navegador Firefox a continuación:
subir.wikimedia.org/wikipedia/commons/7/76/Mozilla_Firefox_logo_2013.svg
Sin embargo, aunque los archivos generados “.SVG" ser sólo XML, es mucho más probable que utilices un editor de imágenes vectoriales. Las alternativas más comunes son Ilustrador Adobe y paisaje de tinta, pero en macOS tenemos otra muy buena alternativa llamada bosquejo.
Además, SVG funciona mejor cuando no es tan complejo. Esto se debe a que su tamaño puede aumentar mucho dependiendo de lo que estés desarrollando: los colores sólidos son mucho más pequeños que los degradados, por ejemplo. Sin embargo, esto no significa que no puedas tener gráficos complejos, pero ten en cuenta el problema del tamaño del archivo si vas a utilizar SVG en una página, por ejemplo.
Si utiliza el software Adobe Illustrator, hay algunas cosas que puede hacer para reducir considerablemente esta complejidad al exportar el archivo SVG. Lo primero que debemos hacer es ampliar el gráfico, modificando los atributos que definen su apariencia y otras propiedades de los elementos que contiene. Esto también ayudará con cosas como la opacidad y los degradados.
Otro aspecto importante al que debes prestar atención es que al exportar también hay algunas cosas que hacer. Elige perfil SVG 1.1, que es lo que tiene Mayor compatibilidad entre navegadores en la actualidad.. los perfiles SVG pequeño 1.1 y las otras variaciones de SVG están dirigidas a dispositivos móviles pero aún no cuentan con el soporte adecuado.
Además, si no necesita manipular el texto dinámicamente, convierta todas las fuentes en objetos. Esto asegurará que el texto mantenga las características que definiste, sin aumentar el tamaño final del archivo, ya que a todos los efectos los textos serán solo objetos.
Debido a que es un archivo basado en texto, el SVG Tiene un excelente factor de compresión para varios segmentos. un archivo de 30 KB, por ejemplo, cae a 9,6KB cuando se sirve con tecnología GZIP. Si utilizas la técnica de URI de datos, un archivo que contiene 13 KB cae a 4,9 KB cuando se sirve con tecnología de compresión GZIP.
¡Espero haber ayudado!
¡Comparte el artículo y deja tus comentarios! 🙂
