Farbe von SVG-Icons in Elementor ändern

Illustrator-Benutzeroberfläche mit geöffnetem Farbwähler
Bearbeitung eines blauen Würfels in Adobe Illustrator. Der Farbwähler ist geöffnet, um den Farbton anzupassen.

Inhaltsverzeichnis

Schritt-für-Schritt-Video

Was ist eine SVG-Datei?

Scalable Vector Graphics (SVG) ist ein webfähiges Vektorgrafikformat. Im Gegensatz zu pixelbasierten Rasterdateien wie JPEGs speichern Vektordateien Bilder über mathematische Formeln, die auf Punkten und Linien in einem Raster basieren. Dies bedeutet, dass Vektordateien wie SVG erheblich in der Größe verändert werden können, ohne an Qualität zu verlieren, was sie ideal für Logos und komplexe Online-Grafiken macht.

Biene - SVG

SVG – Größe 3 KB

Biene - PNG - 1024px

PNG (1024px) – Größe 85 KB

Biene

PNG (150px) – Größe 13 KB

Die Größe einer SVG-Datei hängt 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.

Es sind nicht nur die Skalierungsmöglichkeiten, 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öglicht es Suchmaschinen wie Google, SVG-Grafiken nach ihren Schlüsselwörtern zu lesen, was potenziell dazu beitragen kann, dass eine Website in den Suchrankings aufsteigt.

Sie können eine SVG-Datei leicht an ihrer Endung .svg erkennen.

Geschichte der SVG-Datei

Die Geschichte der SVG-Datei reicht bis in die späten 1990er Jahre zurück, als das World Wide Web Consortium (W3C) Entwickler einlud, Vorschläge für eine neue Art von Vektorgrafikformat einzureichen. Sechs konkurrierende Vorschläge wurden eingereicht und halfen dabei, das zu formen, was schließlich zum SVG-Format des W3C wurde.

Es dauerte eine Weile, bis SVGs an Popularität gewannen. Bis 2017 gab es relativ wenig Unterstützung für sie, als die Menschen begannen, die Vorteile der Verwendung von SVGs in modernen Webbrowsern zu erkennen. SVG-Dateien werden heute weit verbreitet für 2D-Website-Bilder verwendet, da die meisten Browser und Zeichenanwendungen für Vektordateien sie problemlos verarbeiten können.

Wofür werden SVG-Dateien verwendet?

Skalierbare Vektorgrafiken haben in den letzten Jahren einen langen Weg zurückgelegt, aber wofür werden SVGs in der Praxis verwendet?

Website-Icons und Logos

Designer verwenden SVG oft, um Website-Icons wie Schaltflächen sowie Unternehmenslogos anzuzeigen. Die Fähigkeit dieses Dateityps, ohne Qualitätseinbußen nach oben oder unten zu skalieren, bedeutet, dass sie ideal für Grafiken sind, die an verschiedenen Stellen und in einer Vielzahl von Größen erscheinen müssen.

Infografiken und Illustrationen

Dank der Verwendung von XML innerhalb von SVG-Dateien können Suchmaschinen wie Google textlastige Tabellen und Grafiken lesen, was bei der Suchmaschinenoptimierung helfen kann. Da Google Schlüsselwörter innerhalb von SVGs erkennen kann, kann dies eine Webseite potenziell zu einer höheren Platzierung in den Suchergebnissen verhelfen. Um Webseiten interessanter zu gestalten, unterstützen SVGs zudem Animationen.

Vor- und Nachteile von SVG-Dateien

Es lohnt sich, die Vor- und Nachteile von SVG zu untersuchen, bevor Sie Ihre Bilder in diesem Dateiformat speichern.

Vorteile von SVG-Dateien

  • Im Gegensatz zu Rasterdateien, die aus Pixeln bestehen, behalten Vektorgrafiken wie SVGs immer ihre Auflösung bei, egal wie groß oder klein Sie sie machen. Sie müssen sich keine Sorgen machen, dass SVG-Bilder in bestimmten Browsern an Qualität verlieren oder wenn Sie deren Größe ändern, damit sie an verschiedenen Stellen erscheinen.
  • Einfache SVG-Dateien sind in der Regel kleiner als Rasterbilder, die aus vielen farbigen Pixeln erstellt werden, anstatt mathematische Algorithmen zu verwenden.
  • Da SVG-Dateien Text als Text (und nicht als Design) behandeln, können Screenreader alle in SVG-Bildern enthaltenen Wörter scannen. Dies ist sehr nützlich für Menschen, die Hilfe beim Lesen von Webseiten benötigen. Suchmaschinen können SVG-Bildtext ebenfalls lesen und indexieren.

Nachteile von SVG-Dateien

  • SVG-Dateien eignen sich hervorragend für 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ür detaillierte Fotos geeignet.
  • Nur moderne Browser unterstützen SVG-Bilder. Es könnte eine Herausforderung sein, SVG-Dateien mit dem Internet Explorer 8 und anderen älteren Browsern zu verwenden.
  • Der in SVG-Bildern enthaltene Code kann schwer zu verstehen sein, wenn Sie neu in diesem Dateiformat sind.

So fügen Sie ein SVG-Bild mit Elementor hinzu

Es gibt viele Elementor-Widgets, die es uns ermöglichen, Bilder oder Icons im SVG-Format hochzuladen. Wir können diese Art von Dateien ohne Einschränkungen aus der Mediathek hochladen, aber wenn wir dies über den Elementor-Builder tun möchten, müssen wir zuerst die Fähigkeit von Elementor zum Hochladen dieser Dateitypen aktivieren.

Hochladen von ungefilterten Dateien erlauben

Dieses Pop-up-Fenster erscheint, wenn Sie auf die Schaltfläche SVG hochladen klicken, die in einigen Widgets enthalten ist, die Icons verwenden.

Hochladen von ungefilterten Dateien erlauben
Hochladen von ungefilterten Dateien erlauben

Wenn Sie zum ersten Mal versuchen, ein SVG-Icon hochzuladen, wird eine Warnmeldung angezeigt, die Sie darauf hinweist, dass das Hochladen jeglicher Dateien, einschließlich SVG-Dateien, ein potenzielles Sicherheitsrisiko darstellen kann. Wenn Sie die damit verbundenen Risiken verstehen und fortfahren möchten, klicken Sie auf die Schaltfläche Aktivieren.

Diese Datei ist aus Sicherheitsgründen nicht erlaubt

Diese Meldung sehen Sie, wenn Sie versuchen, eine SVG-Datei über das Bild-Widget oder ein anderes Widget hochzuladen, das nicht ausdrücklich für den Upload von SVG-Icons vorgesehen ist.

Diese Datei ist aus Sicherheitsgründen nicht erlaubt
Diese Datei ist aus Sicherheitsgründen nicht erlaubt

Sie können dies auf der Seite Elementor > Einstellungen beheben.

  1. Klicken Sie auf den Tab Erweitert.
  2. Wählen Sie unter Ungefilterte Datei-Uploads erlauben im Dropdown-Menü Aktivieren aus.
  3. Klicken Sie auf die Schaltfläche Änderungen speichern.

Farbe eines SVG-Icons ändern

In diesem Tutorial werde ich die Software Adobe Illustrator verwenden, um SVG-Dateien zu erstellen oder zu ändern. Damit wir die Farbe eines SVG-Icons im Elementor-Builder ändern können, muss Folgendes erfüllt sein:

  • Wir müssen das gesamte Icon oder den Teil des Icons, den wir im Elementor-Builder ändern möchten, mit der Farbe #000000 (Schwarz im Hexadezimalformat) füllen.
Adobe Illustrator Farbwähler
  • In Adobe Illustrator können wir eine Konturfarbe (Rand) und eine Füllfarbe zuweisen. Elementor ändert nur die Füllfarbe, daher ist es besser, dem Icon keine Konturfarbe zuzuweisen und nur die Füllfarbe zu belassen.
Farbe mit Adobe Illustrator ändern
  • Wenn wir die Datei im SVG-Format speichern, zeigt uns Adobe Illustrator ein Fenster mit SVG-Optionen an. In diesem Fenster müssen wir sicherstellen, dass im Abschnitt Erweiterte Optionen beim Selektor CSS-Eigenschaften: die Option Präsentationsattribute ausgewählt ist.
SVG-Datei speichern

Wo Sie unser Icon im Elementor-Builder verwenden können

Sobald wir unser Icon nach den oben genannten Richtlinien erstellt haben, können wir es im Elementor-Builder in all diesen Widgets verwenden:

  • BASIS
    • Button.
    • Trennlinie.
    • Icon.
  • PRO
    • Formular.
    • Nav-Menü.
    • Hotspot.
    • Flip-Box.
    • Call to Action.
    • Bewertungen.
    • Inhaltsverzeichnis.
    • Video-Playlist.
    • PayPal-Button.
    • Stripe-Button.
  • ALLGEMEIN
    • Icon-Box.
    • Icon-Liste.
    • Akkordeon.
    • Umschalter.
    • Social Icons.
  • EINZELN
    • Post-Info.

Wir können es auch als Website-Logo und in anderen Widgets wie Bild verwenden, dann jedoch ohne die Möglichkeit, die Farbe innerhalb von Elementor zu ändern.

SVG-Icon in Elementor einfügen

Interessante Links