Enable SVG support in Elementor

Los controles de iconos de widgets ahora le permiten elegir entre un icono en el Icon Library or to upload your own SVG icon. We recommend uploading SVG files without any inline styling, to take advantage of the full capabilities of Elementor's styling controls.

What is SVG?

Scalable Vector Graphics (SVG) es un formato de imagen vectorial basado en XML para gráficos bidimensionales con soporte para interactividad y animación.

SVG files work similar to icons. You can scale them up or down without loss of resolution or blurriness. They are extremely lightweight and keep your pages thin.

How to use

Click on the Upload SVG botón que aparece en cualquier widget con controles de icono en la parte superior para abrir el administrador de la biblioteca multimedia de WordPress. Sube el SVG que deseas usar.

Important safety notice!

Uploading SVG files from unknown sources can pose a potential security threat. We recommend that you upload files only from a trusted source and enable this feature after understanding and accepting the security risks involved.

Elementor's SVG module will do its best to sanitize files uploaded to your site, but it is best to upload SVG files only from known and trusted sources.

Once you upload an SVG file, Elementor sanitizes the file, removes any possible malicious code, and leaves only the skeleton of the required image. After the upload is complete, you can preview the image and filter it using the native WordPress media library, which only displays SVG files. The SVG is inserted into the page as inline code.

Enable one-time SVG process

The first time you try to upload an SVG icon, you will be presented with a warning message to alert you that uploading any file, including SVG files, may present a potential security risk. If you understand the risks involved and agree to continue, click the Enable button.

Once the Enable button is clicked, you will be directed to the Elementor> Settings> Advanced page.

1. Enable SVG uploads: Select Enable from the drop down menu
2. Click Save Changes button.

Once you've enabled SVG uploads, return to your page to continue editing.

Overide Inline Styling

Ideally, you should export SVG files from apps like Illustrator without any inline styling, to allow Elementor to style the icon.

Sin embargo, si el SVG que ha subido tiene un estilo en línea de ancho o alto, puede anularlo agregando este CSS en la pestaña Avanzado de cualquier widget usando el ícono SVG:

This will allow Elementor to control the size of the icon.