WordPress SVG: 4 pasos para activar archivos SVG en WordPress

Si desea que su contenido en línea sea lo más atractivo posible para los usuarios del sitio, es importante dominar el arte de usar elementos visuales. Y WordPress SVG también juega un papel importante en la mejora de su contenido de imagen en línea. Afortunadamente, hay algunas soluciones simples a este dilema que encontrará en esta guía SVG de WordPress. A medida que lea más, descubrirá las ventajas y desventajas del uso de archivos SVG en WordPress, cuando se deben usar diferentes formas de activar el soporte de SVG. Vamos a ver.
En este articulo
Formatos implícitos de la imagen de WordPress
¿Qué es un archivo SVG?
¿Son los archivos SVG un riesgo de seguridad?
¿Debería usar SVG en su sitio web de WordPress?
Las desventajas de WordPress SVG
¿Cómo se usa de forma segura los archivos SVG en WordPress?
Cómo crear archivos SVG
Cómo activar de manera segura el soporte de WordPress SVG con un complemento
Paso 1. Prepare el archivo
Paso 2. Instale el complemento de soporte SVG
Paso 3. Cargue el archivo SVG
Paso 4. Use el archivo SVG en su sitio web
¿Puedes trabajar manualmente WordPress SVG?
conclusión
¿Es hora de comenzar a usar WordPress SVG?
Haga su sitio web de WordPress hoy
Formatos implícitos de WordPress-Image En el cuadro, WordPress permite a los propietarios de sitios usar varios formatos de imagen diferentes, como PNG, JPG y GIF. El formato que usa puede depender si distribuye imágenes presentadas WordPress, su logotipo o una imagen de blog incorporada. Pero independientemente de la imagen que comparta, WordPress actualmente no tiene las imágenes SVG nativas que soportan esas imágenes.
Esto es algo sorprendente para muchos propietarios de sitios de WordPress, ya que los archivos escalables de Vector Graphics ofrecen muchas ventajas sobre imágenes con ruido como JPG y PNG. Pero hay una buena razón por la cual WordPress no se mantiene de forma nativa: preocupaciones de seguridad. Los archivos SVG no siempre son el tipo de archivos más seguro. ¿Qué es un archivo SVG? SVG no es, desde un punto de vista técnico, un formato de imagen, sino más bien un idioma de marcado. Los SVG crean imágenes a partir de curvas y permiten animación, como descubrirá a medida que avanzamos. El tipo de archivo SVG es un estándar de más de 20 años. Actualmente, casi el 20% de los sitios web publicados usan SVGS. Y el número continúa aumentando. Los SVG tienen un excelente soporte de navegador y trabajan en todos los principales navegadores, como:
Cromo
Firefox
Margen
Safari
Androide
Ópera
Funciona incluso en Internet Explorer (¡si alguien todavía está usando esto!). Solo Internet Explorer versión 8 no acepta SVG. Pero con una cuota de mercado tan pequeña, no es mucho de qué preocuparse. Una vez que sepa qué es un archivo SVG, debe tomar la decisión al usar este tipo de archivo en su sitio web.
¿Son los archivos SVG un riesgo de seguridad? Con mucho, la mayor desventaja de usar SVG es que tienen algunas preocupaciones bien conocidas cuando se trata de seguridad del sitio. Debido a que se incorporan en XML, son extremadamente vulnerables a la inyección de malware que puede causar todo tipo de problemas en su sitio.

Por ejemplo, un archivo SVG que se ha comprometido puede usarse, teóricamente, para espiar por micrófono o habitación o para descargar directamente el software malicioso en su dispositivo. Esta es una de las muchas razones por las que debe limitar quién puede cargar archivos SVG en su sitio. Solo sus administradores y es por eso que el archivo SVG no es aceptado por el núcleo de WordPress. Guía de seguridad de WordPress
haga clic aquí
¿Debería usar SVG en su sitio web de WordPress? Dados los riesgos de seguridad, los archivos SVG ofrecen una serie de beneficios.
Para empezar, se crea un archivo SVG en formato vectorial. Esto significa que escalarán a cualquier tamaño o tamaño sin perder la calidad de imagen. Y esto es lo contrario de cómo funciona un PNG o JPG. Estos tipos de archivos se conocen como imágenes de rastrillo y están limitados por el tamaño de la imagen original. Este tipo de escalabilidad de imágenes hace que el uso de gráficos vectoriales sea una solución mucho mejor para construir un sitio web receptivo. Además, los archivos SVG se ven mucho mejor en las pantallas de retina, que muchos dispositivos móviles usan hoy.
Además, SVG ayuda a mejorar el SEO de su sitio porque los motores de búsqueda reconocen y el formato de archivo de índice. E incluso mejor que eso, este tipo de archivo suele ser más pequeño que el tamaño que los JPG o PNG. Guarden menos información porque no usan píxeles. En cambio, SVG usa vectores. Esto ocupa mucho menos espacio en su sitio web de WordPress, lo que le ayuda a cargar más rápido. Y todos sabemos lo importante que es tener un sitio web rápido. En la mayoría de los casos, verá que las imágenes SVG son aproximadamente 13 veces más bajas que los archivos JPG o PNG. Y una reducción general del tamaño del archivo de más del 90% es muy común. Si puede convertir todas sus imágenes en archivos SVG, obviamente haría que su sitio se ejecute mucho más rápido. Pero desafortunadamente, no es tan simple. Desafortunadamente, las desventajas de WordPress SVG, no todo, el sol y el arco iris en el país de los archivos SVG. Existen algunas desventajas importantes del uso de este tipo de archivo para las imágenes de su sitio web. En primer lugar, no soy necesariamente fácil de construir y crear. Deberá usar algunas herramientas especializadas y tener el conocimiento necesario para crearlas (que discutiremos más adelante). Y los SVG no son adecuados para todos los archivos de imagen en su sitio web de WordPress. Simplemente no son geniales cuando se manejan imágenes muy detalladas. Y si tiene imágenes muy detalladas en su sitio, en un punto, un archivo SVG en realidad se hará más grande que los archivos de imagen rastgados.
Lo que es peor, tendrá una calidad de imagen más baja que los JPG o PNG, incluso si crecen en el tamaño del archivo. Por esta razón, SVG se usa mejor para imágenes como logotipos e iconos que tienen imágenes menos detalladas que las fotos de alta resolución. Para sus imágenes que tienen muchos detalles, como las imágenes presentadas en la publicación del blog, es mejor continuar usando JPG y PNG. También verá que las plataformas de redes sociales no aceptan el intercambio de archivos SVG, lo que haría que el contenido de su blog se vea bastante solo, si no muestra una imagen de soporte. ¿Cómo usa de forma segura los archivos SVG en WordPress? Algunas búsquedas en Google encontrarán muchos fragmentos de código que permitirán el soporte de WordPress SVG. Pero antes de comenzar a copiar y pegar el código, es importante asegurarse de no comprometer la seguridad del sitio.
Esto se logra mediante un proceso llamado desinfección, que limpia archivos para evitar posibles problemas de seguridad (como inyecciones de código), conflictos y otros errores. Y si no es bueno con la comprensión del código, es posible que no desee tomar esto por su cuenta. Aunque hay varios tutoriales en línea que se ocupan del código de desinfección, a menudo no es tan simple como parece. Un solo período ingresado en el lugar equivocado puede llevar a bloquear todo el sitio.
Afortunadamente, la desinfección del código se puede hacer con un complemento de WordPress. Además, siempre considere cuidadosamente considerar las opciones que toma con su sitio de WordPress. Use solo los archivos SVG que obtenga de las fuentes en las que confía. Y considere restringir los permisos de administrador para evitar que otras personas tengan acceso a su sitio para cargar archivos SVG en los que no confía. Cómo se crean los archivos SVG como se discutió anteriormente, la creación física de los archivos SVG es una de las partes más difíciles de WordPress SVG. No es tan simple tomar una foto digital, enviarla a través de algunos filtros, luego publicar el archivo de imagen SVG en su sitio web. Debe saber más de lo que es un archivo SVG y debe hacer más que simplemente filtrar. Para crear un archivo SVG, necesitará software como Adobe Illustrator. También puede usar una solución gratuita y de código abierto, como Inkscape. Otras opciones incluyen SVG-EDIT de Google y Vectr. Si aún no está familiarizado con estos programas, puede llevar algún tiempo aprender y sentirse cómodo para usarlos. Si ya tiene una versión de píxel de una imagen, puede convertirla en una imagen vectorial usando Magic Vector. Y hay varias bibliotecas en línea llenas de iconos vectoriales gratuitos que puede usar en su sitio de WordPress. Algunas de estas bibliotecas incluyen: Dryicons
Iconos malos
Genicano

Iconos planos
Una vez que haya descargado un archivo vectorial, podrá abrirlo en diferentes navegadores web para ver cómo se muestra. Después de estar satisfecho con la forma en que se ve, puede comenzar a usarlo en su sitio de WordPress. Cómo activar de manera segura el soporte SVG de WordPress con un complemento encontrará varios complementos diferentes en el almacén de complementos de WordPress que le permitirá usar archivos SVG en su sitio. Dos de estas opciones son SVG Support y SVG. Sin embargo, para esta guía, veremos cómo funciona el complemento de soporte SVG desde Benbodhi. SVG Assistance le permite incorporar fácilmente el código de archivo SVG completo utilizando una etiqueta IMG simple. Use una biblioteca desinfectante para cargar imágenes en su sitio, este complemento hace que los SVG aparezcan como sus imágenes estándar en su Media WordPress. Y con la versión premium del complemento, puede restringir el acceso a quién tiene permiso para cargar archivos SVG en su sitio. Aquí le mostramos cómo activar los archivos SVG en WordPress: Paso 1. Prepare el archivo después de crear o descargar un archivo SVG y desea Para que use WordPress, debe contener la etiqueta . Para evitar un mensaje de error, abra el archivo al editor de texto y agregue el siguiente código a la línea delantera:
Si SVG ya tiene esta etiqueta en la línea uno, simplemente vaya al paso dos. Paso 2. Instale el complemento de soporte SVG Instale la asistencia SVG al igual que cualquier otro complemento, explorando complementos> Agregar nuevo al tablero de WordPress. Ingrese el nombre de soporte de SVG en el cuadro de búsqueda, ubíquelo en la lista de complementos disponible, instálelo y active. Todo lo que tiene que hacer es ingresar su biblioteca de WordPress de medios o una página o publicación. Tire y coloque el archivo SVG de la estación de trabajo a su sitio o cárguelo como un archivo nuevo. Cualquiera de las opciones hará cargar en WordPress. Cuando se sobrecarga, la imagen aparecerá en su biblioteca de medios como todas las demás imágenes. A partir de ahí, puede agregar texto alternativo, subtítulos, títulos y descripciones. Paso 4. Use el archivo SVG en su sitio web una vez que el archivo esté en su biblioteca Media WordPress, podrá usarlo como cualquier otro archivo de imagen. Simplemente inserte en una publicación o página como siempre lo hace. El complemento de soporte SVG funciona perfectamente en Gutenberg, y el bloque de imágenes resultante le permitirá personalizar el tamaño de la imagen, el otro texto, donde está conectado, etc. Eso es todo. El complemento es muy simple y no tiene configuraciones adicionales. Hace un solo trabajo y lo hace bastante bien.
¿Puedes trabajar manualmente WordPress SVG? Si, por alguna razón, no desea utilizar el complemento de soporte SVG, puede codificar la solución por su cuenta. En teoría, la activación del soporte de WordPress SVG solo requiere abrir el archivo Functions.php e insertar este código: enable_svg_upload ($ 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);

Recuerde que esto no incluye desinfectar archivos y puede abrirlo a serios problemas de seguridad. Si no ejecuta un complemento de seguridad de WordPress, debe poner su mano en iThemes Security Pro antes de activar manualmente el soporte SVG. ¿La conclusión es el momento de comenzar a usar WordPress SVG? Los archivos SVG son un recurso muy útil para propietarios de sitios de WordPress y diseñadores de sitios web. Son pequeños, increíblemente escalables, bien compatibles y tienen una serie de beneficios. Pero deberá administrarlos correctamente para evitar poner en peligro la seguridad de su sitio en esta guía, ha aprendido todas las ventajas y desventajas para WordPress SVG, cómo crear las formas en que puede activar el soporte SVG en WordPress. En este momento, estás listo para comenzar a usarlos. Solo asegúrese de hacerlo de una manera responsable y segura. Después de todo, ningún logotipo o ícono merece arriesgar la seguridad de su sitio.

Haga que su sitio de WordPress hoy proteja su sitio web, negocios y clientes con el complemento de seguridad ITHEMS.