Kompatibilität:

WebSite X5 Evo und Pro

Beim Erstellen einer Webseite machen oft die Details den Unterschied. Ein Icon neben einem Titel oder in einer Schaltfläche kann das Layout klarer und professioneller wirken lassen.


Das Problem ist, dass herkömmliche Bilder wie PNG- oder JPG-Dateien beim Vergrößern an Qualität verlieren oder die Seite schwerer machen können, insbesondere bei einer responsiven Website.


SVG-Icons lösen diese Einschränkung: Sie sind leicht, skalierbar und stets scharf. Mit dem Optionalen Objekt SVG Icon können sie einfach in die Seiten Ihrer Website eingefügt und an Ihr Design angepasst werden, ohne technische Komplikationen. 


Was sind SVG-Icons und warum sollte man sie verwenden

SVG-Icons (Scalable Vector Graphics) sind Vektorgrafiken: Das bedeutet, dass sie nicht aus Pixeln wie herkömmliche JPG- oder PNG-Bilder bestehen, sondern aus mathematischen Formen.


Das Ergebnis? Sie können vergrößert oder verkleinert werden, ohne an Qualität zu verlieren und ohne unscharf zu werden.


Die Verwendung von SVG-Icons auf Ihrer Website bietet mehrere Vorteile:

  • Stets perfekte Qualität, auf jedem Bildschirm und in jeder Größe;
  • Geringe Dateigröße, für leichtere und schneller ladende Seiten;
  • Mehr Flexibilität, da Farbe und Größe einfach angepasst werden können;
  • Perfekte Integration in das responsive Design.


SVG-Icons sind zum Beispiel ideal, um:

  • Titel und beschreibende Texte zu ergänzen;
  • Schaltflächen und Call-to-Action-Elemente aufzuwerten;
  • „Services“-Bereiche mit klaren und einheitlichen grafischen Elementen zu erstellen;
  • das Erscheinungsbild von Menüs, Footern und Informationsboxen zu verbessern.


Dank des Objekts SVG Icon können Sie all diese Vorteile direkt auf den Seiten Ihres Projekts nutzen.


So verwenden Sie das Objekt SVG Icon

Um ein SVG-Icon in die Seiten Ihrer Website einzufügen, gehen Sie wie folgt vor:

  • Fügen Sie das Objekt SVG Icon in die Seite ein und doppelklicken Sie darauf, um das Fenster mit allen verfügbaren Optionen zu öffnen.
  • Verwenden Sie das Feld Icon-Datei, um das gewünschte Icon zu importieren: Sie können wählen, ob Sie eine Lokale Datei suchen oder die Online-Bibliothek verwenden (weitere Informationen finden Sie unter Wie importiert man eine Datei?). Durch Klicken auf die Schaltfläche können Sie einen Titel und einen Alternativtext hinzufügen, die sowohl für die Barrierefreiheit als auch für die SEO-Optimierung der Seite nützlich sind (siehe Barrierefreiheit von Bildern: die Bedeutung des Alternativtexts).
  • Anschließend können Sie sich dem Stil des Icons widmen. Über die Option Format können Sie entscheiden, ob es im Original beibehalten oder in einer gewünschten Farbe eingefärbt werden soll.
  • Um das Erscheinungsbild weiter anzupassen, können Sie Größe, Abstände, Hintergrundfarbe und die Abrundung der Ecken einstellen.
  • Bei Bedarf können Sie dem Icon einen Effekt zuweisen, also eine Animation, die beim Überfahren mit der Maus abgespielt wird. 
  • Abschließend können Sie das Icon durch Hinzufügen eines Links in eine Schaltfläche verwandeln: Klicken Sie auf die Schaltfläche  und wählen Sie im geöffneten Fenster die gewünschte Aktion für den Link aus.
  • Wenn Sie zufrieden sind, klicken Sie auf die Schaltfläche Ok , um zu bestätigen. 


Möchten Sie es sofort auf Ihren Website-Seiten verwenden? Installieren Sie jetzt das Objekt SVG Icon


Sie verfügen nicht über genügend Credits, um dieses Objekt zu erwerben? Alle Credit-Pakete anzeigen