Una guía para el formato de imagen gráfico vectorial escalable (SVG).

Hay un aspecto de Internet que no puede escapar: las imágenes. En los primeros días de Internet, era un negocio estricto, solo un texto. Sin embargo, ahora tenemos formatos de imagen dedicados para ayudarnos a mostrar imágenes claras. El formato de gráficos vectoriales escalables (SVG) es uno de los más nuevos y flexibles. Explicaremos más tarde, pero un SVG es una colección de datos que se presenta como una imagen en el frente. Esto significa que puede usar hojas de estilo (CSS) en cascada para manipular la imagen. Además, puede cambiarlo según sea necesario, sin perder calidad.
Para esta publicación, hablaremos más sobre los gráficos de vectores escalables y cómo pueden ayudarlo. También discutiremos cómo incluirlos en su sitio web de WordPress. Una guía rápida sobre las imágenes web más comunes formadas antes de pasar a SVG y cómo usarlas, vale la pena hablar sobre los formatos de imagen principales que usamos para la web. Hay tres anotados:
El grupo mixto de expertos fotográficos (JPEG). Como su nombre indica, si desea mostrar fotos tomadas con una cámara digital, este es el formato para usted.
Gráficos de red portátiles (PNG). Deberá usar el formato PNG para mostrar cualquier gráfico creado, como los de Adobe Illustrator.
Formato de intercambio gráfico (GIF). ¡Hola, a todos les gustan los videos divertidos de programas de televisión para usar como reacción en las redes sociales! GIF es el formato perfecto para gráficos animados que también es portátil.
Si bien algunos elegirán cualquier formato, este no será un enfoque óptimo. Por ejemplo, si elige hacer cada imagen GIF, puede ver dimensiones astronómicas de archivos e imágenes de mala calidad. En cambio, no querrá usar JPEGS para gráficos, porque PNG es un formato más óptimo. ¿Cuál es el formato de gráficos vectoriales escalables? Deseará apoyarnos en esta sección, porque obtendremos técnica en algunas áreas. Además, el concepto de SVG podría confundirse. Los gráficos vectoriales escalables no existen (una especie de). De hecho, no son en absoluto un gráfico o una imagen, sino una forma de lenguaje de marcado extensible (XML). Para aquellos que no saben, este es un hermano cercano a HTML, pero sin algunos de los aspectos de ese idioma (como etiquetas predefinidas).
Como comparación, puede comprender, considere cómo puede crear formas usando CSS. Esto es algo de lo que hablaremos más pronto. Bueno, imagine este CSS incorporado en un paquete de documentos que llame utilizando un formato de archivo estándar y estructura (Image.svg, por ejemplo).

Es más justo decir que debido a que HTML ofrece un marco para definir encabezados, párrafos, secciones, listas y más, SVG ofrece el marco para definir formas como círculos y rectángulos. Sin embargo, esto todavía no explica por qué tenemos (y a veces necesitamos) el formato SVG. Hablaremos de ello a continuación. ¿Por qué tenemos SVG antes de SVG? Usaría PNG para mostrar gráficos. Las primeras imágenes en la web podrían ser GIF, pero en general, los PNG son el formato de imagen dominante. La pregunta no es tanto: “¿Por qué tenemos SVG?”, Más “¿Cuáles son los formatos de imagen actuales que resolverá un SVG?” La respuesta es: dinamismo. Si miras hacia atrás en el formato principal de las imágenes web, dos realmente no coinciden con los gráficos creados (JPEG y GIF). Esto permite que el PNG apoye el tallo. Sin embargo, los PNG sufren algunos problemas que ahora son obvios para la web moderna:
Son estáticos, ya que creas la imagen fuera de línea y la exportas a ese formato especial. Esto significa que es algo inflexible.
Por extensión, no puede cambiar el “maquillaje” de la imagen. Dado que tenemos varios dispositivos para crear y mostrar, a veces debe adaptarse a esos “puertos de visualización”. Haga el esfuerzo que necesita para crear todos los tamaños de los logotipos solo para escritorio y dispositivos móviles principales utilizando PNG.
Si bien los PNG pueden ser fáciles, es responsabilidad del diseñador y el propietario del sitio garantizar que tenga lugar la optimización de la imagen. Un PNG puede ser difícil, a veces sobre un megaoctet, sin ninguna optimización.
Además, los PNG llenaron parte de un vacío en un momento en que había pocas opciones que pudieran proporcionar una imagen lo suficientemente alta. En ese momento, CSS estaba al principio y no tenía el área de diseño y desarrollo que tenemos ahora. Por ejemplo, pudimos usar la propiedad de radio fronterizo solo desde 2010. Esto le permite definir bordes redondeados e incluso círculos. Verá los botones muy a menudo en acción:
Utilizará CSS para crear formas que puedan ser escalas y adaptarse a la pantalla, pero los gráficos vectoriales escalables pueden hacer más. De hecho, ahora llamarás SVG en lugar de CSS para hacer esto, aunque no son una bala mágica. Las ventajas de los gráficos vectoriales escalables como cualquier otro formato de imagen, los gráficos vectoriales escalables no son perfectas. Hay muchos aspectos positivos, por supuesto:
Un SVG se ajusta al tamaño de un dispositivo, a menudo sin ninguna intervención adicional de usted. Esto reduce el tiempo de desarrollo o creación.
El archivo asociado con una imagen es pequeño porque solo necesita un solo SVG. En cambio, un logotipo de PNG debe ofrecer algunas dimensiones y tamaños diferentes. Ocupa espacio en el servidor.

Además, los SVG son más eficientes que los PNG, ya que debe cargar solo un archivo con un kilo costo. Este paquete de archivos PNG podría estar en los megactos, dependiendo de su calidad, cantidad y optimización.
En general, puede hacer más con SVG de lo que puede hacer con cualquier otro formato de imagen. Tanto un desarrollador como un diseñador gráfico pueden crear SVGS, ya sea por código o exportando una creación típica de una aplicación de dibujo dedicada. Debido a que se une más al desarrollo web, la adopción está aumentando. Sin embargo, las desventajas de los gráficos vectoriales escalables, no todo es rosa. Los SVG tienen algunos problemas de los que querrá tener en cuenta:
La tecnología se desarrolla, a diferencia de la mayoría de los otros aspectos web básicos. Debido a que muchas personas esperan mucho de los gráficos vectoriales escalables, existe una “brecha” entre lo que puede hacer y lo que desea hacer.
Aunque el soporte básico de SVG está disponible en la mayoría de los navegadores, el conjunto completo de funciones aún no está disponible de acuerdo con el navegador que usa. Una vez más, los SVG tienen un mayor potencial, que aún no es evidente: necesitamos un mejor soporte de navegador para una funcionalidad más avanzada para ver por qué el formato es capaz.
En algunos casos, puede encontrar que las imágenes SVG son menos precisas o tienen un aspecto incorrecto. Esto se debe al hecho de que debe confiar en un sitio que se cobra como era de esperar. Si recuerda un momento en el que tuvo que recargar una página web debido a errores, imaginando que esto solo está sucediendo con sus imágenes SVG.

Además, diríamos que es más difícil crear SVG sin conocimiento de la codificación y, en algunos casos,. Hay un soporte mucho mejor en programas de gráficos como Affinity Designer y Adobe Illustrator. También hay soporte para la exportación de SVG en aplicaciones como el dibujo de Google: esta es un área de mejora, pero todavía está un poco atrasado en comparación con otros formatos de imagen. A pesar de estas desventajas, puede mitigarlas. Ciertamente, para el uso básico, puede implementarlos casi de inmediato. De hecho, WordPress ofrece esta asistencia con algunos pasos, y la discutiremos. Cómo usar SVGS en su sitio web de WordPress La mala noticia es que si desea cargar un SVG en WordPress sin ningún trabajo, no podrá hacerlo. Un problema adicional con el soporte actual para gráficos vectoriales escalables es que WordPress no le permite cargar estas imágenes como estándar por razones de seguridad:
Las razones exceden el alcance de este artículo. En resumen, debido a que el formato SVG es un documento en lugar de una imagen real, un usuario malicioso podría generar posibles ataques de secuencias de comandos. Esto significa que necesitará encontrar una alternativa más segura. De lo contrario, en la web, encontrará instrucciones para agregar un código a las funciones.php para activar los cargos SVG. Sin embargo, no pasaremos por este paso, porque no podemos garantizar que sea seguro. En cambio, puede hacer lo que a menudo haría con WordPress: llame a un complemento. Recomendamos el soporte de SVG:
Después de instalar y activar el complemento, vaya a la pantalla de asistencia SVG en WordPress. Esto le mostrará algunas pantallas, pero ¿solo tiene que verificar la opción restringida a los administradores? El cuadro de selección del panel de configuración. Por defecto, el complemento permitirá a todos los usuarios cargar SVGS. Esta podría ser una mala noticia basada en problemas de seguridad inherentes y es por eso que WordPress no le permite cargar esos archivos primero. Sin embargo, si marca esta casilla, el complemento restringirá la carga solo para los administradores del sitio, junto con el uso de SVGS más seguros como estándar. En conclusión, hay muchas formas de mostrar imágenes en la web y la mayoría de las personas no piensan dos veces sobre el formato que usan. Sin embargo, si hace tiempo para que coincida con el formato según sea necesario, obtendrá imágenes detalladas y claras que se ven increíbles en todas las pantallas. En esta publicación, ofrecí mucha información sobre gráficos vectoriales escalables. Utilizará CSS para adaptar la imagen a sus necesidades, y la esfera de manejo es mucho más grande que PNGS y JPEGS. También son ligeros, tan perfectos para pantallas pequeñas y conexiones débiles a Internet. ¿Desea usar gráficos vectoriales escalables en su sitio y, de ser así, este artículo lo ayudará? ¡Háganos saber en la sección de comentarios! Crédito de la imagen: GDJ.