Hlavní navigace

SVG 2 - ako prezerať SVG grafiku na webe

Martin Švihla 24. 4. 2003

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.

…ď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

Našli jste v článku chybu?

24. 5. 2004 18:18

Martin Hejral (neregistrovaný)

Poznámečka k Adobe SVG Viewer3: Na MACu fungoval vždy výborně. Problémy byly v Mozille/Netscape na PC. Dnes už vše funguje... takže prohlížet SVG mohou všichni. největší problémy byly na Linuxu, ale nedávno se konečně v Adobe rozhoupali k nějakým opravám.

Jinak je tu velmi příjemná novinka: V KDE 3.2 se jeho nativní součástí stává implementace SVG standardu - KSVG. Poměrně velmi pokročilá, chybí už jen filtry a v současnosti začíná implementace deklarativních animací...

http://sv…

28. 4. 2003 1:38

Yeti (neregistrovaný)

Mno, zkoušel jsem zobrazit ty příklady, a sice obvykle něco zobrazí, ale s výjimkou těch úplně nejjednodušších to má vžycky nějakou vadu...

Doufám, že se podpora SVG dostane do browserů aspoň oklikou, přes vektorové kreslicí progamy, kde by se snad mělo uchytit.



Podnikatel.cz: Vládu obejde, kvůli EET rovnou do sněmovny

Vládu obejde, kvůli EET rovnou do sněmovny

Lupa.cz: Slevové šílenství je tu. Kde nakoupit na Black Friday?

Slevové šílenství je tu. Kde nakoupit na Black Friday?

Podnikatel.cz: Přehledná titulka, průvodci, responzivita

Přehledná titulka, průvodci, responzivita

DigiZone.cz: Česká televize mění schéma ČT :D

Česká televize mění schéma ČT :D

Vitalia.cz: „Připluly“ z Německa a možná obsahují jed

„Připluly“ z Německa a možná obsahují jed

Podnikatel.cz: Víme první výsledky doby odezvy #EET

Víme první výsledky doby odezvy #EET

Root.cz: Vypadl Google a rozbilo se toho hodně

Vypadl Google a rozbilo se toho hodně

120na80.cz: Rakovina oka. Jak ji poznáte?

Rakovina oka. Jak ji poznáte?

Lupa.cz: Proč firmy málo chrání data? Chovají se logicky

Proč firmy málo chrání data? Chovají se logicky

Podnikatel.cz: K EET. Štamgast už peníze na stole nenechá

K EET. Štamgast už peníze na stole nenechá

Vitalia.cz: Baletky propagují zdravotní superpostel

Baletky propagují zdravotní superpostel

Vitalia.cz: Jsou čajové sáčky toxické?

Jsou čajové sáčky toxické?

Lupa.cz: Není sleva jako sleva. Jak obchodům nenaletět?

Není sleva jako sleva. Jak obchodům nenaletět?

DigiZone.cz: Recenze Westworld: zavraždit a...

Recenze Westworld: zavraždit a...

120na80.cz: Jak oddálit Alzheimera?

Jak oddálit Alzheimera?

120na80.cz: Bojíte se encefalitidy?

Bojíte se encefalitidy?

DigiZone.cz: ČT má dalšího zástupce v EBU

ČT má dalšího zástupce v EBU

120na80.cz: Pánové, pečujte o svoje přirození a prostatu

Pánové, pečujte o svoje přirození a prostatu

Lupa.cz: UX přestává pro firmy být magie

UX přestává pro firmy být magie

Podnikatel.cz: EET zvládneme, budou horší zákony

EET zvládneme, budou horší zákony