Textures.js: SVG-Texturen für jede Oberfläche

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Das SVG-Format stellt eine Vielzahl an Möglichkeiten bereit, um komplexe grafische Inhalte umzusetzen. Auch Texturen lassen sich mit dem „<pattern>“-Element erstellen und auf Formen anwenden. Aber gerade bei einfachen und gängigen Texturen ist der Aufwand, diese selbst per SVG auszuzeichnen, im Verhältnis zum Ergebnis recht hoch. Daher stellt die JavaScript-Bibliothek „Texture.js“ solche Texturen, die weitestgehend nur aus Linien und Punkten bestehen, für SVG-Elemente zur Verfügung. Mit wenigen Zeilen JavaScript kann man dann die einzelnen Formen einer SVG-Grafik mit unterschiedlichen Texturen versehen.

TEXTURE.JS

„Textures.js“ basiert auf „D3.js“

Da „Textures.js“ auf der JavaScript-Bibliothek „D3.js“ aufbaut, muss diese zusammen mit „Textures.js“ im HTML-Dokument eingebunden werden.

„D3.js“ hilft bei der Visualisierung von Daten verschiedenster Art. Man kann damit HTML- oder SVG-Elemente auswählen und nach bestimmten Vorgaben gestalten.

„D3.js“ sorgt im Zusammenspiel mit „Textures.js“ dafür, einzelne Formen innerhalb einer SVG-Grafik auszuwählen. Diese erhalten schließlich per „Textures.js“ ein Muster.

texturesjs

SVG-Grafik erstellen und mit Textur versehen

Zunächst einmal muss eine SVG-Grafik her. Diese wird im HTML-Dokument eingebettet und lässt sich fast nach Belieben gestalten. Nur eine Füllung für die Form darf nicht angegeben werden, da diese später per „Textures.js“ vergeben wird. Gibt man eine Füllung vor, wird diese später mit der Textur nicht überschrieben.

<svg width="225" height="150" id="grafik">
  <circle cx="75" cy="75" r="75" id="kreis1"></circle>
  <circle cx="150" cy="75" r="75" id="kreis2"></circle>
</svg>

Im Beispiel werden zwei einfache Kreise ausgezeichnet. Sowohl das „<svg>“- Element als auch die „<circle>“-Elemente erhalten eine ID, um sie später per „D3.js“ ansprechen zu können.

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

Das Prinzip von „Textures.js“ ist einfach erklärt. Die Bibliothek stellt per JavaScript eine Reihe unterschiedlicher Texturen bereit. Diese werden einem SVG-Element hinzugefügt. Dies geschieht, indem „Textures.js“ im SVG-Element für jedes Muster ein eigenes „<pattern>“-Element anlegt.

var svg = d3.select("#grafik");
var textur1 = textures.lines();
var textur2 = textures.circles();

svg.call(textur1);
svg.call(textur2);

Im Beispiel wird per „d3.select()“ zunächst die SVG-Grafik ausgewählt. Anschließend werden zwei Texturen erstellt. Im Beispiel fällt die Wahl auf die beiden Grundtexturen „lines()“ und „circles()“. Per „call()“ werden die Texturen dem SVG-Element hinzugefügt. Ab diesem Moment stehen die Muster innerhalb der Grafik bereit.

texturesjs_einfache-muster

Einfache Muster

Im letzten Schritt müssen die Texturen noch den beiden Kreisen zugeordnet werden.

var kreis1 = d3.select("kreis1");
var kreis2 = d3.select("kreis");

kreis1.style("fill", textur1.url());
kreis2.style("fill", textur2.url());

Auch hierbei werden die Kreise erst per „d3.select()“ ausgewählt. Anschließend weisen wir den Elementen per „style()“ die Eigenschaft „fill“ mit den URLs der beiden Muster zu. Die URLs des Musters ist jeweils eine ID, die von „Textures.js“ vergeben wird.

Texturen anpassen

„Textures.js“ kennt drei Grundformen: Linien, Kreise und Pfade. Dabei lässt sich jede Grundform anpassen. Bei Linien kann die Stärke, der Abstand und die Ausrichtung angegeben werden. Für jede Eigenschaft, die angepasst werden soll, gibt es eine Methode, die einfach an „lines()“ angehängt wird.

textures.lines().stroke("green").strokeWidth(1).size(5).orientation("2/8");

Im Beispiel wird per „stroke()“ die Farbe der Linien definiert. Per „strokeWidth()“ wird die Linienstärke und per „size()“ der Abstand der Linien zueinander festgelegt. Der Wert für „orientation()“ gibt die Ausrichtung der Linien an. Neben Werten wie „horizontal“, „vertical“ und „diagonal“ gibt es auch die Möglichkeit, die Ausrichtung als Achtelbruch auszugeben. „2/8“ entspricht hierbei einer diagonalen Ausrichtung, „4/8“ einer horizontalen Ausrichtung und „8/8“ einer vertikalen Ausrichtung.

texturesjs_angepasste-muster

Individuell angepasste Muster

Bei Kreisen gibt es keine Ausrichtung. Dafür besteht zusätzlich die Möglichkeit, eine Füllfarbe anzugeben.

textures.circles().fill("orange").radius(5).size(15);

Außerdem wird die Größe der Kreise per „radius()“ definiert. Mit der zusätzlichen Eigenschaft „complement()“ sorgen wir dafür, dass die Kreise nicht in Reihen und Spalten neben- und untereinander dargestellt werden, sondern jeweils versetzt.

texturesjs_angepasste-muster-versetzt

In Reih und Glied angeordenete Kreise sowie versetzt angeordnete Kreise

Mit den Pfadtexturen stehen einem noch eine Reihe weitere Muster zur Verfügung, die komplexer sind, als die einfachen Linien- und Kreismuster. Insgesamt sieben Pfadmuster – zum Beispiel Kreuze, Hexagone und Wellen – stehen zur Auswahl.

textures.paths().d("waves").stroke("blue");

Über die Eigenschaft „d()“ legen wir die Art des Musters fest. Anschließend lassen sich Farbe und Linienstärke, wie auch bei den anderen Mustern, festlegen.

texturesjs_weitere-muster

Pfadtexturen

Auch individuelle Muster möglich

Wem das Angebot an Texturen nicht ausreicht, der kann mit „Textures.js“ auch eigene Muster auf der Grundlage der Pfadtexturen erstellen. Dazu wird „d()“ eine Funktion übergeben, welche die Form des Musters beschreibt.

textures.paths().d(function(s) {
  return "M …";
}).stroke("blue");

Per „return“ werden innerhalb der Funktion die Koordinaten für die „d“-Eigenschaft eines SVG-Pfades ausgegeben.

Fazit und Link zum Beitrag

Mit „Textures.js“ stehen einem viele Muster zur Verfügung, die sich schnell SVG-Formen zuordnen lassen. Die Anwendung ist einfach und Anpassungen sind schnell erledigt. Textures.js steht unter der MIT-Lizenz zur kostenlosen Verwendung für private und kommerzielle Zwecke bereit. D3.js steht unter der ähnlich liberalen BSD-Lizenz.

(dpe)

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Sortiert nach:   neueste | älteste | beste Bewertung
wpDiscuz