Afișarea graficelor vectoriale într-un browser

Trebuie să afișez câteva interactiv (atașarea ascultătorilor DOM etc. și manipularea evenimentelor) grafică vectorială în site-ul pe care lucrez. Există o recomandare W3C pentru SVG, deși acest format nu este încă recunoscut de sprijinul Internet Explorer, care este o necesitate (pentru un site public). IE se ocupă însă de VML și există chiar și biblioteci JavaScript care fac un desen asemănător cu panza, în funcție de browser (SVG vs. VML) - titlu excanvas , GFX din Dojo Toolkit și multe altele. Ar fi frumos și acceptabil, deși niciunul dintre ei nu poate afișa o imagine SVG din marcajul dat.

Deci, întrebarea constă de fapt din mai multe părți:

  1. Există biblioteci Javascript cu browser încrucișat care afișează grafice vectoriale din marcajul dat (nu SVG obligatoriu) și oferă disponibilitate pentru atașarea evenimentelor DOM?
  2. Dacă nu există, care dintre tehnologiile cele mai embriate ale browserului ar fi cea mai potrivită pentru a face o astfel de sarcină? Pot alege din Flex/Flash, applet Java. Silverlight nu este o opțiune din cauza blocării Windows.

[ EDIT ] Vă mulțumesc tuturor pentru comentariile/sugestiile dvs. Mai jos sunt doar câteva note/concluzii ale mele despre această chestiune:

  • Nivelul de interactivitate de care am nevoie este capacitatea de a detecta evenimentele DOM pe imaginea vectorială afișată - mouseover, mouseout, clic etc. - și capacitatea de a reacționa pe ele ca schimbarea culorii de fundal, afișarea dialogului etc.
  • Ideea lipirii cu formatul SVG este destul de bună, deoarece este nativă în multe browsere, cu excepția celei cele mai populare - IE. După ce am experimentat cu afișarea SVG dinamic am realizat că versiunea IE 7 este cea mai problematică. Există prea multe hassle din cauza incompatibilităților browserului.
  • Tortul pare a fi un excelent cadru Javascript, deși nu am putut obține exemplele de lucru pe IE7.
  • Java Applets - Mi-a plăcut acea idee cel mai mult, deși am putut folosi biblioteca Apache Batik, un renderer de calitate SVG. Cu toate acestea, Batik este o bibliotecă foarte mare și nu îmi pot permite să implementez un applet care cântărește câțiva megaocteți.
  • Am decis să rămân cu opțiunea Flex. Am găsit o frumoasă bibliotecă grafică vectorială Degrafa . Folosește propriul format de marcare, dar recunoaște notația SVG, așa că în cazul meu va fi destul de ușor să îmi transformi SVG-urile folosind XSLT sau doar să le analizez.

[ EDIT 2 ] Au mai apărut câteva comentarii. Aș dori să clarific faptul că prin "Windows lock-in" vreau să spun situația pe care Silverlight o va executa în mod normal pe Windows, mai exact IE. Mă îndoiesc că este o soluție acceptată (cum ar fi, de exemplu, Applet Flash sau Java) pe alte sisteme. Da, nu am nici o îndoială că un este în măsură să lanseze aplicația Silverlight pe orice sistem, deși mă tem că ar fi prea mult efort pentru un utilizator mediu.

@Akira: Ați avut probleme cu acele "redare SVG" pe IE7? Încă o dată am apărut erori de Javascript.

 0
adăugat editat
Vizualizări: 9
sursa
fr hi bn

6 răspunsuri

Aruncați o privire asupra bibliotecii Raphael Javascript . E primele zile dar arată foarte promițătoare.

Îmi amintesc foaia de parcurs IE care a avut suport SVG enumerate în IE7.2.

Depinde de cât de interactiv vrei?

0
adăugat
sursa

Poți clarifica ce vrei să spui cu ajutorul funcției "Windows lock-in" cu Silverlight? Acesta rulează pe Windows și MacIntel, iar porțiunile de vector rulează foarte bine pe Linux cu pluginul Moonlight.

Ai fost aruncat de lipsa sprijinului Amiga?

0
adăugat
sursa

Safari, Opera și Firefox toate suportă SVG nativ (de ex., Fără pluginuri) la diferite grade de exhaustivitate și corectitudine, inclusiv capacitatea de a script-ul svg din javascript.

Există, de asemenea, elementul de canvas care este acum standardizat în html5 și este deja acceptat și în browserele de mai sus (cu diverse modificări în anumite situații datorate modificărilor relativ recente ale schiței html5).

Din păcate, orice abordare bazată pe standarde este oarecum distrusă de ignorarea intenționată de către IE a ceea ce se întâmplă în afara propriului ecosistem, cu toate acestea există o serie de biblioteci care încearcă să convertească canvas/svg în VML (limbajul de vector propriu al IE), cum ar fi iecanvas .

[Editează: cineops, mi-am uitat biblioteca preferată JS - Tort ! care poate parsa și afișa SVG în panza, și cred că sprijină IE, de asemenea]

[O altă editare: Tortul are de fapt o demo făcând ceea ce cred că vrei să faci]

0
adăugat
sursa

IE susține VML, dar nu mai face nimic și este urât. Microsoft a susținut că l-au renunțat (cu noul XAML și totul), dar este încă o parte a formatului Office xml (este modul în care Excel .xlsx acceptă comentarii, destul de ciudat).

FX și încărcările suportă noul element Canvas. Mulți susțin SVG, dar având în vedere lucrul pe care îl fac MS pe Silverlight, nu văd că IE suportă SVG în curând.

Microsoft ar trebui să furnizeze plug-in-uri Silverlight pentru niciun sistem de operare MS.

Am folosit Flex - este destul de bun în ciuda folosirii Eclipse. Nu aveți nevoie să cumpărați componentele extrem de scumpe ale serverului Adobe care să utilizeze Flex - poate consuma servicii SOAP.

Instrumentele dev pentru Flex sunt destul de accesibile, iar aproape toată lumea are Flash.

0
adăugat
sursa

Priviți noul element Canvas care a fost implementat în multe browsere. Am auzit, de asemenea, că există un control ActiveX pentru IE care implementează și elementul Canvas.

Actualizare: Așteaptă, deja ai spus asta. Ar trebui să citesc întreaga întrebare data viitoare! :)

0
adăugat
sursa

Nu cred că SVG este o alegere bună pentru viitor. Din Wikipedia :

  • "Cel mai obișnuit plugin IE a fost produs de Adobe, însă Adobe intenționează să retragă acest produs la începutul anului 2009"
  • "... Internet Explorer care nu va suporta, de asemenea, SVG în versiunea viitoare IE8"
  • "... toate au suport incomplet pentru SVG 1.1 ..."
  • "Plugin-ul Corel SVG Viewer a fost odată oferit de Corel. Dezvoltarea sa sa oprit."
0
adăugat
sursa
Niciun format vectorial nu funcționează pe toate browserele, dar SVG poate fi parte a unei soluții bune. Doar recunoașteți că nu va funcționa niciodată pe IE (deci aveți nevoie de altceva acolo) și că nimeni nu o susține complet (cum ar fi HTML, CSS și oricare alt standard web oricând), deci tot trebuie să testați peste tot.
adăugat autor Ken, sursa