Cómo Añadir archivos SVG a WordPress

1638965860 Como Anadir archivos SVG a WordPress • Silo Creativo

Cómo Añadir archivos SVG a WordPress Por razones de seguridad, no puede cargar imágenes SVG en WordPress. Si intenta cargar un archivo con la extensión SVG, verá este error:

Lo siento, este tipo de archivo no está permitido por motivos de seguridad.

Cómo Añadir archivos SVG a WordPress

Resulta que los SVGs son archivos de texto —puedes abrirlos con la libreta y verás que define puntos y líneas geométricas que forman una imagen— y son peligrosos y pueden guardar y ejecutar Javascript.

Por eso hay que tener cuidado y evitar descargar archivos svg de cualquier lugar, ya que podrían ser manipulados por personas malintencionadas.

Por el contrario, las imágenes SVG que se siguen utilizando tienen sus ventajas:

  • El tamaño de los archivos es muy pequeño: apenas unos pocos KB en comparación con las décadas o KB de conocimiento de una imagen jpg o png.
  • Aunque son pequeños, su descarga y su web son más rápidas.
  • No tienen pérdida de calidad al cambiar su tamaño (sensible al sonido).
  • Cualquiera que sea puedes editar la imagen y añadir o quitar elementos, como son puntos y líneas.

Y sobre todo, es el formato que utilizan los ilustradores en programas como: Corel Draw, Inkscape e Illustrator. Por eso —cómo diseñador— puede que tengas que activar svg en WordPress y desbloquear esta medida de seguridad.

Te mostraré dos formas, la primera es tan fácil como instalar un complemento. La segunda opción es agregar algunas líneas de código y te ayudará si estás creando un tema personalizado.

Índice

    Opción 1: instalar un complemento (fácil)

    Esta es la opción que recomiendo si quieres una solución fácil. Solo tienes que instalar y activar el plugin
    guardar SVG y puede cargar archivos SVG desde la biblioteca de medios de WordPress.

    Encontrarás el plugin en el repositorio público de WordPress y este es su aspecto:

    Cómo Añadir archivos SVG a WordPress

    Además de permitir la carga de archivos svg, el complemento se encarga de analizar y neutralizar cualquier amenaza que pueda haber en su interior.

    La versión básica es gratuita y te la recomendamos cuando eres el único administrador del sitio. Sin embargo, si tiene varios usuarios o editores, es mejor instalar el complemento
    Soporte SVG que permite restringir la carga de archivos SVG solo a los administradores.

    Opción 2 – Programar un filtro (mejor rendimiento)

    En segundo lugar, está la opción más sencilla, que consiste en programar un filtro —para modificar el funcionamiento original de WordPress— que te permita añadir SVGs a WordPress. Si eres valiente y te atreves a enredarte con los entrelazados de WordPress, podrás evitar instalar un plugin y que tu sitio esté optimizado.

    En este enlace te explico cómo
    crear un tema de hijo que es una técnica utilizada por los programadores para realizar cambios en el tema principal de forma segura y rápida.

    Con el tema activo, edite el archivo functions.php para que pueda agregar estas líneas:

    function custom_mimes( $mimes = array() ) {
    	// New allowed mime types.
        $mimes['svg'] = 'image/svg+xml';
        $mimes['svgz'] = 'image/svg+xml';
        return $mimes;
    }
    add_filter( 'upload_mimes', 'custom_mimes' );
    

    Al momento de subir las imágenes es importante que estén en formato xml, de lo contrario obtendrás un error de seguridad.

    Es fácil de resolver, abra el archivo de imagen con un editor de texto y agregue este código al principio del archivo:

    <?xml version="1.0" encoding="utf-8"?>
    

    Guarde el archivo e intente cargar la nueva imagen.

    Entonces tiene los métodos, uno fácil y otro con mejor rendimiento para agregar svg a WordPress.

    Cómo Habilitar Soporte de WordPress SVG de Manera Segura

    Cómo Añadir archivos SVG a WordPress

    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.

    Hoy vamos a sumergirnos en una forma de habilitar de manera segura el soporte de WordPress SVG, discutir el soporte del navegador, así como algunas advertencias si decide cambiar al formato de imagen vectorial.

    Con un poco de suerte un día vamos a tener SVG como parte de WordPress core, pero todavía no llegamos ahí.

    ¿Qué Es SVG un Archivo SVG ?

    SVG (Scalable Vector Graphics) es una imagen vectorial basada en XML que suelen utilizar los sitios web y las marcas para mostrar logotipos e iconos en sus páginas web. Wikipedia define SVG como:

    Un SVG (scalable vector graphics) es un formato de imagen vectorial basado en XML para gráficos bidimensionales con soporte para interactividad y animación. La especificación SVG es un estándar abierto desarrollado por el World Wide Web Consortium (W3C) desde 1999.

    Incluso puedes manipular los archivos SVG con código o con tu editor de texto. Los SVG son utilizados actualmente por el 33% de todos los sitios web y, como puedes ver a continuación, la tasa de adopción está creciendo rápidamente. Sitios populares como Google, Reddit, Dropbox, ESPN, e incluso nuestro propio sitio web de Kinsta utiliza SVGs.

    Cómo Añadir archivos SVG a WordPress

    Compatibilidad con el navegador de archivos SVG

    Los archivos SVG son actualmente compatibles con todos los principales navegadores, incluidos los de los móviles. El único problema que puede encontrar es si aún necesita soporte para IE8, que esperamos que no sea el caso. IE8 sólo tiene alrededor de un 0,36% de cuota de mercado de navegadores y ya no tiene soporte. Aquí está un artículo magnífico de Lubos sobre por qué los desarrolladores deberían dejar de ser compatibles con IE8, IE9, y IE10.

    Desde una perspectiva empresarial, esto no siempre es posible, pero trae algunos puntos positivos. Si por alguna razón desesperada todavía necesitas el soporte de IE8, podrías definir una imagen de respaldo (PNG o JPG) para tus imágenes SVG, pero no vamos a entrar en eso hoy. A continuación, se muestra una lista de navegadores compatibles:

    • Internet Explorer 9, 10, 11+ and Edge
    • Firefox 2+
    • Chrome 4+
    • Safari 3.1+
    • Opera 10+
    • iOS Safari 3.2+
    • Android Browser 3+
    • Firefox for Android 86+
    • Opera Mini (todos)
    • Opera Mobile 12+
    • Chrome for Android 89+
    • UC Browser for Android 12.12+
    • Samsung Internet 4+
    • QQ Browser 10.4
    • Baidu Browser 7.12
    • KaiOS Browser 2.5
    Cómo Añadir archivos SVG a WordPress

    Beneficios del uso de archivos SVG

    Los archivos SVG son un formato vectorial, lo que significa que son automáticamente escalables tanto en los navegadores como en las herramientas de edición de fotografías. Esto los hace convenientes para ambos los diseñadores gráficos y de web también. Normalmente, cuando intenta editar un PNG o JPG en una herramienta como Photoshop o Paint, no puede redimensionar las imágenes sin pixelación.

    Con SVGs, puede redimensionarlas a una cantidad infinita y se verán de manera píxel perfecta (o debemos decir vector perfecto) cada vez. Esta es la razón por la cual es un formato de imagen genial para usar en las pantallas retina.

    Google indexa SVGs, que es una gran noticia por fines de SEO. El contenido SVG, ya sea en un archivo independiente o embebido directamente en HTML, se indexa y aparecerá en la búsqueda de imágenes de Google. Puedes comprobarlo de primera mano con las ilustraciones SVG que utilizamos en Kinsta haciendo una búsqueda avanzada de imágenes. Nota: Los SVG inline, o mejor dicho, los compuestos solo por código, no suelen ser indexados.

    SVGs son tradicionalmente (no siempre) menores en tamaño de archivo que PNGs o JPGs. Mediante el uso de SVGs, en realidad puede acelerar su sitio WordPress ya que disminuye el tamaño general de la página. Genki escribió un gran artículo donde compara el tamaño de SVG vs PNG vs JPEG y aquí está nuestra comparación JPG vs JPEG. A continuación presentamos algunas sugerencias de sus pruebas en las que comparó los tres tipos de imágenes diferentes.

    JPG (tamaño optimizado: 81.4 KB)

    Cómo Añadir archivos SVG a WordPress
    Cómo Añadir archivos SVG a WordPress 28

    PNG (tamaño optimizado: 85.1 KB)

    Cómo Añadir archivos SVG a WordPress

    SVG (tamaño optimizado: 6.1 KB)

    Cómo Añadir archivos SVG a WordPress

    Como se puede ver arriba, el SVG tiene un tamaño de archivo menor en un 92.51% cuando se compara con el JPG. Y en comparación con PNG en un 92.83%. Esas son diferencias de tamaño de archivo bastante impresionantes. Sin embargo, hay una advertencia, ya que Genki probó imágenes más detalladas y los SVGs eventualmente llegaron a ser mayores en tamaño que el JPG o PNG.

    Es por eso que muchos sitios usan SVGs para imágenes menos detalladas como logotipos, iconos, etc., ya que verán una disminución significativa en el tamaño de los archivos. Pero para más imágenes con gran detalle, como tal vez su blog «imágenes destacadas», es posible que desee seguir con un PNG o JPG pero aún se puede optimizarlas. Muchos sitios web utilizan un enfoque híbrido, utilizando ambos tipos de archivos juntos donde tiene sentido.

    Además, es importante tener en cuenta que las redes sociales como Facebook y Twitter no admiten SVG para compartir. Así que si usas SVGs para tus imágenes destacadas, tendrías que utilizar la función Yoast SEO y subir un PNG o JPG para el OG y meta tags, de lo contrario podrías arriesgarte a que tu imagen destacada no se muestre en absoluto.

    ¿Por Qué la Seguridad de SVG Es Importante?

    La razón por la que SVG no es parte de WordPress core todavía es que hay preocupaciones de seguridad que deben abordarse. Puede seguir la discusión activa sobre SVGs en WordPress core (#24251) que se inició en 2013. SVG es un archivo XML, que por sí mismo es abierto a vulnerabilidades mientras que los formatos de imagen normales no se ven afectados. Éstas incluyen ataques de entidades externas XML (XXE), y ataques XSS.

    Mario Heiderich Publicó una presentación detallada sobre los riesgos de seguridad inyección de contenido activo con archivos SVG . Un ejemplo dado fue que JavaScript estaba embebido en un SVG y realmente logró llamar a Mario en Skype. ¡Eso da un poco de miedo! SecuPress, autores de un plugin de seguridad de WordPress, también abordaron el tema de tener cuidado al añadir SVGs a WordPress, y la importancia de hacerlo de la manera correcta.

    Muchos SVG plugins en el repositorio utilizan el código siguiente, que simplemente permite que el tipo MIME permita la carga de SVG en la biblioteca de medios de WordPress. ¡Esta no es la manera segura de hacer esto! Así que no simplemente vaya y descargue el primer plugin gratis SVG que vea ni copie y pegue este código y piense que ya quedó todo listo.

    function cc_mime_types($mimes) {
     $mimes['svg'] = 'image/svg+xml';
     return $mimes;
    }
    add_filter('upload_mimes', 'cc_mime_types');

    La solución es que SVGs necesitan ser desinfectados. La sanitización es básicamente la limpieza de código o entrada para evitar problemas de seguridad (como la inyección de código), conflictos de código y errores. Esto podría implicar cosas como codificar datos, filtrar y validar cadenas, etc. Aquí es donde la librería SVG-Sanitizer de Daryll Doyle entra en juego, a la que se refiere como «su intento de construir un desinfectante de  SVG decente en PHP». Vea el demo de este desinfectante de SVG para verlo en acción.

    Cómo Añadir archivos SVG a WordPress

    También es importante que considere quién en su sitio tiene acceso para cargar SVGs. Por ejemplo, si está en un sitio con varios autores, no tiene idea de qué tipo de SVG alguien más puede cargar, exponiendo su sitio. Restringiendo descargas SVG a administradores y los que entienden algunas de las preocupaciones de seguridad es aconsejable.

    ¿Cómo Habilitar Soporte de WordPress SVG de Manera Segura?

    Daryll ha desarrollado un plugin, WP SVG (también conocido como Safe SVG), que utiliza la librería de SVG-Sanitizer al subir imágenes SVG a su biblioteca de medios de WordPress. El plugin también le permite ver SVGs como imágenes normales en la biblioteca de medios.

    Cómo Añadir archivos SVG a WordPress

    Usted puede descargar Safe SVG de forma gratuita desde el repositorio de WordPress o buscarlo en el panel de WordPress bajo «Añadir nuevos» plugins. El plugin funcionará perfectamente después de unos clics.

    Info

    Este plugin no ha recibido ninguna actualización reciente, así que asegúrate de probarlo en un sitio de prueba o staging antes de instalarlo en tu sitio de producción.

    También hay una versión premium, disponible en wpsvg.com, que te permite restringir a determinados usuarios la subida de SVGs y la optimización adicional de los mismos. En el ejemplo siguiente, vamos a utilizar simplemente la versión gratuita.

    Como plugin alternativo, puedes consultar el Soporte SVG.

    Antes de cargar su archivo SVG, es importante entender que se comportan de forma ligeramente diferente que las imágenes. Al exportar un SVG desde su herramienta de edición de fotos, querrá exportar el texto como curvas (o crear un esquema), de lo contrario, puede ser un poco diferente en varios navegadores.

    Cómo Añadir archivos SVG a WordPress

    Después de instalar el plugin, no hay ajustes, simplemente desinfectará sus SVGs al subir. En nuestro sitio de prueba a continuación puede ver que reemplazamos nuestro logotipo con un archivo SVG, es visible como normal en la biblioteca de medios.

    Cómo Añadir archivos SVG a WordPress

    Esto también nos permitió utilizar el panel de control de nuestro tema para cambiar el logotipo en nuestra cabecera de WordPress a nuestro archivo SVG. Usted puede ver a continuación que de hecho está sirviendo el archivo .svg. Y se ve hermoso ahora en las pantallas de retina.

    Cómo Añadir archivos SVG a WordPress

    Hay un tweak adicional que tuvimos que hacer. En IE9-11, los archivos de escritorio y móviles no redimensionan correctamente los archivos SVG. El añadir altura y anchura corrige este problema. Esto puede variar según el tema, pero en nuestro sitio de prueba simplemente modificamos nuestro archivo header.php y añadimos estas dimensiones personalizadas.

    Algunos temas de WordPress utilizan CSS para modificar la escala, lo cual no es recomendable por razones de rendimiento, pero debido a que puede requerir que agregue código adicional para solucionar el problema de IE.

    Cómo Añadir archivos SVG a WordPress
    Cómo Añadir archivos SVG a WordPress 29

    ¡Y eso es todo! Ahora ha habilitado con seguridad la compatibilidad con WordPress SVG. Este plugin y/o el método no está respaldado o soportado por WordPress core, por lo que, por supuesto, use bajo su propio riesgo. Sin embargo, si ya está cargando archivos SVG con sólo el fragmento de tipo MIME, entonces, por favor, hágalo de esta manera.

    Además, si nunca ha utilizado SVG antes, asegúrese de tener habilitado GZIP en su servidor para el tipo de archivo «image/svg + xml». Esto asegurará que se comprimen y se cargarán lo más rápido posible. A veces, los administradores de sistema solo habilitan los tipos de archivo más estándar. Nota: GZIP está habilitado en todos los servidores Kinsta ya para SVGs.

    Resumen

    ¡SVG es una manera útil para mejorar la apariencia de su sitio! Recomendamos utilizar SVGs, PNG y JPGs juntos para lograr el mejor rendimiento, ya que las imágenes muy detalladas no funcionarán tan bien en formato SVG. Los WordPress SVGs son ideales para su logotipo, para garantizar que se vea perfecto en todas las pantallas, junto con los iconos.

    ¿Qué piensa? ¿Ya ha utilizado SVG en su sitio WordPress?


    Ahorra tiempo, costes y maximiza el rendimiento del sitio con:

    • Ayuda instantánea de expertos en alojamiento de WordPress, 24/7.
    • Integración de Cloudflare Enterprise.
    • Alcance de audiencia global con 29 centros de datos en todo el mundo.
    • Optimización con nuestra herramienta de monitoreo de rendimiento de aplicación integrada.

    Todo esto y mucho más, en un plan sin contratos a largo plazo, migraciones asistidas y una garantía de devolución del dinero de 30 días. Conozca nuestros planes o habla con el departamento de ventas para encontrar el plan más adecuado para ti.

    Cómo SUBIR Imágenes SVG En WordPress

    ¿Conoces las características de los diferentes formatos de imagen que existen para páginas web, blogs o tiendas online? Quieres habilitar imágenes SVG en WordPress? ¿Conoces las ventajas (y desventajas) que tiene archivos svg? Estás en el lugar correcto! WordPress admite varios formatos de imagen (incluidos JPEG, GIF o PNG), aunque ha intentado cargar una imagen vectorial SVG y te ha saltado el error «Lo, este tipo de archivo no está permitido por motivos de seguridad». No te preocupes, en esta guía te explico en qué consisten este tipo de archivos y cómo subir archivos SVG a WordPress con y sin complementos.

    Si decides crear un sitio web, blog o tienda online con WordPress, si recurres a un diseñador web profesional, es fundamental trabajar con varios elementos generales con los que crear la arquitectura web, la maquetación y el aspecto visual de la web. Estos elementos son ellos textosel imágenesellos colores y las tipografías.

    Puedes encontrar más madera con otros elementos multimedia, como vídeos, documentos PDF, etc., pero estos 4 son los pilares fundamentales. De estos pilares, el que más influirá tenderá a ser el resultado visual final. las imagenes. Para él es imperativo apuesta por imágenes de calidaddisponible en multitud de bancos de imágenes gratuitos y premium.

    En modo muy resumido, hay 2 tipos de imágenes: mapas de bits y vectores. Los primeros se basan en píxeles dispuestos en cuadrícula y los lunes para líneas, curvas y otras formas geométricas. Dentro de los grupos generales, existen diferentes formatos de imagen como BMP, RAW o AI. Sin embargo, desde hace unos años ha aparecido en escena un nuevo formato que vino a dar guerra y protagonismo en muchos aspectos: archivos svg.

    Se espera que la popularidad de este tipo de archivos aumente con el paso de los años, debido a su flexibilidad y capacidad de mostrar la misma imagen en diferentes tamaños y colores (con el mismo archivo). Por eso, en esta guía explico todo lo que necesitas saber sobre las imágenes SVG y cómo gestionarlos en WordPress.

    Qué es un archivo SVG, cómo funciona y para qué sirve

    A diferencia de los formatos de imagen .PNG, .JPG o .GIF, SVG (o Scalable Vector Graphics o Gráficos Vectoriales Escalables) no es un formato de mapa de bits puro. En cambio, es un formato vectorial (un primo cercano al formato de AI de Adobe Illustrator y EPS) que se está convirtiendo en una opción atractiva para todos los diseñadores y desarrolladores de página web y UI (user interface o interfaz de usuario).

    Un SVG (Scalable Vector Graphics) es un formato de imagen vectorial basado en XML para gráficos bidimensionales con soporte para interactividad y animación. La especificación SVG es un estándar abierto desarrollado por el World Wide Web Consortium (W3C) desde 1999.

    A veces es útil pensar en el formato SVG como el «HTML para ilustraciones» y necesitas aplicarlo de manera muy diferente a otros formatos de imagen. Este formato de imagen es el más adecuado, por ejemplo, para mostrar logos, iconos, mapas, banderas y otros gráficos creados en aplicaciones de gráficos vectoriales como Illustrator, Sketch e Inkscape.

    Te puede Interesar  Comprueba de forma sencilla tu WordPress para dispositivos móviles • Silo Creativo

    Desarrollado con un marcado basado en XML, los archivos SVG pueden ser editados en cualquier editor de texto y modificado por JavaScript o CSS. Como los vectores pueden ser escalados a cualquier tamaño mientras conservan la calidad de imagen nítida, son ideales para el diseño responsive. Aunque SVG es un formato vectorial en su núcleo, es posible (incluso común) incrustar gráficos de mapa de bits dentro de archivos SVG (por ejemplo JPEG).

    Esto se puede hacer enlazándolo a una imagen a través de una URL (como lo haces con tus imágenes JPG en tu sitio web) o encapsulando el pixel de la imagen como un esquema URI de datos. Esto brinda al SVG mucha flexibilidad y posibilidades. Los servicios online como WordPress, Flickr, Medio, Tumblr y Facebook convertirán (forzosamente) cualquier archivo SVG a otro formato o, más probablemente, bloqueen directamente su subida. Estos son los usos más habituales de las imágenes SVG:

    • Logotipos e iconos con un diseño amigable con los vectores.
    • Gráficos que necesites mostrar en varios tamaños y pantallas.
    • Gráficos que responden a cada dispositivo.
    • Gráficos que necesitan ser editados, actualizados y redistribuidos.

    No importa el tamaño de tu ordenador o smartphone, con el formato SVG tus imágenes siempre tendrán la misma calidad.

    Ventajas de utilizar imágenes SVG en diseño y desarrollo web

    El mayor potencial del formato SVG reside en su ligereza y su versatilidad. En un contexto en el que los diseñadores y desarrolladores web viven obsesionados con la optimización WPO, los archivos SVG han llegado para ayudar en esta tarea.

    Además, al ser archivos que contienen código, se comportan como cualquier otro elemento de la web, pudiendo ser reconocidos por el algoritmo de Google y ayudando de esta manera al posicionamiento de tu web. Mucha gente todavía no está familiarizada con el formato SVG porque no está tan establecido como los gráficos de píxeles. Pero esto no debería de ser así, pues este formato de gráficos tiene muchos beneficios:

    • Es un estándar abierto: esto da pie a futuras mejoras y actualizaciones. De esta manera tienes tus imágenes siempre con la mejor calidad y en el mismo momento en el que la actualización vea la luz. Este tipo de estándares, están disponibles para todo el mundo por lo que estará siempre accesible.
    • Tiene una gran escalabilidad: Como los SVG están basados ​​en vectores, conservan la misma calidad en todas las resoluciones de pantalla. Si un archivo JPG se ve borroso en un dispositivo en particular porque no es lo suficientemente grande, los SVG se verán perfectamente nítidos.
    • Es archivo ocupa poco espacio: Por lo tanto, ocupan menos espacio en tu almacenamiento web y se cargan mucho más rápido que las imágenes renderizadas. Eso sí, ten cuidado, porque si tomas una imagen lo suficientemente detallada y la conviertes a SVG, ocupará más espacio que un JPG o PNG.

    Importancia de la seguridad cuando utilizas archivos SVG

    WordPress no permite subir este tipo de archivos. Si tan interesante es este tipo de archivo, ¿Por qué no lo deja abierto? ¡Muy fácil! 1Todo se debe a la seguridad. Y es que, realmente un archivo SVG es un documento de código en XML, es decir, no es un archivo de imagen habitual, por lo que, como todo documento, resulta muy susceptible a sufrir inyecciones de código (en ocasiones malicioso). Seguro que has intentado subir una archivo SVG a WordPress y te ha saltado el error «Lo siento, este tipo de archivo no está permitido por motivos de seguridad»:

    Cómo Añadir archivos SVG a WordPress
    Cómo Añadir archivos SVG a WordPress 30

    No te preocupes, tiene solución, pero es importante que sepas que habilitar la subida de archivos SVG a WordPress tiene «sus peligros», ya que, en pocas palabra, al integrar archivos en vectores SVG dejas abierta la puerta abierta a muchos contratiempos que pueden afectar tu seguridad en WordPress.. No obstante, si eres el único webmaster o el único que tienes permiso para subir archivos a la biblioteca de medios a tu instalación WordPress, puedes permitirte activar esta opción, porque tu actúas de filtro de seguridad.

    No resulta buena idea que busques imágenes en este formato por Internet y las añadas a tu WordPress sin verificar antes que no están infectadas. Si eres tú el que crea los imágenes SVG no hay problema, no vas a infectar tu propio archivo, pero si hay que tener especial cuidado con las imágenes descargadas de Internet.

    También tienes que tener especial cuidado con no dejar que los usuarios puedan subir imágenes SVG a tu WordPress, como si que pueden hacer con archivo .jpg, por ejemplo. Puedes habilitar que los administradores o los editores de WordPress puedan subir este tipo de imágenes, pero nunca debes permitir que la pueda subir un usuario normal, suscriptor o cualquier otro tipo de usuario en el que no confíes ciegamente.

    Cómo habilitar imágenes SVG en WordPress con y sin plugins

    Cómo Añadir archivos SVG a WordPress
    Cómo Añadir archivos SVG a WordPress 31

    Si quieres conseguir subir archivos SVG a WordPress, es decir, soltar un archivo SVG en la biblioteca de medios (o desde cualquier otro sitio), existen varias opciones. Primeramente, y la opción más sencilla, es utilizar un plugin que únicamente debes instalar y configurar en tu instalación WordPress.

    Para el segundo lugar he dejado la opción más compleja que consiste en programar un filtro. Este filtro, sirve para modificar el funcionamiento original de WordPress y que abre la posibilidad de subir SVGs a WordPress (dejando una puerta abierta a hackers, por lo que ten cuidado). Deja que lo explique por partes.

    Cómo habilitar imágenes SVG en WordPress con y sin plugins

    Cómo Añadir archivos SVG a WordPress
    Cómo Añadir archivos SVG a WordPress 32

    Si quieres conseguir subir archivos SVG a WordPress, es decir, soltar un archivo SVG en la biblioteca de medios (o desde cualquier otro sitio), existen varias opciones. Primeramente, y la opción más sencilla, es utilizar un plugin que únicamente debes instalar y configurar en tu instalación WordPress. Para el segundo lugar he dejado la opción más compleja que consiste en programar un filtro. 

    Este filtro, sirve para modificar el funcionamiento original de WordPress y que abre la posibilidad de subir SVGs a WordPress (dejando una puerta abierta a hackers, por lo que ten cuidado). Deja que lo explique por partes.

    Safe SVG

    Gratis

    El plugin Safe SVG utiliza la librería de SVG-Sanitizer al subir imágenes SVG a tu biblioteca de medios de WordPress. El plugin también te permite ver SVGs como imágenes normales en la biblioteca de medios. Además, hay una versión premium que te permite restringir a determinados usuarios la subida de SVGs y la optimización adicional de los mismos.

    SVG Support

    Gratis

    SVG Support, te ofrece soporte completo para agregar archivos SVG en WordPress. También te permite mostrar SVG en línea en publicaciones y páginas de WordPress. Con este plugin, puedes permitir a los administradores subir archivos en el formato. Para subir imágenes, puedes hacerlo igual que haces con cualquier otro formato.

    Easy SVG Support

    Gratis

    Easy SVG Support es un plugin que te permite cargar archivos SVG en tu biblioteca multimedia. Esta herramienta fue creada para personas que no necesitan muchas opciones para SVG. Además, su instalación es muy fácil, podrás tener este plugin que te ayude a subir imágenes en nada de tiempo.

    Para activar la subida de archivos SVG a WordPress con plugins tan solo tienes que activar el plugin y listo.

    Mejores páginas para descargar imágenes vectoriales gratis y de pago

    Relacionado directamente con lo que te comentaba sobre la seguridad de tu instalación WordPress, es crítico que, a la hora de buscar imágenes SVG por Internet, recurras a fuentes y páginas fiables, porque sino te puedes enfrentar a problemas de malware o inyección de código malicioso (hazme caso, es mejor evitarlo). Por ello, he hecho un listado de las mejores páginas para descargar imágenes vectoriales gratis y de pago:

    Flaticon

    Cómo Añadir archivos SVG a WordPress

    Gratis | 1 Mes (Desde 9€/mes) | 12 Meses (Desde 7€/mes)

    Flaticon es una de las mayores bases de iconos vectoriales, con más de 1.000 iconos y stickers gratuitos. Puedes encontrar todo tipo de iconos, así como formatos SVG, PSD, EPS y PNG. Ofrece un paquete mensual y otro anual de pago donde se incluyen más de 5’5M de iconos y stickers.

    Ir a Flaticon

    IconFinder

    Cómo Añadir archivos SVG a WordPress

    Gratis (Hasta 191.942 iconos) | Pro 5’7M iconos (Desde $9/mes)

    IconFinder es uno de los buscadores de iconos gratis más populares que ofrece más de 5’7M iconos e ilustraciones, y 1.700 paquetes. Encontrarás iconos gratuitos y otros de pago, de calidad variable y en formato PNG, ICO e ICNS. Su buscador destaca por la posibilidad de filtrar el precio, el tipo de licencia y el tamaño en píxeles.

    Ir a Iconfinder

    The Noun Project

    Cómo Añadir archivos SVG a WordPress

    Gratis | Pro (Desde $39/año)

    The Noun Project cuenta con más de 3M de iconos de diferentes artistas. Algunos iconos son gratuitos y otros de pago anual, pero todos los iconos son de muy alta calidad. Además, tiene un apartado para diseñadores que quieran subir sus propios iconos y compartirlos con el mundo.

    Ir a Thenounproject

    Mejores páginas para comprimir archivos SVG

    Optimizar las imágenes o archivos vectoriales que subes a la biblioteca de medios de WordPress no es importante, es crítico. De hecho, es un mercado que ha avanzado mucho y son muchos los plugins para optimizar imágenes los que han ido apareciendo para facilitar esta tarea. Eso sí, no todos optimizan los archivos SVG, por lo que es conveniente que arroje algo de luz sobre este tema y conozcas las mejores páginas para comprimir archivos SVG y así optimizar aún más el espacio que ocupan en tu alojamiento web:

    Flaticon

    Ir a Flaticon

    IconFinder

    image 15

    Ir a Iconfinder

    The Noun Project

    image 16

    Ir a Thenounproject

    Bonus: Tabla comparativa entre imágenes .PNG, .JPG, .GIF y .SVG

    A la hora de subir imágenes a tu sitio web es crítico que conozcas las ventajas y desventajas de cada formato de imagen. No es lo mismo un logotipo que un icono o una imagen vectorial. Por ello, he hecho una comparativa entre los distintos formatos de imagen .PNG, .JPG, .GIF y .SVG, para que utilices el formato de imagen correcto:

    Cómo Añadir archivos SVG a WordPress

    Conclusión: Sube imágenes SVG seguras en tu sitio web

    Como ves, el formato SVG ha llegado como un ciclón y va a dar mucho que hablar, más de lo que ya lo hace en la actualidad. El potencial que tiene, junto a la calidad que ofrece y su poco peso, va a hacer que las páginas web sean mucho más potentes y atractivas sin graves consecuencias para el rendimiento.

    Eso, siempre que se utilicen correctamente y cuidando la optimización, como sucede con los demás formatos. Como ves, casi todo son ventajas. Si estás con el diseño de una página web no dudéis en probar a utilizar las imágenes SVG.

    En la actualidad todas las webs están migrando al formato responsive, así que nos encontramos multitud de iconos que se redimensionan en función del ancho de la pantalla. Normalmente el funcionamiento suele ser sustituir un icono bitmap por otro más pequeño. Con SVG puedes utilizar el mismo y que se vaya reduciendo poco a poco, o bien utilizar varios tamaños pero que todos ellos sean SVG con la ventaja de la mejor visualización al ser vectorial.

    Es escalable, pesa poco y permite una definición mayor a tamaños reducidos, mucho mayor que los archivos bitmap. El formato es igual al que se utiliza con cualquier programa vectorial como Corel Draw o Adobe Illustrator.

    ¿Qué te ha parecido esta guía sobre los archivos SVG? ¿Conocías todos los formatos existentes? ¿Sabías sobre estos plugins para activar la subida de este formato en Worpress? ¿Crees que me he dejado alguno? ¿Te has quedado con alguna duda o pregunta? Entonces te pido que dejes un comentario. Da igual que sea o una duda o un simple gracias, pero me alegraré mucho de leerlo y responderlo.

    Como subir SVG a WordPress

    Como bien sabes WordPress soporta múltiples formatos de imagen, incluidos JPEG, GIF o bien PNG. Sin embargo, efectivamente procuró cargar uno de los formatos más modernos en la página web y falló. O bien por lo menos sencillamente. Por supuesto, hablamos de archivos de imagen en formato SVG. Podemos emplear SVG para los iconos o bien ilustraciones que deseemos en nuestro lugar. Las aplicaciones son múltiples y en el presente artículo vamos a ver ciertas de sus ventajas.

    Gráficos vectoriales escalables o bien gráficas vectoriales escalables (SVG) hijo a formato gráfico vectorial bidimensional. Pueden presentarle estática y animadamente, en formato XML. Y su especificación es un estándar abierto desarrollado por el W3C desde mil novecientos noventa y nueve.

    Como puede ver, no es que sea un formato que tenga descubierto ciertos años atrás. Pero es con el avance de las resoluciones de pantalla más altas que se emplean con más frecuencia. Aunque su aplicación todavía es pequeña, está presente en menos del quince% de los sitios.

    En este articulo queremos lidiar con múltiples problemas. Cómo podemos crear nuestros SVG para añadirlos a nuestro lugar y ver sus ventajas y desventajas. Además, naturalmente, de explicar ciertos métodos para poder subir archivos en este formato a nuestra mediateca de WordPress.

    Creando nuestros SVG

    Y para poder ver qué es un SVG, cuál es la mejor forma de crear uno para nosotros. Para hacer esto, usaremos un programa de gráficos vectoriales. Los más conocidos son Adobe Illustrator, Corel Draw, Inkscape o bien Affinity Designer.

    Cómo Añadir archivos SVG a WordPress
    Configuración de exportación SVG en Affinity Designer

    El proceso es tremendamente simple. Después de crear nuestra imagen, solo deberemos guardarla o bien exportarla como SVG. Simples de esta manera. Si miramos el fichero resultante, vamos a ver que no debería ocupar demasiado espacio. Algo de lo que charlamos hace algunos días, cuando examinamos el tema de la sostenibilidad y la página web.

    ¿Cuáles son las ventajas de utilizar SVG?

    Las primordiales ventajas que hallamos son 2. Por un lado, el peso de los archivos. Hicimos una prueba con el logotipo de Silo Creativo, exportar a diferentes formatos de imagen. Y este es el resultado.

    Cómo Añadir archivos SVG a WordPress


    Como puede ver, las diferencias son notables. Además, siendo gráficos vectoriales, No hay necesidad de preocuparse de que, a determinadas resoluciones, nuestras imágenes se pixelen. Ya despreocúpate más por subir nuestro logotipo, y que en pantallas de alta resolución como las pantallas Retina no quedan bien.

    Hasta hace unos años esto no pasaba, mas actualmente todos los navegadores web aceptan SVG. Además, podemos animarlos utilizando CSS. Finalmente, Google indexa este género del archivo como cualquier otra imagen, con lo que el posicionamiento SEO de nuestro lugar no nos penaliza. Pero, como todo lo demás en la vida, tiene una parte negativa, que vamos a ver a continuación.

    Desafortunadamente, asimismo hay desventajas.

    Desde mi opinión, estos inconvenientes se podrían poner en comillas, en tanto que más que inconvenientes, son aspectos con los que debemos tener precaución. La primera y más alarmante es que es simple de introducir código malicioso en un fichero SVG. Por este motivo, no debemos descargar un fichero en este formato desde ningún sitio y subirlo a nuestro WordPress.

    Sé cuidadosísimo con esto. Por lo tanto, es conveniente crear nuestros logos o bien ilustraciones en SVG o bien descargarlos de sitios con renombre. Esta falta de seguridad es una de las razones por las cuales WordPress no le deja cargar este género del archivo por defecto.

    Como habrás apreciado, charlamos de manera continua de logos y también ilustraciones. Y eso es por el hecho de que es muy bastante difícil crear imágenes complejas en formato SVG. Además, pueden volverse muy pesados. Para ello es mejor emplear otro género de fichero como PNG, JPEG o bien GIF. En un artículo charlamos de qué formato de imagen es el más conveniente para cada ocasión.

    Después de hacer una revisión general, veamos de qué manera podemos habilitar la carga de SVG en nuestro WordPress.

    Cómo añadir SVG a WordPress

    Una vez que hayamos puesto la relación entre SVG y WordPress en el mapa, veamos de qué manera podemos subirlos a la biblioteca para emplearlos en nuestro sitio.

    Método 1: alterar el fichero functions.php

    Recomendamos este procedimiento solo bajo un término. Y es si todos y cada uno de los archivos SVG que vamos a subir a nuestro WordPress son creado por nosotros mismos. De esta forma garantizamos al cien% que no poseen ningún código malicioso.

    Lo bueno de este procedimiento es que no necesitaremos instalar ningún complemento extra, con las ventajas que esto acarrea. Dicho esto, solo deberemos ir desde nuestro panel de administración de WordPress a Apariencia> Editor. Solo deberemos añadir al fichero. functions.php las próximas líneas de código:

    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_action('upload_mimes', 'add_file_types_to_uploads');

    Como siempre y en todo momento, al editar este género de archivos, aconsejamos crear un tema hijo de la plantilla que está usando hoy en día. Ahorremos futuros cefaleas.

    Método 2: empleo de complementos

    La opción más simple y segura es activar un complemento libre para esta labor. Si no sabe de qué manera instalar un complemento, consulte nuestro artículo. Navegando por el repositorio de complementos de WordPress, encontraremos múltiples de ellos. La ventaja de estos complementos es que analizará el código de los archivos SVG que cargamos, asegurándonos de que no contengan ningún código malicioso.

    Cómo Añadir archivos SVG a WordPress

    Uno de los más conocidos y usados es SVG Support. Una vez instalado y activado, tenemos ciertas opciones extra. Uno nos da la opción de vincular nuestros SVG con CSS si vamos a animarlos. El otro limita la carga de SVG a WordPress solo a los administradores web.

    Resumen

    Como ha visto, el empleo de SVG en nuestros proyectos puede darle una ventaja de calidad en múltiples aspectos. Pero, como siempre y en todo momento, debemos ponderar sus aspectos positivos y negativos que se derivan de su empleo. Tendremos que meditar exactamente en qué situaciones nos favorecerá tu aplicación y exactamente en qué va a ser mejor emplear otro género de archivos.

    Y , ¿Utiliza archivos en formato SVG en su sitio? Tiene comentarios abiertos para contarnos sus experiencias y calificaciones sobre este tema.

    Cómo Añadir archivos SVG a WordPress

    Artículos Relacionados

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada.

    Subir

    Utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestra web. Si sigues utilizando este sitio asumiremos que estás de acuerdo. Más Información