Cómo usar SVG en WordPress

A pesar de que SVG se estandarizó a principios de la década de 2000, el formato de imagen altamente atractivo no vio mucha luz debido a la pobre compatibilidad del navegador. Todo esto ha cambiado drásticamente en los últimos años, ya que SVG se está convirtiendo rápidamente en la forma de imagen de facto en la web.

Y no son solo los diseñadores gráficos los que se están enamorando de SVG, sino también los usuarios de WordPress que desean acelerar sus blogs reduciendo el tamaño total de la imagen. Esta publicación explorará el tema de cómo usar SVG en un sitio basado en WordPress.

¿Qué es SVG?

SVG (Gráficos vectoriales escalables) es un formato de imagen basado en XML para mostrar gráficos en la web y dentro de las aplicaciones. Fundamentalmente, un archivo SVG es simplemente una colección de código XML que especifica diferentes formas y colores utilizados dentro de una imagen SVG.

Y dado que puede abrir archivos SVG con un editor de texto, también es fácil realizar personalizaciones utilizando código básico CSS3 y JS. Como resultado, los usuarios modernos de la web prefieren los SVG debido a su flexibilidad versátil.

Lo más importante es que W3C reconoce a SVG como un estándar líder en la industria. Por lo tanto, SVG funciona perfectamente junto con otras tecnologías basadas en la Web como DOM, HTML, etc.

¿Por qué es importante SVG?

Las imágenes SVG están basadas en vectores, como resultado, una imagen SVG se puede escalar infinitamente en la pantalla sin perder calidad. La interacción principal en este sentido es el navegador XML; donde el navegador traza la especificación XML con cada aumento o disminución.

No hace falta decir que los archivos SVG son mucho más flexibles que los formatos tradicionales como PNG o JPEG. Y la interacción directa entre CSS y JavaScript significa que puede adaptar sus imágenes SVG sobre la marcha. Esto es fundamental cuando está trabajando en un nuevo diseño o de otra manera.

En lo que respecta al rendimiento, las imágenes SVG tienden a ser significativamente más pequeñas que sus contrapartes. Como resultado, es común ver ilustraciones, logotipos e íconos creados como gráficos vectoriales. Esto también ha llevado al desarrollo de muchas fuentes de iconos, que mencionaremos brevemente en el artículo más adelante.

En pocas palabras, los SVG brindan flexibilidad, un tamaño de imagen reducido y una base sólida para mejorar el rendimiento de la imagen en su sitio de WordPress.

¿Cómo se crean las imágenes SVG?

La creación de imágenes SVG se puede hacer de dos maneras: escribir "código" y usar un software de diseño de gráficos moderno. El primer método, que consiste en escribir secuencias de comandos XML, es la forma tradicional de crear archivos SVG, pero puede resultar una técnica lenta e ineficiente.

Una colección simple de cuadrados podría verse así en formato XML:

Como puede ver, escribir esto repetidamente para gráficos complejos es lo mismo que pegarse un tiro en el pie.

El otro método es usar software, y esta es la forma más rápida y eficiente de crear gráficos SVG. Con el software basado en vectores, puede concentrarse en crear gráficos y luego exportarlos como archivos SVG listos para usar.

Affinity Designer es un conocido programa profesional de edición de vectores, pero también lo es software como Adobe Illustrator, Sketch, Figma e Inkscape.

Cualquiera que sea el software que decidas usar, lo único que realmente importa son tus planes para el tipo de gráficos que deseas crear. La funcionalidad de exportación funciona igual en todos los programas modernos.

No hace falta decir que SVG es siempre la misma estructura XML. Por lo tanto, puede usar imágenes SVG como un documento pero también insertarlas en línea.

¿Wordpress es compatible con SVG?

Por extraño que parezca, una plataforma con el alcance de WordPress en realidad no es compatible con el formato de archivo SVG. Pero solo por graves preocupaciones de seguridad.

Verá, a diferencia de los tipos de archivos PNG/JPG/GIF, SVG no es una imagen rasterizada sino un vector. Como resultado, SVG está expuesto a los riesgos de la explotación de JavaScript y WordPress ha optado por no permitir SVG en WordPress de forma predeterminada. Tiene sentido desde todos los puntos de vista.

Aunque los colaboradores de WordPress han hablado sobre SVG durante muchos años, hay demasiados ángulos que abordar para evitar problemas de seguridad a gran escala.

Por lo tanto, la única forma de solucionar esto es a través de complementos o habilitando SVG como formato de archivo utilizando las funciones de tema.

¿Cómo habilitar imágenes SVG en un sitio web de WordPress?

Antes de llegar a la parte de los complementos, puede habilitar SVG en WordPress a través del archivo functions.php en su directorio de temas. Esta es definitivamente la forma más rápida, pero también la menos segura ya que está habilitando SVG en formato sin formato.


//enable SVG file format for WordPress Uploads
function add_file_types_to_uploads($file_types){

$nuevos_tipos_de_archivo = array();
$nuevos_tipos_de_archivo['svg'] = 'imagen/svg+xml';
$file_types = array_merge($file_types, $new_filetypes);

devolver $tipos_de_archivo;
}
add_action('upload_mimes', 'add_file_types_to_uploads');

Y su otra opción, más segura, es usar complementos. Aquí hay tres de los complementos más destacados para habilitar SVG en WordPress.

Soporte SVG

Agregar compatibilidad con SVG es la mitad de la batalla, es posible que también desee agregar estilos personalizados, efectos de animación y habilitar restricciones. Pero para hacer todo esto, necesitas algo de apoyo.

Con la compatibilidad con SVG, puede comenzar a agregar archivos SVG a sus publicaciones y páginas utilizando la etiqueta de imagen tradicional. Por ejemplo, puede agregar una nueva clase CSS a sus imágenes: "estilo-SVG", que buscará su imagen SVG cargada y mostrará su contenido en una pantalla en línea.

Las características principales de este plugin son:

• Habilite la gestión de archivos SVG dentro de la biblioteca multimedia de WordPress.
• Convierta imágenes SVG cargadas en código en línea.
• Admite el widget de imagen para agregar etiquetas Alt y Caption a todas las imágenes SVG.
• Aplique estilo a imágenes SVG individuales usando CSS personalizado.
• Implemente efectos de animación utilizando CSS3 y JavaScript.
• Páginas de configuración detalladas dentro del tablero del complemento.
• Hacer cumplir el acceso basado en permisos. Por ejemplo, restrinja la carga solo a cuentas con privilegios de administrador.

Advertencia de que, a pesar de lo que ofrece este complemento, los riesgos de explotación de SVG son bastante reales. No habilite la administración de archivos SVG para usuarios en los que no confíe. Por lo tanto, idealmente, solo habilitaría esta función para usuarios en el nivel de administrador.

Para reiterar, cualquier persona con privilegios de carga puede cargar nuevos archivos SVG, pero debido a que los archivos SVG se basan en XML, están abiertos a la explotación a través de inyecciones maliciosas y de otra manera.

SVG seguro

Safe SVG es un complemento que le dará tranquilidad en términos de preocuparse por los posibles riesgos de seguridad. El complemento está diseñado específicamente para desinfectar cualquier nueva carga de SVG y evitar intenciones maliciosas. Además, Safe SVG agrega la capacidad de ver qué tipo de archivos SVG ha cargado a través de su biblioteca multimedia.

Con 50 000 usuarios activos, puede contar con Safe SVG para proporcionar un historial estelar de rendimiento seguro. Vale la pena señalar que hay dos versiones diferentes para este complemento; gratis y de pago.

La versión gratuita incluye funcionalidad para desinfectar nuevas cargas y también agrega soporte para la visualización de SVG dentro de la Biblioteca de medios.

Si opta por la versión Pro, obtendrá funciones adicionales como la optimización SVGO. Esta técnica de optimización reducirá aún más el tamaño del archivo de sus archivos SVG.

Además, con Pro, puede elegir quién puede o no cargar nuevos archivos SVG. Como resultado, puede restringir el acceso solo a usuarios específicos. Y, por último, al comprar el complemento, obtiene acceso a soporte premium: obtenga respuestas a sus preguntas cuando más lo necesite.

Agregar soporte SVG completo

Debería obtener resultados razonables con los dos primeros complementos que hemos enumerado. Pero, si le gusta la idea de agregar SVG a su sitio usando códigos cortos, consulte este complemento.

Este complemento agrega algunas funciones SVG a su WordPress y utiliza una técnica SVG que se basa en una idea de Alexey Ten. Esta forma de incluir imágenes SVG en HTML parece ser la que tiene la mejor combinación de rendimiento y compatibilidad en este momento.

Agregar soporte completo de SVG permite la carga de SVG y la generación de código abreviado. Además, puede personalizar el estilo de cada elemento SVG utilizando CSS personalizado. Por último, pero no menos importante, puede especificar una foto alternativa para cualquiera o todos los SVG que haya cargado.

¿Cuáles son algunos otros complementos SVG útiles para WordPress?

Además de agregar soporte SVG a un sitio de WordPress, ¿qué otros complementos existen que podrían beneficiar a su sitio? Todo el mundo y su abuela saben que hay importantes beneficios de rendimiento. Tanto en términos de tamaño de archivo, como en la capacidad del navegador para representar gráficos vectoriales en línea.

Iconos SVG de WP

Los íconos son un elemento visual, y tales elementos tienden a darle nueva vida a los diseños. Curiosamente, este complemento nació de una necesidad personal. El autor quería comenzar a implementar más archivos SVG en sus diseños, pero no pudo encontrar una solución para ello. Entonces, se tomó su tiempo y esfuerzo y creó WP SVG Icons.

Este complemento es muy fácil de usar y puede reemplazar los íconos existentes en su sitio con solo unos pocos clics. Lo mejor de todo es que tampoco necesita volver a crear cada imagen para las pantallas Retina, siempre que establezca el ancho máximo, el ícono se escalará automáticamente.

Al igual que en el caso de los autores, este complemento es excepcional para todo tipo de trabajo de desarrollo, multisitio y cliente. Sin restricciones, no necesita preocuparse por la compatibilidad de temas ni nada por el estilo.

También parece haber una versión premium en la oferta con una característica que permite cargar íconos personalizados. Por lo tanto, no está limitado a los íconos integrados.

Menú social SVG

Este es un complemento que funciona como un widget para mostrar íconos de redes sociales a través de imágenes SVG. Para que este complemento funcione, todo lo que tiene que hacer es crear un nuevo menú de WordPress con enlaces a sus perfiles de redes sociales.

Luego, seleccione la ubicación personalizada del menú social SVG y guarde el nuevo menú. Luego, puede usar el widget SVG Social Menu ya sea en su barra lateral o en otras áreas listas para widgets de su blog.

Los íconos actualmente disponibles son para los siguientes sitios y plataformas: plus.google, WordPress, facebook, twitter, dribble, Pinterest, Github, Tumblr, Youtube, Flickr, Vimeo, Instagram, LinkedIn, xing /feed, mailto.

Logotipo SVG y efectos de texto

SLATE es un complemento que permite la compatibilidad con shortcode para agregar efectos SVG personalizados. Puede usar este complemento para promover una imagen de marca fuerte, enfatizar los widgets de CTA o hacer que los elementos se destaquen a su manera. El uso inteligente de la compatibilidad con shortcode significa que puede editar y personalizar sus efectos en cualquier momento.

Por ejemplo, puede mezclar diferentes colores, fuentes, filtros y utilizar numerosos patrones de relleno que se manifiestan como efectos de diseño llamativos. SLATE ofrece tanta libertad creativa como un software de edición de vectores, ¡pero solo sin la necesidad de usar ningún software!

Entonces, ¿cuáles son algunas de las características clave?

• Texto. Genere códigos abreviados que puedan replicar los efectos de los efectos de texto llamativos pero compatibles con SEO. Muy parecido a lo que ves en la instantánea de arriba.
• fuentes. ¿No estás seguro de dónde conseguir fuentes personalizadas? No se preocupe, ya que SLATE viene preempaquetado con la enorme biblioteca de Google Fonts.
• Patrones de relleno. Las letras se rellenan con un patrón de relleno de su elección. Los patrones de relleno tienen parámetros. Controle varios tamaños, distancias y colores para producir variaciones únicas, o deje que los valores predeterminados funcionen para usted.

¡Y mucho más! Este complemento es una potencia para diseñar su texto y logotipos con una precisión excepcional. Y a través de SVG, nada menos.

¿Dónde puedes encontrar gráficos SVG?

¿Qué puede hacer si no tiene experiencia previa con el diseño gráfico vectorial? Afortunadamente, encontrar SVG en estos días es simple y directo. A lo sumo, solo tiene que vincular al autor original que hizo el gráfico. Y muchas plataformas ofrecen imágenes gratuitas sin el requisito de atribución.

Aquí hay algunos sitios increíbles que ofrecen contenido SVG gratuito:

• FontAwesome : Font Awesome, la biblioteca de iconos de fuentes más impresionante del mundo. El proyecto se ha fortalecido durante varios años y tiene un soporte profundo no solo para navegadores sino también para marcos específicos y software de diseño. Este paquete de fuentes orientado a la accesibilidad es un asesino absoluto, ¡y muy fácil de usar! De hecho, estoy seguro de que hay una docena de complementos de WordPress que brindan soporte para Font Awesome.
• Vecteezy — Podría decirse que Vecteezy es la plataforma de gráficos vectoriales más grande del planeta. Impulsado por diseños personalizados, contribuciones de la comunidad y datos basados ​​en la web: Vecteezy tiene vectores disponibles en cualquier tipo de categoría, forma o formato. Y también es muy fácil descargar archivos. Todo lo que tiene que hacer es enlazar de nuevo a la página del autor de donde obtuvo el archivo. Este es un sitio que me encuentro usando con frecuencia.
• Fondos SVG : ¿estás al día con las últimas tendencias de diseño web? Hay tantas áreas creativas en las que se están explorando los diseños ahora. Y una de esas áreas son los fondos SVG. Tú también los has visto. Patrones ondulados, líneas curvas, etc. ¡Use este sitio para generar fondos SVG fácilmente accesibles!
• SVG Grabber : esta extensión de Chrome es una bendición absoluta para obtener imágenes SVG de diferentes páginas web. Simplemente haga clic en el ícono y la extensión puede obtener todos los archivos SVG en una página. Por supuesto, debe seguir las reglas de derechos de autor siempre que pueda, pero en general se siente como una extensión sólida para usar con frecuencia.
• Zona de logotipos vectoriales : según el nicho en el que esté trabajando, puede que le resulte útil tener una colección de logotipos basados ​​en vectores de las principales marcas del mundo. También puede utilizar estos archivos al realizar anuncios o promociones específicas. Y la mayoría de los editores de fotos en estos días pueden convertir archivos SVG en PNG y de todos modos.

Y somos nosotros tocando la superficie de lo que hay ahí afuera, de verdad. Personalmente, SVG ha marcado una gran diferencia en la forma en que trabajo con el diseño de sitios web e incluso en la creación de imágenes destacadas. Con un SVG, realmente puede hacer todo lo posible en el espectro de colores, diferentes alineaciones de formas, etc.

Claro, no es lo mismo que usar hermosas fotografías de la vida real, pero en cualquier sitio web puedes encontrar muchos lugares donde un JPG podría reemplazarse con un gráfico vectorial. Y ese es precisamente el objetivo de esta publicación, brindarle una descripción general amplia de cómo usar SVG con WordPress.

Ya sea que hayamos logrado ese objetivo, dejaremos que usted sea el juez de eso. Si hay algo que desee agregar a esta publicación, o si tiene recursos adicionales para compartir, tenga en cuenta que nuestra sección de comentarios siempre está abierta.