Cómo subir archivos SVG a WordPress: 2 métodos

¿Quieres aprender a subir archivos SVG a WordPress? Presentaremos en este tutorial los métodos para lograr esto..

Los administradores web y los diseñadores web están obligados a utilizar diferentes formatos de archivos multimedia en su trabajo. Uno de los formatos más populares hoy en día es SVG, un formato vectorial basado en XML. Desafortunadamente, no todos los navegadores y plataformas son compatibles con SVG, por lo que primero debe habilitar la compatibilidad con SVG manualmente.

Este artículo cubrirá los pasos para cargar archivos SVG en un sitio web de WordPress utilizando el complemento Soporte SVG. También responderemos algunas preguntas sobre los problemas de seguridad relacionados con este formato de archivo multimedia en particular y por qué vale la pena usar SVG.

Para comenzar, familiaricémonos con SVG y cómo funciona.

Pero antes de empezar, si nunca ha instalado WordPress, averigüe ¿Cómo instalar un blog de WordPress pasos 7 et ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog 

Luego de vuelta a por qué estamos aquí.

¿Qué es SVG?

Scalable Vector Graphics (SVG) es un formato de imagen de gráficos vectoriales basado en texto XML. Aunque los formatos de imagen comunes como JPG y PNG se componen de toneladas de pequeños cuadrados llamados píxeles, este formato se basa en el lenguaje de marcado XML para describir los atributos de la imagen.

En enero 2022, 42% de todos los sitios web en todo el mundo usar SVG. Este porcentaje ha aumentado desde enero de 2021, cuando solo 29,4% de los sitios web haberlo usado Similar a los formatos PNG y JPG, SVG es popular entre los sitios web de alto tráfico como Google, Wikipedia y YouTube.

Otra gran ventaja de SVG es que es ampliamente compatible con todos los principales navegadores.

Aquí está el lista de navegadores que admiten el formato de archivo SVG:

navegante	apoyo parcial	Apoyo total
Orilla	–	Versión 12-18, 79-96, 97
Firefox	Versión 2	Versiones 3-94, 95, 96-97
Firefox para Android	–	Versión 95
Chrome	–	Versiones 4-96, 97, 98-100
Chrome para Android	–	Versión 96
Safari	Versión 3.1	Versión 3.2-15.1, 15.2, TP
ópera	–	Versiones 10-81, 82
miniópera	–	Todas las versiones
Opera Mobile	–	Versión 12-12.1, 64
Safari en iOS	–	Versión 3.2-15.1, 15.2
Navegador de Android	Versión 3-4.3	Versión 4.4-4.4.4, 96
Navegador UC para Android	–	Versión 12.12
Samsung Internet	–	Versión 4-14.0, 15.0
Navegador QQ	–	Versión 10.4
Navegador Baidu	–	Versión 7.12
Navegador KaiOS	–	Versión 2.5

¿Cómo funciona SVG?

Los SVG usan XML para producir imágenes vectoriales bidimensionales. A diferencia de JPG y PNG, los gráficos vectoriales no tienen píxeles. En cambio, su comportamiento se describe en archivos de texto XML.

Por esta razón, los archivos SVG se pueden buscar, indexar, crear guiones, modificar y comprimir como código. Como resultado, cualquiera puede crearlos utilizando un editor de texto o un software de gráficos vectoriales.

¿Wordpress es compatible con SVG?

No hay compatibilidad con SVG en WordPress de forma predeterminada debido a los riesgos de seguridad que impone; más adelante cubriremos los problemas de seguridad relacionados con SVG con más profundidad.

Aquí hay un mensaje de error que aparece al cargar un gráfico SVG en un sitio web de WordPress:

Hay una discusión actual en hacer que SVG sea parte de la funcionalidad central de WordPress. Hasta entonces, tenemos que ser creativos y usar otras soluciones para subir imágenes SVG a WordPress.

¿Por qué usar WordPress SVG?

A pesar de sus problemas de seguridad, muchos usuarios todavía usan este formato de imagen, ya que tiene varias ventajas. Estos son algunos de los beneficios de usar archivos SVG:

• Evolución: Dado que SVG es un formato de imagen vectorial, los archivos SVG mantienen la misma calidad en todas las resoluciones de pantalla. Esta ventaja también está presente después de ampliarlos, por lo que muchas personas utilizan este formato de imagen escalable para iconos y logotipos.
• Tamaño de archivo más pequeño : Los archivos SVG facilitan la mejora del rendimiento del sitio web porque ocupan menos espacio de almacenamiento web y se cargan mucho más rápido que otras imágenes.
• SEO-friendly : Google indexa archivos SVG, lo que les permite aparecer en la Búsqueda de imágenes de Google y mejorar sus esfuerzos de búsqueda. SEO. Con otros tipos de imágenes, estás limitado a optimizar sus atributos alternativos.
• SVG basados ​​en código son editables usando un editor de texto o software de edición de gráficos vectoriales. Puede optimizar los archivos SVG para sitios web o incluso agregar animaciones para que los gráficos sean interactivos.

SVG en WordPress y seguridad

Dado que SVG es esencialmente un archivo de texto XML, tiene vulnerabilidades explotables que no afectan a otros formatos de imagen. Por lo tanto, las personas pueden secuestrarlo fácilmente con código malicioso para lanzar ataques Cross-Site Scripting (XSS) y XML External Entity (XXE) en su sistema.

Por esta razón, debe tener cuidado al manejar archivos SVG y agregarlos a WordPress.

Para minimizar los riesgos de seguridad, asegúrese de desinfectar los archivos SVG antes de cargarlos en la biblioteca de medios de WordPress. Este proceso elimina errores y códigos sospechosos, lo que hace que las imágenes sean seguras para su sitio web.

Puede limpiar los archivos SVG cargados con un complemento SVG; cubriremos sus pasos más adelante. Sin embargo, le recomendamos que lo desinfecte dos veces con el Prueba de desinfectante SVG –

Otra forma de proteger su sitio web de WordPress es limitar las cargas de SVG solo a usuarios de confianza. Los usuarios seleccionados deben ser conscientes de los problemas de seguridad relacionados con el formato SVG; esto los disuadirá de obtener archivos SVG de fuentes dudosas.

Cómo subir archivos SVG a WordPress en 2 métodos seguros

Técnicamente, hay dos formas de agregar soporte SVG a WordPress: usando un Plugin de WordPress o activándolo manualmente. Cualquiera que elija, le sugerimos que limite los privilegios de descarga a los administradores y usuarios de confianza solo para minimizar las descargas maliciosas.

Usar un complemento de WordPress

En este tutorial, usaremos Soporte SVG. este Plugin de WordPress utiliza una biblioteca desinfectante SVG que se activará automáticamente al cargar archivos SVG a la biblioteca multimedia. También es fácil de configurar y de uso gratuito.

Estos son los pasos para configurar la compatibilidad con SVG:

1. IInstalar el complemento y activarlo.

2. Acceso a Ajustes -> SOPORTE SVG desde tu panel de WordPress.

3. Marque la casilla junto a la opción Restringir a los administradores para limitar los privilegios de carga. Haz lo mismo con la opción Activar modo avanzado si desea acceder a funciones avanzadas, como la representación SVG en línea y el estilo CSS.

4. Después de guardar los cambios, puede comenzar a cargar archivos SVG en la biblioteca de medios de manera segura.

Agregar manualmente soporte SVG de WordPress

Este método consiste en editar el archivo functions.php de su sitio web de WordPress. Por lo tanto, le recomendamos encarecidamente que siga estos pasos si está familiarizado con PHP y comprende completamente el problema de seguridad de SVG.

Asegúrate de copia de seguridad de su sitio web de WordPress antes de realizar cambios para evitar la pérdida de datos en caso de mala configuración.

Los siguientes pasos explicarán cómo habilitar SVG en WordPress manualmente con la ayuda de un cliente FTP como FileZilla.

1. Vaya al directorio de archivos de su sitio web en su host
2. Acceso a public_html -> wp-includes. Desplácese hacia abajo hasta que encontrar funciones.php.

3. Haga clic derecho en este archivo y seleccione Ver/Editar para abrirlo y pegue el siguiente fragmento de código en él:

function add_file_types_to_uploads($file_types){
$new_filetypes = array();
$new_filetypes['svg'] = 'image/svg+xml';
$file_types = array_merge($file_types, $new_filetypes );
return $file_types;
}
add_filter('upload_mimes', 'add_file_types_to_uploads');

4. Guarde los cambios e intente cargar un nuevo archivo SVG. Si el proceso es exitoso, su biblioteca de medios debería aceptar la carga del archivo.

Las muchas ventajas de los archivos SVG contribuyen a la creciente popularidad de este tipo de archivo. Desafortunadamente, los archivos de texto XML son propensos a la inyección de código, que es la razón principal por la que WordPress no incluye compatibilidad con SVG de forma predeterminada.

Dicho esto, hay dos formas de hacer que su sitio web de WordPress acepte archivos SVG: usando un Plugin de WordPress o editar el archivo functions.php. Además de limitar los privilegios de carga, podrá cargar archivos SVG de forma segura en la biblioteca de medios del sitio web.

Otros recursos recomendados

También le invitamos a consultar la Recursos a continuación para tomar más propiedad y control de su sitio web y blog.

• Cómo crear un complemento simple de WordPress
• Cómo crear un complemento de WordPress de bloque simple de Gutenberg
• Cómo configurar tu página de inicio en WordPress
• Cómo entender el panel de WordPress
• Cómo crear un complemento simple de WordPress

Conclusión

Eso es todo por esta guía que le muestra cómo cargar archivos SVG en WordPress. Esperamos que este artículo le haya dado una idea de los beneficios y riesgos de cargar archivos SVG en un sitio web de WordPress. Si tiene alguna inquietud o sugerencia, háganoslo saber dentro de comentarios.

Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.

Mientras tanto, comparte este artículo en tus diferentes redes sociales.   

...