¿Qué es un archivo SVG?
Un archivo SVG o gráfico vectorial escalable es un formato de imagen único que se basa en datos «vectoriales» para crear una imagen visible. Es un formato de gráficos vectoriales basado en XML que incluso se puede manipular con editores de texto.
Si bien es raro en estos días, los archivos SVG están ganando popularidad exponencialmente gracias a sitios como Google, Dropbox y Reddit que los usan.
¿Por qué deberíamos usar archivos SVG?
Quizás la mayor ventaja de usar SVG es la capacidad de escalar a cualquier resolución. A diferencia de otros formatos de imagen como PNG o JPG que no son escalables sin pixelación.
SVG se puede escalar a la enésima vez, lo que lo hace ideal para que lo usen los diseñadores web y gráficos y no se vuelve borroso, sino que se ve perfecto en los vectores.
Puede utilizar imágenes SVG cuando crea tu blog de wordpress o cualquier otro sitio web, incluso si usa alternativas de WordPress.
Más razones para usar SVG incluyen:
- Diseño de logotipos sin problemas de escalabilidad
- Crear cuadros, tablas y diagramas.
- Animar archivos SVG con CSS (que prefiero usar)
- Mejor clasificación SEO ya que Google también indexa archivos SVG
- Tamaño de archivo más pequeño, lo que acelera el rendimiento de los sitios web
WordPress y SVG
WordPress admite una variedad de formatos de archivo, pero SVG no está en la lista predeterminada.
Al igual que HTML, un archivo SVG está basado en XML y contiene código de marcado XML. El código XML es analizado por un navegador web o herramientas de edición de imágenes para representar la imagen en las pantallas de su dispositivo.
Sin embargo, SVG, que depende de XML, es propenso a vulnerabilidades, especialmente en términos de seguridad. Los piratas informáticos pueden ingresar a su sitio o red para obtener acceso no autorizado a los datos almacenados en su sitio o bases de datos conectadas a él, iniciar técnicas de prueba y error, como ataques de fuerza bruta o ataques de secuencias de comandos entre sitios.
Debido a estos riesgos de seguridad, WordPress no permite archivos SVG de forma predeterminada.
Cómo subir SVG a WordPress
Si bien WordPress no es compatible con SVG de forma predeterminada, hay un par de formas en que puede incorporarlos a su sitio con una pequeña reconfiguración. Hay dos formas de incluir SVG, la primera es un proceso manual y la segunda son complementos.
Método 1: ¿Cómo habilitar manualmente la carga SVG de WordPress?
Abra el archivo functions.php de su sitio web (a través de Apariencia-> Editar temas en el tablero). Agregue el siguiente fragmento de código para permitir que WordPress cargue archivos SVG a través de la Biblioteca multimedia.
Encontré este código escrito por Chris Coyier:
// Permitir SVG
add_filter (‘wp_check_filetype_and_ext’, función ($ datos, $ archivo, $ nombre de archivo, $ mimos) {
versión global de $ wp;
if ($ wp_version! == ‘4.7.1’) {
devolver $ datos;
}
$ tipo de archivo = wp_check_filetype ($ nombre de archivo, $ mimos);
devolver [
‘ext’ => $filetype[‘ext’],
‘tipo’ => $ tipo de archivo[‘type’],
‘proper_filename’ => $ datos[‘proper_filename’]
];
}, 10, 4);
cc_mime_types ($ mimos) {
$ mimo[‘svg’] = ‘imagen / svg + xml’;
return $mimi;
}
add_filter (‘upload_mime’, ‘cc_mime_types’);
arreglar_svg () {
Eco ‘
‘;
}
agregue nazwa (‘admin_head’, ‘fix_svg’);
Se recomienda encarecidamente que se asegure de que sus funciones de usuario personalizadas estén designadas para cargas SVG. Este paso es importante para mantener su sitio web seguro, ya que los archivos SVG pueden causar fallas de seguridad.
Método 2: usar un complemento
El segundo método para habilitar SVG en su sitio de WordPress es usar complementos. Un complemento gratuito llamado Guardar el SVG utiliza la biblioteca SVG-Sanitizer y está disponible para su descarga desde el repositorio oficial de WordPress. También puede descargarlo buscando complementos en la página «Agregar nuevo».
Simplemente descargue y active el complemento para su sitio de WordPress. También le permitirá ver archivos SVG junto con otros formatos populares en su biblioteca de medios. Después de una descarga exitosa, no necesita realizar ninguna configuración específica.
Además, la versión premium de este complemento viene con características adicionales, como restringir que algunos usuarios carguen archivos SVG.
Un punto importante a considerar es que este complemento (y algunos otros también) no está respaldado y/o respaldado de ninguna manera por el núcleo de WordPress. Así que ten cuidado y úsalo bajo tu propio riesgo.
¿Cuáles son los peligros/riesgos?
Los formatos de archivo SVG tienen muchas ventajas, pero la razón por la que WordPress no se incluye de forma predeterminada es por los riesgos de seguridad. Si no está familiarizado con la seguridad de WordPress, le recomiendo consultar los servicios de mantenimiento de WordPress.
Dado que el archivo SVG es un formato de documento basado en XML y no exactamente un formato de imagen, puede contener código CSS y JavaScript incrustado.
Los archivos SVG se pueden abrir en un editor de texto como el Bloc de notas y el código es fácil de modificar. Su navegador puede ejecutar cualquier archivo SVG con script y código incrustado. Este código puede ser malicioso y también puede comprometer la seguridad de su computadora.
Además, se recomienda encarecidamente descargar complementos confiables para la compatibilidad con SVG. Simplemente no vaya y descargue ningún complemento disponible solo porque es gratis.
Un ejemplo de un ataque XSS simple usando un archivo SVG:
Escribamos un código SVG en el archivo del bloc de notas:
<---- SVG Code --->
<!--?xml version="1.0" standalone="no"?-->
<script type="text/javascript">
alert("XSS Attack");
</script>
<--- SVG Code -- >
Como se ve en parte:
