Wenn Sie ansprechende mobile Inhalte erstellen möchten, müssen Sie die heruntergeladene Datenmenge mit der maximalen visuellen Wirkung in Einklang bringen. Mit Vektorgrafiken lassen sich beeindruckende visuelle Ergebnisse mit minimaler Bandbreite erzielen.
Viele Menschen betrachten Canvas als die einzige Möglichkeit, eine Mischung aus Vektoren und Rastern im Web zu zeichnen. Es gibt jedoch Alternativen, die einige Vorteile haben. Eine gute Möglichkeit, Vektorgrafiken zu erstellen, ist die Verwendung von Scalable Vector Graphics (SVG), einem wichtigen Bestandteil von HTML5.
Responsives Design ist ein wichtiger Bestandteil der Unterstützung verschiedener Bildschirmgrößen. SVG eignet sich ideal für die problemlose Unterstützung von Bildschirmen unterschiedlicher Größe.
SVG eignet sich hervorragend für die Darstellung vektorbasierter Linienzeichnungen und ist eine gute Ergänzung zu Bitmaps, die besser für Graustufenbilder geeignet sind.
Eine der nützlichsten Eigenschaften von SVG ist, dass es unabhängig von der Auflösung ist. Sie müssen sich also keine Gedanken darüber machen, wie viele Pixel Ihr Gerät hat. Das Ergebnis wird immer skaliert und vom Browser optimiert, damit es gut aussieht.
Beliebte Autorisierungstools wie die Zeichenanwendung in Google Drive, Inkscape, Illustrator, Corel Draw und viele andere generieren SVG. Es gibt also viele Möglichkeiten, Inhalte zu erstellen. Wir sehen uns einige Möglichkeiten zur Verwendung von SVG-Assets an und geben Ihnen einige Optimierungstipps mit auf den Weg.
Grundlagen der Skalierung
Beginnen wir mit einem einfachen Szenario: Sie möchten eine Vollseitengrafik als Hintergrund Ihrer Webseite verwenden. Es wäre wirklich nützlich, wenn Ihr Firmenlogo oder etwas Ähnliches immer im Vollbildmodus im Hintergrund zu sehen wäre. Das ist aber natürlich bei den vielen verschiedenen Bildschirmgrößen sehr schwierig. Beginnen wir zur Veranschaulichung mit dem bescheidenen HTML5-Logo.
Das HTML5-Logo ist unten zu sehen. Wie Sie sich denken können, stammt es aus einer SVG-Datei.
Klicken Sie auf das Logo und sehen Sie sich das Logo in einem beliebigen modernen Browser an. Sie werden feststellen, dass es sich auf jede Fenstergröße skalieren lässt. Öffnen Sie das Bild in Ihrem bevorzugten Browser, ändern Sie die Größe des Fensters und achten Sie darauf, dass das Bild bei jeder Vergrößerung scharf ist. Wenn wir das mit einem Bitmap-Bild versuchen würden, müssten wir entweder viele verschiedene Größen für jeden Bildschirm bereitstellen, der uns begegnen könnte, oder uns mit schrecklich pixeligen skalierten Bildern abfinden.
Was ist das Problem? Wie Sie vielleicht wissen, ist dies das einzige Format, das unabhängig vom Gerät skaliert wird, auf dem wir es ansehen. So müssen wir unseren Nutzern nur ein Asset bereitstellen, ohne die Bildschirm- oder Fenstergröße kennen zu müssen. Super!
Aber Moment, es gibt noch mehr: Das HTML5-Logo hat nur 1.427 Byte! Das ist so klein, dass es beim Laden kaum einen Unterschied beim mobilen Datentarif macht. Das bedeutet, dass es schnell geladen wird und für Ihre Nutzer günstig und schnell ist.
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 schrumpft es nach der Komprimierung auf nur 663 Byte – und die meisten modernen Browser können damit problemlos umgehen.
Mit unserer Beispieldatei auf einigen der neuesten Geräte erzielen wir mit komprimierten Vektordaten einen Vorteil von etwa 60-fach! Beachten Sie auch, dass diese Vergleiche nicht zwischen PNG und SVG, sondern zwischen JPEG und SVG erfolgen. JPG ist jedoch ein Verlustformat, das zu einer geringeren Qualität als SVG oder PNG führt. Bei Verwendung von PNG wäre der Vorteil mehr als 80-fach, was erstaunlich ist.
PNG und JPEG sind jedoch nicht gleich. In vielen Optimierungstipps wird empfohlen, JPEG anstelle von PNG zu verwenden. Das ist aber nicht immer sinnvoll. Sehen Sie sich die Bilder unten an. Das Bild auf der linken Seite ist ein PNG-Bild des rechten oberen Teils des HTML5-Logos, das sechsmal vergrößert wurde. Das Bild auf der rechten Seite ist dasselbe, aber mit JPEG codiert.
Es ist leicht zu erkennen, dass die Dateigrößenreduzierung bei JPEG einen Preis hat: Farbartefakte an den scharfen Kanten, die Ihre Netzhaut wahrscheinlich dazu bringen, zu glauben, dass Sie eine Brille benötigen:-) Um fair zu sein: JPEG ist für Fotos optimiert und daher nicht so gut für Vektorgrafik geeignet. Die SVG-Version ist in Bezug auf die Qualität mit der PNG-Version identisch und gewinnt daher in allen Belangen – sowohl in Bezug auf die Dateigröße als auch auf 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 Deklarierung der Hintergrunddatei mithilfe der CSS-Positionierung „fixed“:
<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>
Unabhängig von der Größe des Displays ist das Bild gut proportioniert und hat scharfe, klare Ränder.
Dann möchten wir natürlich Inhalte über den Hintergrund legen.
Das Ergebnis ist jedoch nicht ideal, da der Text nicht lesbar ist. Was tun wir also?
Hintergrund schöner gestalten
Die naheliegende Lösung besteht darin, alle Farben im Hintergrundbild heller zu machen. Das geht ganz einfach mit dem CSS-Attribut „opacity“ oder mit „opacity“ in der SVG-Datei selbst. Dazu fügen Sie einfach den folgenden Code in Ihren CSS-Inhalt ein:
#bg {
opacity: 0.2;
}
Das Ergebnis sieht dann so aus:
Diese Lösung ist zwar einfach, führt aber auf Mobilgeräten wahrscheinlich zu Leistungsproblemen. Bei den meisten mobilen Browsern kann die Verwendung der Deckkrafteigenschaft im Vergleich zu opaken Objekten viel langsamer sein.
Eine bessere Lösung
Die Farbe im ursprünglichen SVG-Inhalt zu ändern, ist viel besser als die Deckkraft mit CSS festzulegen. Hier sehen Sie unser HTML5-Logo, das durch Ändern der verwendeten Farben so modifiziert wurde, dass es verblasst wirkt. Dabei wurde die Deckkrafteigenschaft vollständig vermieden. Das Hintergrundbild unten sieht also identisch aus wie das Ergebnis der Änderung der Deckkraft, wird aber viel schneller gerendert und spart so CPU-Zeit und Akkulaufzeit.
Wir haben uns also mit den Grundlagen vertraut gemacht. Sehen wir uns nun einige weitere Funktionen an.
Farbverläufe effektiv einsetzen
Angenommen, wir möchten 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 Code dazu könnte 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 Schaltfläche würde dann in etwa so aussehen:
Der hinzugefügte Farbverlauf verläuft von links nach rechts. Dies ist die Standardrichtung für Farbverläufe in SVG. Wir können es aber noch besser machen – aus mehreren Gründen: Ästhetik und Leistung. Versuchen wir, die Richtung des Farbverlaufs zu ändern, damit er etwas schöner aussieht. Mit den Attributen „x1“, „y1“, „x2“ und „y2“ für den linearen Farbverlauf wird die Richtung der Füllfarbe festgelegt.
Wenn wir nur das Attribut „y2“ festlegen, können wir den Farbverlauf diagonal ändern. Diese kleine Codeänderung:
<linearGradient id="blueshiny" y2="1">
verleiht unserer Schaltfläche ein anderes Aussehen. Sie sieht dann so aus wie im Bild unten.
Mit dieser kleinen Codeänderung können wir den Farbverlauf auch ganz einfach von oben nach unten ändern:
<linearGradient id="blueshiny" x2="0" y2="1">
Das sieht dann so aus wie im Bild unten.
Was hat es also mit der ganzen Diskussion über die verschiedenen Winkel des Farbverlaufs auf sich?
Das letzte Beispiel, das mit dem Farbverlauf von oben nach unten, ist auf den meisten Geräten am schnellsten zu zeichnen. Unter Grafik-Experten, die Browsercode schreiben, ist es ein wenig bekanntes Geheimnis, dass vertikale (von oben nach unten) Farbverläufe fast so schnell wie eine durchgehende Farbe dargestellt werden. Der Grund dafür ist, dass ein Objekt in horizontalen Linien auf der Seite gezeichnet wird. Der Code zum Zeichnen weiß, dass sich die Farbe nicht in jeder Linie ändert, und optimiert sie daher.
Wenn Sie also in Ihrem Seitendesign Farbverläufe verwenden, sind vertikale Farbverläufe schneller und verbrauchen weniger Akku. Diese Beschleunigung gilt auch für CSS-Verläufe, also nicht nur für SVG.
Wenn wir mit diesem neuen Wissen über Farbverläufe richtig experimentieren möchten, können wir unserem HTML5-Logo mit dem folgenden Code einen coolen Farbverlauf hinzufü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>
Mit dem Code oben wird dem Hintergrund unseres HTML5-Logos ein verblasster vertikaler linearer Farbverlauf hinzugefügt, um einen subtilen mehrfarbigen Farbton zu erzeugen, der schnell abläuft – so schnell wie ein einfarbiger Hintergrund.
Wenn Sie die Inhalte in einem Desktop-Browser laden und die Größe auf ein extrem breites oder hohes Seitenverhältnis ändern, werden oben/unten oder links/rechts weiße Balken angezeigt. Nach den oben beschriebenen Codeänderungen sieht der Hintergrund so aus:
Einfach animieren
Sie fragen sich vielleicht, welchen Vorteil ein SVG-Gradient als Hintergrund für Ihre Seite hat. Das kann tatsächlich mit CSS-Gradienten sinnvoll sein. Ein Vorteil von SVG ist jedoch, dass der Farbverlauf selbst im DOM vorhanden ist. Sie können sie also mit einem Script ändern. Noch wichtiger ist jedoch, dass Sie die integrierten Animationsfunktionen von SVG nutzen können, um Ihren Inhalten subtile Änderungen hinzuzufügen.
Als Beispiel ändern wir unser buntes 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>
Im Bild unten sehen Sie das Ergebnis dieser Änderungen.
Der Code ändert die Farben unseres linearen Farbverlaufs durch alle von uns definierten Farbstopps in einem kontinuierlichen Zyklus, der 20 Sekunden dauert. Das hat zur Folge, dass der Farbverlauf so aussieht, als würde er sich in einer kontinuierlichen Bewegung, die nie aufhört, auf der Seite nach oben bewegen.
Das Schöne daran ist, dass kein Script erforderlich ist. Deshalb wird es als referenziertes Bild von dieser Seite ausgeführt. Außerdem wird die Arbeitslast auf einer mobilen CPU reduziert, da kein Script erforderlich ist.
Außerdem kann der Browser selbst seine Kenntnisse über die Zeichnung nutzen, um sicherzustellen, dass für die aufwendige Animation nur ein minimaler CPU-Overhead verwendet wird.
Es gibt einen kleinen Vorbehalt: Einige Browser unterstützen diese Art der Animation nicht. In diesem Fall wird zwar weiterhin ein schöner farbiger Hintergrund angezeigt, er ändert sich aber nicht. Das Problem lässt sich mithilfe eines Scripts (und requestAnimationFrame) umgehen, aber das würde den Rahmen dieses Artikels sprengen.
Außerdem ist diese unkomprimierte SVG-Datei nur 2.922 Byte groß – unglaublich klein für einen so reichhaltigen Grafikeffekt, der die Nutzer und ihre Datenpläne zufriedenstellt.
Wie geht es weiter?
In vielen Fällen ist SVG nicht ideal, da Fotos und Videos in anderen Formaten besser dargestellt werden. Bei Text funktioniert native HTML und CSS im Allgemeinen viel besser. Als Tool im Arsenal für liniengezeichnete Grafiken kann es jedoch die ideale Wahl sein.
Wir haben einige grundlegende Anwendungsfälle für SVG-Grafiken angesprochen und gezeigt, wie einfach es ist, winzige Inhalte zu generieren, die lebendige Grafiken auf dem Vollbildschirm mit minimalem Downloadvolumen bieten. Mit kleinen Verbesserungen an den Inhalten lassen sich mit nur wenig Markup beeindruckende grafische Ergebnisse erzielen. Im nächsten Artikel erfahren Sie mehr darüber, wie Sie die in SVG integrierte Animation für einfachere und wirkungsvollere Effekte verwenden können. Außerdem vergleichen wir die Verwendung von Canvas mit SVG, um das richtige Tool für die Erstellung Ihrer Website mit mobilen Grafiken auszuwählen.
Weitere gute Ressourcen
- Inkscape ist eine Open-Source-Zeichenanwendung, die SVG als Dateiformat verwendet.
- Open Clip Art ist eine riesige Open-Source-Clipart-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 mit einem hervorragenden Fallback für ältere Browser bietet.
- SVG-Ressourcen der Slippery Rock University – enthält einen Link zu einem SVG-Einstieg.