Moderne Zeiten

24 Mai 2010

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