Alles, was Sie über SVG im Web wissen müssen

Seite 1 von 4: Die Grundlagen von SVG

Es hat eine Weile gedauert, aber SVG wird jetzt von allen gängigen Browsern und Geräten weitgehend unterstützt. SVG-Dateien sind sehr klein, durchsuchbar, über Code veränderbar und skalierbar. Sie sehen in allen Größen gut aus und können genau wie Bilder oder Inline direkt in Ihrem HTML-Code verwendet werden (Erstellen einer Site, aber kein Codieren? Versuchen Sie es mit Webseitenersteller ).

SVG-Quicklinks

1. Die Grundlagen von SVG
zwei. Verwendung von SVG
3. Formen mit SVG erstellen
Vier. Text- und CSS-Stile

Wenn Sie immer noch PNGs für Logos, Symbole und interaktive Elemente auf Ihrer Site verwenden, ist es an der Zeit, dass Sie mit dem Programm arbeiten und auf SVG umsteigen. Hier finden Sie alles, was Sie über die Einführung von Vektorliebe in Ihre Designs wissen müssen. Genauer gesagt finden Sie auf dieser Seite die Grundlagen von SVG, auf Seite 2 Wir untersuchen, wie Sie SVG in Ihren Designs verwenden können. Seite 3 zeigt Ihnen, wie Sie Formen aus SVG erstellen, und Seite 4 Untersucht Text- und CSS-Stile. Sie können das Dropdown-Menü oder das Menü rechts verwenden, um direkt zu dem Abschnitt zu springen, an dem Sie interessiert sind.



Warum SVG verwenden?

SVG im Web: Raster gegen Vektor

Rasterbilder sehen in ihrer Originalgröße gut aus, aber Vektoren werden perfekt skaliert

Wenn es um Logos, Symbole, Oberflächenelemente und vektorbasierte Grafiken geht, die klar, animiert oder reaktionsschnell aussehen sollen, gibt es viele Gründe, SVG zu verwenden.

Pixel-perfekte Skalierung
Wenn Sie PNGs oder gerasterte Bilder verwenden, sind Sie auf Pixel beschränkt. Dies bedeutet auch, dass Sie wahrscheinlich mehrere Bilder für verschiedene Netzhautgeräte oder Auflösungen haben. SVG wird nicht von der Auflösung beeinflusst oder davon, ob Sie ein Retina-Display haben oder nicht. SVG-Bilder skalieren und sehen immer perfekt aus, da sie mit Code und nicht mit Pixeln gezeichnet werden.

Modifizierbar
SVG kann mit CSS animiert und gestaltet werden. Sie können Farben, Größen, Schriftarten und vieles mehr ändern. Elemente innerhalb der SVG können auch auf die Interaktion reagieren. Animationen, die Sie für HTML-Elemente verwenden, können auch für SVG-Elemente verwendet werden.

Kleine Dateigröße
PNGs können sehr schnell groß werden, insbesondere wenn Sie High Definition benötigen. Je größer die Datei, desto länger dauert das Laden und Rendern. JPGs sind besser, aber auch groß. Das bedeutet langsamere Websites. SVG ist nur Code, was sehr kleine Dateigrößen bedeutet. Verwenden Sie es für Symbole, Logos und alles, was als Vektorgrafiken erstellt werden kann.

Barrierefreiheit
SVG-Dateien sind textbasiert und können durchsucht und indiziert werden. Dies macht sie für Bildschirmleser, Suchmaschinen und andere Geräte lesbar. Jedes Element innerhalb der SVG kann auch gesucht und bearbeitet werden.

Wofür wird SVG verwendet?

SVG wird stark unterbeansprucht, auch weil es lange gedauert hat, bis eine umfassende Unterstützung für alle Browser erreicht wurde. Wenn Sie schnelle und reaktionsschnelle Erfahrungen benötigen, kann SVG Ihre Website dramatisch verbessern (ebenso wie brillante Web-Hosting ). Es gibt viele großartige Anwendungsfälle für SVG, wie zum Beispiel:

Logos und Symbole
Logos und Symbole müssen häufig in jeder Größe klar und scharf sein. Egal, ob es sich um eine einfache Schaltfläche oder eine große, bildschirmfüllende Werbetafel handelt, Sie möchten eine gleichbleibende und gestochen scharfe Qualität. SVG ermöglicht die präzise Steuerung jeder Form, Linie und jedes Elements. SVG-Symbole und -Logos sind leichter zugänglich, sodass sie einfacher in Echtzeit positioniert und bearbeitet werden können.

Diagramme, Grafiken und Infografiken
SVG kann dynamisch aktualisiert werden, um Daten basierend auf Benutzeraktionen oder anderen datengesteuerten Ereignissen zu zeichnen. Dies macht SVG perfekt für Dinge wie interaktive Karten oder Grafiken, die Daten veranschaulichen.

Denken Sie daran, wenn Sie über viele Ressourcen verfügen, sichern Sie diese sicher und zugänglich Cloud-Speicher .

Visuelle Effekte
Mit SVG können viele visuelle Echtzeiteffekte erstellt werden, einschließlich Formmorphing und Übergang von einer Form zur anderen. Sie können Buchstaben in Formen, Logos in andere Logos und vieles mehr verwandeln.

Animationen
SVG kann mit CSS-Animationen arbeiten, sodass Sie keine neuen Animationsfähigkeiten erlernen müssen. SVG kann auch eine eigene integrierte SMIL-Animationsfunktion verwenden, die noch robuster ist, wenn Sie wirklich kreative Ergebnisse erzielen möchten.

Traditionelle Zeichnungen und Illustrationen
Viele traditionelle Illustrationen lassen sich sehr gut in SVG übersetzen, vorausgesetzt, sie sind nicht übermäßig komplex. Skizzen und Diagramme zur Erläuterung der Merkmale eines Produkts oder zur Veranschaulichung eines Konzepts können sehr gut funktionieren.

Schnittstellen und Anwendungen
SVG ist ideal für komplexe Schnittstellen, die in webbasierte Anwendungen und Rich Internet Applications (RIAs) integriert werden können. Sie sind leichtgewichtig, leicht zu animieren und jedes Element kann Benutzerinteraktionsereignisse erfassen.

Nächste Seite: Arbeiten mit SVG

  • 1
  • zwei
  • 3
  • 4

Aktuelle Seite: Die Grundlagen von SVG

Nächste Seite Verwendung von SVG