Cómo utilizar imágenes vectoriales de forma segura con WordPress

Agregar gráficos e ilustraciones personalizados al diseño de su sitio web Divi realmente puede ayudar a mejorar el atractivo visual. Pero no siempre es posible encontrar los recursos de imagen adecuados o contratar a un diseñador. Afortunadamente, Divi facilita la creación de tus propias imágenes vectoriales e ilustraciones directamente dentro del constructor.

En esta guía, exploraremos cómo implementar SVG sin comprometer su sitio web.

Incluso si no tienes experiencia en diseño, puedes crear imágenes vectoriales profesionales de alta calidad para llevar tu sitio web Divi al siguiente nivel visual.

Introducción a SVG y sus usos

SVG significa Gráficos vectoriales escalables. Es un formato de imagen vectorial basado en XML ampliamente utilizado y diseñado para describir gráficos vectoriales bidimensionales. A diferencia de los formatos de imágenes rasterizadas (como JPEG o PNG) que utilizan píxeles para representar imágenes, SVG utiliza ecuaciones matemáticas para definir formas, líneas y colores, lo que lo convierte en un formato altamente escalable y independiente de la resolución.

A continuación se muestran algunos usos clave de SVG en el diseño de sitios web:

1. Gráficos responsivos: las imágenes SVG son independientes de la resolución, lo que significa que se pueden ampliar o reducir sin perder calidad. Esto los hace perfectos para el diseño web responsivo, donde el contenido se ajusta para adaptarse a diferentes tamaños y resoluciones de pantalla.
2. Íconos y logotipos: SVG se usa comúnmente para íconos, logotipos y otros elementos gráficos en sitios web. Dado que los archivos SVG son de tamaño pequeño y se pueden personalizar y animar fácilmente con CSS y JavaScript, son una opción popular para crear interfaces de usuario interactivas y visualmente atractivas.
3. Pantallas Retina y de alto DPI: SVG es ideal para mostrar gráficos nítidos y nítidos en pantallas de alto DPI (puntos por pulgada) como las pantallas Retina, donde las imágenes rasterizadas tradicionales pueden aparecer pixeladas cuando se amplían.
4. Animación: SVG permite la creación de animaciones complejas directamente dentro del código XML utilizando herramientas como animaciones CSS o bibliotecas de JavaScript como Snap.svg y GreenSock Animation Platform (GSAP). Esto hace posible agregar elementos dinámicos e interactivos a un sitio web.
5. Accesibilidad: las imágenes SVG son fácilmente accesibles para lectores de pantalla y tecnologías de asistencia porque la estructura XML subyacente se puede anotar con texto descriptivo, lo que hace que los sitios web sean más inclusivos y utilizables para personas con discapacidades.
6. Beneficios de SEO: los motores de búsqueda pueden analizar e indexar el contenido dentro de los archivos SVG, lo que puede mejorar la optimización de los motores de búsqueda (SEO) al proporcionar más contexto a los rastreadores de los motores de búsqueda.
7. Visualización de datos interactiva: SVG se puede utilizar para crear visualizaciones de datos interactivas, como cuadros y gráficos, que pueden ayudar a transmitir información de manera efectiva en un sitio web.

En resumen, SVG es un formato versátil y potente para crear y mostrar gráficos vectoriales en sitios web. Su capacidad para escalar sin problemas, funcionar bien con varios tamaños y resoluciones de pantalla y su compatibilidad con animaciones e interactividad lo convierten en una herramienta valiosa en el diseño y desarrollo web moderno.

Formas de utilizar imágenes vectoriales de forma segura con WordPress

En esta parte, veremos dos métodos para usar SVG seguro en WordPress: manualmente y mediante complementos. Luego se le presentará la mejor opción para sus necesidades para que la seleccione. ¡Comencemos ahora!

Agregue soporte SVG manualmente y desinfecte su código

Con un pequeño fragmento de código, se puede agregar compatibilidad con SVG a WordPress en cuestión de minutos. Esto lo expondría a los posibles problemas de seguridad que ya destacamos. Se requieren las siguientes acciones para implementar SVG de una manera más segura:

1. Realice cambios en su archivo funciones.php para habilitar la compatibilidad con SVG.
2. No permita que los roles de usuario deseados carguen archivos svg en WordPress.
3. Antes de cargar cualquier archivo SVG, desinféctelos todos.

En general, no es difícil completar los pasos uno y dos. El primer paso es conectarse a su sitio web mediante el Protocolo de transferencia de archivos (FTP) y buscar la carpeta raíz de WordPress. Encuentre su archivo funciones.php allí, ábralo y pegue el siguiente código en él.

// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {
 
  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }
 
  $filetype = wp_check_filetype( $filename, $mimes );
 
  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];
 
}, 10, 4 );
 
function cc_mime_types( $mimes ){
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'cc_mime_types' );
 
function fix_svg() {
  echo '<style type="text/css">
        .attachment-266x266, .thumbnail img {
             width: 100% !important;
             height: auto !important;
        }
        </style>';
}
add_action( 'admin_head', 'fix_svg' );

Con esto, puede cargar archivos SVG a WordPress y verlos en su biblioteca multimedia, lo que tiene dos propósitos. Después de agregar el código, cierre su archivo funciones.php y guarde las modificaciones.

Ahora que necesitamos evitar que las personas cuyas cargas no confiamos se corrompan, las cosas se vuelven un poco más desafiantes. Por ejemplo, podrías tener fe en que tus editores y autores subirán archivos precisos, pero no en tus colaboradores. Hay dos enfoques que puede adoptar aquí:

1. Establezca roles de usuario únicos para usuarios con acceso restringido o sin acceso a la biblioteca multimedia.
2. Para restringir los tipos de archivos que cada función de usuario puede cargar, instale un complemento como WP Upload Restriction .

Es cierto que ambas estrategias tienen desventajas, lo cual es una de las razones por las que la implementación manual de SVG puede resultar desafiante. Pero si elige una estrategia para detener las cargas de SVG maliciosos, también debe asegurarse de no usarla accidentalmente.

Lo ideal sería utilizar una herramienta de desinfección antes de cargar cualquier SVG en su sitio web. Esto tomará su archivo, verificará si contiene algo cuestionable y luego lo eliminará si es así. Al final, tendrás un archivo SVG ordenado que finalmente podrás enviar a WordPress.

Uso del complemento SVG seguro

Teníamos la intención de demostrar cuán difícil puede ser la implementación segura de SVG utilizando el método antes mencionado. Esto es necesario para que pueda comprender completamente qué realiza el complemento Safe SVG .

el complemento para Safe SVG. En pocas palabras, este complemento aborda todas las dificultades que mencionamos anteriormente, incluyendo:

1. Haciendo posible que usted cargue SVG.
2. Verificando que sus SVG sean visibles en la Biblioteca multimedia.
3. Limpiar el código fuente de cada SVG que subas para evitar fallos de seguridad. Este complemento es esencialmente de naturaleza plug-and-play y toma la ruta más simple para asegurar la implementación de SVG en WordPress. Le recomendamos que lo intente si está decidido a utilizar SVG.

Animar SVG usando CSS y complementos

Si se dedica a integrar SVG en WordPress, sin duda querrá maximizar el retorno de su inversión. Esto significa que, cuando sea apropiado, debes animar tus SVG usando CSS. Hay dos enfoques que puede adoptar, que hemos discutido anteriormente:

• Los SVG se pueden animar manualmente con CSS como cualquier otro elemento.
• Utilice programas como SVGator para crear y animar SVG.

Si está dispuesto a probar algunas cosas nuevas, agregar algunas animaciones aquí y allá puede mejorar enormemente la experiencia del usuario en su sitio web. Sin embargo, agregar videos o GIF sería considerablemente peor para los dispositivos móviles que utilizar SVG y CSS para lograrlo.

Conclusión

Con la capacidad de crear gráficos vectoriales personalizados directamente dentro del constructor Divi , tienes una manera poderosa de crear ilustraciones e íconos para tu sitio sin necesidad de experiencia en diseño. La implementación de estos gráficos originales puede darle a sus páginas y publicaciones una estética más exclusiva y personalizada. ¡Te sorprenderá lo profesionales que pueden verse tus gráficos vectoriales de bricolaje!