reklama

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

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].

Klepněte pro větší obrázek
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:

<object id="AdobeSVG"
 classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2">
</object>
<?import namespace="svg" implementation="#AdobeSVG"?>

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

Klepněte pro větší obrázek

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:

<svg:svg viewBox="0 0 400 300" onmouseover="ovladac(evt)">
 <svg:circle cx="12" cy="34" r="100" style="fill:red"/>
  ...
</svg:svg>
<p>XHTML dokument pokračuje...</p>

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":

<object data="svg.svg" width="0" height="0" type="image/svg+xml">
  <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>
<!-- IE5.5+ASV3 trik pro zobrazení SVG v IE ve Windows -->
<object id="AdobeSVG" classid="clsid:78156a80-c6a1-4bbf-8e6a-3cd390eeb4e2"> </object>
<?import namespace="svg" urn="
http://www.w3.org/2000/svg" implementation="#AdobeSVG"?>

<!-- grafika SVG se správným alternativním obsahem (prvek "desc") -->
<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.

Klepněte pro větší obrázek

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:text x="200" y="64" font-family="Helvetica"
 font-weight="bold" font-size="48" text-anchor="middle">
  <svg:animate id="anim1" begin="0s;anim3.end" dur="1s"
   attributeName="font-size"
   from="222" to="48" repeatCount="1"/>
  <svg:animate id="anim1b" begin="0s;anim3.end" dur="1s"
   attributeName="fill-opacity"
   from="0" to="1" repeatCount="1"/>
  <svg:animate id="anim2" begin="anim1.end" dur="0.7s"
   attributeName="font-size"
   values="48;16;48" repeatCount="3"/>
  <svg:animate id="anim3" begin="anim2.end" dur="2s"
   attributeName="font-size"
   from="48" to="2" repeatCount="1"/>
  SVG
</svg:text>

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":

<object data="vlozena_grafika.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>

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/

Témata článku: Software, Budoucnost, Programování, Opera, Firefox, IE 10, IE 11, Image, Smile, Pros, Puzzle

11 komentářů

Nejnovější komentáře

  • Petr Tomeš - ptomes@gmail.com 28. 4. 2006 17:12:56
    Pokud nelžete, pak odkažte konkrétní verzi Mozilly, aby se dal váš výrok...
  • Adam 28. 4. 2006 1:17:38
    To je FUD, všechny casti mozilly jako třeba gecko jsou napsane na zelene...
  • KillerZero, KillerZero 27. 4. 2006 20:42:21
    To netušim. Mě to funguje.
reklama
Určitě si přečtěte

Vybíráte herní periferii nebo hardware? Pak zapomeňte na nálepku Gaming

Vybíráte herní periferii nebo hardware? Pak zapomeňte na nálepku Gaming

** Herní hardware se od toho běžného často liší jen vzhledem ** Při výběru stále nezapomínejte na základní parametry ** Poradíme jak vybrat herní hardware i periferie

20.  2.  2017 | Stanislav Janů | 36

10 nejhorších produktů v historii Microsoftu

10 nejhorších produktů v historii Microsoftu

20.  2.  2017 | Karel Javůrek | 133

Pojďme programovat elektroniku: Žádný bastlíř se neobejde bez armády švábů

Pojďme programovat elektroniku: Žádný bastlíř se neobejde bez armády švábů

** Každý bastlíř se po čase neobjede bez armády švábů ** Dnes si některé z nich vyzkoušíme ** Třeba zázračný posuvný registr

19.  2.  2017 | Jakub Čížek | 39

AMD oficiálně představilo procesory Ryzen. Známe i jejich české ceny

AMD oficiálně představilo procesory Ryzen. Známe i jejich české ceny

** AMD uvedlo první tři procesory Ryzen 7 ** Všechny budou pracovat s osmi jádry a šestnácti vlákny ** Na pulty obchodů se dostanou už za týden

22.  2.  2017 | Stanislav Janů | 131

EU se děsí Windows 10. Prý o nás vědí až příliš. Microsoft chystá změny

EU se děsí Windows 10. Prý o nás vědí až příliš. Microsoft chystá změny

** Evropští úředníci chtějí, aby byly Desítky transparentnější ** Microsoft od jara skutečně chystá změny ** Ochráncům soukromí to ale nestačí

21.  2.  2017 | Jakub Čížek | 218

Remix Singularity: Microsoft si na tom vylámal zuby. Jak dopadne Android?

Remix Singularity: Microsoft si na tom vylámal zuby. Jak dopadne Android?

** Microsoft do svých telefonů integroval desktopové prostředí ** Moc to ale nevyšlo, chyběl pořádný výkon ** Teď to zkoušejí ex-googleři s Remix Singularity

23.  2.  2017 | Jakub Čížek | 73


Aktuální číslo časopisu Computer

Supertéma o počítačové bezpečnosti

AMD Ryzen přichází

Velké testy kinoprojektorů a levných špuntových sluchátek

Příslušenství do USB-C

reklama
reklama