Enable SVG support in Elementor

Los controles de iconos de widgetsConcepto de Widgets¿Qué son los Widgets?Los Widgets son una serie de pequeños programas que se usan para añadir funciones, simplificar o automatizar aquellas acciones que se lleven a cabo a menudo dentro de una web. Son herramientas adicionales, añadidos que se elaboran con la finalidad de hacer más fácil las labores de mantenimiento o inclusive de generación de contenidos dentro de cualquier sitio de Internet y que no han hecho plus 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 XMLEl lenguaje de marcado XML es menos complicado que su nombre ("Extensible Markup Language") puede hacer creer: Un archivo XML contiene texto altamente estructurado, semejante a los archivos HTML. No obstante, la estructuración del texto es tan clara y lógica que puede utilizarse para mapear bases de datos enteras. XML se usa frecuentemente para sitemap que se pueden cargar en la Google Search Console o en las Herramientas para Webmasters plus 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 WordPressWordPress es el software de blogs líder en el mundo, y es concretamente fácil de utilizar y adaptable. Con WordPress, es factible crear con éxito sitios web con la ayuda de funciones ya predefinidas, sin mucho esfuerzo, y para proporcionar contenido como texto, imagen y vídeo. No se requiere conocimiento de HTML. WordPress además facilita la gestión y el mantenimiento de contenidos extensos. Al mismo tiempo de su fácil manejo, plus. 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 CSSConcepto de CSS¿Qué es el CSS?CSS es un lenguaje de programación que se usa para definir el estilo y el aspecto de un documento que se ha escrito mediante de un lenguaje de etiquetas, como HTML. Conocido además como hojas de estilo en cascada, es el que se emplea para dar colores, indicar tipos de letra o inclusive resaltar aspectos como el espacio entre items para dotar de estilo a plus en la pestaña Avanzado de cualquier widget usando el ícono SVG:

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