Wenn Sie beeindruckende 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.
Wir alle wissen, dass responsives Webdesign eine große Rolle bei der Verarbeitung unterschiedlicher Bildschirmgrößen spielt, und SVG eignet sich ideal für die problemlose Bearbeitung unterschiedlicher Bildschirmgrößen.
SVG ist eine hervorragende Möglichkeit, vektorbasierte Strichzeichnungen zu präsentieren. Außerdem ist es eine gute Ergänzung zu Bitmaps, wobei letztere besser für Bilder mit durchgehenden Farbtönen geeignet sind.
Eine der nützlichsten Eigenschaften von SVG ist, dass es unabhängig von der Auflösung ist. Sie müssen sich also nicht darum kümmern, 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 zeigen dir einige Möglichkeiten, wie du SVG-Assets einsetzen kannst, und geben dir Tipps zur Optimierung.
Grundlagen der Skalierung
Beginnen wir mit einem einfachen Szenario: Sie möchten eine Vollseitengrafik als Hintergrund Ihrer Webseite verwenden. Es wäre sehr nützlich, wenn Ihr Firmenlogo oder etwas Ähnliches immer im Vollbildmodus im Hintergrund zu sehen wäre. Das ist 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. Es basiert auf einer SVG-Datei.
Klicken Sie auf das Logo und sehen Sie es sich in einem modernen Browser an. Sie werden feststellen, dass es sich perfekt an jede Fenstergröße anpasst. Ö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!
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 konnten wir einen etwa 60-fachen Vorteil bei der Verwendung komprimierter Vektordaten feststellen. Beachten Sie auch, dass diese Vergleiche nicht zwischen PNG und SVG, sondern zwischen JPEG und SVG erfolgen. Das JPEG-Format ist jedoch ein Verlustformat, was zu einer geringeren Qualität als bei SVG oder PNG führt. Eine PNG-Datei bietet mehr als 80 x, was wirklich 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 eine gute Idee. 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 identisch, nur 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 bietet daher in jeder Hinsicht Vorteile – sowohl in Bezug auf 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 besteht darin, Ihre Hintergrunddatei mithilfe der 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>
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 etwas in den Hintergrund stellen.
Aber wie Sie sehen können, ist das Ergebnis nicht ideal, da wir den Text nicht lesen können. Was tun wir also?
Hintergrund schöner gestalten
Wir müssen natürlich alle Farben im Hintergrundbild heller machen. Dazu können Sie entweder die CSS-Eigenschaft „Deckkraft“ oder die Deckkraft in der SVG-Datei selbst verwenden. Dazu fügen Sie einfach diesen Code in Ihren CSS-Inhalt ein:
#bg {
opacity: 0.2;
}
Das Ergebnis sieht dann so aus:
Diese Lösung ist zwar einfach, stellt jedoch auf Mobilgeräten wahrscheinlich ein Leistungsproblem dar. 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, das durch Ändern der Deckkraft erzielt wird, wird aber viel schneller gerendert und spart so CPU-Zeit und wertvolle 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 resultierende Schaltfläche würde 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 Volltonfarbe 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 Farbverläufe im Seitendesign verwenden, sind vertikale Farbverläufe schneller und verbrauchen als Nebeneffekt weniger Akku. Diese Beschleunigung gilt auch für CSS-Verläufe, sodass es sich nicht nur um SVG-Verläufe handelt.
Wenn wir mit diesen neuen Farbverlaufskenntnissen richtig experimentierfreudig sind, können wir vielleicht einen coolen Farbverlauf hinter unserem HTML5-Logo einfügen, indem wir den folgenden Code 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 den Inhalt in einem Desktop-Browser laden und auf extreme Seitenverhältnisse vergrößern, erscheinen oben/unten oder links/rechts weiße Balken. Nach den oben beschriebenen Codeänderungen sieht der Hintergrund so aus:
Mit Leichtigkeit 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 des linearen Farbverlaufs durch die verschiedenen definierten Farbstopps in einem fortlaufenden 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 des Paintings nutzen, um sicherzustellen, dass die aufwendige Animation mit minimalem CPU-Aufwand ausgeführt wird.
Allerdings können einige Browser diesen Animationsstil überhaupt nicht verarbeiten. In diesem Fall erhalten Sie aber trotzdem einen schönen farbigen Hintergrund, der sich aber nicht ändert. Mit einem Skript (und requestAnimationFrame) lässt sich das Problem umgehen, aber das geht über diesen Artikel hinaus.
Noch etwas zu beachten ist, dass diese unkomprimierte SVG-Datei nur 2.922 Byte groß ist. Das ist unglaublich klein, um einen so aufwendigen Grafikeffekt zu liefern und Ihre Nutzer und Datenpläne dabei zu unterstützen.
Wie geht es jetzt weiter?
In vielen Fällen ist SVG weniger als ideal, da Fotos und Videos besser in anderen Formaten dargestellt werden können. 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 Anwendungsmöglichkeiten von SVG-Grafiken angesprochen und gezeigt, wie einfach es ist, winzige Inhalte zu erstellen, die lebendige Grafiken im Vollbildmodus mit minimalem Download-Aufwand liefern. 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.
- Öffnen Sie Clip Art, 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 mit einem hervorragenden Fallback für ältere Browser bietet.
- SVG-Ressourcen der Slippery Rock University – enthält einen Link zu einer tollen SVG-Primer