Cómo crear y usar gráficos vectoriales escalables (SVG) en WordPress

Los gráficos vectoriales escalables y WordPress es una historia ligeramente complicada. Todos sabemos que usar imágenes en su sitio web es importante. Las imágenes están en todas partes. Si hacer que su contenido sea más cautivador y más fácil de compartir, como imágenes de cartera o tal vez solo el logotipo de su sitio. WordPress acepta muchos formatos de imagen, incluidos JPG, PNG y GIF. Sin embargo, uno que no acepta sin una determinada restricción son los gráficos vectoriales escalables (SVG). Sin embargo, son un formato de imagen que crece rápidamente en popularidad. En este artículo, queremos hablar sobre gráficos vectoriales escalables en WordPress. Le diremos cuáles son los SVG, por qué es una buena idea usarlos y por qué WordPress no los acepta desde el principio. Después de eso, analizaremos cómo hacer que este tipo de archivo funcione con la plataforma después de todo.
¿Suena bien? Entonces vamos. ¿Qué son SVG y por qué usarlos? Los gráficos vectoriales escalables no son en realidad un formato de imagen. En cambio, representan un lenguaje de marcado para crear imágenes vectoriales de dos dimensiones. Es un estándar abierto que ha existido desde 1999 y se ha vuelto más popular con la aparición del diseño móvil en los últimos años.

Sin embargo, al momento de escribir este artículo, solo es utilizado por el 4.3% de todos los sitios web. Sin embargo, es probable que este número continúe creciendo por varias razones. Los beneficios de los gráficos vectoriales escalables en oposición a los JPG, GIF y otros formatos de imagen, los archivos SVG ofrecen algunas ventajas destacadas:
Escala: como su nombre lo indica, las imágenes SVG se pueden escalar. Ampliarlos o agrandarlos, y la calidad sigue siendo la misma (incluso en las pantallas de retina). En contraste, las imágenes de rastrillo parecen poco claras tan pronto como las muestre más grandes que el tamaño de la imagen real. Por supuesto, la escalabilidad hace que SVG sea particularmente adecuado para el diseño receptivo. Dimensión de archivo inferior, debido a que los archivos están formados por vectores escalables, no píxeles, generalmente son mucho más pequeños, porque se debe guardar menos información. Esto, a su vez, hará que su sitio sea más rápido.
Aceptado por todos los navegadores: todos los principales navegadores y navegadores móviles saben cómo hacer frente a SVG. Esto significa que la mayoría de los visitantes no tendrán ningún problema para mostrarlos. Si aún desea apoyar las carcasas marginales, puede hacerlo proporcionando una imagen de respaldo.
Reconocido por Google: si tiene miedo de que el uso de SVG le afecte SEO (después de todo, el uso de imágenes es parte de la optimización de la página), no lo hace. Google indexa gráficos vectoriales escalables de la misma manera que otras imágenes y las incluirán en busca de imágenes.
Se puede animar: con CSS puede agregar animaciones a los gráficos de vector. Esto puede hacer para algunas aplicaciones interesantes. No cubriremos esto aquí, pero puedes leer este artículo para más.
Entonces, como puede ver, hay buenos puntos para usar gráficos vectoriales escalables en su sitio web de WordPress. Sin embargo, ¿hay argumentos que hablan en contra?
Las desventajas de SVG, por supuesto, no todo es genial en este formato de imagen y también presenta algunos desafíos:
Difícil de crear, como veremos a continuación, sin un fondo de diseño gráfico, puede ser difícil para usted crear archivos SVG solo. No es adecuado para imágenes complejas: el formato SVG es perfecto para logotipos e iconos, pero no para complejos. Imágenes, como fotos. Cuando SVG se vuelve demasiado complejo, tienden a ser aún más grandes que el tamaño que sus contrapartes de píxeles.
Problemas de seguridad: esta es la razón principal por la cual WordPress no acepta los gráficos vectoriales escalables. En realidad, hay una discusión a largo plazo sobre el canal Make WordPress al respecto. Debido a que SVG se basa en XML, se abren para la inyección de malware, por lo que el soporte de SVG debe activarse de manera segura. Más sobre esto a continuación.
Las redes sociales no los aceptan, debido a que Twitter, Facebook y otras redes sociales no aceptan SVG, no son exactamente adecuadas para las imágenes presentadas y similares. Si desea usarlos de esta manera, debe cargar una versión dedicada de píxeles a través de Yoast SEO o un complemento similar. Depende de usted decidir si vale la pena el dolor de cabeza.
Debido a que los gráficos vectoriales escalables ofrecen beneficios y desafíos, muchos sitios web utilizan un enfoque híbrido. Esto significa que uso SVG para logotipos, modelos de fondo, iconos y otras cosas simples e imágenes basadas en píxeles, como publicaciones de blog.
Cómo crear gráficos vectoriales escalables para su sitio de WordPress como se menciona en la última sección, uno de los problemas con SVG es su creación. A diferencia de otras imágenes, el producto ellas son más complicadas. Por ejemplo, cualquiera puede usar una cámara para crear imágenes para su propio sitio. Además, en los tiempos de Instagram y las ubicuas aplicaciones de edición de imágenes, los toques básicos también están al alcance de la mayoría de las personas. Sin embargo, para crear gráficos vectoriales escalables, debe conocer un programa más complejo, como Adobe Illustrator o Inkscape (que es gratuito y de código abierto, por cierto). También hay soluciones basadas en la web como VECT y SVG-EDIT (este último está hecho por Google). Por supuesto, es posible, sin embargo, a menos que sea un diseñador gráfico experimentado en este campo, creando su propio logotipo iconos SVG y Los íconos involucrarán una curva de aprendizaje empinada. Por esta razón, puede que no sea una mala idea trabajar con un profesional. Sin embargo, hay algunas alternativas. Por ejemplo, si ya tiene un logotipo en una versión de píxeles, puede usar herramientas como Magic Vector para convertirlo en vectores. También hay Patternico, que le permite crear fácilmente modelos de fondo SVG descargables. Además, no se olvide de estas grandes colecciones de iconos vectoriales gratuitos que puede usar para su sitio web:
Secos
Iconos malos


Iconos planos
Genicano
De esta manera, no necesita crear SVG solo, pero ¿puede continuar usando el formato de imagen en su sitio? ¿Cómo hace exactamente esto? Hablemos de esto. Cómo usar SVG Safe en WordPress Como ya se mencionó, WordPress no acepta SVG del cuadro. Sin embargo, no se desespere, tenemos varias formas de cambiar esto, manualmente a través del complemento. Sin embargo, como sugiere el título de esta sección, estamos buscando la forma más segura de usar SVG en WordPress. ¿Recuerdas que puedo contener código malicioso? Porque no queremos ayudar a nadie a piratear nuestro sitio web, necesitamos una forma de desinfectar el SVG. Esto significa limpiar el código de archivo para eliminar inyecciones, conflictos de código y errores. Veamos cómo hacer esto ahora, comenzaremos con la ruta del complemento. Método 1: Active el soporte SVG en WordPress a través del complemento Una de las formas más simples de activar el soporte SVG es el uso de un complemento. Tenemos más de los cuales podemos elegir, incluido el soporte de SVG, que son los gráficos vectoriales más populares y escalables (SVG). Sin embargo, iremos con SAFE SVG. Él es el único en la lista que desinfecta explícitamente los archivos SVG durante la carga. También activa el formato de imagen para WordPress y agrega soporte a la biblioteca de medios.
La configuración es fácil. Simplemente instale y active como cualquier otro complemento. Una vez listo, eso es todo. No se requieren configuraciones adicionales. El complemento también viene con una versión profesional. Contiene opciones importantes, como la capacidad de limitar la carga de SVG a las cuentas del administrador. Esto tiene mucho significado, especialmente para sitios con un gran equipo editorial con diferentes conocimientos técnicos. Sin embargo, en mi opinión, la versión premium es bastante costosa. La asistencia SVG también le permite limitar las cargas de acuerdo con el grupo de usuarios. Por lo tanto, si esta es una configuración crucial para usted, puede ser mejor usar ese complemento. MUNCA 2: maneje el soporte SVG en WordPress La segunda forma de configurar la grafina vectorial escalable es a través de funciones.php. Desafortunadamente, hacer esto es menos seguro que el uso del complemento mencionado en la parte superior, ya que no incluye limpiar los archivos y permite el SVG sin discernimiento. Si aún desea seguir esta ruta, busque el archivo Functions.php en su carpeta de base activa. Descárguelo, edite y agregue el siguiente código: enable_svg_upload function ($ upload_mimes) {
$ upload_mimes [‘svg’] = ‘image/svg+xml’;
$ upload_mimes [‘svgz’] = ‘image/svg+xml’;
Devuelve $ upload_mimes;

}
add_filter (‘upload_mimes’, ‘enable_svg_upload’, 10, 1); Ahora guarde los cambios y recarga el archivo. Terminado. Como mencioné, no es la opción más segura, pero quería incluirla aquí en aras de la finalización.
Pruebe el soporte SVG por fin, es hora de verificar si todo funciona correctamente. Ya sea que haya usado un complemento o modo manual, ahora debería poder cargar archivos SVG. Para probar esto, obtenga un icono SVG gratuito o algo similar de una de las fuentes mencionadas anteriormente. Luego inicie sesión en su sitio y acceda a los medios. Aquí, intente cargar el nuevo archivo SVG. Si todo salió bien, deberías parecer similar a esto aquí: ¡Felicidades! Bien hecho. WordPress Scalable Vector Graphics – SVG Resumen es un recurso de diseño web interesante con muchos beneficios. Son pequeños, escalables, bien aceptados por los navegadores y los motores de búsqueda y listos para la animación. Sin embargo, este tipo de archivo no carece de desventajas, especialmente los riesgos de seguridad potenciales. En este artículo, aprendimos formas de crear sus propios archivos SVG. También analizamos formas de usarlos de forma segura en WordPress y permitirles cargar. Como resultado, ya puede usar este tipo de archivo en su sitio web, incluso si WordPress no los acepta de forma nativa. ¿Es esta la pregunta sigue siendo? ¿El soporte de SVG lo convertirá alguna vez en un núcleo? Hasta que haya una forma de tratar los problemas de seguridad, no parece probable. Sin embargo, con el aumento de la popularidad de los gráficos vectoriales escalables en el diseño web, la comunidad tendrá que encontrar una solución tarde o temprano. Hasta entonces, tienes tutoriales como este para trabajar. ¿Cómo maneja los archivos SVG en su sitio web de WordPress? ¿Algún consejo adicional? ¡Háganos saber en la sección de comentarios!