¿Para qué se utiliza un archivo SVG y por qué los desarrolladores deberían usarlos?

La adopción y adaptación de SVGS es, sin duda, una de mis cosas favoritas para la comunidad de diseñadores y desarrolladores en los últimos años. Como diseñador, han sido aspirina para muchos dolores de cabeza que siempre han aparecido durante el desarrollo. Hoy echaré un vistazo a cuáles son los SVG y por qué debería comenzar a usarlos y cómo comenzar incluso si no es un diseñador. Y si desea ir directamente a las cosas buenas, estas son las principales razones por las que debe usar SVG si aún no lo está. 7 razones por las que debe usar gráficos vectoriales escalables
Los SVG son escalables y jugarán por un porcentaje de píxeles en cualquier resolución, mientras que los JPEG, PNG y GIF no lo hacen.
Los SVG son imágenes vectoriales y, por lo tanto, generalmente son mucho más pequeñas en el tamaño del archivo que las imágenes basadas en mapa de bits.
Los SVG incorporados pueden ser elegantes con CSS.
Son amigables con SEO, lo que le permite agregar palabras clave, descripciones y enlaces directamente a la marca.
Los SVG se pueden incorporar a HTML, lo que significa que se pueden almacenar en caché, editarse directamente usando CSS e indexado para una mayor accesibilidad.
Hay evidencia del futuro. Los SVG se pueden escalar para un término ilimitado, lo que significa que siempre se prenderán a la perfección de píxeles en tecnologías de visualización más nuevas, como 8K y no solo.
Los SVG se pueden animar directamente o usar CSS o JavaScript, lo que hace que los diseñadores web sean fáciles de agregar interactividad a un sitio.
¿Qué es SVG y qué se usa para SVG? Seamos técnicas por un segundo. SVG significa “gráficos vectoriales escalables” y es una imagen vectorial basada en XML. Las imágenes SVG están predominantemente en la web y, aunque tienen usos comparables con los tipos de JPEG, PNG y WebP, su ADN es extremadamente diferente. En su forma más simple, así es como se muestra un archivo SVG debajo del capó: El archivo SVG reproduciría un cuadrado azul de 250 píxeles. Entonces, ¿qué difieren los SVG? Bueno, los tipos de imágenes tradicionales como JPEG, PNG y GIF se basan en mapa de bits (o basado en ráster), lo que significa que consisten en un conjunto de píxeles. Por lo general, esto significa que tan pronto como comienza a crecer o reduce una imagen de este tipo, se le presentan líneas irregulares, artefactos poco claros y un desastre pixelado.
También tenemos el último tipo de imagen WebP, desarrollada por Google, cuyo objetivo es reemplazar los formatos de archivo JPEG, PNG y GIF, como una solución singular más flexible. Siento que la discusión sobre la webp haría que este artículo sea más confundido que útil, porque es un tema completamente diferente, que estaría feliz de considerar en otro artículo. En resumen, la imagen WebP se creó para generar archivos mucho más pequeños y para eliminar la necesidad de usar diferentes tipos de imágenes en la web. Actualmente, Safari no lo acepta y aún no ha ganado una tracción significativa en la web.
Puede obtener más información sobre la WebP a través del sitio de Google Developers o leer este artículo de nuestro propio Ian Jones, quienes discuten la compresión WebP más detallada, así como para transmitir imágenes de WebP utilizando medios de descarga de WP. Correcto, de nuevo en el camino correcto … Entonces, ¿qué difiere el formato SVG de las imágenes basadas en mapa de bits? Se basan en vectores, lo que significa que son independientes de la resolución. En lugar de estar formados por píxeles, las imágenes SVG consisten en formas. Esto significa que pueden escalar infinitamente sin una reducción en la calidad. Magia. Bueno, lo suficiente sobre lo que son. ¿Por qué deberíamos usarlos? ¡Las increíbles ventajas de los escalares perfectos en píxeles! Ya hemos detallado esto, pero deberíamos reflexionar rápidamente sobre la mayor ventaja de usar un SVG en comparación con una imagen PNG o JPEG. Los gráficos SVG se escalarán sin cesar y seguirán siendo muy claros en cualquier resolución.
Alimentos para pensar: a pesar de este hecho, pequeños SVG que contienen pocos detalles, tal cartelera. Cada caso es diferente, pero el contexto y un buen ojo son importantes cuando decide si escalar un SVG.
Archivos más pequeños de archivos Esta es otra ventaja sustancial. Debido a la naturaleza de las imágenes vectoriales, los datos que determinan el tamaño del archivo son las capas, efectos, máscaras, colores y gradientes. En comparación, las imágenes basadas en mapa de bits registran cada píxel en la imagen, así como la cantidad de colores utilizados. Por supuesto, es un poco más complicado que eso, pero lo que debe tener en cuenta es que, en su mayor parte, un archivo de imagen basado en mapa de bits será más costoso que una contraparte de SVG. Además, puede minimizar el tamaño de sus archivos SVG comprimiéndolos con GZIP. Esto significa que se deben enviar menos bytes del servidor o CDN si se activa la compresión GZIP. Y eso significa que no tiene que conocer un software de diseño para hacer un pequeño cambio, como un cambio de color. De hecho, si ha realizado algún tipo de diseño web o desarrollo frontal, no tendrá dificultades para agregar un gradiente a una forma o aumentar el grosor de una línea.

SEO amigable como se indica al comienzo de esta publicación, los SVG se basan en XML, lo que significa que se pueden incluir palabras clave, descripciones y enlaces, lo que facilita el contenido para los motores de búsqueda y mejorando la accesibilidad general.
Con imágenes basadas en mapa de bits, solo tiene los atributos “Título” y “Alt” para SEO.Los SVG se pueden incorporar a HTML en lugar de otros tipos de imágenes que deben descargarse del servidor como un recurso externo, los SVG se pueden incorporar al código HTML.Entonces, ¿por qué es esto ventajoso?Significa que se pueden buscar e indexar, lo cual es excelente para la accesibilidad.También puede cambiar el estilo de ese SVG usando CSS.Además, si memoriza sus páginas HTML en caché, esto significa que los SVG incorporados se almacenarán en caché.Los SVG son seguros para el futuro, creo que esto es algo que se pasa por alto considerablemente, especialmente cuando se trata de escalabilidad.Recuerdo un período antes de SVG, cuando la densidad de píxeles era un tema candente en la comunidad de diseño, ya que aparecieron nuevos teléfonos móviles y tabletas con maravillosas pantallas ricas.

Todo esto fue maravilloso. Pero significaba que la mayoría de las imágenes JPEG o PNG utilizadas en sitios web ya no tenían una resolución lo suficientemente grande y parecían basura en dispositivos portátiles. ¿La solución? Genere otra instancia de la imagen en doble resolución y etiquétela “@2x”. Ahora, la imagen se veía genial y clara en el último iPhone. Si era sensible, también detectó la resolución del usuario de antemano y transmitió la imagen “@2x” solo si es necesario, porque era más costoso en términos de tamaño del archivo. Me detengo, pero las pantallas más nuevas, con densidades de píxeles más grandes, crearon dolores de cabeza adicionales para diseñadores y desarrolladores. La naturaleza misma de un SVG ha hecho que esto no cree complicaciones, porque los dispositivos de última generación alcanzan las resoluciones de 8k y más. Pueden animarse aquí realmente sobresalen los SVG. Con la capacidad de editar SVGS directamente con un editor de texto significa que pueden ser animados, lo que hace que sea muy fácil inyectar cierta interactividad en su sitio. Estas animaciones pueden ser tan simples o complicadas como prefiera. Similar a HTML, los SVG también están representados por DOM (modelo de objeto de documento), lo que significa que también pueden ser manipulados con JavaScript. Si está interesado en animar SVGS, hemos tratado este tema en otro artículo, junto con una guía sobre cómo usar el popular marco de animación de Lottie para darle vida a SVGS.

Aquí hay un ejemplo de animación que hicimos para ese artículo, basado en nuestra marca para WP Migra DB Pro. Ver Pen Animation MDB Bird de Delicious (@DeliciousBrains) en CodePen.
¿La mejor parte?¡El tamaño del archivo es de 11 kilools!
SVG Desventajas Nada es perfecto. Y hay algunas situaciones en las que debe optar por imágenes de trama a expensas de SVG. Imágenes complejas Si está tratando con fotos, entonces, sin duda, debe optar por una imagen basada en mapa de bits. No hay muchos casos, si es que hay alguno, en los que se encuentre con una foto SVG, por lo que es poco probable que tenga que tomar esta decisión. Del mismo modo, hay algunas situaciones en las que un SVG complicado contiene tantas formas, colores, degrades y máscaras, que de hecho comienzan a exceder un JPEG o PNG equivalente en el tamaño del archivo. No conocí esto con demasiada frecuencia, pero es una posibilidad segura. Si necesita usar una imagen de mapa de bits, recuerde usar su PNG si su imagen contiene transparencia, JPEG si no. Las imágenes JPEG no aceptan transparencia y, por lo tanto, son más adecuadas para fotos. Alternativamente, como se discutió brevemente al comienzo de este artículo, puede simplificar lo anterior utilizando WebP para todas las imágenes basadas en mapa de bits. Optimización Esto se basa en algunos TLC al crear SVG en una aplicación de diseño, como Adobe Illustrator o Inkscape. Los archivos de grupo vacíos y las capas no utilizadas y redundantes pueden agregar archivos no deseados innecesarios al tamaño total del archivo. Además, los SVG más antiguos generalmente contienen mucha basura en la marca y son considerablemente más caras de lo necesario. Ejecuto todos mis SVG a través de un minificador cuando exporto durante el proceso de diseño para evitar tales complicaciones. Existen varias herramientas de optimización, incluida una herramienta Node.js para la optimización de archivos SVG.
Y gracias a Jordan, quien compartió esta solución no nocturna llamada SVGOMG en los comentarios. SVGS puede exceder con creces un PNG aprobado si no se crea u optimiza correctamente. Pero generalmente el tamaño del archivo será menor. Simplemente no permita que se decepcione si se encuentra con un SVG individual que tiene el tamaño de doble archivo en comparación con un equivalente de PNG. Soporte del navegador Esto no es tanto un problema como antes. Pero, si por alguna razón es anti Chrome o Firefox o si necesita aceptar navegadores web superuales, como Internet Explorer, entonces puede tener algunos problemas de compatibilidad de SVG. Dicho esto, puede continuar usando SVG y evitar esta complicación implementando alternativas JPEG o PNG como un sistema de seguridad. Los iconos de SVG son los iconos de sus amigos son el lugar donde todas las ventajas de este formato de archivo se vuelven realmente obvias. No se necesitan múltiples iconos en varios colores y dimensiones, lo que simplifica masivamente el proceso de diseño y desarrollo. Para articular esto aún más, quería ver cómo era la vida antes de la aparición de SVG … un viaje por el carril de la memoria antes de que SVGS fuera una cosa, los íconos eran, sinceramente, un poco dolorosos para los diseñadores, así como para los desarrolladores.
La mayoría de las veces, un producto tendría más de 20 íconos y cada icono requeriría un estado activo (generalmente el color primario), un estado inactivo/discapacitado y ocasional (como el estado de cruce de ratones. UL). Como se discutió anteriormente, las imágenes de mapa de bits no son editables usando CSS, por lo que cada estado de icono requiere su propio archivo. También mencionamos que cuando las pantallas de mayor densidad se convirtieron en algo, tuvimos que generar una versión “@2x” y “@3x” de nuestros elementos de imagen para una mayor resolución. No tenía intención de hacer algo práctico con esta información, pero mientras escribía esta sección decidí examinar cuánto el tamaño del archivo podía recuperar usando un conjunto de iconos SVG sobre versiones de mapa de bits. Tengo un icono SVG Heart hecho de material de diseño que necesito en 3 colores diferentes. Estos son un estado activo, un estado inactivo y un estado discapacitado.

Usando el estado activo de nuestro icono, podemos producir los otros 2 estados de icono ajustando el estilo CSS. ¡Así que necesitamos un solo archivo SVG para generar los 3 iconos! Para crear versiones de mapa de bits de estos iconos, necesitaremos un archivo independiente para cada icono. Además, para garantizar que las versiones de mapa de bits parezcan claras en todos los tipos de dispositivos, debemos generar un conjunto de estos iconos en las dimensiones dobles y triples de la resolución básica (“@2x” y “@3x”). Esto nos deja con 9 iconos PNG para administrar, a diferencia de un solo archivo SVG que podemos usar para lograr resultados idénticos. SVG asciende a un solo kilobyte, mientras que todos los iconos PNG calculan hasta 29 kb. Claro, 29KB no suena considerable, pero esto se refiere a un solo icono. Si tuvimos 30 iconos para usar, la diferencia del tamaño del archivo se vuelve más una complicación … SVG: 1KB * 30 = 30KB. PNG: 29kb * 30 = 870kb. Este es un aumento del 2900% en comparación con un solo SVG. Por supuesto, estos son medianos, pero sigue siendo un aumento extraordinario de tamaño.
Espero que esto haya demostrado cuán simples se deben usar y administrar los SVG, especialmente con los conjuntos de iconos. Por experiencia, generalmente puede esperar una reducción de al menos el 50% del tamaño total del archivo al optar por iconos SVG en lugar de PNG. Especialmente si optimiza sus iconos SVG y desea que se jueguen perfectamente en cualquier tipo de resolución o pantalla. Sprites SVG Utilizamos muchos SVG en DeliciousBrains.com y SpinUpwp.com y hemos utilizado un flujo de trabajo SVG ordenado para generar una carpeta de archivo SVG, que solo se puede cargar al cargar una página, en lugar de una solicitud HTTP para cada archivo SVG . Utilizamos esta tarea Gulp como parte de nuestra tarea de construcción de activos para ensamblar todos los SVG en una carpeta, para eliminarlos de crueles inútil y para formular un SVG grande en un archivo PHP, con cada SVG individual como : Gulp.Task ( ‘svg’, function () {return gulp.src (‘assets/svg/*. svg’) .pipe (svgmin ({plugins: [{remveviewbox: false}, {removessstrokeandfill: true}, {removerficyAttrs: falso}, {remveunknownsandDefaults: false}, {limpiPIDS: false}, {RemoLeScelessstrokeAndFill: true})) .Pipe (rename ({prefix: ‘icon-‘}) .pipe (svgstore ({{inlinesvg: true}) .Pipe (renombre (‘svgs.php’)) .pipe (gulp.dest (‘plantlate-piart’));}); Luego incluimos el archivo svgs.php que esta tarea resalta al comienzo del en nuestro tema: add_action (‘wp_body_open’, function () {get_template_part (‘platplate -parts/svgs’);});