SVG-Filter auf Text

Der folgende Beitrag ist ein Gastbeitrag von Chris Scott. Chris hat mit SVG-Filtern und deren Anwendung auf Text herumgespielt. Ich fand das ziemlich interessant, da sich SVG-Filter deutlich von CSS-Filtern unterscheiden. Vermutlich sind sie leistungsfähiger, da es mehr davon gibt und man Dinge wie Relief/Emboss oder Konturen machen kann, was bei CSS-Filtern nicht möglich ist. Chris erklärt hier im Detail, wie es gemacht wird, einschließlich eines Tools, das es noch einfacher macht.

Seit einigen Jahren gibt es im Webdesign einen allgemeinen Trend, Bilder in Designs zu vermeiden. Noch vor wenigen Jahren bevorzugten Softwareunternehmen die Verwendung eines Bildes mit abgerundeten Ecken als beste "browserübergreifende" Lösung; das CSS-Attribut border-radius hat diese Technik heute veraltet erscheinen lassen. Titel sind ein weiteres Beispiel für diesen Trend, bei dem man früher vielleicht einen ausgefallenen Banner-Titel in Photoshop generiert und ein Bild verwendet hat, um ihn auf der Seite anzuzeigen. Heutzutage stehen uns Webfonts und CSS3 zur Verfügung, um Schatten und andere Effekte zu erzielen. Diese Lösungen laden viel schneller, skalieren besser und sind zugänglicher und semantisch korrekter. Aber wir können noch mehr tun!

SVG-Filter

SVG mit Filtereffekten bietet viel Potenzial für komplexe Textgestaltung. Werfen Sie einen Blick auf dieses Beispiel

Siehe den Stift SVG Filters on Text von chrismichaelscott (@chrismichaelscott) auf CodePen

Diese Zeile wurde mit SVG-Filtereffekten erstellt. Es ist nur Text. Sie können ihn mit dem Cursor auswählen. Suchmaschinen können ihn indizieren. Er skaliert in der Größe, ohne Qualitätsverlust. Außerdem dauert der Download sehr wenig Zeit. Sie können auch noch viel mehr erreichen, der Spielraum für Kreativität mit Filtereffekten ist riesig. Das Beispiel wurde mit einer Bibliothek namens Raphael.js und einer von mir dafür geschriebenen Erweiterung erstellt. Dieser Artikel beschreibt die Überlegungen zur Entwicklung der Erweiterung und zeigt – kurz – wie sie verwendet werden kann.

Anscheinend werden nur 0,1 % der Webseiten mit SVG-Grafiken erstellt. Wenn diese Statistik etwas aussagt, ist die Wahrscheinlichkeit groß, dass Sie SVG nicht regelmäßig verwenden. Warum ist SVG so unbeliebt? Es ist nur eine Vermutung, aber der Grund, warum ich mich (bis ich es unbedingt musste) nicht mit SVG beschäftigt habe, war seine Lernkurve: SVG ist ein XML-Vokabular und ist meiner Meinung nach extrem technisch (Matrixmultiplikation für Farbverschiebungen, anyone?). Der Weg, wie ich zu SVG kam, war über Raphael.js, eine JavaScript-Bibliothek zur Erstellung von Vektorgrafiken. Da es sich um eine JavaScript-Bibliothek handelt, fühlte sie sich recht vertraut an, die gesamte Komplexität war abstrahiert. Schon bald erstellte ich komplexe Grafiken wie ein Profi.

Filtereffekte für Raphael

Raphael hat jedoch einen Nachteil: keine Unterstützung für Filtereffekte. Ich erinnere mich, dass einer meiner Kunden speziell einen Schlagschatten für *Blasen* in einer interaktiven und animierten Datenvisualisierung verlangte. Die Anfrage ließ mich eine Weile stutzen, als ich auf diese Grenze von Raphael stieß. Für dieses Projekt schrieb ich eine sehr spezifische Erweiterung für Raphael, um Schlagschatten zu handhaben. Aber die gleiche Komplexität, die mich anfangs von SVG abgeschreckt hatte, war wieder da und schlimmer als je zuvor. Machen Sie sich keine Sorgen, Filtereffekte sind sehr, sehr technisch.

Nach diesem Projekt machte ich mich also daran, eine umfangreichere Bibliothek zu entwickeln, um Filtereffekte so einfach anzuwenden, wie Raphael Formen zeichnet.

Vorstellung von Filter Effects for Raphael!

So verwenden Sie es

Zuerst das HTML. Dieser Teil ist extrem einfach, nur ein div mit einer id

<div id="title-container"></div>

Alles andere wird in JavaScript erledigt.

Um eine SVG-Zeichnung mit Raphael zu starten, erstellen Sie ein "Papier", indem Sie die id des Container-Elements referenzieren

var paper = Raphael("title-container");

Jetzt zum Zeichnen. Dieses Beispiel erstellt etwas Text und legt einige Stilattribute fest

// The first two arguments are the origin of the text
var title = paper.text(0, 30, "Filters are ice cold");
title.attr({
"fill": "MintCream",
"font-family": "Butcherman",
"font-size": "54px",
"text-anchor": "start"
});

Nun zu den Effekten! Die einfachsten Dinge, die Sie tun können, sind Schatten, Unschärfe, Beleuchtung, Prägung und Farbverschiebung. Diese erfordern sehr wenig Code. Versuchen wir den Prägeeffekt. Fügen Sie zum JavaScript hinzu

title.emboss();

Sie können Effekte verketten, sodass das Anwenden eines Schattens danach unkompliziert ist

title.emboss().shadow();

Ziemlich cool, oder? Sie können dies noch weiter ausbauen, indem Sie Ihre eigenen Filter erstellen. Die SVG-Spezifikation listet (niedrigere) Filtereffekte auf, die kombiniert werden können, um alle Arten von Filtern zu erstellen (insbesondere Faltungsmatrizen können für eine Vielzahl von Operationen verwendet werden).

Diese Demo enthält den vollständigen Code und einige weitere Beispiele für verschiedene erreichbare Effekte

Siehe den Stift SVG Filters on Text von Chris Coyier (@chriscoyier) auf CodePen.

Nachteile

Was sind die Nachteile von SVG? Nun – abgesehen von den Vor- und Nachteilen von Vektor gegenüber Raster (wie canvas) – fallen mir ein paar ein

• Browserunterstützung – Sie werden vielleicht nicht überrascht sein zu erfahren, dass die hier besprochenen grafischen Tricks in älteren Versionen von IE nicht unterstützt werden, nur ab Version 10. SVG selbst wird in IE9 gerendert, nur ohne die Effekte. Firefox, Chrome und Opera unterstützen Filtereffekte schon seit Ewigkeiten
• Semantik – Einige mögen Vorbehalte gegen die semantische Gültigkeit der Verwendung von SVG in Dokumenten haben, sicherlich gibt das svg-Tag keinen Hinweis auf seinen Inhalt; man kann jedoch ein sinnvolles Elternelement verwenden

Zusammenfassend

Hoffentlich haben Sie mit diesem Beitrag eine gute Vorstellung davon bekommen, was Filtereffekte leisten können und wie Filter Effects for Raphael sie umsetzen kann. Besuchen Sie die Projektseite auf Github für weitere Details. Danke fürs Lesen!