Mario Del Valle aus Valladolid im sonnigen Spanien ist ein waschechter Kreativer aus ganzem Herzen. Nach eigener Aussage war er schon als kleiner Junge ein begeisterter Zeichner. In jüngerer Zeit kam noch der Wunsch dazu, seine Werke mit anderen zu teilen. Also setzte er sich an sein Tablett und begann Ideen zu generieren, zu verwerfen, zu generieren…
SVG hat sich als Format für Vektorgrafiken im Browser etabliert. Grafikprogramme wie Adobes Illustrator unterstützen das Speichern in diesem Format und moderne Browser können sie problemlos darstellen. Da SVG-Grafiken wie auch HTML-Dokumente über eine Auszeichnungssprache erstellt werden, ist die Erstellung und Bearbeitung per Texteditor möglich. Für die Gestaltung von SVG-Grafiken kann man zudem auf Stylesheets zurückgreifen. Was den Einsatz von CSS betrifft, gibt es neben vielen Gemeinsamkeiten zu HTML jedoch auch einige Unterschiede zu beachten.
Oh, äh. Entschuldigung, der ist mir so raus gerutscht. Halte einfach eine Weile die Luft an. Hier draußen verzieht sich sowas ja schnell… Ja, das finde ich lustig. Sehr lustig sogar. Lies am besten nur weiter, wenn es dir auch so geht.
Im Webdesign sind responsive Layouts nicht mehr wegzudenken. Da gibt es auf der einen Seite immer mehr kleine Displays auf Smartphones und auf der anderen Seite immer größer werdende Monitore. Dazwischen finden sich Phablets, Tablets sowie Net- und Notebooks. Dank CSS ist es technisch kein Problem, eine Website für all die verschiedenen Auflösungen zu optimieren. Doch wie sieht es mit SVGs aus? Lassen sich diese auch responsiv gestalten?
Das Erstellen von SVG-Grafiken ist eine recht unkomplizierte Sache. Wer HTML beherrscht, findet sich auch schnell in der SVG-Syntax zurecht. Allerdings gibt es einige kleine, aber durchaus relevante Unterschiede zwischen HTML und SVG, was die Positionierung von SVG-Formen betrifft. Denn diese werden grundsätzlich absolut innerhalb einer SVG-Zeichenfläche platziert.
Was die Positionierung von SVG-Elementen wie „<rect>“ oder „<circle>“ betrifft, gibt es schon bezüglich der Syntax einen großen Unterschied zu HTML. Denn während HTML-Elemente per CSS-Eigenschaften „left“ und „top“ platziert werden, lassen sich SVG-Elemente nur per „x“- und „y“-Attribute (bei Kreisen sind es die „cx“- und „cy“-Attribute) platzieren.
Während Farben und Konturen wie bei HTML per CSS gestaltet werden können, ist eine Positionierung per CSS im SVG-Format gar nicht möglich.
Der zweite Unterschied ist der, dass SVG-Formen grundsätzlich absolut innerhalb eines „<svg>“-Elementes platziert werden. Auch wenn es mit dem „<g>“-Element eine Möglichkeit gibt, Elemente zu gruppieren, so lässt sich dem „<g>“-Element selbst keine Position zuweisen.
Gerade bei komplexen Grafiken stellt dies schon mal ein Problem dar. Denn will man die Position einer Figur ändern, die möglicherweise aus dutzenden Einzelementen besteht, müssen die „x“- und „y“-Attribute sowie die anderen positionsbestimmenden Attribute wie „cx“, „cy“ und „d“ beim „<path>“-Element verändert werden.
Bei statischen Grafiken ist das Problem noch relativ einfach lösbar, indem man die Grafik in einem Zeichenprogramm wie Illustrator öffnet. Dort kannst du dann alles anpassen und wieder als SVG-Datei speichern.
Bei dynamischen Veränderungen, die zum Beispiel per JavaScript oder PHP berechnet werden, muss jedes einzelne neu zu platzierende Element einer Figur verändert werden. Und gerade beim „<path>“-Element mit seinem komplexen „d“-Attribut ist das durchaus eine Herausforderung.
Es gibt aber einen Weg, wie man SVG-Formen doch relativ innerhalb einer SVG-Grafik platzieren kann. So erlaubt das SVG-Format nämlich das Verschachteln von SVG-Grafiken.
Innerhalb eines „<svg>“-Elementes darf nämlich ein weiteres „<svg>“-Element liegen. Zwar können die verschachtelten „<svg>“-Elemente selbst auch nur absolut platziert werden. Aber innerhalb einer Verschachtelung ist die absolute Platzierung auf das jeweilige Eltern-„<svg>“-Element begrenzt.
<svg width="750" height="500" style="background: gray">
<svg x="200" y="200">
<circle cx="50" cy="50" r="50" style="fill: red" />
</svg>
<circle cx="50" cy="50" r="50" style="fill: yellow" />
</svg>
Im Beispiel wird innerhalb und außerhalb einer verschachtelten SVG-Grafik ein Kreis gezeichnet. Die Kreise sind so platziert, dass sie jeweils an der linken oberen Ecke stehen. Da das verschachtelte „<svg>“-Element 200 Pixel vom linken und oberen Rand entfernt ist, wird der rote Kreis auch entsprechend 200 Pixel von beiden Rändern entfernt platziert.
Änderst du die „x“- und „y“-Attribute des zweiten „<svg>“-Elementes, wird auch die Platzierung aller darin enthaltenden Formen verändert.
Anders als das „<g>“-Element zum Gruppieren hast du mit verschachtelten „<svg>“-Elementen also die Möglichkeit, die Position mehrerer Formen gleichzeitig zu verändern.
Die CSS-Eigenschaft „transform“ skaliert und dreht nicht nur HTML-Elemente, sondern auch SVG-Formen. Allerdings wird „transform“ im SVG-Kontext anders interpretiert als bei HTML.
Vor allem beim Drehen, also der „rotate()“-Funktion, macht sich das bemerkbar. Denn von HTML kennt man es, dass „rotate()“ dafür sorgt, dass Elemente sich um den eigenen Mittelpunkt drehen.
Im SVG-Format werden Elemente jedoch immer um die linke, obere Ecke der SVG-Zeichenfläche gedreht. Das macht es natürlich schwierig, Drehungen zu realisieren. Will man beispielsweise einen Text hochkant stellen, reicht es nicht, diesen um 90 Grad zu drehen. Auch die „x“- und „y“-Attribute müssen angepasst werden.
Denn ein Element, welches 200 Pixel von links und oben platziert und um 90 Grad gegen den Uhrzeigersinn gedreht wird, verschwindet gegebenenfalls nach oben aus der Zeichenfläche.
Allerdings kannst du dir auch hier verschachtelte SVG-Elemente zur Hilfe nehmen. Zwar erreichst du es nicht, dass Elemente sich um den eigenen Mittelpunkt drehen. Aber wenn du die zu drehenden Elemente links oben des verschachtelten „<svg>“-Elementes platzierst, ist die Anpassung der Position relativ einfach.
<svg width="750" height="500" style="background: gray">
<svg x="100" y="100">
<rect x="0" y="0" width="142" height="142" style="fill: yellow" />
<rect x="50" y="-50" width="100" height="100" style="fill: black; transform: rotate(45deg)" />
</svg>
</svg>
Im Beispiel werden innerhalb eines verschachtelten „<svg>“-Elementes zwei Rechtecke platziert. Während das erste ohne „transform“-Eigenschaft auskommt, wird das zweite Element dank dieser Eigenschaft und der „rotate()“-Funktion um 45 Grad gedreht.
Damit das zweite Rechteck dennoch mit der linken und oberen Position des ersten Rechtecks beginnt, müssen die „x“- und „y“-Attribute geändert werden. Ohne die Anpassung würde das zweite Rechteck um die linke obere Ecke des verschachtelten „<svg>“-Elementes nach links gedreht und zur Hälfte aus der Zeichenfläche herausragen.
Erschwerend kommt hinzu, dass die Positionierung abhängig ist von der Rotation. Denn das Koordinatensystem der gedrehten Form wird ebenfalls gedreht. Der Wert für „x“ basiert also nicht mehr auf der Horizontalen, sondern auf einer um 45 Grad gedrehten Achse.
Es gibt noch einen weiteren Vorteil – oder zumindest etwas, was man beachten sollte. Über ein „<svg>“-Element lassen sich per CSS auch Farbe und Kontur zuweisen. Ist den Formen innerhalb dieser Zeichenfläche selbst keine Farbe oder Kontur zugewiesen, übernehmen sie alle das Aussehen des SVG-Elternelementes.
<svg width="750" height="500" style="background: gray">
<svg x="100" y="100" style="fill: yellow; stroke: red">
<rect x="0" y="0" width="142" height="142" />
<rect x="100" y="-50" width="100" height="100" style="transform: rotate(45deg)" />
</svg>
</svg>
So ist es also auch unkompliziert möglich, allen Elementen eines SVG-Zeichenfläche ein einheitliches Aussehen zu verpassen.
Glyphter.com ist einer dieser Dienste, der mich aus dem Stand überzeugte. Er ist sehr einfach zu bedienen, arbeitet komplett fehlerfrei, sieht schick aus und hält auch ansonsten alle seiner Versprechen. Noch dazu ist er kostenlos nutzbar. Was könnte man mehr wollen? Lesen Sie weiter und sehen Sie, wie Sie Ihren eigenen Icon Font aus beliebigen SVGs erzeugen und das in einer Zeit, in der eine Senseo eine Tasse Kaffee brüht.
Glyphter sieht auf den ersten Blick aus wie eine an Kinder gerichtete Kreation aus dem Hause Disney. Lebendige Farben, große Schrift, einfache Formen, ein knuddeliges Maskottchen – alles da für kleine Prinzen und Prinzessinnen…
Und ich muss zugeben, ich bin bei solchen einfachen Interfaces stets skeptisch. Zu oft musste ich schon erleben, dass sich diese Einfachheit auch im Featureset und dem übrigen Gesamtbild niederschlägt. Häufig wird eine zu einfache UI der Komplexität des Featureset auch nicht gerecht, so dass sich der vermeintliche Vorteil ins Gegenteil verkehrt. Aber, dass muss ich einräumen, das gilt alles nicht für Glyphter. Die UI passt perfekt zum Featureset. Eine Dokumentation oder auch nur eine kurze Einleitung ist gar nicht erforderlich.
Haben Sie Glyphter geöffnet, haben Sie im Wesentlichen zwei Wahlmöglichkeiten. Entweder klicken Sie das große Buch-Icon an der rechten unteren Ecke des Browserfensters. Auf diese Weise öffnen Sie eine Palette der populärsten Icon Fonts. Etwa ein halbes Dutzend Schriften der Kaliber Linecons, Font Awesome, Entypo und einige andere stehen bereit. Wählen Sie ein Icon aus und ziehen es mit gedrückter Maustaste auf die Mitte des Browserfensters, wo ein rötliches Grid darauf wartet, mit Icons befüllt zu werden. Legen Sie das gewählte Icon in einem der leeren Quadrate ab.
Oder klicken Sie ein leeres Quadrat direkt an. Auf diese Weise öffnen Sie den Öffnen-Dialog Ihres lokalen Dateisystems. Jetzt bewegen Sie sich zu dem gewünschten SVG-File, wählen es per Klick aus und bestätigen den Button "Öffnen". Ebenso funktioniert es, wenn Sie ein SVG mit der Maustaste aus einem Verzeichnis auf das Grid ziehen und auf einem leeren Quadrat los lassen. Diese Methode führt zum selben Ergebnis, ist aber viel schneller, jedoch naheliegenderweise nur für größere Auflösungen geeignet, in denen man zumeist eh nicht mit dem Browser in voller Bildschirmauflösung unterwegs ist.
Ist das Symbol aus dem gewählten Icon Font oder dem übergebenen SVG dann geladen, zeigt es sich als kleine Preview innerhalb des vormals leeren Quadrats. Hovern Sie mit der Maus über die Preview, erscheinen verschiedenen weitere Symbole. Mit einem Klick auf das sichtbar werdende X löschen Sie das Icon wieder, während das Stift-Symbol einen Editor auf der linken Seite des Browserfesters öffnet.
Der Editor erlaubt Ihnen den Zugriff auf jeden einzelnen Pfad innerhalb des SVG. Eine Reihe per Schaltfläche erreichbarer Befehle bietet vielfältige Manipulationsmöglichkeiten. So können Sie Pfade löschen, bewegen, spiegeln, rotieren und skalieren. Auf diese Weise verändern Sie die Piktogramme bis zur Unkenntlichkeit, wenn Sie mögen.
Haben Sie Ihre Icons dann schlussendlich auf dem Grid verteilt und – nicht notwendigerweise – bearbeitet, geben Sie Ihrem Font einen Namen, klicken auf “Download Font” und warten Sie auf den Download, der als TTF, also im True Type Format erfolgt. Vor dem Download wird Ihnen angeboten, einen Account anzulegen, was Sie nicht tun müssen. Tun Sie es aber, werden Ihre Fonts auf der Plattform gespeichert und können so immer wieder von Ihnen bearbeitet werden, ohne dass Sie jedesmal von vorn beginnen müssen. Interessiert Sie diese Option nicht, klicken Sie “Just Download” und Ihr TTF sollte sich unverzüglich auf den Weg zu Ihnen machen.
Glyphter.com kann komplett kostenlos verwendet werden.
Flash war lange Zeit der Standard für vektorbasierte Animationen im Web. Mit dem Aufkommen mobiler Endgeräte wurde Flash immer mehr von HTML5 und CSS3 verdrängt. Dank des SVG-Formates, welches mittlerweile von allen modernen Browsern unterstützt wird, können vektorbasierte Grafiken ohne Plug-in im Browser dargestellt werden. Mit der JavaScript-Bibliothek Snap.svg aus dem Hause Adobe ist es zudem möglich, Animationen mit SVG-Grafiken zu erstellen.
Nachdem die JavaScript-Bibliothek von Snap.svg im HTML-Kopf eingebunden ist, können bestehende im HTML-Dokument eingebundene SVG-Grafiken angesprochen und neue erstellt werden.
var grafik1 = Snap("#grafik");
var grafik2 = Snap(300, 400);
Die erste Zeile unseres Beispiels greift auf das SVG-Element mit der ID grafik zu. Über die Variable grafik1 hat man somit Zugriff auf alle Elemente innerhalb des SVG-Elementes. Die zweite Zeile erstellt eine neue SVG-Grafik mit 300 Pixel Breite und 400 Pixel Höhe.
Nun hat man die Möglichkeit, bestehende Formen innerhalb der Grafik zu manipulieren oder neue Formen zu erstellen. Hierfür bietet die Bibliothek verschiedene Funktionen an, mit denen unter anderem Kreise und Rechtecke gezeichnet werden können.
var kreis = grafik1.circle(100, 100, 50);
kreis.attr({
fill: "#00ffff",
stroke: "#000000",
strokeWidth: 3
});
Mit circle() wird ein Kreis gezeichnet. Die ersten beiden Werte geben die X- und Y-Koordinate für den Kreismittelpunkt an, der dritte Wert den Radius. Mit attr() geben Sie mehrere Werte für das Aussehen der Form an, zum Beispiel Füll- und Rahmenfarbe sowie Rahmenstärke. Hier ist die Angabe aller Attribute erlaubt, die vom jeweiligen Formelement unterstützt werden.
Bestehende SVG-Dateien können ebenfalls geladen und eingebunden werden. Hierzu dient die Methode Snap.load(). Sie lädt eine externe SVG-Datei, welche einer Funktion übergeben wird.
Snap.load("dreieck.svg", function (datei) {
var dreieck = datei.select("polygon");
grafik1.append(dreieck);
});
Im Beispiel wird die Datei dreieck.svg geladen und einer Funktion (über die Variable datei) übergeben. Über die Methode select() hat man nun Zugriff auf alle Elemente der SVG-Grafik. Mit select() wird das jeweils erste Element ausgewählt, welches angeben wird. Alternativ gibt selectAll() alle vorhandenen Elemente eines Typs als Array aus.
Mit append() wird die Formenauswahl letztendlich in die Grafik eingebunden. Extern eingebundene Grafiken lassen sich genau so ansprechen und verändern wie jene, die per Snap.svg selbst erstellt wurden. Per attr() ist es also möglich, das Aussehen des Dreiecks zu verändern.
Neben der Manipulation von Grafiken gehört das Animieren zu den besonderen Möglichkeiten von Snap.svg. Mit animate() können die Eigenschaften einer SVG-Form über eine Bewegung verändert werden. Die Methode erwartet mindestens zwei Parameter. Der erste Parameter gibt über ein Objekt-Literal die Eigenschaften an, die verändert werden soll, der zweite die Animationszeit in Millisekunden.
Optional kann als vierter Parameter eine Easingmethode angegeben werden, welche beschreibt, wie die Animation beschleunigen beziehungsweise abbremsen soll. Als fünfter Parameter ist die Angabe einer Funktion möglich, die nach Ablauf der Animation aufgerufen wird.
kreis.animate({
r: 100,
cx: 100,
}, 1000, mina.easein);
Im Beispiel werden Radius und X-Koordinate des Kreismittelpunktes verändert. Die Dauer der Animation wird auf eine Sekunde gesetzt. Außerdem sorgt mina.easein dafür, dass die Animation zum Ende abbremst. Die Easing-Möglichkeiten ähneln denen, die man von CSS3 kennt.
Snap.svg bietet mehrere Möglichkeiten, SVG-Grafiken interaktiv zu gestalten. So ist es sehr einfach möglich, eine Form per Maus bewegbar zu machen.
kreis.drag();
Das kleine Beispiel sorgt dafür, dass der Kreis per Maus innerhalb der SVG-Fläche bewegt werden kann. Auch Mouseover-Effekte lassen sich einfach realisieren. So ist es beispielsweise möglich, eine Animation erst auszuführen, wenn man sich mit der Maus darüber bewegt.
kreis.mouseover(function() {
kreis.animate({
r: 100,
cx: 50
}, 1000);
});
Das folgende kurze Video bietet einen schnellen Überblick über die Fähigkeiten der Bibliothek und hilft bei den ersten Schritten:
Snap.svg ist eine leistungsstarke JavaScript-Bibliothek zur Umsetzung komplexer Animationen und grafischer Anwendungen. Die JavaScript-Bibliothek ist Teil der Adobe Webplatform und steht unter einer Apache-Lizenz V2, was unter anderem garantiert, dass sie kostenlos für private und kommerzielle Zwecke genutzt werden darf. Zusätzlich zur bereits genannten Projekt-Homepage können Sie Snap.svg auch ganz klassisch via Github beziehen.
(dpe)
Das SVG-Format gibt es zwar schon länger, war mangels flächendeckender Browserunterstützung jedoch nur bedingt einsatzfähig. Da mittlerweile alle aktuellen Browser das Format unterstützen und Flash immer mehr verdrängt wird, ist SVG noch interessanter geworden. Wie Flash ist auch das SVG-Format vektorbasiert und kann Animationen enthalten. Aber es hat noch eine Gemeinsamkeit zu Flash: Per Scriptsprache sind Programmierungen innerhalb des Formates möglich.
Im Grunde unterscheidet sich der Einsatz von JavaScript in einer SVG-Datei gar nicht vom Einsatz in einer HTML-Datei. Da es in der SVG-Syntax aber weder das HEAD- noch das BODY-Element gibt, wird ein JavaScript-Bereich einfach innerhalb des SVG-Elementes ausgezeichnet. Hierbei gilt wie bei HTML auch, dass auf Elemente nur dann zugegriffen werden kann, wenn diese bereits geladen wurden. Also muss der JavaScript-Bereich entweder ans Dokumentende gesetzt oder über eine Funktion per Event-Listener „load“ aufgerufen werden. Zwingend erforderlich ist jedoch, dass der JavaScript-Quelltext innerhalb eines CDATA-Abschnittes aufgeführt wird.
<svg>
<script>
<![CDATA[
window.addEventListener("load", function() { … }, false);
]]>
</script>
<rect x="50" y=50" width="0" height="25" fill="red" />
</svg>
Da man SVG-Elemente wie HTML-Elemente mit Klassen und IDs ausstatten kann, lassen sich diese mit den bekannten Methoden „getElementsByTagName()“, „getElementById()“. sowie den neueren Methoden „querySelector()“ und „querySelectorAll()“ ansprechen. Attribute werden mit „getAttribute()“ ausgelesen beziehungsweise mit „setAttribute()“ zugewiesen – also alles bekannte Methoden.
window.addEventListener("load", function() {
document.getElementsByTagName("rect")[0].setAttribute("width", "100");
}, false);
Im Beispiel wird auf das erste RECT-Element zugegriffen, welchem das „width“-Attribut mit dem Wert „200“ zugewiesen wird. Um per JavaScript Animationen zu erstellen, die SVG-Elemente in Bewegung bringen, bietet sich die Methode „requestAnimationFrame()“ an. Diese Methode ist speziell für Animationen geeignet und sorgt – anders als als beispielsweise „setTimeout()“ – dafür, dass eine Funktion immer nur dann ausgeführt wird, wenn dies für das Fortlaufen einer Animation notwendig ist.
window.addEventListener("load", function() {
var breite = document.getElementsByTagName("rect")[0].getAttribute("width");
function animation() {
if (breite < 200) {
breite++;
document.getElementsByTagName("rect")[0].setAttribute("width", breite);
window.requestAnimationFrame(animation);
}
}
window.requestAnimationFrame(animation);
}, false);
Im Beispiel wird über „requestAnimationFrame()“ die Funktion „animation()“ solange aufgerufen, bis der „width“-Wert für das Rechteck „200“ ist. Dabei wird der „width“-Wert bei jedem Funktionsaufruf um 1 erhöht, was zu einer Animation des Rechteckes führt, bei dem die Breite auf 200 verändert wird. Auf diese Art und Weise lassen sich beispielsweise Diagramme über eine Animation aufbauen. Die einzelnen Diagrammwerte können per GET-Parameter an die SVG-Datei übergeben und per JavaScript ausgelesen werden.
Zwar gibt es mit dem CANVAS-Element und den entsprechenden Zeichenfunktionen von JavaScript auch die Möglichkeit, ohne SVG-Format Formen zu zeichnen und auf ähnliche Weise zu animieren. Allerdings stellt das Canvas-Element nur eine pixelbasierte Zeichenfläche zur Verfügung. Wird das Browserfenster vergrößert dargestellt, wird die gerasterte Darstellung erkennbar.
Daher setzt zum Beispiel die Google-Charts-API für seine Diagramme ebenfalls auf das vektorbasierte SVG-Format anstatt auf Canvas.
Damit JavaScript innerhalb einer SVG-Grafik auch ausgeführt werden kann, ist es notwendig, die SVG-Grafik per EMBED- oder IFRAME-Element in ein HTML-Dokument einzubinden. Wird es per IMG-Element eingebunden, wird die SVG-Grafik zwar angezeigt, das JavaScript wird jedoch nicht ausgeführt.
Alternativ ist es möglich, eine SVG-Grafik komplett in ein HTML-Dokument einzubetten, indem der Quelltext einschließlich SVG-Element (aber ohne Doctype) an gewünschter Stelle innerhalb des HTML-Dokumentes platziert wird.
Dank JavaScript und den Animationsmöglichkeiten des SVG-Formates kann es sich zu einem adäquaten Ersatz zu Flash entwickeln, welches gänzlich ohne Plug-in auskommt und somit auch auf mobilen Geräten läuft.
(dpe)
Das SVG-Format hat zahlreiche Vorteile: Vor allem, dass es vektorbasiert ist, macht es zu einer Besonderheit unter den gängigen Bildformaten für Browser. Auch wenn alle modernen Browser das Format mittlerweile unterstützen, gibt es gerade beim Internet Explorer noch Probleme. Denn dieser unterstützt SVG erst ab Version 9. Da auch ältere Versionen noch stark verbreitet sind, bietet sich ein Fallback an. Mit PHP und ImageMagick kann ein solches PNG-Fallback automatisch generiert werden.
Das Prinzip unserer Fallback-Lösung ist einfach: Per „.htaccess“ wird zunächst dafür gesorgt, dass beim Aufruf von Dateien mit der Endung „.svg“ ein PHP-Script aufgerufen wird. Dieses Script prüft, welcher Browser in welcher Version verwendet wird. Beim Internet Explorer kleiner 9 wird das PHP-Script die SVG-Grafik per ImageMagick ins PNG-Format konvertieren und als solches ausgeben, bei allen anderen als SVG-Format.
Folgende zwei Zeilen in der „.htaccess“ genügen, um per „RewriteRule“ bei entsprechenden Anfragen ein PHP-Script aufzurufen:
RewriteEngine On
RewriteRule \.svg$ /svg.php [L]
Im nächsten Schritt wird die Weiterverarbeitung innerhalb des PHP-Scriptes definiert.
Das PHP-Script muss zunächst wissen, welche Datei wiedergegeben werden soll. Hierzu wird der Pfad zur angeforderten SVG-Datei ausgelesen.
$datei = $_SERVER["DOCUMENT_ROOT"].$_SERVER["REQUEST_URI"];
Die Variable „$datei“ enthält den absoluten Pfad zur SVG-Datei, welche vom Browser angefragt wird. Anschließend wird der Inhalt dieser Datei ausgelesen:
$grafik = file_get_contents($datei);
Die Variable „$grafik“ enthält nun den SVG-Quelltext. Im nächsten Schritt werden Name und Version des verwendeten Browsers ermittelt. Dies kann auf zwei Arten geschehen. Per „$_SERVER["HTTP_USER_AGENT"]“ wird der User-Agent-Header des Browsers ausgelesen. Daraus können Name und Version des Browsers abgeleitet werden.
Alternativ können die Informationen über „get_browser()“ ermittelt werden. Bei Verwendung dieser Methode müssen die Werte aus dem User-Agent-Header nicht selbst extrahiert werden, sondern werden aus der Datei „browscap.ini“ bezogen, die serverseitig zur Verfügung steht. Allerdings stellen nicht alle Provider aktuelle Browserinformationen über diese Datei bereit, sodass man sich im Einzelfall für die etwas aufwändigere Methode entscheiden muss.
$browser = get_browser();
Im Beispiel wird die Variante per „get_browser()“ verwendet. Über eine „if“-Abfrage wird nun die Ausgabe der Grafik gesteuert. Bei allen Versionen des Internet Explorers kleiner 9 wird per ImageMagick die SVG-Grafik konvertiert:
if ($browser["browser"] == "IE" && $browser["majorver"] < 9) {
$png = new Imagick();
$png->setBackgroundColor(new ImagickPixel("transparent"));
$png->readImageBlob($svg);
$png->setImageFormat("png32");
header("Content-Type: image/png");
echo $png;
} else {
header("Content-Type: image/svg+xml");
echo $svg;
}
Dazu wird per „new Imagick()“ eine neues Bildobjekt von ImageMagick erstellt. ImageMagick ist bei vielen Providern installiert und wird unter anderem von TYPO3 zur internen Bildbearbeitung verwendet. Das Bildobjekt erhält einen transparenten Hintergrund, um Transparenzen der SVG-Grafik zu erhalten. Anschließend wird die SVG-Grafik ausgelesen und ins PNG-Format konvertiert.
Da die im Browser aufgerufene Datei die Endung „.svg“ besitzt, muss dem Browser per Header explizit mitgeteilt werden, dass etwas im PNG-Format ausgegeben wird. Ansonsten wird gegebenenfalls nur der Quelltext der PNG-Datei im Browser dargestellt. Im letzten Schritt wird der Inhalt der PNG-Grafik per „echo“ ausgegeben.
Während beim Internet Explorer kleiner 9 also eine PNG-Grafik wiedergegeben wird, wird bei allen anderen Browsern die SVG-Grafik einfach nur per „echo“ an den Browser geschickt.
Damit ImageMagick SVG-Grafiken korrekt und vollständig auslesen kann, müssen einige Einschränkungen beachtet werden. So kann ImageMagick ausschließlich Inline-Stylesheets auslesen. Alles, was über einen Style-Block definiert wird, wird ignoriert. Auch Schriften, die per CSS definiert sind, kann ImageMagick nicht auslesen.
SVG-Animationen gehen bei der Konvertierung natürlich verloren. Auch dies sollte berücksichtigt werden.
Das Fallback per PHP und ImageMagick hat den Vorteil, dass der HTML-Quelltext nicht angefasst werden muss und auf JavaScript verzichtet werden kann. Außerdem muss die Fallback-Grafik nicht manuell bereitgestellt werden.
(dpe)
Zum Jahresende hin stolpere ich über zwei Dienste, die sich auf die Erstellung von Website-Hintergründen mit HTML 5 konzentrieren. Dabei setzt das Tool CSS Color Gradient Generator von ScriptsConnect auf CSS 3 und das Tool SVGeneration auf SVG. Mit mehreren Farbmodellen und Unterstützung für mehr als nur CSS kann der CSS Generator punkten, während SVGeneration bei Verläufen noch nicht Halt macht, sondern mit etlichen realistisch wirkenden Texturen zu gefallen weiß. Beide erleichtern uns die Arbeit, schauen wir also mal genauer hin…
Der CSS Color Gradient Generator stellt über eine übersichtliche Formular-Umgebung alle erforderlichen Parameter bereit, die Sie benötigen, um einen Verlauf mittels CSS3 umfassend zu konfigurieren. Dabei arbeitet der Generator in unterstützten Browsern im WYSIWYG-Modus. Auf der rechten Seite des Browserfensters wird stets verzögerungsfrei dargestellt, was die Änderung der Parameter auf der linken Seite bewirkt. Oben rechts sehen Sie dabei die grafische Preview, darunter den generierten CSS-Code, der sich mit und ohne Kommentare darstellen lässt und sich ebenfalls dynamisch ändert.
Neben CSS kann die Ausgabe auch in SCSS und Less erfolgen. Als Farbformat ist man nicht auf das übliche Hex festgelegt. Zur Wahl stehen zusätzlich jeweils zwei RGB- und HSL-Varianten. Die ansehnlichen Presets eignen sich gut als Basis für eigene Verläufe. Sie orientieren sich durchgängig an aktuell gängigen, im Sinne von populären Farben.
Der CSS Color Gradient Generator kümmert sich ungefragt um das Browser-Prefixing und liefert sogar einen Fallback für ältere Internet Exploder mit. Das Tool kann frei verwendet werden. Ist der Verlauf fertig parametrisiert, kopieren Sie schlicht den Code aus dem Textfeld rechts unten aus und fügen ihn in Ihrem Projekt wieder ein.
Haben Sie bereits einen CSS-Verlauf, den Sie visuell bearbeiten wollen, so verwenden Sie die Funktion Import from CSS unterhalb des Ausgabefensters. Im sich nun öffnenden Textfeld kopieren Sie Ihren Code ein und klicken auf Submit. Jetzt können Sie ihn in gleicher Weise wie die mitgelieferten Presets bearbeiten.
Das Tool SVGeneration ist wie der CSS Generator weiter oben eine Web-App, die kostenlos genutzt werden kann. Die fast 60 SVG-Vorlagen, die der Betreiber bereits zur Verfügung gestellt hat, können unter MIT-Lizenz, also ohne Attribution, frei Verwendung finden. Wenn Sie mögen, reichen Sie Ihre eigenen Kreationen ein. Bei entsprechender Qualität stehen die Chancen nicht schlecht, in den Bestand übernommen zu werden.
Alle Vorlagen auf SVGeneration sind über zwei Editoren frei anpassbar, dabei aufgrund des SVG-Formats nicht auf Verläufe beschränkt. So finden Sie auf der Site viele, interessante Hintergrund-Texturen, etwa in Metall- oder Stoffoptik. Auch viele Flat Designs warten darauf, von Ihnen entdeckt und bearbeitet zu werden.
Der Einstieg ist einfach. Suchen Sie über den Showcase ein Design aus, das Ihnen zusagt und klicken mittig auf Generate. Sie gelangen in einen sog. Easy Editor, mit dessen Hilfe Sie im WYSIWYG-Modus an den Texturen schrauben können. An dieser Stelle werden Sie auch über etwaige Einschränkungen des gewählten Patterns hinsichtlich der Browser-Kompatibilität informiert. Generell empfehlen die Betreiber den Einsatz von etwa Modernizr, um entsprechend unfähige Browser direkt anders behandeln zu können.
Im Easy Editor können Sie nun über Schieberegler und Farbwähler die Optik des vorgewählten Musters anpassen. Entspricht alles den Vorstellungen, downloaden Sie SVG und CSS und bauen beides auf Ihrer Website wieder ein. Der zweite Editor namens Code Edit erlaubt weitergehende Änderungen direkt am SVG-Code. Zu beachten ist dabei allerdings, dass man, soweit man hier tatsächlich Änderungen vornimmt, nicht mehr zum Easy Editor wechseln kann. Tut man es dennoch, sind die getätigten Änderungen verloren.
Zusätzlich zu den leicht anpassbaren Vorlagen finden Sie auf SVGeneration eine Sammlung von Ressourcen zum Thema, gut nicht nur für Einsteiger.
Für unsere große Schwester haben wir gemeinsam mit den Grafikern von Freevector.com ein Set von Vektor-Dateien mit Dschungelmotiven entwickelt. Wir finden die so gelungen, dass wir sie auch den Leserinnen und Lesern von Dr. Web nicht vorenthalten wollen. Immerhin findet man so etwas, anders als das nächste Speichern-Icon, nicht alle Tage. Viel Spaß mit den 30 folgenden Elementen…
9 Dschungelbewohner im groben Vexel-Look passen sich auch in modernste Designs ein, soweit das Thema generell passt, natürlich. Die Gestaltung mit farbigen Flächen, scharfen Kanten und übertriebenen Schatten erfreut sich steigender Beliebtheit. Bereits mehrfach stellten wir entsprechende Showcases zu Inspirationszwecken zusammen.
Unsere neun Geometric Animals hier erhalten Sie als separate, hochauflösende PNGs, aber auch in den Formaten Adobe Illustrator (.ai), Scalable Vector Graphics (.svg) und Illustrator PDF.
Ebenfalls in unserem Set enthalten, sind 22 eher konventionell gestaltete Dschungel-Ingredienzen. Darunter finden sich einige weitere Elemente der dortigen Fauna, aber insbesondere etliche der dortigen Flora. Immerhin kann man nur mit Tieren schlecht einen Dschungel kreieren.
Auch dieser Teil des Gesamtpakets kommt als separate, hochauflösende PNGs, aber auch in den Formaten Adobe Illustrator (.ai), Scalable Vector Graphics (.svg) und Illustrator PDF.
Das Komplettpaket besteht aus einem rund 16 MB schweren Zip-Archiv, welches Sie frei, ohne jegliche Voraussetzungen herunterladen können. Sie dürfen die Freebies komplett kostenlos, sowohl kommerziell, wie auch für private Zwecke verwenden. Sie dürfen das Paket lediglich nicht auf Drittseiten zum Download bereitstellen und/oder so tun, als hätten Sie es erstellt.
… Klicken startet den Download …
Wenn Sie sich nun unser Freebie-Zip gesichert haben, empfehle ich einen Klick rüber zu freevector.com. Freevector.com beschreibt sich selbst als "your ultimate source for free vector art, clipart, vector logos, illustrations & vector wallpaper graphics for your print projects or website". Ich nutze das Angebot seit einigen Monaten und konnte bislang noch immer thematisch passende Vektoren für das jeweilige Projekt finden. Insofern kann ich nichts anderes als eine Empfehlung aussprechen.
Aber, schauen Sie selbst…
Und wieder einmal können wir unseren Leserinnen und Lesern in Kooperation mit unserer großen Schwester Noupe und den Betreibern der Design-Ressourcen-Suchmaschine Freepik aus dem sonnigen Spanien einen Satz Icons schenken. Heute haben wir 250 Vektor-Symbole, nämlich das „Ultimate World Monuments Icons Pack“ zu bieten. Jedes dieser Icons repräsentiert ein berühmtes Gebäude oder anderen prominenten Ort aus aller Welt. Sämtliche Piktogramme sind vektor-basiert und können für jede Art von Projekt, ob privat oder kommerziell eingesetzt werden. Nur bekommen, bekommen können Sie sie nur hier (und bei Schwesterchen Noupe)…
Sie kennen Freepik noch nicht? Unter den Links zum Beitrag finden Sie alle Dr. Web-Artikel zu den verschiedenen Projekten der Spanier zum Nachlesen. Erst vor knapp zwei Monaten konnten wir Ihnen das Flat Icon Set mit 200 Symbolen exklusiv anbieten.
Freepik, fantastische Suchmaschine für Design-Ressourcen
Die 250 Symbole aus unserem heutigen Set sind etwas besonderes und entsprechen so gar nicht dem Klischee des durchschnittlichen Symbolsatzes. Das 7,9 MB schwere Download-Zip beinhaltet nicht nur alle Piktogramme im PNG-Format bei voller Transparenz und in den Größen 32, 64 und 128 Pixel im Quadrat. Vielmehr erhalten Sie zudem die Rohdateien in den Formaten AI und EPS, aber auch als PSD und SVG. Wenn das nicht vollständig zu nennen ist, was dann?
Die Vekordaten unterliegen keinen Restriktionen, alle Pfade sind einzeln bearbeitbar. Lediglich die pro Icon erfolgte Gruppierung muss in Illustrator hierzu aufgehoben werden. Damit steht der freien Anpassbarkeit der Bildchen auf den eigenen Bedarf, etwa die eigenen Farben oder andere Größen und Formate, nichts im Wege.
Alle Icons im Überblick
Unser Monumente-Bundle beinhaltet berühmte Gebäude und Sehenswürdigkeiten aus aller Welt. Neben den üblichen Verdächtigen, wie der Freiheitsstatue und dem Weißen Haus, finden sich Lokationen aus Indonesien, China, Europa, Süd-Afrika, Indien, Russland oder Japan – um nur einige zu nennen. Dieses Pack wird jeden Globetrotter und Weltenbummler erfreuen, sowie sehr nützlich für bestimmte Projekte mit internationalem Bezug sein.
Alle Icons liegen zusätzlich als Vektoren bei
Hinsichtlich der lizenzrechtlichen Beschränkungen gibt es ebenfalls keine Überraschungen. Sie können die Symbole frei für private und kommerzielle Zwecke ohne Einschränkungen verwenden. Sie dürfen das Set jedoch nicht auf anderen Websites zum Download anbieten und/oder so tun, als seien Sie der Urheber. Diese Regeln des Fairplay schränken indes nicht wirklich ein.
Insofern: Viel Spaß mit unserem 250 Ultimate World Monuments Icons Pack aus dem Hause Freepik…
Vincent Le Moign aka Webalys ist kein Unbekannter unter Webdesignern. Erst kürzlich stellten wir Ihnen sein Projekt Agile Designers, ein Sammelbecken hochwertiger Design-Ressourcen vor. Darüber hinaus erstellt und vertreibt Webalys das Riesenset Minicons mit rund 1.500 einzelnen Piktogrammen. Massenhaft Freebies säumen seinen Weg. Heute stellen wir Ihnen mit Fontastic.me Le Moigns Interpretation eines gelungenen Icon Font-Baukastens vor. Dieser ist nicht nur leistungsfähig, sondern zudem kostenlos…
Icon Fonts setzen sich durch. Anstelle einzelner Grafiken oder Sprite-Sets mit mehreren Grafiken in einer Datei werden zunehmend Icons in der Form von Schriftarten eingesetzt. Diese erzeugen nicht für jedes Icon einen Request und müssen vor allem nicht für unterschiedliche Auflösungen in unterschiedlichen Varianten vorgehalten werden. Die freie Skalierbarkeit der Icon Fonts prädestiniert sie für den immer wichtiger werden Einsatz auf HiDPI-Geräten, wie dem Nexus 10 oder dem iPad5 oder der neuen Riege von FullHD-Smartphones.
Nun gibt es eine ganze Reihe unterschiedlicher, qualitativ hochwertiger Icon Fonts am Markt. Was aber, wenn man nur einige wenige Icons aus einem Font mit 300 Zeichen verwenden will oder ergänzend noch einige Symbole aus Font X, Y und Z verwenden möchte? In diesen Fällen ist es sinnvoll, sich einen angepassten Icon Font zu konfektionieren, der lediglich die tatsächlich verwendeten Piktogramme enthält.
Genau zu diesem Zweck gibt es ein paar Dienste, denen sich jüngst ein weiterer zur Seite stellte. Mit Fontastic.me tritt ein neuer Dienst an den Start, der sich als direkter Konkurrent zu Icomoon und Fontello positioniert.
Sowohl IcoMoon, wie auch Fontello stellten wir unseren Leserinnen und Lesern bereits einzeln vor. Die Links zu den entsprechenden Artikeln finden Sie weiter unten in den Links zum Beitrag. Nur kurz zur Einordnung sei in Erinnerung gerufen, dass es sich bei IcoMoon um ein kommerzielles Angebot handelt, das auch in der Lage ist, Icons als Grafikdateien zu liefern, während Fontello ein freies Projekt ohne kommerziellen Hintergrund ist und via Github sogar als selbstgehostete Lösung eingesetzt werden kann.
Von der Handhabung und in Ansätzen auch hinsichtlich des Designs wirken Fontastic.me und Fontello extrem ähnlich. Fontastic.me integriert jedoch knapp 2.000 einzelne Icons, Fontello liegt deutlich darunter. Genau wie IcoMoon ist Fontastic.me in der Lage, vom User hochzuladende SVG-Dateien in den eigenen Icon Font zu integrieren. Fontello bietet diese Möglichkeit nicht.
Wollen Sie sich einen eigenen Font mit Fontastic zusammenstöpseln, so bedarf es lediglich einer unkomplizierten Registrierung mit Festlegung einer E-Mail-Adresse und eines Passworts. Danach werden Sie ohne Umschweife in den Font-Baukasten weitergeleitet. Hier greifen Sie wie in IcoMoon und Fontello per Mausklick die gewünschten Symbole auf, die dann unter einem frei zu vergebenden Namen als Custom Icon Font gesammelt werden.
Wie bei der Konkurrenz ist die Festlegung individueller Unicode-Zeichen für die Ansprache der Piktogramme vorgesehen. Weiterhin lassen sich die CSS-Klassen, die zur Ansteuerung der Icons über das CSS verwendet werden können, anpassen.
Eine Besonderheit von Fontastic.me ist die Möglichkeit, Icons per Data-Attribut, als Alternative zur klassenbasierten Ansteuerung, zu platzieren. Hierzu vergibt man einen Shortcut für jedes Zeichen und ruft das Icon entsprechend beispielsweise so auf:
Text neben Icon
Neben dem Import einzelner SVG-Dateien erlaubt Fontastic.me auch den Import kompletter SVG-Fonts. Der Dienst funktioniert nahezu intuitiv und kommt mit ausführlichen Erläuterungen zur Verfahrensweise daher, weshalb er sich ausgesprochen gut für Designer eignet, die sich dem Thema Icon Fonts eben erst nähern. Fontastic.me soll auf Dauer kostenfrei bleiben. Hinsichtlich der Nutzungsrechte an den integrierten Icon Fonts muss man im Zweifel ein bisschen aufpassen. Nicht alle sind voll kommerziell verwendbar, die Lizenzen sind jedoch prominent genannt.
Fontastic.me wird in meinem Umfeld aufgrund der erweiterten Möglichkeiten und der noch einen Tick komfortableren UI das bisher favorisierte Fontello ablösen. Was halten Sie von dem Dienst?
Dank des Canvas-Elementes und der Zeichenfunktionen von JavaScript ist es möglich, Grafiken im Browser zu berechnen und darzustellen. So kann man Zeichnungen per Animation auf eine Website zeichnen. Wer eine solche Animation nicht selbst programmieren will, findet im jQuery-Plugin Lazy Line Painter ein hilfreiches Tool, welches diese Aufgabe für SVG-Grafiken per JavaScript im Browser erledigt.
Lazy Line Painter
Und so arbeitet das Tool: Die zu animierende Grafik muss für den Lazy Line Painter zwingend im SVG-Format vorliegen. Anwendungen wie Illustrator bieten Exportfunktionen für dieses Format an. Zu beachten ist, dass die Grafik ausschließlich aus nicht geschlossenen Pfaden bestehen darf. Flächen und Verläufe sind also tabu. Bei geschlossenen Pfaden (beispielsweise Kreise und Rechtecke) muss vor dem Export der Pfad an einem Punkt geöffnet werden. Optisch verändert sich dadurch nichts. Für das PLugin ist der Unterschied lebenswichtig. Es weiß dann nämlich, an welcher Stelle des Pfades die Zeichenanimation beginnen soll.
So funktioniert das Plugin
Farbe und Konturstärke des Pfades werden ignoriert und direkt im Plugin angegeben. Da die SVG-Datei nicht direkt dem Plugin übergeben werden kann, muss sie vorher in eine JavaScript-Variable umgewandelt werden. Über die Website des Plugins ist es möglich, SVG-Dateien hochzuladen und umzuwandeln. Die Variable mit allen Pfaden und ihren Koordinaten kann anschließend an das Plugin übergeben werden. Die SVG-Variable sieht dabei in etwa so aus:
var svgData = {
"demo": {
"strokepath": [{
…
}],
"dimensions": {
"width": 349,
"height":277
}
}
Sie wird über folgenden Aufruf an das jQuery-Plugin übergeben:
$("#zeichnung").lazylinepainter({
"svgData": svgData,
"strokeWidth": 7,
"strokeColor": "#de8f8f"
})
Neben der Variable werden hier auch die Konturstärke und -farbe definiert. Im letzten Schritt muss das animierte Zeichnen noch gestartet werden:
$("#zeichnung").lazylinepainter("paint");
Damit das Plugin läuft, muss jQuery eingebunden sein. Außerdem wird die JavaScript-Bibliothek Raphaël benötigt, welche spezielle Funktionen zum Zeichnen von SVG-Grafiken bereitstellt.
Fazit: Mit wenig Aufwand lassen sich mit Unterstützung des Lazy Line Painters komplexe Grafiken im Browser zeichnen, ohne dass selbst groß Hand an die zu animierende Grafik angelegt werden muss.
(dpe)