LiveChat 
WordPress SVG
La principal razón por la que los archivos SVG son especialmente populares entre los desarrolladores y diseñadores es porque es un formato de imagen redimensionable, generalmente menor en tamaño de archivo (a veces por un poco), y no pixelan en las pantallas retina. WordPress por defecto, no le permite cargar el formato de archivo SVG, principalmente debido a las preocupaciones de seguridad.
Qué es y cómo cargarlo de forma segura
Los administradores web y los diseñadores web están obligados a utilizar diferentes formatos de archivos multimedia en su trabajo. Hoy en día, uno de los formatos más populares es SVG, un formato vectorial basado en XML. Desafortunadamente, no todos los navegadores y plataformas son compatibles con SVG y debe habilitar la compatibilidad con SVG manualmente de antemano.
Ace te enseñamos 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 empezar entraremos en contexto
¿Qué es SVG?
Scalable Vector Graphics (SVG) es un formato de imagen gráfica vectorial basado en el texto XML. Mientras que 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.
A partir de enero de 2022, el 42 % de todos los sitios web del mundo utilizan SVG.
¿Cómo funciona SVG?
Los gráficos vectoriales escalables utilizan XML para producir imágenes vectoriales bidimensionales. A diferencia de JPG y PNG, los gráficos vectoriales no contienen píxeles. En cambio, su comportamiento se describe en archivos de texto XML.
Por esta razón, los gráficos vectoriales escalables se pueden buscar, indexar, escribir, editar y comprimir como código. En consecuencia, 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.
El siguiente es un mensaje de error que aparece al cargar un gráfico SVG en un sitio web de WordPress:
Ventajas de usar archivos SVG:
- Escalabilidad : dado que SVG es un formato de imagen vectorial, los archivos SVG conservan la misma calidad en todas las resoluciones de pantalla. Este beneficio 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 : el uso de archivos SVG facilita la mejora del rendimiento del sitio web, ya que ocupan menos espacio de almacenamiento web y se cargan mucho más rápido que las imágenes rasterizadas.
- Compatible con SEO : Google indexa los archivos SVG, lo que les permite aparecer en la Búsqueda de imágenes de Google y mejorar sus esfuerzos de SEO . Con las imágenes rasterizadas, está limitado a optimizar sus atributos alt .
- Basado en código : los SVG se pueden modificar mediante un editor de texto o un software de edición de gráficos vectoriales. Puede optimizar los archivos de imagen SVG para sitios web o incluso agregar animaciones para que los gráficos sean interactivos.
WordPress SVG y Seguridad
Dado que SVG es básicamente un archivo de texto XML, tiene vulnerabilidades explotables que no afectan a otros formatos de imagen. En consecuencia, las personas pueden secuestrarlo fácilmente con código malicioso para lanzar secuencias de comandos entre sitios (XSS) y ataques de entidad externa XML (XXE) en su sistema.
Por esta razón, debe tener cuidado al manipular 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 el código y los errores sospechosos, lo que hace que las imágenes sean seguras para su sitio.
Puede desinfectar las cargas de archivos SVG con un complemento SVG; cubriremos los pasos para hacerlo más adelante. Sin embargo, recomendamos desinfectarlo dos veces con SVG Sanitizer Test
Otra forma de proteger tu sitio web de WordPress es limitar las cargas de SVG solo a usuarios de confianza. Los usuarios seleccionados deben ser conscientes de las preocupaciones de seguridad que rodean al formato SVG; esto los disuadirá de obtener archivos SVG de fuentes dudosas.
Métodos seguros de subir archivos SVG a WordPress
Técnicamente, hay dos formas de agregar soporte SVG a WordPress: usando un complemento o habilitándolo manualmente. Independientemente de su elección, le recomendamos que limite los privilegios de carga a los administradores y usuarios de confianza solo para minimizar las cargas maliciosas.
Usando un complemento
En este tutorial, utilizaremos la compatibilidad con SVG . Este complemento utiliza una biblioteca de desinfección SVG que se activará automáticamente al cargar archivos SVG en la biblioteca multimedia. También es fácil de configurar y de uso gratuito.
Estos son los pasos para configurar la compatibilidad con SVG:
- Instala el complemento y actívalo.
- Entra a Configuración -> Compatibilidad con SVG desde su panel de WordPress.
- Marca la casilla junto a la opción Restringir al administrador para limitar los privilegios de carga. Realiza la misma acción con la opción Habilitar modo avanzado si deseas acceder a funciones avanzadas, como la representación SVG en línea y el estilo CSS.
- Después de guardar los cambios, puedes comenzar a cargar archivos SVG de forma segura a la biblioteca de medios.
Añadir manualmente la compatibilidad con SVG de WordPress
Este método implica editar el archivo functions.php de su sitio web de WordPress. Por lo tanto, es necesario que sigas los pasos así estes familiarizado con PHP y comprendas completamente el problema de la seguridad de SVG.
Asegúrate de hacer una copia de seguridad de su sitio web de WordPress antes de realizar cualquier cambio para evitar la pérdida de datos en caso de una configuración incorrecta.
Los siguientes pasos explicarán cómo habilitar SVG en WordPress manualmente a través del Administrador de archivos de Hostinger. Dicho esto, también puede usar un cliente FTP como FileZilla .
- Accede a hPanel y ve a Archivos -> Administrador de archivos .
- Ve a public_html -> wp-includes . Desplázate hacia abajo hasta que encuentres functions.php .
- Doble clic en el archivo para abrirlo y pegue el siguiente fragmento de código allí:
función add_file_types_to_uploads ( $file_types ){< fuente >< / fuente >
$nuevos_tipos_de_archivo = array () ; < fuente >< / fuente >
$nuevos_tipos_de_archivo['svg'] = 'imagen/svg+xml' ; < fuente >< / fuente >
$file_types = array_merge ( $file_types, $new_filetypes ) ; < fuente >< / fuente >
devuelve $tipos_de_archivo ; < fuente >< / fuente >
}< fuente >< / fuente > add_filter ( 'upload_mimes' , 'add_file_types_to_uploads' ) ;
- Guarda los cambios e intenta cargar un tipo de archivo SVG. Si el proceso es exitoso, su biblioteca de medios debería aceptar la carga del archivo.
Los muchos beneficios 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 de WordPress acepte archivos SVG: utilizando un complemento de WordPress o modificando el archivo functions.php del sitio. Además de limitar los privilegios de carga, podrá cargar archivos SVG de forma segura en la biblioteca de medios del sitio.
BONUS TRACK
JPG o JPEG: Grupo Conjunto de Expertos Fotográficos
Un JPG está optimizado para fotografías. JPG funciona al deshacerse de las cosas que es probable que el ojo no vea o note. Los JPG son archivos ráster con pérdida, lo que significa que pierden una pequeña cantidad de información cada vez que se guarda el JPG. Los JPG funcionan con la compresión de color, por lo que son ideales para fotografías e imágenes digitales complejas. Un jpg de alta resolución también suele ser adecuado en estos días para imprimir con la mayoría de las empresas de impresión bajo demanda. Estamos discutiendo principalmente el uso de la web aquí, pero hay una variedad de formatos de archivo disponibles para imprimir. La reducción del tamaño del archivo da como resultado la reducción de la calidad de la imagen.
GIF: formato de intercambio de gráficos
Este formato de mapa de bits admite hasta 8 bits por píxel, lo que limita su paleta de colores a 256. No es bueno para fotografías y se conocen principalmente en estos días por simplemente memes animados. Los GIF no son grandes jugadores en el mundo del diseño web.
PNG: Gráfico de red portátil
PNG fue diseñado para su uso en Internet y es el formato de compresión de imágenes más utilizado en la web. Los archivos PNG no son para imprimir imágenes gráficas profesionales. Los PNG son gráficos de trama y se crearon como una mejora del GIF. Los PNG funcionan bien con imágenes de arte lineal y fotografías para sitios web, pero pueden resultar en tamaños de archivo realmente grandes. Los PNG también ofrecen transparencia alfa, lo cual es genial porque cada píxel individual tiene su propio nivel de opacidad. Los PNG vienen en dos tipos PNG-8 y PNG-24. PNG-8 significa que el archivo tiene solo 8 bits por píxel y PNG-24 tiene 24 bits por píxel.
SVG: gráfico vectorial escalable
Los SVG son gráficos vectoriales que admiten animación y sus comportamientos se definen en archivos XML para que se puedan buscar, indexar, generar scripts y comprimir. Los gráficos vectoriales son excelentes para logotipos y arte lineal porque no están hechos de píxeles y se pueden cambiar de tamaño infinitamente sin perder calidad o aumentar de tamaño. Los SVG son su mejor opción cuando crea íconos y arte lineal para pantallas de alta resolución.
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.
