Halbzeit im SVG-Jahr 2010

geschrieben von Pawel

Die Halbzeit ist Anlass für mich eine kleine Bilanz zu ziehen. Ich nehme damit Bezug zu meinem Artikel vom Anfang des Jahres.

Warum setzt sich der Standard nach 9 Jahren durch?

Der Brower aus Redmond ist zwar nicht mehr in der Lage „...sie alle zu knechten...“, hat aber anhaltend eine hohe Bedeutung. Das hat auch mit der hohen Verbreitung des Microsoft-Betriebssystems zu tun. Das der IE 9 SVG direkt unterstützen wird, hilft der Verbreitung des Webstandards SVG.

Egal wie sich jeder Webentwickler in der Auseinandersetzung Apple vs. Adobe positioniert, die Kunden wünschen Seiten, die auch auf dem Iphone und dem Ipad gut aussehen. Auf der SVG-Developer-Liste stellen sich jetzt wiederholt Newcomer vor, die bisher für Flash entwickelt haben.

Was muss ein Gestalter beachten?

(vermutete) Browserverteilung Ende 2010

Am Ende des Jahres werden die Browserstatistiken vermutlich so aussehen:

• IE bis 8 30%
• IE9 10%
• Firefox4 30%
• Chrome 15%
• Safari 6 %
• Opera 10.6 6%

Design

Safari und der IE verstehen keine filter-Anweisungen. Das betrifft auch den Unschärfefilter. Als workaround kann auf einen Farbverlauf ausgewichen werden. Ansonsten gilt das selbe, wie bei CSS und HTML: Browser, die höhere Darstellungsfähigkeiten haben, zeigen die Grafiken eben etwas hübscher an.

Zum Gestalten der Grafiken eignen sich der Adobe Illustrator und Inkscape. Beide Programme haben eine unterschiedliche Logik und erfordern eine gewisse Einarbeitungszeit. Beim Printdesign spielen die Dateigrößen von Vektorgrafiken normalerweise keine Rolle, da sie im Vergleich zu den Fotos verschwindend klein sind.Dateigrößen über 150 kb sind im Web jedoch nicht hinnehmbar.

Der Optimierungsprozess beginnt in der Gestaltung schon mit einer vernünftigen Reduktion auf die wesentlichsten Gestaltungselemente. Im AI ist die Grafik unbedingt für das Web abzuspeichern und in Inkscape ist die Einstellung optimiertes SVG zu wählen.

Einbettung

Inline – direkt ins (X)HTML

SVG können Inline in ein HTML5, XHTML5 und XHTML1.1 eingebettet werden. In der letzten Variante müssen alle Elemente den Namespace mitführen. Aus <svg> wird dann <svg:svg>, aus <g> wird <svg:g> u.s.w. Das geht zwar auch per Suchen und Ersetzen ist aber unkomfortabel. Alle o.g. Browser zeigen bei XHTML5 die eingebetteten Grafiken an. Erforderlich ist dafür, aber eine weitestgehende Kontrolle über das Markup, da jeder Fehler zu einem Lesefehler der Seite führt. Der Einsatz eines WYSIWYG-Editors scheidet damit aus.

Firefox4 und IE9 zeigen direkt eingebettete Grafiken auch bei HTML5 an. Durchsetzen wird sich diese spannendste Form, wenn Opera und die Webkitbrowser es auch darstellen.

Einbettung per object-Tag

Diese Variante funktioniert in alle Browsern.

<object type="image/svg+xml" data="Grafik.svg"><img src="Grafikt.png" alt="Grafik" /></object>

Bei Infografiken läßt sich das uneingeschränkt empfehlen. Anhaltend haben die Webkitbrowser einen Bug, dass sie dem Hintergrund eines so eingebetten SVG unbedingt einen weißen Hintergrund mitgeben müssen. Sollte man die gesamte eckige Pracht nicht so mögen, kann mit einer anderen Hintergrundfarbe ein bisschen getrickst werden. Unter Linux kann mit einem beherzten

gzip -c < Grafik.svg t> Grafik.svgz

die Grafik gepackt werden. Damit diese angezeigt wird, muss aber der Apache dies verstehen, was am einfachsten mit einer Anpassung der .htaccess gelingt:

AddType image/svg+xml svgz
AddEncoding gzip .svgz 

Einbettung per CSS

Kaum zu glauben aber wahr. Am Ende des Jahres sollen dies alle Browser beherrschen. Opera und Webkit können das schon länger, die Preview des IE beherrscht es und für den Firefox4 steht es auf der ToDo-Liste. Das geht sogar mit data/uri. Ich rate im Moment aber noch davon ab, komplette Hintergründe damit zu gestalten. Opera 10.6 „friert“ dabei regelmäßig ein.

Eine empfehlenswerte Testseite findet sich bei deveria.com. Dort können alle Browser auf ihre Fähigkeiten überprüft werden. Zusätzlich werden noch weitere Einbettungsformen vorgestellt.

Fazit:

Am Ende des Jahres gibt es eine breite Unterstützung des Formates durch die Browser. Damit sind jetzt die Gestalter gefragt, um neue Ideen umzusetzen.

Kategorie: Ideen , Layout , SVG | Trackbacks (0) | Permalink

Spielerei in SVG

geschrieben von Pawel

SVG ist in diesem Jahr der erhoffte Durchbruch gelungen. Beim Gestalten einiger Grafiken habe ich einige Überraschungen erlebt. Die SVG-Unterstützung ist nicht nur ein kontinuierlicher Prozess, der Schritt für Schritt der Gesamtstandard implementiert. Alle Browserhersteller setzen andere Schwerpunkte. Jeff Schillers Blog stellt die aktuelle Fähigkeiten aller Browser dar.

Idee

Mich hat gereizt, ob sich durch das Ausnutzen der Unterschiede eine Browserweiche nur in SVG möglich wäre. Hier ist das aktuelle Ergebnis:

Demo

Die Weiche unterscheidet zwischen folgenden Browsern:

• Safari 4+5
• Chrome 5
• Firefox 3.6
• Firefox 4
• Opera 10

Beschreibung:

Zunächst wird ein weisses Rechteck als Hintergrund definiert. Weiss ist zwar häufig die Standardfarbe. Darauf wollte ich mich aber nicht verlassen. Die jeweiligen Browsernamen werden in Textfeldern definiert und übereinander gestapelt. Der Kniff besteht darin, dass der jeweilige Browser nur seinen Text anzeigen sollte.

Chrome 5 versteht schon einige filter und unterscheidet sich dadurch von Safari. Ich habe als Schriftfarbe weiss festgelegt. Dadurch ist die Schrift auf dem Hintergrund nicht sichtbar. Durch Verwendung von feFlood erhält der Text für Chrome, jedoch nicht für Safari eine andere Farbe für den Textr. Chrome zeigt Elemente nicht an, wenn auf diese und das gruppierende Element ein filter angewendet sind.

Firefox 3.6 versteht noch keine Animationen über die Beschreibungssprache SMIL. Über diese Anweisungen wird der Text für die Webkitbrowser eingeblendet, welches Firefox nicht interpretieren kann. Gleichzeitig wird via SMIL festgelegt, dass der Text für den Firefox 3.6 ausgeblendet werden soll, was er nicht interpretiert und dadurch sichtbar bleibt.

Safari 4+5 zeigen auch den Text an, der für Chrome unsichtbar wird, da filter komplett ignoriert werden.

Firefox 4 gewinnt wesentliche SMIL-Fähigkeiten dazu und interpretiert filter beinahe so gut, wie Opera. Ich habe ausgenutzt, dass man auch filter animieren kann. Der schon oben genutzte feFlood wird kombiniert mit feComposite, wodurch der filter im Chrome nicht sichtbar wird. Zusätzlich wird er noch per Animation eingeblendet. Dadurch wird er im Firefox 3.6 nicht gerendert. Damit wird ein weisse Schicht über die anderen Texte gelegt. Aus einem weiteren Rechteck wird mittels clipPath nur der Text "ausgestanzt".

Opera 10 ist der SVG-Browser schlechthin. Auch bei Opera führt der doppelt angewandte filter für Element und Elternelement (wie bei Chrome beschrieben) dazu, dass es nicht dargestellt wird. Als bisher einziger Browser beherrscht er aber die Verwendung von externen Text via tref. Durch den verwendeten Platz überdeckt es noch sichtbare Texte.

Das Beispiel ist keine echte Browserweiche oder ein Hack. Er funktioniert zwar ohne Javascript, dient aber mehr der Demonstrationen der unterschiedlichen Fähigkeiten der Browser, die man als Gestalter berücksichtigen muss.

Kategorie: CSS , Ideen , Layout , SVG | Trackbacks (0) | Permalink

Moderne Zeiten

geschrieben von Pawel

Der Titel ist durchaus eine Hommage an den Filmklassiker. Wahrscheinlich hätte Chaplin bei einer Neuverfilmung stumm an einem Rechner gesessen und verzweifelt unter Zeitdruck an einem Designproblem gearbeitet.

Ein Charme des HTML5-Entwurfes besteht in der Lösung einiger dieser Probleme. Die Einbettung von SVG in eine HTML5-Dokument gelingt einfach durch copy&paste. Im Detail stecken einige Stolpersteine, wie hier im Blog gut zu sehen ist, gelingt die Einbindung von Inlne-SVG aber problemlos.

In der Theorie sollte ein so eingebettes SVG auch im mime-Type text/html funktionieren. Die meisten Browser zeigen es aber nur bei application/xhtml+xml an. Ausnahmen sind bisher Firefox (bei html5.enabled) und die IE9 Plattform Preview. Firefox4 und IE9 werden es direkt unterstützen. Für den Übergang bleibt nur XHTML5 zu verwenden. Am Einfachsten geht das mit einem entsprechenden Eintrag in der .htaccess-Datei des Apache-Webservers.

RewriteCond %{HTTP_ACCEPT} application/xhtml+xml
RewriteCond %{HTTP_ACCEPT} !application/xhtml+xmls*;s*q=0
RewriteCond %{REQUEST_URI} .html$
RewriteCond %{THE_REQUEST} HTTP/1.1
RewriteRule .* - [T=application/xhtml+xml]

Das hat einige Besonderheiten, die zu berücksichtigen sind. So können Entitäten nicht verwendet werden. Wer also wysiwyg-Editoren auf seiner Seite verwendet (verwenden muss), sollte lieber noch die Finger davon lassen.

So könnte ein Beispiel-Markup aussehen:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta charset="utf-8" />
  <title>
Example-Markup
</title>
<meta name="geo.region" content="DE-ST" />
...
</head>
<body>
<h1Headline</h1>
<ul id="nav">
<li>...</li>
...
</ul>
<svg id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
...
<filter id="..."> 
...
</filter>
</defs>
<switch>
<path id="..." d="..." />
<foreignObject width="320" height="400">
<!--[if lte IE 8]>
Content for IE
<![endif]-->
</foreignObject>
</switch>
</svg>
<div id="content">
<p> Other HTML-Content</p>
</div>
</body>
</html>

Es können durchaus mehrere SVG auf einer Seite verwendet werden. Einmal definierte Gradienten, Muster und Filter können in allen(!) Grafiken verwendet werden.Alle Styles und Scripte sollten in die zentralen Dateien im <head> eingebunden werden. Auch gegen den Einsatz von jquery spricht nichts.

Im Beispiel-Markup wird switch in Verbindung mit foreignObject verwendet, um Browsern die SVG nicht beherrschen, alternative Inhalte anzubieten. Dabei kann prinzipiell jedes HTML verwendet werden. Ich habe noch zusätzliche Conditional Comments verwendet, um die alternativen Inhalte nur in den IE zu laden, wenn diese kein Plugin installiert haben.Normale <text>-Elemente der SVG werden allerdings dargestellt.

Wem das Alles zu theoretisch vorkommt, kann sich das auf meiner Portfolioseite ansehen. Dort wird dem alten IE sogar noch eine alternative Vektorgrafik als VML angeboten. Die modernen Zeiten sind da und uns bleibt nur, gemeinsam auf der Straße dem Morgen entgegen zu gehen.

Kategorie: Layout , SVG | Trackbacks (0) | Permalink