Budoucnost vektorové grafiky na webu, 6. část

Martin Hejral 27. dubna 2006

Další
článek V Česku se bude testovat pilotní projekt pro ověření pravosti MS Office SDÍLET NA FACEBOOKU TWEETNOUT

Možnosti a výhody standardní vektorové grafiky SVG v moderních prohlížečích Opera 9 a Firefox 1.5 jsem vám předvedl v předcházejících textech této série. Dnes si ukážeme, že zmíněné výhody lze alespoň částečně využít i v současnosti dominantním webovém prohlížeči Explorer.

Obrátíme proti Microsoftu jeho vlastní zbraně a zneužitím jeho proprietárních technologií a zásuvného modulu ASV 3 [1] doplníme do prohlížeče Explorer (od verze 5.5) chybějící schopnost zobrazovat stránky tvořené kombinací jazyků XHTML+SVG (tzv. technika "XML mixed namespaces"). IE není sice zrovna nejmodernější, ale díky jeho automatické instalaci v "de facto" monopolním operačním systému s ním prostě počítat musíme.

(Prosím neberte předcházející prohlášení jako důvod k nějakým vášnivým debatám. Jedná se o prosté konstatování faktů, určité danosti, která jednoduše existuje.)

Kombinace jazyků XHTML+SVG v jednom dokumentu

Jako vzorovou stránku použiji můj oblíbený příklad s třemi průhlednými kruhy. Ten pochází ve své originální podobě ze stránek Mozilla SVG [3]. V souvislosti s tímto kódem se poctivě přiznávám k chybě v mých dřívějších textech spočívající v tom, že jsem uvedený demonstrační příklad automaticky převzal ze stránky Mozilla SVG projektu, aniž by mne napadlo v něm hledat nějaké chyby. V tomto XML kódu [4] se totiž nacházelo několik věcí ne úplně splňujících podmínky normy SVG - ty mj. způsobily problémy prohlížeči Opera 9.

Začněmež tedy opravenou ukázkou, představující stránku s prvky v jmenných prostorech XHTML+SVG a plně odpovídající standardům W3 [2].

Na snímku jsou prohlížeče Opera 9 a Camino 1 (založeno na jádru Gecko, takže vykreslení je ekvivalentní Firefoxu 1.5) (XML ukázka)

Aktuálně (2006-3) jsem otestoval bezproblémové zobrazení v prohlížečích: Firefox 1.5 (Camino 1), Opera 9, Safari 2 (pozor, SVG zatím není ve standardní instalaci Safari).

Kdosi ve firmě MS bohužel rozhodl, že vektorová grafika na webu není důležitá, takže IE standard SVG nesplňuje. Chybějící funkcionalitu proto musíme doplnit pomocí známého zásuvného modulu ASV 3 od Adobe [1].

Ještě předtím ale narazíme na první překážku...

Problém zvaný přípona

Internet Explorer je schopen diskutované XHTML+SVG dokumenty zobrazit pouze v případě, že mají příponu ".htm/.html". Zatímco Mozilla Firefox a všechny ostatní prohlížeče vyžadují správnější ".xml/.xhtml".

Smutným faktem je, že při testování na pevném (lokálním) disku počítače, tento konflikt nevyřešíme.

Pro vývoj a lokální testování takovýchto stránek doporučuji si vybrat standardní přípony .xml/.xhtml a používat Firefox 1.5 nebo Operu 9.

Při umístění grafických dat na serveru lze problém naštěstí vyřešit / obejít.

Úprava nastavení serveru

Rozlousknout tento oříšek nám pomůže trocha čarování na webovém serveru. Kouzlo spočívá ve speciální úpravě nastavení HTTP serveru, kterou přebírám pro Apache z encyklopedie wiki.svg.org.

Výchozí předpoklad: Soubory se smíšenými jmennými prostory XML a vloženými SVG prvky mají příponu ".xhtml".

HTTP hlavičky pro náš smíšený obsah XHTML+SVG nejdříve nastavíme jako obyčejné "text/html", čímž dosáhneme kýženého správného zobrazení v prohlížeči IE. Pro modernější prohlížeče, akceptující XML, pomocí "rewrite" funkce změníme MIME identifikaci na korektní "application/xhtml+xml".

Změna nastavení v Apache se realizuje přidáním následujících řádků do hlavního konfiguračního souboru ".htaccess":

AddType text/html .xhtml
RewriteEngine on
RewriteBase /
RewriteCond %{HTTP_ACCEPT} application/xhtml\+xml
RewriteCond %{HTTP_ACCEPT} !application/xhtml\+xml\s*;\s*q=0
RewriteCond %{REQUEST_URI} \.xhtml$
RewriteCond %{THE_REQUEST} HTTP/1\.1
RewriteRule .* - [T=application/xhtml+xml]

Ověření hlaviček, jež posílá konkrétní server, lze provést například s pomocí stránek web-sniffer.net.

Přenesení zpracování SVG prvků na plug-in

V tomto okamžiku už jsme vlastně za vodou - ta nejhorší část je za námi. Uděláte však dobře, když nyní zbystříte pozornost, neboť právě teď přichází na pořad vyzrazení málo známého, o to však důležitějšího triku.

Nařídit Exploreru aby předal zpracování elementů v jmenném prostoru SVG-XML na zásuvný modul ASV (verze 3) [1] je v podstatě velice jednoduché a postačí nám k tomu následující dva řádky:

Tento kód lze jednoduše umístit nejlépe někam na počátek HTML dokumentu.

Zobrazení XHTML+SVG v prohlížeči IE6 ve Windows (XML ukázka)

(Rád bych ještě zmínil, že tento sice vpravdě jednoduchý, o to však silnější a současně velmi málo dokumentovaný postup, poprvé zveřejnil pravděpodobně Alan Schepers [5]. Hledal jsem rovněž podrobnosti přímo u Adobe, ale nalezl jsem jen stručnou, absolutně nedostačující poznámku [6]. Viz též zmínka na stránkách propagátora SVG Maxe Dunna [7].)

Omezení kombinace IE+ASV

Právě představený trik sice umožňuje zastaralému prohlížeči zobrazení dokumentů se smíšenými jmennými prostory XHTML+SVG, ale jisté vlastnosti SVG musíme oželet.

Nejvýraznější omezení se objeví při tvorbě interaktivních dokumentů. Události lze totiž (při tomto způsobu vkládání vektorové grafiky) detekovat a jejich ovladače připojit pouze na kořenové prvky "svg" vkládaných grafických skupin:

Nezapomeňte na toto omezení! IE používá také trochu jiný způsob zpracování událostí (mj. proměnná "evt" není definována) - je ovšem zbytečné abych problém rozebíral, to už učinili na jiných místech mnozí přede mnou. Osobně se mi velmi líbila např. práce Michala Kusýna.

Zápis jmenných prostorů

Zpracování jmenných prostorů v IE je - poněkud překvapivě - ne tak úplně standardní. Ve výsledku je proto vždy nutné před každý grafický prvek povinně zapsat prefix "svg:". Jiné způsoby zápisu fungovat nebudou!

Co když podpora SVG v klientském prohlížeči chybí?

S výše popsaným řešením ale nemůžeme být spokojeni. Bylo by totiž správné informovat uživatele, že by si měli doinstalovat podporu SVG, pokud v jejich browseru chybí.

Informace o instalaci

Dle mého názoru je nejčistším řešením umístit informaci o chybějícím zásuvném modulu, resp. podpoře SVG právě dovnitř elementu "object":

<svg:svg viewBox="0 0 400 300">
<svg:desc>
(Slovní popis grafiky se zobrazí mj. v případě chybějící podpory SVG v prohlížeči!)
</svg:desc>
...
</svg:svg>

Je třeba dodat, že soubor "svg.svg" v atributu prvku neobsahuje nic než standardní hlavičkové deklarace. Kód byl pečlivě vyladěn a jeho funkce otestována v Exploreru 6 (WXP SP2, W2000), Mozille i Firefoxu (různé verze) / Caminu 1, Opeře 9 i v Safari 2.

Ukázka obsahující korektní alternativní obsah a upozornění na chybějící podporu SVG (Opera 9 ve Windows NT) (XML ukázka)

Zpětná kompatibilita

I přestože informovat čtenáře o vzniklém problému je dobrý nápad, v mnoha případech se šikovně napsané stránky vytvořené touto SVG technikou bez problému zobrazí i v prohlížečích bez podpory SVG.

Uživatelé neuvidí žádné "rozlámané puzzle", místo toho se dotyčné prvky bezproblémově degradují na obyčejný textový obsah. Ale lepší než tisíc slov je vždycky jeden jednoduchý příklad...

Animovaný vektorový titulek v SVG

Popsal jsem pomocí standardu SVG [2] jednoduchou animovanou sekvenci:

1. text přilétne jakoby zpředu
2. text se "pohupuje"
3. text se zmenší do ztracena

Takto vypadá odpovídající SVG-SMIL kód:

SVG prvek dále uzavřeme do HTML prvku "h1". Takže třeba v Opeře 9 dostaneme úžasný animovaný efekt, ve Firefoxu 1.5 statický SVG text a bez podpory vektorů titulek "h1" zformátovaný podle CSS předpisu.

Nesnesitelná lehkost SMIL

Nakonec si neodpustím propagandistickou poznámku na téma kombinace SVG-SMIL ;-)

V předcházející ukázce kódu si můžete povšimnout mimo jiné, jak elegantně a naprosto přirozeně se zapisuje časování a vzájemná časová návaznost jednotlivých animačních fází (tj. spouštění jednotlivých prvků "animate").

Zápis "begin=`5s;anim3.end`" např. říká: Spusť tuto animaci jednak v čase 5s, jednak kdykoliv dojde k ukončení animační fáze s "id=`anim3`".

Dalším charakteristickým rysem SVG-SMIL je možnost animace téměř libovolného atributu. Navíc lze v jednom časovém okamžiku současně animovat neomezený počet různých atributů ("anim1" a "anim1b" v ukázce), což dohromady dává v podstatě neomezené kreativní možnosti. Zúročená zkušenost ze starších technologií je znát. Kdo někdy zkoušel vytvářet a později modifikovat složitější sekvence ve Flashi jistě ví, co mám na mysli.

Vyzkoušejte si ukázku obsahující animovaný text včetně ošetření chybějící podpory SVG. (Animace momentálně zvládá pouze Opera 9 nebo ASV plug-in.)

Vkládání externích souborů SVG

Nakonec ještě ukázka správného vkládání externích souborů SVG pomocí elementu "object":

Tato standardní cesta podle normy HTML se velice doporučuje i proto, že poskytne korektní alternativní obsah prohlížečům neschopným zobrazit připojený obsah - v našem případě vektorovou grafiku.

Moderní prohlížeče se zabudovaným SVG enginem zobrazí vektorovou grafiku přirozeně samy, jinak dojde k použití zásuvného modulu. Není-li nainstalován ani ten, zobrazí se alternativní obsah umístěný uvnitř prvku "object".

Problémový Explorer

Ve "windowsovském" Exploreru je ovšem - díky bezpečnostním problémům prohlížeče v kombinaci s technologií ActiveX a dík, přinejmenším podivnému, přístupu programátorů Adobe - třeba použít zastaralý prvek "embed":

<embed src="vlozena_grafika.svg" width="..." height="..."
pluginspage="http://www.adobe.com/svg/viewer/install/">
</embed>

(Můžete vzít jed na to, že přestože IE prvek "object" zná, narazili byste brzy v takto vložených SVG grafikách na nefunkční skripty a nenačítající se externí obrázky.)

Shodneme se asi všichni na tom, že tohle je hodně, ale hodně moc nehezké. Pokusme se tedy tuto hrůzu co nejvíce omezit.

Osobně doporučuji do boje proti tomuto nestandardnímu chování nasadit další nestandardní prvek IE ;-) Totiž tzv. podmíněný komentář. Pomocí kterého nabídneme Exploreru zastaralý element "embed" a všem ostatním prohlížečům standardní "object". Výsledné a hlavně fungující řešení vypadá tedy takto:

<!––[if IE]>
<embed src="svgfile.svg" width="..." height="..."
       pluginspage="http://www.adobe.com/svg/viewer/install/">
</embed>
<noembed>
<p>Pro zobrazení vektorové grafiky prosím použijte:</p>
<ul>
<li><a href="http://my.opera.com/desktopteam/">Opera 9</a></li>
<li><a href="http://www.mozilla.com/">Firefox> 1.5</a></li>
<li><a href="http://www.caminobrowser.org/">Camino 1</a></li>
<li><a href="http://nightly.webkit.org/">Safari 2 - SVG build</a></li>
<li>
    <a href="http://www.adobe.com/svg/viewer/install/">
      Explorer od verze 5.5 + zásuvný modul ASV3
    </a>
</li>
</ul>
</noembed>
<![endif]––>
<![if !IE]>
<object data="svgfile.svg" type="image/svg+xml"
width="..." height="...">
<p>Pro zobrazení vektorové grafiky prosím použijte:</p>
<ul>
<li><a href="http://my.opera.com/desktopteam/">Opera 9</a></li>
<li><a href="http://www.mozilla.com/">Firefox 1.5</a></li>
<li><a href="http://www.caminobrowser.org/">Camino 1</a></li>
<li><a href="http://nightly.webkit.org/">Safari 2 - SVG build</a></li>
<li>
    <a href="http://www.adobe.com/svg/viewer/install/">
      Explorer od verze 5.5 + zásuvný modul ASV3
    </a>
</li>
</ul>
</object>
<![endif]>

Vhodný alternativní obsah v případě nepřítomnosti ASV nabídneme uživatelům IE pomocí prvku "noembed".

Netvrdím že popsané řešení je ideální, ale považuji jej za schůdný kompromis.

Nastavení serveru

Při publikování SVG grafiky na webu se stále ještě můžeme setkat s nesprávně nastavenými MIME parametry pro tento typ souborů.

Proto si připomeňme, že pro obě možné varianty souborových přípon ".svg" i ".svgz" (verze komprimovaná metodou GZIP) musí být na HTTP serveru přiřazen MIME typ "image/svg+xml". (Zdůrazňuji ono plus, jelikož první návrhy normy SVG na tomto místě používaly mínus, se kterým se můžete také někdy setkat.)

Server Apache

V tomto populárním programu lze nastavení ovlivnit nejen změnou hlavního konfiguračnho souboru, ale i lokálně (bez nutnosti vlastnit administrátorská práva k serveru), a to vytvořením souboru ".htaccess" ve stejné složce s SVG soubory.

Potřebné nastavení definuje následující zápis ve zmíněném konfiguračním souboru:

AddType image/svg+xml svg
AddType image/svg+xml svgz

U jiných serverů se obraťte nejlépe na svého IT správce.

Kontrola nastavení MIME

Opět, ověření správnosti hlaviček lze provést například s pomocí stránek web-sniffer.net.

Pro normální SVG soubory by měl server generovat HTTP hlavičku:

Content-Type: image/svg+xml

Pro SVGZ je hlavička HTTP:

Content-Type: image/svg+xml
Content-Encoding: gzip

Závěrem

Po prostudování dnešního dílu byste měli být schopni vytvářet kompatibilní webové stránky s využitím prvků standardní vektorové grafiky SVG-XML [2] podle doporučení organizace W3.

Odkazy a zdroje

1. Adobe SVG Viewer 3: http://www.adobe.com/svg/viewer/install/
2. Standard SVG: http://www.w3.org/TR/SVG11/
3. Mozilla SVG: http://www.mozilla.org/projects/svg/
4. Mozilla SVG: originální chybný demonstrační kód
5. Alan Schepers o SVG: http://www.schepers.cc/
6. ASV3 dokumentace: http://www.adobe.com/svg/indepth/pdfs/ReadMewin.pdf
7. Max Dunn o SVG: http://svgfaq.com/Inline.asp
8. SVG encyklopedie: http://wiki.svg.org/