Cómo agregar iconos e imágenes SVG a Elementor

La guía del tutorial para habilitar la compatibilidad con gráficos vectoriales en Elementor

Iconos e imágenes SVG en Elementor

Hoy, en este artículo, aprenderá cómo agregar archivos SVG en WordPress específicamente usando Elementor.

¿Qué opinas sobre el uso de imágenes que se pueden redimensionar infinitamente sin perder calidad o nitidez? ¿Te imaginas lo útil que es esto para el diseño responsivo? Eso es lo que SVG tiene para que podamos implementar mejor esta característica dentro de WordPress.

¡Hola! Ed Francisco aquí y te mostraré cómo usar el Biblioteca de archivos Elementor SVG para insertar iconos y gráficos SVG en WordPress en contraposición al uso de imágenes de mapa de bits tradicionales en la web.

Más antes que nada entenderemos qué es svg.

¿Qué es SVG?

Scalable Vector Graphics (SVG) es un formato de imagen vectorial basado en XML para gráficos bidimensionales formados a través de expresiones matemáticas cuyas instrucciones insertadas producen formas rellenas y admiten la interactividad y la animación.

Si trabajas con Adobe Illustrator, Inkscape o Corel Draw sabes que generan archivos vectoriales y SVG es uno de ellos.

A diferencia de los archivos de imagen de mapa de bits (como JPG, PNG, GIF, etc.), los vectores no se componen de píxeles. El píxel, como tiene una dimensión física, pierde su nitidez cuando se cambia de tamaño. Cosa que no sucede con SVG y archivos vectoriales. Puede aumentar o disminuir el tamaño sin pérdida de resolución o desenfoque. Son extremadamente ligeros y mantienen sus páginas magras.

Diferencia entre la imagen de mapa de bits y vector - Por Wikipedia (en inglés)

Las imágenes SVG se pueden usar en logotipos, como iconos como fondo, y se pueden modificar a través de CSS y Javascript.

Inserción de gráficos SVG a través de controles widget de icono de Elementor

A partir de la versión 2.6 de Elementor se convirtió en soporte nativo para insertar gráficos vectoriales sin la necesidad de utilizar plugins para ello.

Con esto puedes utilizar cualquier widget para insertar iconos que a través de tus controles podrás insertar en tu sitio Elementor dos tipos de características SVG:

  • iconos;
  • Imágenes SVG.

Te mostraré cómo proceder a partir de las imágenes.

Insertar imágenes SVG en Elementor

Para insertar una imagen SVG en Elementor puedes usar cualquiera de los widgets de iconos nativos de la plataforma (iconos, lista de iconos, iconos sociales), pero si es el primero que vas a insertar, tendrás que habilitar la carga. A continuación, le indicamos cómo proceder.

1 - En el campo de búsqueda de widgets, escriba "icono" y luego elija qué widget desea elegir arrastrándolo a la interfaz de la página.

eligiendo widget

2 - Luego coloque su mouse en la parte superior del símbolo del icono en el área de edición del icono y haga clic en la opción "Cargar SVG".

Opción de carga de SVG

3 – Aparecerá un mensaje de alerta sobre los riesgos de usar archivos SVG, incluso el Elementor que ejecuta procesos para la eliminación de código malicioso (hablaré más sobre la seguridad más adelante). Debe hacer clic en Activar.

SVG support ativtion

4 – Usted será redirigido a la biblioteca de medios, donde se puede elegir entre las imágenes que están presentes allí o subir una imagen a su ordenador.

mediateca

5 - La imagen se insertará en el bloque que arrastró el widget.

imagen insertada

Estilo de imagen insertada

Después de ingresar a la imagen, el widget ofrece, en la pestaña de contenido, inserción de enlaces, alineación y modo de vista previa (predeterminado, apilado y enmarcado) y en las opciones de la pestaña de estilización donde puede establecer el color del elemento, y con controles deslizantes, el tamaño, si desea girarlo y pasar el cursor.

Estimulación de SVG

Problemas de seguridad relacionados con los archivos SVG

Ya sabes que Elementor intentará proteger el sistema si identifica archivos SVG con código malicioso. Esto se debe a que WordPress no admite cargas de archivos SVG de forma predeterminada por razones de seguridad.

Los archivos SVG contienen código en el lenguaje de marcado XML, similar a HTML. El explorador analiza el lenguaje de marcado XML para mostrar la imagen. Sin embargo, esto abre su sitio a posibles vulnerabilidades XML, como obtener acceso no autorizado a los datos del usuario, desencadenar ataques de fuerza bruta, entre otros ataques.

Esto puede provocar el siguiente error al cargar una imagen SVG.

formato inválido

"Formato SVG no válido, archivo no cargado por razones de seguridad".

Solución 1 para archivos descargados - Optimización

No es que esto influya directamente en la seguridad, pero se indica que guarda los archivos SVG de aplicaciones como Illustrator, sin los estilos en línea, para permitir que Elementor cree un estilo para el icono.

Para esto en la pestaña guardar "Opciones de SVG" en Propiedades CSS Elija la opción "Atributos de presentación".

Después de eso, puede hacer una optimización en línea a través del sitio web SVGOMG que puede "limpiar" su archivo para que pueda ser aceptado subiéndolo a la biblioteca de medios.

Ambos pueden cargar su SVG usando el "Abrir SVG" o la opción "Marcado pegado" para poner el código XML proporcionado por Illustrator de acuerdo con el video que dejaré a continuación.

SVGOMG

Vaya a la pestaña Marcado y realice ajustes de acuerdo con el video. A continuación, haga clic en el botón azul para descargar el archivo SVG optimizado.

descargar SVG

Después de este proceso, vuelva a cargar el archivo.

archivo aprobado validado

Solución 2 para archivos descargados - Desinfección con plugin

SVG SEGURO

Aunque en todos los casos prácticos necesitaba que el método 1 fuera suficiente, hay un complemento que promete cargar SVG de forma segura. Se trata de la Guardar SVG

La función de este plugin es asegurarse de que las imágenes SVG se desinfectan para evitar que las vulnerabilidades de archivos afecten a su sitio.

Su uso es sencillo. Sólo tienes que hacer la instalación y activación. La versión gratuita no necesita hacer ajustes.

Dónde encontrar buenas fuentes de imágenes SVG

Si no tienes tiempo para crear tus propias imágenes SVG, una buena característica es visitar el sitio Flaticon que es uno de los bancos de imágenes vectoriales más grandes de Internet.

Inserción de iconos SVG en Elementor

Para insertar un icono SVG en Elementor, puede usar cualquiera de los widgets nativos del icono de la plataforma (iconos, lista de iconos, iconos sociales).

1 - En el campo de búsqueda de widgets, escriba "icono" y luego elija qué widget desea elegir arrastrándolo a la interfaz de la página.

2 - A continuación, coloque el ratón en la parte superior del símbolo del icono en el área de edición del icono y haga clic en la opción "Biblioteca de iconos".

opción de biblioteca de iconos

3 – Tendrás acceso a la biblioteca de fuentes SVG Font Awesome 5 añadida en esta versión de Elementor, que se está realizando para cargar páginas. Examine las diferentes opciones de la Biblioteca de iconos, seleccione el icono de su elección y haga clic en Insertar.

Aplicar estilos al icono insertado

Después de entrar en el icono que ofrece el widget, en la pestaña de contenido, inserción de enlaces, alineación y modo de vista (predeterminado, apilado y enmarcado) y en las opciones de la pestaña de estilización donde se puede establecer el color del elemento, y con controles deslizantes, el tamaño, si desea girarlo y pasar el ratón.

Inserción de iconos personalizados

Es posible que no lo haya encontrado en Biblioteca de iconos el icono que desee. A continuación, inserte un icono de una fuente externa en la biblioteca. El proceso es simple sólo que haga clic en la opción "Subir"

biblioteca de iconos

Único problema que esta característica es sólo para aquellos que tienen el Versión PRO elementor instalado en WordPress. Pero aún así es posible subir los iconos a través del plugin Iconos personalizados para Elementor.

Instale el plugin. Para aprender a instalar plugins Lee este artículo.

Tendrás acceso a la interfaz de carga del icono accediendo al menú Iconos personalizados. Y puede personalizar sus iconos utilizando el sitio web Flaticon junto con el sitio web fontello.

Iconos personalizados para Elementor

Proceso de construcción de iconos personalizados

1 - Vaya al sitio web de Flaticon y elija una imagen que esté transformando en un icono y descargue la imagen.

2 - Luego vaya a la carpeta donde está el archivo descargado y arrástrelo dentro del sitio de Fontello en el campo Iconos personalizados.

icono de arrastre

3 - La imagen aparece en este campo en forma de miniatura. Haga clic en él para seleccionar.

icono selects

4 - A continuación, vaya al botón Descargar Webfont y haga clic para descargarlo.

descargar webfont

5 - Ir a la interfaz de carga de la Iconos personalizados y cargue el archivo descargado.

subir fontello

6 - Volver a la página que está editando elementor volver a cargarlo y realizar el proceso de inserción de un icono a través de un widget como ya se muestra en este artículo.

7 - Verás que la Biblioteca de iconos muestra el acceso a la inserción que creaste en Fontello. Seleccione el icono y haga clic enInsertar.

biblioteca de iconos de fuentes personalizadas

8 - El icono se insertará en el área deseada.

Icono insertado personalizado

Conclusión

Traté de pasar las formas que desde la versión de Elementor te permiten insertar archivos SVG en tus sitios de WordPress. Estos archivos se utilizarán cada vez más donde la aplicación puede ser más gratificante que la aplicación de imágenes de mapas de bits. Por supuesto, siempre habrá espacio para imágenes vectoriales y mapas de bits. La necesidad del proyecto es que defina el uso.

Si la elección es SVG, es importante estar siempre al tanto de los problemas de seguridad para desinfectar los archivos y comprobar la procedencia.

Creo que mucho seguirá evolucionando esta relación entre Responsive Design, SVG, Elementor y WordPress hasta el punto de obligarnos a estar siempre actualizando este artículo. Y esto señalará más funcionalidad e instalaciones para el usuario de WordPress.

¿Y qué te pareció la función para habilitar archivos SVG en Elementor? ¡Da tu opinión en los comentarios!

Disfruta y comparte este artículo con tus amigos. También comparte sobre nuestro curso de Elementor, O WP Elementor que presenta aplicaciones de las principales características de esta herramienta.

¡Abrazo!

Ed Francisco

¡Hola! Se trata de Ed Francisco, Jefe de Diseño desde sus primeras líneas de contenido y códigos.

Hablando de código, creo que HTML es la tecnología web más notable que me ha permitido llegar a donde estoy, y también escribir estas líneas sobre mí para ti.

Soy Licenciado en Tecnología de Producción (aquí es donde llegué a conocer HTML) y Técnico en Producción Digital, Web y Multimedia (donde mejoré mis conocimientos de HTML).

Soy de São Paulo de la Zona Este. Me aventuré a tratar de desentrañar los misterios de la web desde 2008.