Hlavní navigace

SVG 2 - ako prezerať SVG grafiku na webe

24. 4. 2003
Doba čtení: 5 minut

Sdílet

SVG začína pomaly prenikať na webové stránky a svojimi vlastnosťami môže smelo konkurovať formátu Flash. Ako sa k tejto výzve stavajú vývojári prehliadačov, mapuje nasledujúci text.

V predchádzajúcom článku som písal o možnostiach formátu SVG. Z jeho vlastností je zrejmé, že sa hodí najmä na webovú grafiku. Animovateľnosť a jednoduché skriptovanie umožňujú tvorbu interaktívneho obsahu, skutočnosť, že grafika je v XML, uľahčuje jej dynamické generovanie na strane serveru. Aj v samotnej špecifikácii W3C sú spomenuté možnosti umiestnenia SVG do HTML stránok.
Všetko toto predurčuje SVG, aby sa stalo dôstojným konkurentom formátu Flash. Jediným problémom sa zdá byť v súčasnosti nedostatočná a rozdrobená podpora.

Na nasledujúcich riadkoch si povieme o tom, ako je možné prezerať webové stránky s SVG grafikou. Situácia v tejto oblasti je dosť zložitá, snažil som sa ju zmapovať čo najlepšie. Ak som na niečo zabudol, prosím čitateľov, aby to spomenuli v diskusii.

Plug-in proti natívnej podpore

Sú dva základné spôsoby, ako môže prehliadač zobrazovať SVG grafiku na webových stránkach. Prvou je SVG plug-in, pripojený k prehliadaču. Plug-in zaobstaráva všetko spracovanie SVG, browser mu však musí poskytnúť rozhranie, cez ktoré budú spolupracovať.
V druhom prípade sa vývojári rozhodnú pre natívnu podporu a budú pracovať s SVG priamo v prehliadači.
Tretím, núdzovým riešením, je zobrazovať SVG obrázky zo stránok v nejakom externom SVG prehliadači. Tak sa však pripravíme o interaktivitu medzi SVG a HTML, takže takýto prístup má zmysel iba pri statickej grafike.

Adobe SVG Viewer

Firma Adobe urobila ohľadom propagácie a podpory SVG veľký kus práce. Jej produkt Adobe SVG Viewer (ASV) je v súčasnosti najlepší SVG plug-in pre webové prehliadače. Posledná verzia má číslo 3.0 (vzhľadom na vydanie SVG 1.1 sa už vraj pracuje na ASV4), zadarmo si ju môžete stiahnuť na stránkach firmy Adobe. ASV 3.0 implementuje takmer celú špecifikáciu SVG a keby bol podporovaný v prehliadačoch na všetkých platformách, mohol by byť ideálnym riešením pre prezeranie SVG.
Bohužiaľ to tak nie je. Solídne totiž ASV funguje len na platformách Windows (aj to len v niektorých prehliadačoch), Linux, Mac a ostatné OS zostávajú pozadu, ako si za chvíľu povieme.
To však nie je jediným nedostatkom inak skvelého programu. Okrem štandardných funkcií DOM totiž ASV poskytuje svoje rozširujúce API, ktoré uľahčuje vývojárom prácu s SVG. Tieto funkcie však môžu spôsobovať v budúcnosti problémy v iných SVG prehliadačoch so zobrazovaním dokumentov, ktoré toto API použijú. (Pripomína mi to vylepšenia v JavaScript-e v Interner Exploreri a Netscape Navigatore pred rokmi.)
Naviac ASV vyžaduje, aby bol SVG dokument vložený do HTML pomocou neštandardného tagu <embed>, čo tiež nie je najšťastnejšie riešenie.

Internet Explorer

IE si na platforme Windows výborne rozumie s ASV, v posledných verziách sa dokonca plug-in nainštaluje automaticky pri prvom pokuse o zobrazenie SVG. Toto na jednej strane dáva veľkému množstvu ľudí možnosť prezerať si SVG na webe, na druhej strane takéto „ideálne spojenie“ podporuje ignorovanie užívateľov ostatných prehliadačov a operačných systémov. Smutným dôsledkom je, že Adobe neprejavuje veľký záujem o iné platformy a väčšina stránok s SVG grafikou obsahuje upozornenie „Win IE + ASV only“.
(S fungovaním ASV v IE pre Mac nemám žiadne skúsenosti, no podľa poznámok „Not for Mac IE with ASV“ na stránkach to nebude žiadna sláva.)

Opera

Opera 7 pre Windows je čiastočne kompatibilná s ASV, statická grafika sa zobrazuje v poriadku, ale animácie a skripty nemusia fungovať. Postup pri inštalácii nájdete na stránkach Opery, je veľmi jednoduchý.
Opera pre ostatné platformy žiadne možnosti zobrazovania SVG neposkytuje.

Mozilla

História podpory SVG v Mozille je skutočne „dramatická“. Faktom je, že pred uvedením verzie 1.0 v Mozille fungoval Adobe SVG Viewer, dokonca aj v Linuxe (ASV 3.0b pre Linux).
Vývojári z Adobe však používali pre spoluprácu s prehliadačom jeho nezmrazené (non-frozen) rozhranie, ktoré sa s každou novou verziou Mozilly (0.91–0.97) menilo a tak v ASV fungovalo a nefungovalo vždy niečo iné.
Kritické rozhranie napokon bolo stabilizované (frozen), no to už ASV nefungoval vôbec. Namiesto konštruktívneho riešenia situácie sa začala hádka medzi Adobe a Mozillou o tom, čia je to chyba. (Nerád by som podporoval flamewars, no IMHO majú pravdu ľudia z Mozilly, pretože poskytli stabilný interface a Adobe by mu malo prispôsobiť plug-in. Napríklad Macromedia to s Flashom zvládla, takže problém zrejme nebude technický.) Takže ASV do Mozilly 1.x síce pripojíte, ale pri pokuse o zobrazenie SVG prehliadač spadne.

Ako odpoveď na vzniknutú situáciu začala Mozilla s vývojom natívnej podpory SVG. V súčasnosti tento projekt implementuje základné grafické prvky a krivky, ich základné vlastnosti v CSS (stroke, fill, opacity a pod.) a väčšinu z DOM. Naopak chýbajú deklaratívne animácie, filtre a ďalšie vlastnosti. Na zobrazovaní textu sa práve pracuje.
Treba však podotknúť, že práca na projekte napreduje pomaly, SVG asi nemá v Mozille vysokú prioritu. Dokonca v novom samostatnom prehliadači Firebird (bývalý Phoenix), založenom na Mozille, sa zatiaľ len uvažuje o tom, či do neho vôbec podporu SVG zahrnúť.

Podpora SVG nie je zatiaľ ani súčasťou oficiálnych vydaní Mozilly. Ak by ste si chceli SVG v Mozille pozrieť, je niekoľko možností, ako na to.
Na stránkach projektu sú podrobné inštrukcie, ako Mozillu s SVG podporou stiahnuť z CVS a skompilovať, musím však priznať, že mne sa to nepodarilo.
Najjednoduchšou cestou podľa mňa je stiahnuť si posledné vydanieMozilly s SVG, rozbaliť ho a spustiť z rozbaleného adresára príkazom

./mozilla

.
Vyskúšať SVG schopnosti Mozilly potom môžete tu alebo tu.
A mal by vám tiež fungovať príklad z minulého dielu tohto seriálu.

Netscape

Netscape spolupracoval vo verziách 4–4.7 s ASV. Potom sa však prechodom na verziu 6.0 zmenil jeho plug-in interface (viď vyššie historka s Mozillou) a v súčasnosti je bez podpory SVG.

Konqueror

Pre Konqueror sa vyvíja plug-in KSVG, ktorý má byť súčastne prostredníctvom KParts k dispozícii všetkým aplikáciám KDE.
KSVG zatiaľ podporuje základné tvary, krivky, text a časť DOM.

K-Meleon

Do K-Meleon 0.6 bolo možné pripojiť Adobe SVG Viewer, no od verzie 0.7 tento prehliadač s ASV nespolupracuje. Problém je zrejme rovnaký ako pri Mozille a Netscape, pretože K-Meleon je tiež založený na jadre Gecko.
Pokiaľ by ste chceli experimentovať, prečítajte si inštrukcie ako na to.

Amaya

Amaya je webový prehliadač a editor od W3C. Okrem HTML pozná aj CSS, SVG a MathML, implementácia žiadneho zo týchto štandardov však nie je kompletná.
Na editovanie a prezeranie jednoduchých dokumentov stačí, no zložitejšie obrázky nezvládne.

Galeon

O SVG v tomto prehliadači som nenašiel veľa informácií. Od verzie 1.2.5 má vraj podporu SVG zabudovanú, neviem však v akom rozsahu.

CS24 tip temata

…ďalšie nástroje

Nástrojov na prácu s SVG je v súčasnoti dostatok. K dispozícii sú editory, konvertory z iných formátov, generátory grafiky na strane servera a podobne. V odkazoch pod článkom nájdete rozsiahle zoznamy týchto programov.

Odkazy:
Mozilla SVG Projekt
Zoznam SVG implementácií
Zoznam SVG prehliadačov
Zoznam SVG nástrojov