molily: (HTML5) inline-SVG für Text-Layout (mit Kringeln und so)

Beitrag lesen

Hallo,

Aber ich sehe gerade, das ist SVG:SVG mit Namespace. Das ginge zwar
auch, aber ich meinte wirklich inline-SVG (as in HTML5).

Es ist schon richtig, was du sagst, aber du verwechselst XHTML (application/xhtml+xml) mit HTML (text/html). Alle Beispiele, die du verlinkt hast, sind »echtes« XHTML.

Die SVG-fähigen Browser, und das sind ja alle außer IE < 9, können schon seit einiger Zeit Inline-SVG. Allerdings nur, wenn das Dokument als »echtes« XHTML mit dem MIME-Type application/xhtml+xml (oder einem XML-Typ wie application/xml) gesendet wird. Dann muss es sich um ein wohlgeformtes XML-Dokument handeln und Elemente aus anderen Namensräumen wie SVG müssen entsprechend mit Namespace-Angaben versehen sein.

Das war seither der Sinn von XHTML: Das Mischen von Elementen unterschiedlicher Vokabulare mittels Namensräumen. Das kannst du machen, ja. Das funktioniert ist bis auf den IE ziemlich robust, allerdings musst du dann alle weiteren Eigenheiten von »echtem« XHTML in Kauf nehmen. Was schwierig ist, wenn man HTML gewohnt ist.

Du hast jedoch von Inline-SVG in HTML5 gesprochen. HTML5 hat zwar weiterhin eine XML-Variante, in der nach wie vor Namensräume verwendet werden und Fremd-Markup einbettet werden kann. Allerdings definiert HTML5 erstmals das Einbetten von SVG *ohne* Namensraum-Angaben direkt in HTML-Code, der mit text/html gesendet wird und mit einem speziellen HTML5-Parser (also keinem XML-Parser) verarbeitet wird.

Also:
1. HTML5 in der Serialisierung, wie sie in http://dev.w3.org/html5/spec/syntax.html definiert ist
2. MIME-Typ text/html
3. Direkteinbettung von SVG über das svg-Element ohne Namensraum-Angabe

DAS funktioniert wie gesagt noch nicht in den aktuellen Browserversionen. Die XML-Plattform ist da viel etablierter.

Dennoch, mein Opera 10.60 kann jetzt schon mit echtem Inline-SVG
umgehen. Ich sehe hier die kleine Parkbank:
http://intertwingly.net/blog/2006/06/17/Inline-SVG
Und diesmal ist es wirklich nur ein "<svg>" im normalen HTML-Body.

Mir wird diese Seite als application/xhtml+xml ausgeliefert.
Und die SVG-Bilder werden mit

<svg
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="100" viewBox="190 40 10 200">

usw. eingebettet, also mit xmlns-Angabe.

Grüße, Mathias