Um überzeugende mobile Inhalte zu erstellen, musst du die Menge der heruntergeladenen Daten mit der bestmöglichen visuellen Wirkung in Einklang bringen. Vektorgrafiken sind eine hervorragende Möglichkeit, um mit minimaler Bandbreite atemberaubende visuelle Ergebnisse zu liefern.
Viele Leute denken, dass der Canvas im Web die einzige Möglichkeit ist, eine Mischung aus Vektoren und Rastern zu zeichnen. Es gibt jedoch Alternativen, die einige Vorteile haben. Vektorgrafiken lassen sich gut mit skalierbare Vektorgrafiken (SVG) erstellen, die ein wichtiger Bestandteil von HTML5 sind.
Wir alle wissen, dass responsives Webdesign einen großen Teil der Verarbeitung unterschiedlicher Bildschirmgrößen ausmacht, und SVG ist ideal, um Bildschirme unterschiedlicher Größe problemlos zu verarbeiten.
SVG ist eine hervorragende Möglichkeit, vektorbasierte Strichzeichnungen zu präsentieren, und ist eine gute Ergänzung zu Bitmaps, da sich letztere besser für Bilder mit durchgehenden Tönen eignen.
Einer der größten Vorteile von SVG ist, dass die Auflösung unabhängig ist. Sie müssen sich also keine Gedanken darüber machen, wie viele Pixel sich auf Ihrem Gerät befinden. Das Ergebnis wird immer skaliert und vom Browser optimiert, damit es gut aussieht.
Beliebte Authoring-Tools wie die Drawing-Anwendung in Google Drive, Inkscape, Illustrator, Corel Draw und vielen anderen generieren SVG-Dateien. Es gibt also viele Möglichkeiten, Inhalte zu generieren. Wir stellen Ihnen einige Möglichkeiten zur Verwendung von SVG-Assets sowie einige Optimierungstipps für den Einstieg vor.
Skalierungsgrundlagen
Beginnen wir mit einem einfachen Szenario: Sie möchten eine ganzseitige Grafik als Hintergrund Ihrer Webseite. Es wäre wirklich nützlich, immer Ihr Firmenlogo oder so etwas wie einen Vollbild im Hintergrund zu zeigen, aber mit den verschiedenen Bildschirmgrößen ist das natürlich sehr schwierig. Zur Veranschaulichung fangen wir mit dem bescheidenen HTML5-Logo an.
Unten sehen Sie das HTML5-Logo. Wie Sie sich schon denken, stammt es aus einer SVG-Datei.
Wenn Sie auf das Logo klicken und es sich in einem beliebigen modernen Browser ansehen, werden Sie feststellen, dass es sich wunderbar an jede Fenstergröße anpassen lässt. Öffne sie in deinem bevorzugten Browser, passe die Größe des Fensters an und sieh nach, ob das Bild bei jeder Vergrößerung scharf ist. Wenn wir das mit einem Bitmapbild ausprobieren würden, müssten wir entweder viele verschiedene Größen für jeden Bildschirm bereitstellen, den wir finden könnten, oder wir mussten schrecklich verpixelte skalierte Bilder auf uns setzen.
Was ist das Besondere daran? Hätten Sie es nicht bemerkt, dann ist dies das einzige Format, das unabhängig von dem Gerät skaliert, mit dem wir es betrachten. Wir müssen also nur ein Asset für unsere Nutzenden bereitstellen, ohne jemals wissen zu müssen, wie ihre Bildschirm- oder Fenstergröße ist – super!
Das war noch nicht alles: Das HTML5-Logo ist nur 1.427 Byte groß! Hoppla, das ist so klein, dass beim Laden kaum mobile Datentarife beeinträchtigt werden. Das macht die Ladezeit für die Nutzer besonders günstig und schnell.
Ein weiterer Vorteil von SVG-Dateien ist, dass sie mit GZIP komprimiert werden können, um sie weiter zu verkleinern. Wenn Sie SVG auf diese Weise komprimieren, muss die Dateiendung in „.svgz“ geändert werden. Im Fall des HTML5-Logos wird es im komprimierten Zustand auf nur 663 Byte verkleinert. Die meisten modernen Browser verarbeiten das problemlos.
Bei unserer Beispieldatei auf einigen der neuesten Geräte sehen wir bei Verwendung komprimierter Vektordaten einen 60-fachen Vorteil! Beachten Sie auch, dass diese Vergleiche zwischen der JPEG- und der SVG-Datei und nicht zwischen der PNG-Datei vorgenommen werden. Das JPEG-Format ist jedoch verlustbehaftet, was eine geringere Qualität als SVG oder PNG zur Folge hat. Würden wir PNG verwenden, wäre der Vorteil über 80x, was erstaunlich ist!
Aber natürlich sind PNG- und JPEG-Dateien nicht gleich. Verschiedene Optimierungstipps informieren Sie darüber, ob Sie das JPEG-Format statt PNG verwenden sollten. Das ist jedoch nicht immer eine gute Idee. Sehen Sie sich die Bilder unten an. Das Bild auf der linken Seite ist ein PNG-Bild des oberen rechten Teils des HTML5-Logos in 6-facher Größe. Das Bild rechts ist das Gleiche, ist aber im JPEG-Format codiert.
Die eingesparte Dateigröße im JPEG-Format hat seinen Preis: scharfe Kanten mit Farbartefakten, sodass Ihre Netzhaut wahrscheinlich eine Brille benötigt:-) JPEG ist für Fotos optimiert und deshalb nicht so gut für Vektorgrafiken geeignet. In jedem Fall entspricht die SVG-Version von der Qualität der PNG-Datei und ist daher für alle Konten gut geeignet – sowohl die Dateigröße als auch die Klarheit.
Vektorhintergründe erstellen
Sehen wir uns an, wie Sie eine Vektordatei als Hintergrund einer Seite verwenden können. Eine einfache Möglichkeit ist, die Hintergrunddatei mithilfe einer festen CSS-Positionierung zu deklarieren:
<style>
#bg {
position:fixed;
top:0;
left:0;
width:100%;
z-index: -1;
}
</style>
<img src="HTML5-logo.svgz" id="bg" alt="HTML5 logo"></pre>
Wie Sie sehen, hat das Bild unabhängig von der Displaygröße immer gestochen scharfe Kanten.
Außerdem möchten wir natürlich einige Inhalte im Hintergrund posten.
Wie Sie sehen können, ist das Ergebnis jedoch nicht ideal, da wir den Text nicht lesen können. Was machen wir also?
Der Hintergrund wird optimiert
Offensichtlich müssen wir alle Farben im Hintergrundbild heller machen. Dazu können Sie einfach die CSS-Eigenschaft „Deckkraft“ oder die Deckkraft in der SVG-Datei selbst verwenden. Dazu können Sie einfach folgenden Code in Ihren CSS-Inhalt einfügen:
#bg {
opacity: 0.2;
}
Das Ergebnis sieht dann so aus:
Diese Lösung ist zwar einfach, stellt aber wahrscheinlich ein Leistungsproblem auf Mobilgeräten dar. Bei den meisten vorhandenen mobilen Browsern dauert die Verwendung der Eigenschaft Deckkraft im Vergleich zu undurchsichtigen Objekten viel länger beim Zeichnen.
Eine bessere Lösung
Das Ändern der Farbe im ursprünglichen SVG-Inhalt ist weitaus besser als das Festlegen der Deckkraft mit CSS. Hier sehen Sie unser HTML5-Logo, das so verändert wurde, dass es durch Änderung der verwendeten Farben verblasst wirkt. Dabei wurde auch ganz auf die Deckkraft der Eigenschaft verzichtet. Das Hintergrundbild unten sieht also genauso aus wie das Ergebnis einer Deckkraftänderung, malt jedoch viel schneller, spart CPU-Zeit und spart dabei wertvolle Akkulaufzeit.
Nachdem wir nun einige Grundlagen verstanden haben, machen wir mit einigen anderen Funktionen weiter.
Farbverläufe effizient verwenden
Nehmen wir an, wir wollen eine Schaltfläche erstellen. Wir könnten mit einem Rechteck mit abgerundeten Ecken beginnen. Dann könnten wir einen schönen linearen Farbverlauf hinzufügen, um der Schaltfläche eine schöne Textur zu verleihen. Der entsprechende Code könnte etwa so aussehen:
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="blueshiny">
<stop stop-color="#a0caf6" offset="0"/>
<stop stop-color="#1579df" offset="0.5" />
<stop stop-color="#1675d6" offset="0.5"/>
<stop stop-color="#115ca9" offset="1"/>
</linearGradient>
</defs>
<g id="button" onclick="alert('ouch!');">
<rect fill="url(#blueshiny)" width="198" height="83" x="3" y="4" rx="15" />
<text x="100" y="55" fill="white" font-size="18pt" text-anchor="middle">Press me</text>
</g>
</svg>
Die resultierende Schaltfläche würde dann in etwa so aussehen:
Beachten Sie, wie der Farbverlauf von links nach rechts verläuft. Das ist die Standardrichtung für den Farbverlauf in SVG. Das können wir jedoch aus verschiedenen Gründen verbessern: Ästhetik und Leistung. Ändern wir nun die Richtung des Farbverlaufs, damit er ansprechender aussieht. Durch Festlegen der Attribute 'x1', 'y1', 'x2' und 'y2' für den linearen Farbverlauf wird die Richtung der Füllfarbe gesteuert.
Wenn wir nur das Attribut "y2" festlegen, können wir den Farbverlauf in einen diagonalen Farbverlauf ändern. Also diese kleine Codeänderung:
<linearGradient id="blueshiny" y2="1">
sieht die Schaltfläche anders aus als im Bild unten.
Mit dieser kleinen Codeänderung können wir den Farbverlauf auch ganz einfach so ändern, dass er von oben nach unten geht:
<linearGradient id="blueshiny" x2="0" y2="1">
und das sieht dann so aus wie im Bild unten.
Was soll mit den ganzen Gesprächen über verschiedene Winkel des Farbverlaufs geschehen?
Nun stellt sich heraus, dass das letzte Beispiel – das Beispiel, bei dem der Farbverlauf von oben nach unten verläuft – auf den meisten Geräten am schnellsten gezeichnet werden kann. Es ist ein sehr wenig bekanntes Geheimnis unter den Grafik-Freaks, die Browsercode schreiben, dass vertikale (von oben nach unten) Farbverläufe fast so schnell wie eine Volltonfarbe gezeichnet werden. Der Grund dafür ist, dass das Darstellen eines Objekts in horizontalen Linien entlang der Seite erfolgt. Die Eingeweide des Zeichencodes verstehen, dass sich die Farbe in jeder Zeile nicht ändert, und optimieren sie daher.
Wenn Sie sich also für die Verwendung von Farbverläufen im Seitendesign entscheiden, sind vertikale Farbverläufe schneller und es wird weniger Akku verbraucht. Diese Beschleunigung gilt auch für CSS-Verläufe, es handelt sich also nicht nur um SVG.
Wenn wir mit diesem neuen Wissen über Farbverlauf wirklich experimentierfreudig sind, können wir unserem HTML5-Logo einen coolen Farbverlauf hinzufügen, indem wir den folgenden Code einfügen:
<defs>
<linearGradient id="grad1" x2="0" y2="1">
<stop stop-color="#FBE6FB" offset="0" />
<stop stop-color="#CCCCFF" offset="0.2" />
<stop stop-color="#CCFFCC" offset="0.4" />
<stop stop-color="#FFFFCC" offset="0.6" />
<stop stop-color="#FFEDCC" offset="0.8" />
<stop stop-color="#FFCCCC" offset="1" />
</linearGradient>
</defs>
<rect x="-200" y="-160" width="910" height="830" fill="url(#grad1)"/></pre>
Der Code oben fügt dem Hintergrund unseres HTML5-Logos einen verblassten vertikalen linearen Farbverlauf hinzu, um einen dezenten mehrfarbigen Farbton zu erzeugen, der schnell dargestellt wird – so schnell wie ein einfarbiger Hintergrund.
Wenn Sie die Inhalte in einem Desktop-Browser laden und die Größe in extremen Seitenverhältnissen ändern, sehen Sie weiße Balken oben/unten oder links/rechts. Nach den Codeänderungen über dem resultierenden Hintergrund sieht das jedoch wie folgt aus:
Animationen leicht gemacht
Sie fragen sich jetzt vielleicht, warum Sie einen SVG-Farbverlauf als Hintergrund für Ihre Seite verwenden sollten. In der Tat kann dies bei CSS-Verläufen sinnvoll sein, aber ein Vorteil von SVG besteht darin, dass sich der Farbverlauf selbst im DOM befindet. Das bedeutet, dass Sie sie mit Skript bearbeiten können. Noch wichtiger ist aber, dass Sie die eingebaute Animationsfunktion von SVG nutzen können, um subtile Änderungen an Ihren Inhalten vorzunehmen.
Wir ändern beispielsweise unser farbenfrohes HTML5-Logo, indem wir die Definition des linearen Farbverlaufs in den folgenden Code ändern:
<linearGradient id="grad1" x2="0" y2="1">
<stop stop-color="#FBE6FB" offset="0">
<animate attributeName="stop-color"
values="#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#CCCCFF" offset="0.2">
<animate attributeName="stop-color"
values="#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#CCFFCC" offset="0.4">
<animate attributeName="stop-color"
values="#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFFFCC" offset="0.6">
<animate attributeName="stop-color"
values="#FFFFCC;#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFEDCC" offset="0.8">
<animate attributeName="stop-color"
values="#FFEDCC;#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
<stop stop-color="#FFCCCC" offset="1">
<animate attributeName="stop-color"
values="#FFCCCC;#FBE6FB;#CCCCFF;#CCFFCC;#FFFFCC;#FFEDCC;#FFCCCC"
begin="0s" dur="20s" repeatCount="indefinite"/>
</stop>
</linearGradient>
In der Abbildung unten siehst du das Ergebnis dieser Änderungen.
Mit dem Code werden die Farben unseres linearen Farbverlaufs in einem fortlaufenden Zyklus von 20 Sekunden, den wir definiert haben, geändert. Dadurch sieht der Farbverlauf so aus, als würde er sich in einer ununterbrochenen Bewegung auf der Seite nach oben bewegen.
Das Schöne an dieser Funktion: Es ist kein Skript erforderlich. Deshalb wird sie als referenziertes Image auf dieser Seite ausgeführt, aber auch die Arbeitslast auf einer mobilen CPU reduziert, da kein Script erforderlich ist.
Außerdem kann der Browser selbst seine Kenntnisse über die Malerei nutzen, um sicherzustellen, dass für die raffinierte Animation minimaler CPU-Aufwand verwendet wird.
Allerdings ist dieser Animationsstil in einigen Browsern nicht möglich. Sie erhalten aber trotzdem einen schönen farbigen Hintergrund, der sich aber nicht ändert – das lässt sich mit einem Skript (und requestAnimationFrame) umgehen, aber das liegt etwas weiter als in diesem Artikel.
Noch ein Hinweis: Diese unkomprimierte SVG-Datei ist nur 2.922 Byte groß – unglaublich klein, um einen solch umfangreichen Grafikeffekt zu erzielen, damit Ihre Nutzer und Ihre Datentarife zufrieden sind.
Wie geht es von hier aus?
Es kann vorkommen, dass SVG nicht ideal ist und Fotos und Videos in anderen Formaten besser dargestellt werden. Text ist ein weiterer Punkt, bei dem nativer HTML- und CSS-Code im Allgemeinen viel besser funktionieren. Als Tool für liniengezeichnete Grafiken kann es jedoch die ideale Wahl sein.
Wir haben einige grundlegende Anwendungsbereiche von SVG-Grafiken angesprochen und zeigen, wie einfach es ist, winzige Inhalte zu generieren, die im Vollbildmodus eine lebendige Grafik im Vollbildmodus mit minimalem Download-Aufwand bieten. Kleine Verbesserungen am Inhalt können mit sehr wenig Markup hervorragende grafische Ergebnisse erzielen. Im nächsten Artikel erfahren Sie mehr darüber, wie Sie mit der in SVG integrierten Animation einfache und leistungsfähigere Effekte erzielen können. Außerdem vergleichen wir die Verwendung von Canvas mit SVG, um das richtige Tool für die Erstellung Ihrer mobilen Grafikwebsite auszuwählen.
Weitere nützliche Ressourcen
- Inkscape, eine Open-Source-Zeichenanwendung, die SVG als Dateiformat verwendet.
- Open Clip Art ist eine riesige Open-Source-Clip-Art-Bibliothek mit Tausenden von SVG-Bildern.
- W3C-SVG-Seite mit Links zu Spezifikationen, Ressourcen usw.
- Raphaël ist eine JavaScript-Bibliothek, die eine praktische API zum Zeichnen und Animieren von SVG-Inhalten bietet. Für ältere Browser eignet sich eine gute Alternative.
- SVG-Ressourcen der Slippery Rock University mit einem Link zu einer nützlichen SVG-Primer