{"id":6859,"date":"2022-06-21T19:17:07","date_gmt":"2022-06-21T17:17:07","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/farbe-von-svg-icons-in-elementor-aendern\/"},"modified":"2026-09-02T22:49:34","modified_gmt":"2026-09-02T20:49:34","slug":"farbe-von-svg-icons-in-elementor-aendern","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/de\/farbe-von-svg-icons-in-elementor-aendern\/","title":{"rendered":"Farbe von SVG-Icons in Elementor \u00e4ndern"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Schritt-f\u00fcr-Schritt-Video<\/h2>\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Cambiar el color de iconos SVG en Elementor\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/HKWfEN4EBEM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n<h2 class=\"wp-block-heading\" id=\"0-%C2%BFqu%C3%A9-es-un-archivo-svg\">Was ist eine SVG-Datei?<\/h2>\n\n<p class=\"wp-block-paragraph\"><em>Scalable Vector Graphics<\/em> (SVG) ist ein webf\u00e4higes Vektorgrafikformat. Im Gegensatz zu pixelbasierten <em>Rasterdateien<\/em> wie JPEGs speichern Vektordateien Bilder \u00fcber mathematische Formeln, die auf Punkten und Linien in einem Raster basieren. Dies bedeutet, dass Vektordateien wie SVG erheblich in der Gr\u00f6\u00dfe ver\u00e4ndert werden k\u00f6nnen, ohne an Qualit\u00e4t zu verlieren, was sie ideal f\u00fcr Logos und komplexe Online-Grafiken macht.   <\/p>\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8f761849 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 is-resized\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee2.svg\"><img decoding=\"async\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee2.svg\" alt=\"Biene - SVG\" class=\"wp-image-4827\" style=\"width:359px\"\/><\/a><\/figure>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">SVG \u2013 Gr\u00f6\u00dfe 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:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee-1000.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"932\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee-1000.png\" alt=\"Biene - PNG - 1024px\" class=\"wp-image-4824\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee-1000.png 1024w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee-1000-500x455.png 500w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee-1000-768x699.png 768w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee-1000-600x546.png 600w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">PNG (1024px) \u2013 Gr\u00f6\u00dfe 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:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee.png\"><img loading=\"lazy\" decoding=\"async\" width=\"150\" height=\"137\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/bee.png\" alt=\"Biene\" class=\"wp-image-4825\" style=\"width:359px\"\/><\/a><\/figure>\n\n\n\n<p class=\"has-text-align-center wp-block-paragraph\">PNG (150px) \u2013 Gr\u00f6\u00dfe 13 KB<\/p>\n<\/div>\n<\/div>\n\n<p class=\"wp-block-paragraph\">Die Gr\u00f6\u00dfe einer SVG-Datei h\u00e4ngt von der Menge der enthaltenen Bilddaten ab, ist jedoch im Allgemeinen kleiner als die meisten anderen Dateitypen. Komplexe Grafiken mit vielen Pfaden und Ankerpunkten beanspruchen mehr Speicherplatz als einfachere, sauberere Designs. <\/p>\n\n<p class=\"wp-block-paragraph\">Es sind nicht nur die Skalierungsm\u00f6glichkeiten, die SVGs bei Webdesignern so beliebt machen. SVGs sind in XML-Code geschrieben, was bedeutet, dass sie jegliche Textinformationen als literalen Text anstatt als Formen speichern. Dies erm\u00f6glicht es Suchmaschinen wie Google, SVG-Grafiken nach ihren Schl\u00fcsselw\u00f6rtern zu lesen, was potenziell dazu beitragen kann, dass eine Website in den Suchrankings aufsteigt.  <\/p>\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">Sie k\u00f6nnen eine SVG-Datei leicht an ihrer Endung <strong>.svg<\/strong> erkennen.<\/p>\n<\/blockquote>\n\n<h2 class=\"wp-block-heading\" id=\"historia-del-archivo-svg-b1b4932e-04fc-4758-a606-17c26a1ae7b1\">Geschichte der SVG-Datei<\/h2>\n\n<p class=\"wp-block-paragraph\">Die Geschichte der SVG-Datei reicht bis in die sp\u00e4ten 1990er Jahre zur\u00fcck, als das World Wide Web Consortium (W3C) Entwickler einlud, Vorschl\u00e4ge f\u00fcr eine neue Art von Vektorgrafikformat einzureichen. Sechs konkurrierende Vorschl\u00e4ge wurden eingereicht und halfen dabei, das zu formen, was schlie\u00dflich zum SVG-Format des W3C wurde.  <\/p>\n\n<p class=\"wp-block-paragraph\">Es dauerte eine Weile, bis SVGs an Popularit\u00e4t gewannen. Bis 2017 gab es relativ wenig Unterst\u00fctzung f\u00fcr sie, als die Menschen begannen, die Vorteile der Verwendung von SVGs in modernen Webbrowsern zu erkennen. SVG-Dateien werden heute weit verbreitet f\u00fcr 2D-Website-Bilder verwendet, da die meisten Browser und Zeichenanwendungen f\u00fcr Vektordateien sie problemlos verarbeiten k\u00f6nnen.  <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"para-que-se-utilizan-los-archivos-svg-9841dbbb-f9c2-4fe5-8387-27f93dbeeb34\">Wof\u00fcr werden SVG-Dateien verwendet?<\/h2>\n\n<p class=\"wp-block-paragraph\">Skalierbare Vektorgrafiken haben in den letzten Jahren einen langen Weg zur\u00fcckgelegt, aber wof\u00fcr werden SVGs in der Praxis verwendet?<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"iconos-y-logotipos-del-sitio-web--408c1260-6438-41e7-8a0d-305d8145492d\">Website-Icons und Logos<\/h3>\n\n<p class=\"wp-block-paragraph\">Designer verwenden SVG oft, um Website-Icons wie Schaltfl\u00e4chen sowie Unternehmenslogos anzuzeigen. Die F\u00e4higkeit dieses Dateityps, ohne Qualit\u00e4tseinbu\u00dfen nach oben oder unten zu skalieren, bedeutet, dass sie ideal f\u00fcr Grafiken sind, die an verschiedenen Stellen und in einer Vielzahl von Gr\u00f6\u00dfen erscheinen m\u00fcssen. <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"infografias-e-ilustraciones--a5e7ac03-4cae-41df-b241-3cf8dcc37811\">Infografiken und Illustrationen<\/h3>\n\n<p class=\"wp-block-paragraph\">Dank der Verwendung von XML innerhalb von SVG-Dateien k\u00f6nnen Suchmaschinen wie Google textlastige Tabellen und Grafiken lesen, was bei der Suchmaschinenoptimierung helfen kann. Da Google Schl\u00fcsselw\u00f6rter innerhalb von SVGs erkennen kann, kann dies eine Webseite potenziell zu einer h\u00f6heren Platzierung in den Suchergebnissen verhelfen. Um Webseiten interessanter zu gestalten, unterst\u00fctzen SVGs zudem Animationen.  <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"pros-y-contras-de-los-archivos-svg-1037a193-6a10-4d94-8255-3592a65a5a92\">Vor- und Nachteile von SVG-Dateien<\/h2>\n\n<p class=\"wp-block-paragraph\">Es lohnt sich, die Vor- und Nachteile von SVG zu untersuchen, bevor Sie Ihre Bilder in diesem Dateiformat speichern.<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"ventajas-de-los-archivos-svg-fbcb331c-faed-4507-a6e3-4aff933fc839\">Vorteile von SVG-Dateien<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>Im Gegensatz zu Rasterdateien, die aus Pixeln bestehen, behalten Vektorgrafiken wie SVGs immer ihre Aufl\u00f6sung bei, egal wie gro\u00df oder klein Sie sie machen. Sie m\u00fcssen sich keine Sorgen machen, dass SVG-Bilder in bestimmten Browsern an Qualit\u00e4t verlieren oder wenn Sie deren Gr\u00f6\u00dfe \u00e4ndern, damit sie an verschiedenen Stellen erscheinen.  <\/li>\n\n\n\n<li>Einfache SVG-Dateien sind in der Regel kleiner als Rasterbilder, die aus vielen farbigen Pixeln erstellt werden, anstatt mathematische Algorithmen zu verwenden. <\/li>\n\n\n\n<li>Da SVG-Dateien Text als Text (und nicht als Design) behandeln, k\u00f6nnen Screenreader alle in SVG-Bildern enthaltenen W\u00f6rter scannen. Dies ist sehr n\u00fctzlich f\u00fcr Menschen, die Hilfe beim Lesen von Webseiten ben\u00f6tigen. Suchmaschinen k\u00f6nnen SVG-Bildtext ebenfalls lesen und indexieren.  <\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\" id=\"desventajas-de-los-archivos-svg-782f4ecd-7218-49f7-ae8c-025c16d70744\">Nachteile von SVG-Dateien<\/h3>\n\n<ul class=\"wp-block-list\">\n<li>SVG-Dateien eignen sich hervorragend f\u00fcr Webgrafiken wie Logos, Illustrationen und Diagramme. Aber ihr Mangel an Pixeln erschwert die Anzeige von hochwertigen Digitalfotografien. JPEG-Dateien sind in der Regel besser f\u00fcr detaillierte Fotos geeignet.   <\/li>\n\n\n\n<li>Nur moderne Browser unterst\u00fctzen SVG-Bilder. Es k\u00f6nnte eine Herausforderung sein, SVG-Dateien mit dem Internet Explorer 8 und anderen \u00e4lteren Browsern zu verwenden.  <\/li>\n\n\n\n<li>Der in SVG-Bildern enthaltene Code kann schwer zu verstehen sein, wenn Sie neu in diesem Dateiformat sind.<\/li>\n<\/ul>\n\n<h2 class=\"wp-block-heading\" id=\"como-anadir-una-imagen-svg-con-elementor-9b5703af-99e9-4483-b21d-119b4245a8a3\">So f\u00fcgen Sie ein SVG-Bild mit Elementor hinzu<\/h2>\n\n<p class=\"wp-block-paragraph\">Es gibt viele <a href=\"https:\/\/elementor.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor<\/a>-Widgets, die es uns erm\u00f6glichen, Bilder oder Icons im SVG-Format hochzuladen. Wir k\u00f6nnen diese Art von Dateien ohne Einschr\u00e4nkungen aus der Mediathek hochladen, aber wenn wir dies \u00fcber den <a href=\"https:\/\/elementor.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor<\/a>-Builder tun m\u00f6chten, m\u00fcssen wir zuerst die F\u00e4higkeit von Elementor zum Hochladen dieser Dateitypen aktivieren. <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"permitir-la-subida-de-archivos-sin-filtrar-91351259-80f5-4c26-8482-77e7dbc2f1b8\">Hochladen von ungefilterten Dateien erlauben<\/h3>\n\n<p class=\"wp-block-paragraph\">Dieses Pop-up-Fenster erscheint, wenn Sie auf die Schaltfl\u00e4che <em>SVG hochladen<\/em> klicken, die in einigen Widgets enthalten ist, die Icons verwenden.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar.jpg\"><img decoding=\"async\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2022\/06\/permitir-la-subida-de-archivos-sin-filtrar.jpg\" alt=\"Hochladen von ungefilterten Dateien erlauben\" class=\"wp-image-18243\"\/><\/a><\/figure>\n<\/div>\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:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/permitir_la_subida_de_archivos_sin_filtrar.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"908\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/permitir_la_subida_de_archivos_sin_filtrar.gif\" alt=\"Hochladen von ungefilterten Dateien erlauben\" class=\"wp-image-4831\"\/><\/a><\/figure>\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<p class=\"wp-block-paragraph\">Wenn Sie zum ersten Mal versuchen, ein SVG-Icon hochzuladen, wird eine Warnmeldung angezeigt, die Sie darauf hinweist, dass das Hochladen jeglicher Dateien, einschlie\u00dflich SVG-Dateien, ein potenzielles Sicherheitsrisiko darstellen kann. Wenn Sie die damit verbundenen Risiken verstehen und fortfahren m\u00f6chten, klicken Sie auf die Schaltfl\u00e4che <strong>Aktivieren<\/strong>. <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"este-archivo-no-esta-permitido-por-motivos-de-seguridad-92de5326-9262-4b7e-9190-4ee1fda11bfe\">Diese Datei ist aus Sicherheitsgr\u00fcnden nicht erlaubt<\/h3>\n\n<p class=\"wp-block-paragraph\">Diese Meldung sehen Sie, wenn Sie versuchen, eine SVG-Datei \u00fcber das <em>Bild<\/em>-Widget oder ein anderes Widget hochzuladen, das nicht ausdr\u00fccklich f\u00fcr den Upload von SVG-Icons vorgesehen ist.<\/p>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/error-al-subir-un-archivo-svg.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"348\" height=\"191\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/error-al-subir-un-archivo-svg.jpg\" alt=\"Diese Datei ist aus Sicherheitsgr&#xFC;nden nicht erlaubt\" class=\"wp-image-4832\"\/><\/a><\/figure>\n<\/div>\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:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/este-archivo-no-esta-permitido-por-motivos-de-seguridad.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"908\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/este-archivo-no-esta-permitido-por-motivos-de-seguridad.gif\" alt=\"Diese Datei ist aus Sicherheitsgr&#xFC;nden nicht erlaubt\" class=\"wp-image-4834\"\/><\/a><\/figure>\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n<p class=\"wp-block-paragraph\">Sie k\u00f6nnen dies auf der Seite <em>Elementor &gt; Einstellungen<\/em> beheben. <\/p>\n\n<ol class=\"wp-block-list\">\n<li>Klicken Sie auf den Tab <strong>Erweitert<\/strong>.<\/li>\n\n\n\n<li>W\u00e4hlen Sie unter <strong>Ungefilterte Datei-Uploads erlauben<\/strong> im Dropdown-Men\u00fc <em>Aktivieren<\/em> aus.<\/li>\n\n\n\n<li>Klicken Sie auf die Schaltfl\u00e4che <strong>\u00c4nderungen speichern<\/strong>.<\/li>\n<\/ol>\n\n<h2 class=\"wp-block-heading\" id=\"cambiar-el-color-a-un-icono-svg--eed461c4-aec0-4d5e-a9ab-1012c9b89fe6\">Farbe eines SVG-Icons \u00e4ndern <\/h2>\n\n<p class=\"wp-block-paragraph\">In diesem Tutorial werde ich die Software <a href=\"https:\/\/www.adobe.com\/es\/products\/illustrator.html\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Illustrator<\/a> verwenden, um SVG-Dateien zu erstellen oder zu \u00e4ndern. Damit wir die Farbe eines SVG-Icons im Elementor-Builder \u00e4ndern k\u00f6nnen, muss Folgendes erf\u00fcllt sein: <\/p>\n\n<ul start=\"1\" class=\"wp-block-list\">\n<li>Wir m\u00fcssen das gesamte Icon oder den Teil des Icons, den wir im Elementor-Builder \u00e4ndern m\u00f6chten, mit der Farbe <mark style=\"background-color:#000000\" class=\"has-inline-color has-colmena-gris-claro-color\">#000000<\/mark> (Schwarz im Hexadezimalformat) f\u00fcllen.<\/li>\n<\/ul>\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/selector-de-colores-adobe-illustrator.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"710\" height=\"483\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/selector-de-colores-adobe-illustrator.jpg\" alt=\"Adobe Illustrator Farbw&#xE4;hler\" class=\"wp-image-4835\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/selector-de-colores-adobe-illustrator.jpg 710w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/selector-de-colores-adobe-illustrator-500x340.jpg 500w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/selector-de-colores-adobe-illustrator-600x408.jpg 600w\" sizes=\"auto, (max-width: 710px) 100vw, 710px\" \/><\/a><\/figure>\n<\/div>\n<ul start=\"2\" class=\"wp-block-list\">\n<li>In <a href=\"https:\/\/www.adobe.com\/es\/products\/illustrator.html\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Illustrator<\/a> k\u00f6nnen wir eine Konturfarbe (Rand) und eine F\u00fcllfarbe zuweisen. Elementor \u00e4ndert nur die F\u00fcllfarbe, daher ist es besser, dem Icon keine Konturfarbe zuzuweisen und nur die F\u00fcllfarbe zu belassen.<\/li>\n<\/ul>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/cambiar-color-con-adobe-illustrator.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1032\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/cambiar-color-con-adobe-illustrator.gif\" alt=\"Farbe mit Adobe Illustrator &#xE4;ndern\" class=\"wp-image-4837\"\/><\/a><\/figure>\n\n<ul start=\"3\" class=\"wp-block-list\">\n<li>Wenn wir die Datei im SVG-Format speichern, zeigt uns <a href=\"https:\/\/www.adobe.com\/es\/products\/illustrator.html\" target=\"_blank\" rel=\"noreferrer noopener\">Adobe Illustrator<\/a> ein Fenster mit SVG-Optionen an. In diesem Fenster m\u00fcssen wir sicherstellen, dass im Abschnitt <em>Erweiterte Optionen<\/em> beim Selektor <em>CSS-Eigenschaften:<\/em> die Option <strong>Pr\u00e4sentationsattribute<\/strong> ausgew\u00e4hlt ist.<\/li>\n<\/ul>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/guardar_archivo_svg.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"1032\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/guardar_archivo_svg.gif\" alt=\"SVG-Datei speichern\" class=\"wp-image-4838\"\/><\/a><\/figure>\n\n<h3 class=\"wp-block-heading\" id=\"donde-usar-nuestro-icono-en-el-constructor-de-elementor-9b48113e-277c-4456-95f4-e6387ecc6717\">Wo Sie unser Icon im Elementor-Builder verwenden k\u00f6nnen<\/h3>\n\n<p class=\"wp-block-paragraph\">Sobald wir unser Icon nach den oben genannten Richtlinien erstellt haben, k\u00f6nnen wir es im Elementor-Builder in all diesen Widgets verwenden:<\/p>\n\n<ul class=\"wp-block-list\">\n<li>BASIS\n<ul class=\"wp-block-list\">\n<li>Button.<\/li>\n\n\n\n<li>Trennlinie.<\/li>\n\n\n\n<li>Icon.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>PRO<ul><li>Formular.<\/li><li>Nav-Men\u00fc.<\/li><\/ul>\n<ul class=\"wp-block-list\">\n<li>Hotspot.<\/li>\n\n\n\n<li>Flip-Box.<\/li>\n\n\n\n<li>Call to Action.<\/li>\n\n\n\n<li>Bewertungen.<\/li>\n\n\n\n<li>Inhaltsverzeichnis.<\/li>\n\n\n\n<li>Video-Playlist.<\/li>\n\n\n\n<li>PayPal-Button.<\/li>\n\n\n\n<li>Stripe-Button.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>ALLGEMEIN\n<ul class=\"wp-block-list\">\n<li>Icon-Box.<\/li>\n\n\n\n<li>Icon-Liste.<\/li>\n\n\n\n<li>Akkordeon.<\/li>\n\n\n\n<li>Umschalter.<\/li>\n\n\n\n<li>Social Icons.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>EINZELN\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 class=\"wp-block-paragraph\">Wir k\u00f6nnen es auch als Website-Logo und in anderen Widgets wie Bild verwenden, dann jedoch ohne die M\u00f6glichkeit, die Farbe innerhalb von Elementor zu \u00e4ndern.<\/p>\n<\/blockquote>\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/insertar-icono.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"908\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/insertar-icono.gif\" alt=\"SVG-Icon in Elementor einf&#xFC;gen\" class=\"wp-image-4839\"\/><\/a><\/figure>\n\n<h2 class=\"wp-block-heading\" id=\"enlaces-relacionados-04f3361a-2f20-49d7-b697-cb6cb84b3a0e\">Interessante Links<\/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> (Icons im SVG-Format herunterladen).<\/li>\n\n\n\n<li>IcoMoon: <a rel=\"noreferrer noopener\" href=\"https:\/\/icomoon.io\/\" target=\"_blank\">https:\/\/icomoon.io\/<\/a> (Erstellen Sie Ihre eigene Icon-Galerie im .ico-Format).<\/li>\n\n\n\n<li>Dribbble: <a rel=\"noreferrer noopener\" href=\"https:\/\/dribbble.com\/\" target=\"_blank\">https:\/\/dribbble.com\/<\/a> (Mehr als 10.000 kostenlose Icons).<\/li>\n\n\n\n<li>Iconmonstr: <a rel=\"noreferrer noopener\" href=\"https:\/\/iconmonstr.com\/\" target=\"_blank\">https:\/\/iconmonstr.com\/<\/a> (Schwarz-Wei\u00df-Icons mit mehreren Variationen, v\u00f6llig kostenlos).<\/li>\n\n\n\n<li>DevianArt: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.deviantart.com\/\" target=\"_blank\">https:\/\/www.deviantart.com\/<\/a> (Mehr als 200.000 kostenlose Icons).<\/li>\n\n\n\n<li>Fontello: <a href=\"https:\/\/fontello.com\/\">https:\/\/fontello.com\/<\/a> (Tausende kostenlose monochrome Icons in verschiedenen Gr\u00f6\u00dfen und Formaten).<\/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\/de\/products\/illustrator.html<\/a> (Vektorgrafik-Software).<\/li>\n\n\n\n<li>1000 free Downloads: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.1001freedownloads.com\/\" target=\"_blank\">https:\/\/www.1001freedownloads.com\/<\/a> (Mehr als 1001 kostenlose Downloads).<\/li>\n\n\n\n<li>CSS Author: <a rel=\"noreferrer noopener\" href=\"https:\/\/cssauthor.com\/\" target=\"_blank\">https:\/\/cssauthor.com\/<\/a> (Hunderte der besten kostenlosen Icon-Sets in verschiedenen Formaten).<\/li>\n\n\n\n<li>GraphicBurger: <a rel=\"noreferrer noopener\" href=\"https:\/\/graphicburger.com\/\" target=\"_blank\">https:\/\/graphicburger.com\/<\/a> (Kostenlose thematische Icon-Sets).<\/li>\n\n\n\n<li>Flaticon: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.flaticon.com\/\" target=\"_blank\">https:\/\/www.flaticon.com\/<\/a> (Erm\u00f6glicht das Konvertieren von Icons in herunterladbare Schriftarten zur Steuerung in CSS).<\/li>\n\n\n\n<li>Icons8: <a rel=\"noreferrer noopener\" href=\"https:\/\/icons8.com\/\" target=\"_blank\">https:\/\/icons8.com\/<\/a> (mehr als 350.000 kostenlose professionelle Icons).<\/li>\n\n\n\n<li>Freepik: <a href=\"https:\/\/www.freepik.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.freepik.com\/<\/a> (Mehr als 872.000 dieser Ressourcen sind kostenlose Icons).<\/li>\n\n\n\n<li>Font Awesome: <a rel=\"noreferrer noopener\" href=\"https:\/\/fontawesome.com\/\" target=\"_blank\">https:\/\/fontawesome.com\/<\/a> (Verf\u00fcgt \u00fcber mehr als 14.000 Icons).<\/li>\n\n\n\n<li>Good Stuff No Nonsense: <a rel=\"noreferrer noopener\" href=\"https:\/\/goodstuffnononsense.com\/\" target=\"_blank\">https:\/\/goodstuffnononsense.com\/<\/a> (Kostenlose handgezeichnete Icons in SVG, PNG, AI, EPS und PSD).<\/li>\n\n\n\n<li>The Noun Project: <a rel=\"noreferrer noopener\" href=\"https:\/\/thenounproject.com\/\" target=\"_blank\">https:\/\/thenounproject.com\/<\/a> (Die meisten Icons sind in PNG oder SVG verf\u00fcgbar).<\/li>\n\n\n\n<li>Iconshock: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.iconshock.com\/\" target=\"_blank\">https:\/\/www.iconshock.com\/<\/a> (Umfangreiche Bibliothek mit mehr als 2 Millionen professionellen Icons).<\/li>\n\n\n\n<li>Pixeden: <a rel=\"noreferrer noopener\" href=\"https:\/\/www.pixeden.com\/\" target=\"_blank\">https:\/\/www.pixeden.com\/<\/a> (Die Sammlung kostenloser Icon-Sets ist nicht besonders umfangreich).<\/li>\n\n\n\n<li>IconsFlow: <a rel=\"noreferrer noopener\" href=\"https:\/\/iconsflow.com\/\" target=\"_blank\">https:\/\/iconsflow.com\/<\/a> (IconsFlow aktualisiert seine Bibliothek st\u00e4ndig).<\/li>\n\n\n\n<li>Streamline: <a href=\"https:\/\/www.streamlinehq.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/www.streamlinehq.com\/<\/a> (Mehr als 85.000 einzigartige, professionelle und intern gestaltete Icons).<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Schritt-f\u00fcr-Schritt-Video Was ist eine SVG-Datei? Scalable Vector Graphics (SVG) ist ein webf\u00e4higes Vektorgrafikformat. Im Gegensatz zu pixelbasierten Rasterdateien wie JPEGs speichern Vektordateien Bilder \u00fcber mathematische Formeln, die auf Punkten und Linien in einem Raster basieren. Dies bedeutet, dass Vektordateien wie SVG erheblich in der Gr\u00f6\u00dfe ver\u00e4ndert werden k\u00f6nnen, ohne an Qualit\u00e4t zu verlieren, was sie [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":6860,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"SVG-Icon-Farbe in Elementor schnell und einfach \u00e4ndern","_seopress_titles_desc":"Was ist eine SVG-Datei? Scalable Vector Graphics (SVG) ist ein webf\u00e4higes Vektorgrafikformat. Im Gegensatz zu rasterbasierten Dateien, die auf\u2026","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"112","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"footnotes":"","_bricks_page_content_2":[],"_bricks_page_header_2":[],"_bricks_page_footer_2":[]},"categories":[452],"tags":[444,433,404],"class_list":["post-6859","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-elementor","tag-webdesign","tag-wordpress-personalisierung"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/posts\/6859","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/comments?post=6859"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/posts\/6859\/revisions"}],"predecessor-version":[{"id":6861,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/posts\/6859\/revisions\/6861"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/media\/6860"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/media?parent=6859"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/categories?post=6859"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/tags?post=6859"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}