Am weitesten verbreitete (IE + Opera) Javascript Leinwand/Zeichnung Bibliothek

Question

Ich bin auf der Suche nach einer Portfolio-Website, und ich wollte einige kreative Zeichnung auf der Website tun, ohne Bilder zu verwenden.

Ich dachte, Leinwand, die ich wirklich cool wäre, plus ein interessantes Projekt, aber ich hörte, dass IE keine Kompatibilität hat (ist das wahr?), So kann ich das nicht haben.

Dann dachte ich über Raphaël nach, was die bisher praktikabelste Option zu sein scheint.

Ughh, da war eine andere Bibliothek, an die ich mich nicht erinnern kann, die auch eine gute Option schien.

Was denkst du über Raphaël und seine allgemeine Kompatibilität und seine Fähigkeiten hinsichtlich der Art der Zeichnung, die es in der Lage ist. Ich habe die Dokumentation durchgeblättert und finde sie sehr mächtig.

Answer 1

Nun können Sie Inkscape herunterladen und zeichnen, was Sie cross-browser in dort wollen. Dann gehen Sie zu meiner Website (Seite mit Tool und Anweisungen unten) und verwenden Sie den SVGTOHTML-Konverter dort. Ich füge mit jeder Version mehr hinzu. Die SVG ist in Raphael und es gibt eine Reihe von Optionen, was Sie haben können.

Die Version ist bei 0,57 zum Zeitpunkt der Eingabe.

http://www.irunmywebsite.com/raphael/svgsource.php

Answer 2

Haben Sie die Vektorgrafiken auf der Website zeichnen wollen selbst, oder einfach nur vorgefertigte Vektorgrafiken veröffentlichen?

• Wenn die ehemaligen, haben einen Blick auf svg-edit, die leicht in Ihrer Website eingebettet werden können, und das funktioniert in den meisten Browsern (alte IE-Versionen die Chrome Frame-Plugin benötigen, aber IE9 wird von SVG-Edit unterstützt werden 2.6).

• Wenn letzteres, dann gibt es wahrscheinlich viele Möglichkeiten, hier sind ein paar aus der Spitze von meinem Kopf:

  • Verwendung SVGWeb - begann svg schnell bekommen mit, dass mit Hilfe von Vorlagen aus svgboilerplate.com

  • Serve In den Browsern, die es, und statische Bilder für alle anderen

    < Objektdaten = "your.svg" type = "image/svg + xml"> < img src = "staticyoursvg.png"> </Unterstützung obj ect>

Answer 3

Es ist nicht wahr, dass der IE nicht Leinwand nicht unterstützt. IE9 wird es unterstützen, das ist die gleiche Version, die SVG unterstützt.

Für SVG-Entwicklung hängt es ab, was Sie tun möchten. Für statische Bilder können Sie sogar Illustrator oder Inkscape verwenden und dann als SVG speichern/exportieren. Wenn Sie dies tun, denken Sie daran, Scour [0] zu verwenden, da das automatisch generierte Markup etwas knifflig sein kann. Normalerweise schreibe ich einfach die SVG von Hand, es sei denn, ich mache etwas Komplexes. In diesem Fall ist es besser, einen Bildbearbeitungsprogramm zu verwenden.

Es gibt keine wirklich guten Editoren zum Hinzufügen von Animationen, also füge ich diese immer von Hand hinzu.Dinge wie SMIL (zum Animieren von SVG) sind nicht so schwierig zu lernen, aber ein bisschen ausführlich. Wenn Sie SMIL verwenden, wird empfohlen, FakeSMIL zu verwenden, das in der SVGBoilerplate enthalten ist, mit der Erik oben verlinkt, da einige Browser SMIL nicht unterstützen.

Wenn Sie eine JS-Bibliothek verwenden möchten, um das SVG zu generieren, anstatt manuell oder mit einem Editor zu schreiben, dann ist Raphaël wahrscheinlich der ausgereifteste. Es gibt auch Dojo GFX [1]. Was am besten ist, hängt wirklich von persönlichen Vorlieben ab und was du versuchst zu tun. Es wäre am besten, sie mit etwas Einfachem auszuprobieren und zu sehen, was Sie bevorzugen.

[0] http://www.codedread.com/scour/ [1] http://docs.dojocampus.org/dojox/gfx

Answer 4

Blick in SVG Web, verwendet es Flash-SVG in nicht-unterstützende Browser zu emulieren. Es wurde von Branchenführern wie Brad Neuberg geschrieben und stört nicht die Art und Weise, wie Sie SVG-Markup schreiben möchten. Wenn die Browser, die SVG nicht unterstützen, verschwinden, können Sie es ablegen, und Ihr SVG-Markup funktioniert weiterhin. Mit Raphaël müssen Sie JavaScript-Code anstelle von SVG-Markup schreiben, also müssen Sie es für immer verwenden oder Ihre Grafiken neu codieren. Außerdem unterstützt Raphaël nur den kleinsten gemeinsamen Nenner zwischen SVG und VML, also kann man nicht viel tun. Es emuliert sogar einige VML-Fehler in SVG, so dass beide Grafiken gleich aussehen. Raphaël ist besser für dynamisch generierte SVG, aber in anderen Fällen würde ich SVG Web empfehlen.