{"id":34717,"date":"2022-06-21T19:17:07","date_gmt":"2022-06-21T17:17:07","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/elementor-academy-temas\/changer-la-couleur-des-icones-svg-dans-elementor\/"},"modified":"2023-08-29T14:24:14","modified_gmt":"2023-08-29T12:24:14","slug":"changer-la-couleur-des-icones-svg-dans-elementor","status":"publish","type":"elementor-adedemy","link":"https:\/\/lacolmenatecnologica.com\/fr\/elementor-academy-temas\/changer-la-couleur-des-icones-svg-dans-elementor\/","title":{"rendered":"Changer la couleur des ic\u00f4nes SVG dans Elementor"},"content":{"rendered":"\n<ul class=\"wp-block-advgb-summary advgb-toc alignnone\"><li class=\"toc-level-1\"><a href=\"#0-%C2%BFqu%C3%A9-es-un-archivo-svg\">Qu&#8217;est-ce qu&#8217;un fichier SVG ?<\/a><\/li><li class=\"toc-level-1\"><a href=\"#historia-del-archivo-svg-b1b4932e-04fc-4758-a606-17c26a1ae7b1\">Histoire du fichier SVG<\/a><\/li><li class=\"toc-level-1\"><a href=\"#para-que-se-utilizan-los-archivos-svg-9841dbbb-f9c2-4fe5-8387-27f93dbeeb34\">\u00c0 quoi servent les fichiers SVG ?<\/a><\/li><li class=\"toc-level-2\"><a href=\"#iconos-y-logotipos-del-sitio-web--408c1260-6438-41e7-8a0d-305d8145492d\">Ic\u00f4nes et logos de sites web.<\/a><\/li><li class=\"toc-level-2\"><a href=\"#infografias-e-ilustraciones--a5e7ac03-4cae-41df-b241-3cf8dcc37811\">Infographies et illustrations.<\/a><\/li><li class=\"toc-level-1\"><a href=\"#pros-y-contras-de-los-archivos-svg-1037a193-6a10-4d94-8255-3592a65a5a92\">Avantages et inconv\u00e9nients des fichiers SVG<\/a><\/li><li class=\"toc-level-2\"><a href=\"#ventajas-de-los-archivos-svg-fbcb331c-faed-4507-a6e3-4aff933fc839\">Avantages des fichiers SVG<\/a><\/li><li class=\"toc-level-2\"><a href=\"#desventajas-de-los-archivos-svg-782f4ecd-7218-49f7-ae8c-025c16d70744\">Inconv\u00e9nients des fichiers SVG<\/a><\/li><li class=\"toc-level-1\"><a href=\"#como-anadir-una-imagen-svg-con-elementor-9b5703af-99e9-4483-b21d-119b4245a8a3\">Comment ajouter une image SVG avec Elementor<\/a><\/li><li class=\"toc-level-2\"><a href=\"#permitir-la-subida-de-archivos-sin-filtrar-91351259-80f5-4c26-8482-77e7dbc2f1b8\">Autoriser les t\u00e9l\u00e9chargements de fichiers non filtr\u00e9s<\/a><\/li><li class=\"toc-level-2\"><a href=\"#este-archivo-no-esta-permitido-por-motivos-de-seguridad-92de5326-9262-4b7e-9190-4ee1fda11bfe\">Ce fichier n&#8217;est pas autoris\u00e9 pour des raisons de s\u00e9curit\u00e9<\/a><\/li><li class=\"toc-level-1\"><a href=\"#cambiar-el-color-a-un-icono-svg--eed461c4-aec0-4d5e-a9ab-1012c9b89fe6\">Changer la couleur d&#8217;une ic\u00f4ne SVG  <\/a><\/li><li class=\"toc-level-2\"><a href=\"#donde-usar-nuestro-icono-en-el-constructor-de-elementor-9b48113e-277c-4456-95f4-e6387ecc6717\">O\u00f9 utiliser notre ic\u00f4ne dans le constructeur Elementor<\/a><\/li><li class=\"toc-level-1\"><a href=\"#enlaces-relacionados-04f3361a-2f20-49d7-b697-cb6cb84b3a0e\">Liens connexes<\/a><\/li><\/ul>\n<h2 class=\"wp-block-heading\" id=\"0-%C2%BFqu%C3%A9-es-un-archivo-svg\">Qu&#8217;est-ce qu&#8217;un fichier SVG ?<\/h2>\n\n<p>Le SVG (<em>Scalable Vector Graphics<\/em> ) est un format de fichier vectoriel adapt\u00e9 au web. Contrairement aux <em>fichiers matriciels<\/em> bas\u00e9s sur les pixels, tels que les fichiers JPEG, les fichiers vectoriels stockent les images au moyen de formules math\u00e9matiques bas\u00e9es sur des points et des lignes sur une grille. Cela signifie que les fichiers vectoriels tels que SVG peuvent \u00eatre consid\u00e9rablement redimensionn\u00e9s sans perdre de leur qualit\u00e9, ce qui les rend id\u00e9aux pour les logos et les graphiques en ligne complexes.  <\/p>\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee2.svg\"><img decoding=\"async\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee2.svg\" alt=\"Abeille\" class=\"wp-image-18238\"\/><\/a><\/figure>\n\n\n<p class=\"has-text-align-center\">SVG &#8211; Taille 3 KB<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee-1000.png?strip=all&quality=92&webp=92&avif=92&w=2560\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"932\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee-1000.png?strip=all&quality=92&webp=92&avif=92\" alt=\"Abeille - PNG - 1024px\" class=\"wp-image-18240\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee-1000.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 1024w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee-1000-300x273.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 300w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee-1000-768x699.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 768w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee-1000.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=204 204w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee-1000.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=409 409w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee-1000.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=614 614w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee-1000.png?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=819 819w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n<p class=\"has-text-align-center\">PNG (1024px) &#8211; Taille 85 KB<\/p>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee.png?strip=all&quality=92&webp=92&avif=92&w=2560\"><img decoding=\"async\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/bee.png?strip=all&quality=92&webp=92&avif=92&resize=359%2C328\" alt=\"\" class=\"wp-image-18239\" width=\"359\" height=\"328\"\/><\/a><\/figure>\n\n\n<p class=\"has-text-align-center\">PNG (150px) &#8211; Taille 13 KB<\/p>\n<\/div>\n<\/div>\n\n<p>La taille d&#8217;un fichier SVG d\u00e9pend de la quantit\u00e9 de donn\u00e9es d&#8217;image qu&#8217;il contient, mais il est g\u00e9n\u00e9ralement plus petit que la plupart des autres types de fichiers. Les graphiques complexes comportant de nombreux chemins et points d&#8217;ancrage occuperont plus d&#8217;espace de stockage que les dessins plus simples et plus nets.<\/p>\n\n<p>Ce ne sont pas seulement leurs capacit\u00e9s de redimensionnement qui rendent les SVG si populaires aupr\u00e8s des concepteurs de sites web. Les SVG sont \u00e9crits en code XML, ce qui signifie qu&#8217;ils stockent toutes les informations textuelles sous forme de texte litt\u00e9ral et non de formes. Cela permet aux moteurs de recherche tels que Google de lire les graphiques SVG pour leurs mots-cl\u00e9s, ce qui peut potentiellement aider un site web \u00e0 monter dans les classements de recherche.<\/p>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Un fichier SVG se reconna\u00eet facilement \u00e0 son extension <strong>.svg<\/strong>.<\/p>\n<\/blockquote>\n\n<h2 class=\"wp-block-heading\" id=\"historia-del-archivo-svg-b1b4932e-04fc-4758-a606-17c26a1ae7b1\">Histoire du fichier SVG<\/h2>\n\n<p>L&#8217;histoire du fichier SVG remonte \u00e0 la fin des ann\u00e9es 1990, lorsque le World Wide Web Consortium (W3C) a invit\u00e9 les d\u00e9veloppeurs \u00e0 soumettre des propositions pour un nouveau type de format graphique vectoriel. Six propositions concurrentes ont \u00e9t\u00e9 soumises et ont contribu\u00e9 \u00e0 l&#8217;\u00e9laboration de ce qui est devenu le format SVG du W3C.  <\/p>\n\n<p>Les SVG ont mis un certain temps \u00e0 gagner en popularit\u00e9. Ils ont \u00e9t\u00e9 relativement peu soutenus jusqu&#8217;en 2017, lorsque les gens ont commenc\u00e9 \u00e0 voir les avantages de l&#8217;utilisation de SVG dans les navigateurs web modernes. Les fichiers SVG sont d\u00e9sormais largement utilis\u00e9s pour les images de sites web en 2D, car la plupart des navigateurs et des applications de dessin pour les fichiers vectoriels peuvent facilement les g\u00e9rer.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"para-que-se-utilizan-los-archivos-svg-9841dbbb-f9c2-4fe5-8387-27f93dbeeb34\">\u00c0 quoi servent les fichiers SVG ?<\/h2>\n\n<p>Les graphiques vectoriels \u00e9volutifs ont beaucoup progress\u00e9 ces derni\u00e8res ann\u00e9es, mais \u00e0 quoi servent les SVG dans la pratique ?<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"iconos-y-logotipos-del-sitio-web--408c1260-6438-41e7-8a0d-305d8145492d\">Ic\u00f4nes et logos de sites web.<\/h3>\n\n<p>Les concepteurs utilisent souvent le SVG pour afficher des ic\u00f4nes de sites web telles que des boutons, ainsi que des logos d&#8217;entreprise. La capacit\u00e9 de ce type de fichier \u00e0 s&#8217;agrandir ou \u00e0 se r\u00e9duire sans compromettre la qualit\u00e9 signifie qu&#8217;il est id\u00e9al pour les graphiques qui doivent appara\u00eetre \u00e0 plusieurs endroits et dans une vari\u00e9t\u00e9 de tailles.<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"infografias-e-ilustraciones--a5e7ac03-4cae-41df-b241-3cf8dcc37811\">Infographies et illustrations.<\/h3>\n\n<p>Gr\u00e2ce \u00e0 l&#8217;utilisation de XML dans les fichiers SVG, les moteurs de recherche tels que Google peuvent lire des diagrammes et des graphiques \u00e0 forte teneur en texte, ce qui peut contribuer \u00e0 l&#8217;optimisation des moteurs de recherche. Comme Google peut d\u00e9tecter les mots-cl\u00e9s dans les SVG, il peut potentiellement am\u00e9liorer le classement d&#8217;une page web dans les r\u00e9sultats de recherche. En outre, pour rendre les pages web beaucoup plus int\u00e9ressantes, les SVG permettent \u00e9galement l&#8217;animation.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"pros-y-contras-de-los-archivos-svg-1037a193-6a10-4d94-8255-3592a65a5a92\">Avantages et inconv\u00e9nients des fichiers SVG<\/h2>\n\n<p>Il vaut la peine d&#8217;\u00e9tudier les avantages et les inconv\u00e9nients du SVG avant d&#8217;enregistrer vos images dans ce format de fichier.<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"ventajas-de-los-archivos-svg-fbcb331c-faed-4507-a6e3-4aff933fc839\">Avantages des fichiers SVG<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>Contrairement aux fichiers matriciels, qui sont constitu\u00e9s de pixels, les graphiques vectoriels tels que les SVG conservent toujours leur r\u00e9solution, quelle que soit leur taille. Vous n&#8217;avez pas \u00e0 vous soucier de la perte de qualit\u00e9 des images SVG dans certains navigateurs ou de leur redimensionnement pour les faire appara\u00eetre \u00e0 diff\u00e9rents endroits.  <\/li>\n\n\n\n<li>Les fichiers SVG de base sont g\u00e9n\u00e9ralement plus petits que les images matricielles, qui sont cr\u00e9\u00e9es \u00e0 partir de nombreux pixels color\u00e9s plut\u00f4t qu&#8217;\u00e0 l&#8217;aide d&#8217;algorithmes math\u00e9matiques.  <\/li>\n\n\n\n<li>Comme les fichiers SVG traitent le texte comme du texte (et non comme une mise en page), les lecteurs d&#8217;\u00e9cran peuvent lire tous les mots contenus dans les images SVG. Cette fonction est tr\u00e8s utile pour les personnes qui ont besoin d&#8217;aide pour lire les pages web. Les moteurs de recherche peuvent \u00e9galement lire et indexer le texte des images SVG.<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\" id=\"desventajas-de-los-archivos-svg-782f4ecd-7218-49f7-ae8c-025c16d70744\">Inconv\u00e9nients des fichiers SVG<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>Les fichiers SVG sont excellents pour les graphiques web tels que les logos, les illustrations et les graphiques. Mais son manque de pixels rend difficile la visualisation de photographies num\u00e9riques de haute qualit\u00e9. Les fichiers JPEG sont g\u00e9n\u00e9ralement mieux adapt\u00e9s aux photos d\u00e9taill\u00e9es.  <\/li>\n\n\n\n<li>Seuls les navigateurs modernes peuvent prendre en charge les images SVG. L&#8217;utilisation des fichiers SVG peut s&#8217;av\u00e9rer difficile avec Internet Explorer 8 et les navigateurs plus anciens.  <\/li>\n\n\n\n<li>Le code contenu dans les images SVG peut \u00eatre difficile \u00e0 comprendre si vous ne connaissez pas ce format de fichier.<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"como-anadir-una-imagen-svg-con-elementor-9b5703af-99e9-4483-b21d-119b4245a8a3\">Comment ajouter une image SVG avec Elementor<\/h2>\n\n<p>Il existe de nombreux widgets <a href=\"https:\/\/elementor.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor<\/a> qui permettent de t\u00e9l\u00e9charger des images ou des ic\u00f4nes au format SVG. Nous pouvons t\u00e9l\u00e9charger ce type de fichiers \u00e0 partir de la galerie de m\u00e9dias sans aucune restriction, mais si nous voulons le faire \u00e0 partir du constructeur d&#8217;<a href=\"https:\/\/elementor.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">\u00e9l\u00e9ments<\/a>, nous devons d&#8217;abord activer la capacit\u00e9 d&#8217;Elementor \u00e0 t\u00e9l\u00e9charger ce type de fichiers.<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"permitir-la-subida-de-archivos-sin-filtrar-91351259-80f5-4c26-8482-77e7dbc2f1b8\">Autoriser les t\u00e9l\u00e9chargements de fichiers non filtr\u00e9s<\/h3>\n\n<p>Cette fen\u00eatre contextuelle appara\u00eet lorsque vous cliquez sur le bouton <em>T\u00e9l\u00e9charger SVG<\/em> inclus dans certains widgets qui utilisent des ic\u00f4nes.<\/p>\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar.jpg?strip=all&quality=92&webp=92&avif=92&w=2560\"><img decoding=\"async\" width=\"481\" height=\"293\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar.jpg?strip=all&quality=92&webp=92&avif=92\" alt=\"Autoriser les t&#xE9;l&#xE9;chargements de fichiers non filtr&#xE9;s\" class=\"wp-image-18243\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 481w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar-300x183.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 300w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=96 96w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=192 192w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=384 384w\" sizes=\"(max-width: 481px) 100vw, 481px\" \/><\/a><\/figure>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar.gif?strip=all&quality=92&webp=92&avif=92&w=2560\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"908\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar.gif?strip=all&quality=92&webp=92&avif=92&resize=1920%2C908\" alt=\"Autoriser les t&#xE9;l&#xE9;chargements de fichiers non filtr&#xE9;s\" class=\"wp-image-18244\"\/><\/a><\/figure>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<p>La premi\u00e8re fois que vous essayez de t\u00e9l\u00e9charger une ic\u00f4ne SVG, un message d&#8217;avertissement vous avertit que le t\u00e9l\u00e9chargement de n&#8217;importe quel fichier, y compris les fichiers SVG, peut pr\u00e9senter un risque potentiel pour la s\u00e9curit\u00e9. Si vous comprenez les risques encourus et acceptez de poursuivre, cliquez sur le bouton <strong>Activer<\/strong>.<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"este-archivo-no-esta-permitido-por-motivos-de-seguridad-92de5326-9262-4b7e-9190-4ee1fda11bfe\">Ce fichier n&#8217;est pas autoris\u00e9 pour des raisons de s\u00e9curit\u00e9<\/h3>\n\n<p>Ce message appara\u00eet lorsque vous essayez de t\u00e9l\u00e9charger un fichier SVG \u00e0 partir du widget <em>Image<\/em> ou d&#8217;un autre widget qui n&#8217;est pas sp\u00e9cifiquement con\u00e7u pour t\u00e9l\u00e9charger des ic\u00f4nes SVG.<\/p>\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/error-al-subir-un-archivo-svg.jpg?strip=all&quality=92&webp=92&avif=92&w=2560\"><img loading=\"lazy\" decoding=\"async\" width=\"348\" height=\"191\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/error-al-subir-un-archivo-svg.jpg?strip=all&quality=92&webp=92&avif=92\" alt=\"Ce fichier n'est pas autoris&#xE9; pour des raisons de s&#xE9;curit&#xE9;\" class=\"wp-image-18242\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/error-al-subir-un-archivo-svg.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 348w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/error-al-subir-un-archivo-svg-300x165.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 300w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/error-al-subir-un-archivo-svg.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=69 69w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/error-al-subir-un-archivo-svg.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=139 139w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/error-al-subir-un-archivo-svg.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=208 208w\" sizes=\"(max-width: 348px) 100vw, 348px\" \/><\/a><\/figure>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/este-archivo-no-esta-permitido-por-motivos-de-seguridad.gif?strip=all&quality=92&webp=92&avif=92&w=2560\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"908\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/este-archivo-no-esta-permitido-por-motivos-de-seguridad.gif?strip=all&quality=92&webp=92&avif=92&resize=1920%2C908\" alt=\"Ce fichier n'est pas autoris&#xE9; pour des raisons de s&#xE9;curit&#xE9;\" class=\"wp-image-18259\"\/><\/a><\/figure>\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<p>Vous pouvez le corriger \u00e0 partir de la page <em>Elementor &gt; Settings<\/em>.  <\/p>\n\n<ol class=\"wp-block-list\">\n<li>Cliquez sur l&#8217;onglet <strong>Avanc\u00e9<\/strong>.<\/li>\n\n\n\n<li>Sous <strong>Autoriser les t\u00e9l\u00e9chargements de fichiers sans filtrage<\/strong>, s\u00e9lectionnez <em>Activer<\/em> dans le menu d\u00e9roulant.<\/li>\n\n\n\n<li>Cliquez sur le bouton <strong>Enregistrer les modifications<\/strong>.<\/li>\n<\/ol>\n\n<h2 class=\"wp-block-heading\" id=\"cambiar-el-color-a-un-icono-svg--eed461c4-aec0-4d5e-a9ab-1012c9b89fe6\">Changer la couleur d&#8217;une ic\u00f4ne SVG  <\/h2>\n\n<p>Dans ce tutoriel, je vais utiliser le logiciel <a href=\"https:\/\/www.adobe.com\/es\/products\/illustrator.html\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Illustrator<\/a> pour cr\u00e9er ou modifier des fichiers SVG. Pour pouvoir changer la couleur d&#8217;une ic\u00f4ne SVG \u00e0 partir du constructeur Elementor, les conditions suivantes doivent \u00eatre remplies :<\/p>\n\n<ul class=\"wp-block-list\" start=\"1\">\n<li>Nous devons remplir avec la couleur <mark style=\"background-color:var(--ast-global-color-8);color:#ffffff\" class=\"has-inline-color\"> #000000 <\/mark> (c&#8217;est la couleur noire en format hexad\u00e9cimal) la totalit\u00e9 ou la partie de l&#8217;ic\u00f4ne que nous voulons changer depuis le constructeur Elementor.<\/li>\n<\/ul>\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/selector-de-colores-adobe-illustrator.jpg?strip=all&quality=92&webp=92&avif=92&w=2560\"><img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"483\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/selector-de-colores-adobe-illustrator.jpg?strip=all&quality=92&webp=92&avif=92\" alt=\"S&#xE9;lecteur de couleurs Adobe Illustrator\" class=\"wp-image-18260\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/selector-de-colores-adobe-illustrator.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 710w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/selector-de-colores-adobe-illustrator-300x204.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 300w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/selector-de-colores-adobe-illustrator.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=142 142w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/selector-de-colores-adobe-illustrator.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=426 426w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/selector-de-colores-adobe-illustrator.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=568 568w\" sizes=\"(max-width: 710px) 100vw, 710px\" \/><\/a><\/figure>\n<ul class=\"wp-block-list\" start=\"2\">\n<li>Dans <a href=\"https:\/\/www.adobe.com\/es\/products\/illustrator.html\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Illustrator<\/a>, nous pouvons assigner une couleur de trait (bordure) et une couleur de remplissage, Elementor ne changera que la couleur de remplissage, il est donc pr\u00e9f\u00e9rable de ne pas assigner de couleur de trait \u00e0 l&#8217;ic\u00f4ne et de ne laisser que la couleur de remplissage.<\/li>\n<\/ul>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/cambiar-color-con-adobe-illustrator.gif?strip=all&quality=92&webp=92&avif=92&w=2560\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1032\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/cambiar-color-con-adobe-illustrator.gif?strip=all&quality=92&webp=92&avif=92&resize=1920%2C1032\" alt=\"Changer de couleur avec adobe illustrator\" class=\"wp-image-18261\"\/><\/a><\/figure>\n<ul class=\"wp-block-list\" start=\"3\">\n<li>Lorsque nous enregistrons le fichier au format SVG, <a href=\"https:\/\/www.adobe.com\/es\/products\/illustrator.html\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Illustrator<\/a> affiche une bo\u00eete d&#8217;options SVG. Dans cette bo\u00eete, nous devons nous assurer que dans la section <em>Options avanc\u00e9es<\/em>, le s\u00e9lecteur <em>CSS Properties :<\/em> est s\u00e9lectionn\u00e9 dans l&#8217;option <strong>Attributs de pr\u00e9sentation<\/strong>.<\/li>\n<\/ul>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/guardar_archivo_svg.gif?strip=all&quality=92&webp=92&avif=92&w=2560\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1032\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/guardar_archivo_svg.gif?strip=all&quality=92&webp=92&avif=92&resize=1920%2C1032\" alt=\"Enregistrer le fichier SVG\" class=\"wp-image-18262\"\/><\/a><\/figure>\n<h3 class=\"wp-block-heading\" id=\"donde-usar-nuestro-icono-en-el-constructor-de-elementor-9b48113e-277c-4456-95f4-e6387ecc6717\">O\u00f9 utiliser notre ic\u00f4ne dans le constructeur Elementor<\/h3>\n\n<p>Une fois que nous avons cr\u00e9\u00e9 notre ic\u00f4ne en suivant les directives ci-dessus, nous pouvons l&#8217;utiliser dans le constructeur Elementor dans tous ces widgets :<\/p>\n\n<ul class=\"wp-block-list\">\n<li>BASIC\n<ul class=\"wp-block-list\">\n<li>Bouton.<\/li>\n\n\n\n<li>S\u00e9parateur.<\/li>\n\n\n\n<li>Ic\u00f4ne.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>PRO<ul><li>Forme.<\/li><li>Menu de navigation.<\/li><\/ul>\n<ul class=\"wp-block-list\">\n<li>Point chaud.<\/li>\n\n\n\n<li>Bo\u00eete \u00e0 rabats.<\/li>\n\n\n\n<li>Appel \u00e0 l&#8217;action.<\/li>\n\n\n\n<li>Critiques.<\/li>\n\n\n\n<li>Table des mati\u00e8res.<\/li>\n\n\n\n<li>Liste de lecture vid\u00e9o.<\/li>\n\n\n\n<li>Bouton PayPal.<\/li>\n\n\n\n<li>Bouton \u00e0 rayures.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>G\u00c9N\u00c9RALIT\u00c9S\n<ul class=\"wp-block-list\">\n<li>Bo\u00eete \u00e0 ic\u00f4nes.<\/li>\n\n\n\n<li>Liste des ic\u00f4nes.<\/li>\n\n\n\n<li>Accord\u00e9on.<\/li>\n\n\n\n<li>Interrupteur.<\/li>\n\n\n\n<li>Ic\u00f4nes sociales.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>INDIVIDUEL\n<ul class=\"wp-block-list\">\n<li>Post info.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>Nous pouvons \u00e9galement l&#8217;utiliser comme logo du site et dans d&#8217;autres widgets en tant qu&#8217;image, mais sans la possibilit\u00e9 de changer la couleur \u00e0 partir d&#8217;Elementor.<\/p>\n<\/blockquote>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/insertar-icono.gif?strip=all&quality=92&webp=92&avif=92&w=2560\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"908\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/insertar-icono.gif?strip=all&quality=92&webp=92&avif=92&resize=1920%2C908\" alt=\"Ins&#xE9;rer une ic&#xF4;ne SVG dans Elementor\" class=\"wp-image-18267\"\/><\/a><\/figure>\n<h2 class=\"wp-block-heading\" id=\"enlaces-relacionados-04f3361a-2f20-49d7-b697-cb6cb84b3a0e\">Liens utiles<\/h2>\n\n<ul class=\"wp-block-list\">\n<li>Iconfinder <a rel=\"noreferrer noopener\" href=\"https:\/\/www.iconfinder.com\/\" target=\"_blank\">: https:\/\/www.iconfinder.com\/<\/a> (t\u00e9l\u00e9chargement d&#8217;ic\u00f4nes au format SVG).<\/li>\n\n\n\n<li>IcoMoon <a rel=\"noreferrer noopener\" href=\"https:\/\/icomoon.io\/\" target=\"_blank\">: https:\/\/icomoon.io\/<\/a> (Cr\u00e9ez votre propre galerie d&#8217;ic\u00f4nes au format .ico).<\/li>\n\n\n\n<li>Dribbble <a rel=\"noreferrer noopener\" href=\"https:\/\/dribbble.com\/\" target=\"_blank\">: https:\/\/dribbble.com\/<\/a> (plus de 10 000 ic\u00f4nes gratuites).<\/li>\n\n\n\n<li>Iconmonstr <a rel=\"noreferrer noopener\" href=\"https:\/\/iconmonstr.com\/\" target=\"_blank\">: https:\/\/iconmonstr.com\/<\/a> (ic\u00f4nes en noir et blanc avec de multiples variations gratuites).<\/li>\n\n\n\n<li>DevianArt <a rel=\"noreferrer noopener\" href=\"https:\/\/www.deviantart.com\/\" target=\"_blank\">: https:\/\/www.deviantart.com\/<\/a> (plus de 200 000 ic\u00f4nes gratuites).<\/li>\n\n\n\n<li>Fontello <a href=\"https:\/\/fontello.com\/\">: https:\/\/fontello.com\/<\/a> (Des milliers d&#8217;ic\u00f4nes monochromes gratuites de tailles et de formats diff\u00e9rents)<\/li>\n\n\n\n<li>Adobe Illustrator <a rel=\"noreferrer noopener\" href=\"https:\/\/www.adobe.com\/es\/products\/illustrator.html\" target=\"_blank\">: https:\/\/www.adobe.com\/es\/products\/illustrator.html<\/a> (logiciel de graphisme vectoriel).<\/li>\n\n\n\n<li>1000 t\u00e9l\u00e9chargements gratuits <a rel=\"noreferrer noopener\" href=\"https:\/\/www.1001freedownloads.com\/\" target=\"_blank\">: https:\/\/www.1001freedownloads.com\/<\/a> (Plus de 1001 t\u00e9l\u00e9chargements gratuits).<\/li>\n\n\n\n<li>CSS Auteur <a rel=\"noreferrer noopener\" href=\"https:\/\/cssauthor.com\/\" target=\"_blank\">: https:\/\/cssauthor.com\/<\/a> (Des centaines des meilleurs jeux d&#8217;ic\u00f4nes gratuits dans divers formats).<\/li>\n\n\n\n<li>GraphicBurger <a rel=\"noreferrer noopener\" href=\"https:\/\/graphicburger.com\/\" target=\"_blank\">: https:\/\/graphicburger.com\/<\/a> (jeux d&#8217;ic\u00f4nes th\u00e9matiques gratuits).<\/li>\n\n\n\n<li>Flaticon <a rel=\"noreferrer noopener\" href=\"https:\/\/www.flaticon.com\/\" target=\"_blank\">: https:\/\/www.flaticon.com\/<\/a> (Permet de convertir des ic\u00f4nes en polices t\u00e9l\u00e9chargeables pour les contr\u00f4ler en CSS).<\/li>\n\n\n\n<li>Icons8 <a rel=\"noreferrer noopener\" href=\"https:\/\/icons8.com\/\" target=\"_blank\">: https:\/\/icons8.com\/<\/a> (plus de 350 000 ic\u00f4nes professionnelles gratuites).<\/li>\n\n\n\n<li>Freepik <a href=\"https:\/\/www.freepik.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">: https:\/\/www.freepik.com\/<\/a> (Plus de 872 000 de ces ressources sont des ic\u00f4nes gratuites).<\/li>\n\n\n\n<li>Font Awesome <a rel=\"noreferrer noopener\" href=\"https:\/\/fontawesome.com\/\" target=\"_blank\">: https:\/\/fontawesome.com\/<\/a> (avec plus de 14 000 ic\u00f4nes).<\/li>\n\n\n\n<li>Good Stuff No Nonsense <a rel=\"noreferrer noopener\" href=\"https:\/\/goodstuffnononsense.com\/\" target=\"_blank\">: https:\/\/goodstuffnononsense.com\/<\/a> (ic\u00f4nes gratuites dessin\u00e9es \u00e0 la main en SVG, PNG, AI, EPS et PSD).<\/li>\n\n\n\n<li>The Noun Project <a rel=\"noreferrer noopener\" href=\"https:\/\/thenounproject.com\/\" target=\"_blank\">: https:\/\/thenounproject.com\/<\/a> (la plupart des ic\u00f4nes sont disponibles au format PNG ou SVG).<\/li>\n\n\n\n<li>Iconshock <a rel=\"noreferrer noopener\" href=\"https:\/\/www.iconshock.com\/\" target=\"_blank\">: https:\/\/www.iconshock.com\/<\/a> (vaste biblioth\u00e8que de plus de 2 millions d&#8217;ic\u00f4nes professionnelles).<\/li>\n\n\n\n<li>Pixeden <a rel=\"noreferrer noopener\" href=\"https:\/\/www.pixeden.com\/\" target=\"_blank\">: https:\/\/www.pixeden.com\/<\/a> (La collection de jeux d&#8217;ic\u00f4nes gratuits n&#8217;est pas particuli\u00e8rement \u00e9tendue).<\/li>\n\n\n\n<li>IconsFlow <a rel=\"noreferrer noopener\" href=\"https:\/\/iconsflow.com\/\" target=\"_blank\">: https:\/\/iconsflow.com\/<\/a> (IconsFlow met constamment \u00e0 jour sa biblioth\u00e8que).<\/li>\n\n\n\n<li>Streamline <a rel=\"noreferrer noopener\" href=\"https:\/\/www.streamlinehq.com\/\" target=\"_blank\">: https:\/\/www.streamlinehq.com\/<\/a> (plus de 85 000 ic\u00f4nes uniques, professionnelles et con\u00e7ues en interne).<\/li>\n<\/ul>\n","protected":false},"featured_media":32215,"template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"class_list":["post-34717","elementor-adedemy","type-elementor-adedemy","status-publish","has-post-thumbnail","hentry"],"uagb_featured_image_src":{"full":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/cambiar-el-color-de-iconos-svg-en-elementor.jpg?strip=all&quality=92&webp=92&avif=92",1920,1032,false],"thumbnail":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/cambiar-el-color-de-iconos-svg-en-elementor-150x150.jpg?strip=all&quality=92&webp=92&avif=92",150,150,true],"medium":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/cambiar-el-color-de-iconos-svg-en-elementor-300x161.jpg?strip=all&quality=92&webp=92&avif=92",300,161,true],"medium_large":["https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2022\/06\/cambiar-el-color-de-iconos-svg-en-elementor-768x413.jpg",768,413,true],"large":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/cambiar-el-color-de-iconos-svg-en-elementor.jpg?strip=all&quality=92&webp=92&avif=92",1920,1032,true],"1536x1536":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/cambiar-el-color-de-iconos-svg-en-elementor-1536x826.jpg?strip=all&quality=92&webp=92&avif=92",1536,826,true],"2048x2048":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2022\/06\/cambiar-el-color-de-iconos-svg-en-elementor.jpg?strip=all&quality=92&webp=92&avif=92",1920,1032,true]},"uagb_author_info":{"display_name":"La Colmena Tecnol\u00f3gica","author_link":"https:\/\/lacolmenatecnologica.com\/fr\/author\/"},"uagb_comment_info":0,"uagb_excerpt":"Qu&#8217;est-ce qu&#8217;un fichier SVG ? Le SVG (Scalable Vector Graphics ) est un format de fichier vectoriel adapt\u00e9 au web. Contrairement aux fichiers matriciels bas\u00e9s sur les pixels, tels que les fichiers JPEG, les fichiers vectoriels stockent les images au moyen de formules math\u00e9matiques bas\u00e9es sur des points et des lignes sur une grille. Cela&hellip;","_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/elementor-adedemy\/34717","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/elementor-adedemy"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/types\/elementor-adedemy"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media\/32215"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media?parent=34717"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}