I'm considering developing a website similar to stackoverflow, but the answers may also consist of drawings (schematics, in this case). I want to have an area in the answer form where they can make this schematic without requiring special plugins, etc.
Are we to the point where SVG has or should have critical mass soon (1-2 years) such that designing a website where script-run SVG as a primary feature is reasonable (ie, requiring Firefox or another SVG/AJAX compliant browser)?
What are some good resources for learning cross platform SVG scripting (likely in javascript)?
-Adam Davis
Raphael looks like an interesting take on the problem of cross-browser vector graphics.
Unfortunately, I don't have an answer, but I do have three pointers to projects that you could look at.
The first is the Lively Kernel by Dan Ingalls (yes, the Dan Ingalls) at Sun Labs. It is an implementation of a Smalltalk Virtual World in JavaScript on top of SVG. More precisely, it is an implementation of the Morphic GUI framework from Squeak Smalltalk in JavaScript using SVG and a port of (parts of) Squeak Smalltalk in JavaScript.
Or, if you're not a Smalltalker and the above doesn't make sense to you: it's an Operating System, written in JavaScript with the JavaScript interpreter as the CPU, SVG as the graphics card and the browser as the computer.
This is about as extreme as it gets, when it comes to JavaScript and SVG. And it only fully works in Safari 3 and partly in Firefox 3, although there is an experimental port to Internet Explorer as well.
The second project is John Resig's Processing.js port of the Processing visualization language to JavaScript. It uses the <canvas> element instead of SVG precisely because of the problems that you mentioned. This one however, only works in Firefox 3.
The third one is Real-Time 3D in JavaScript by Useless Pickles. It uses only JavaScript, DOM and CSS and no SVG or <canvas> or Flash or whatever. And it is portable to almost any browser, including Internet Explorer 7 and up. Doing 2D should be even easier than this.
Between those three projects you should be able to find some inspiration and also to find some people who tried to push the envelope with JavaScript and SVG or JavaScript and Graphics and can tell you what works and what doesn't.
Conclusion: doing cross-browser SVG or cross-browser <canvas> is nigh impossible, but with a little bit of craziness, cross-browser graphics without SVG or <canvas> is possible.
SVGWeb is a script that adds near-native SVG capabilities to IE using flash. All the other major browsers support SVG.
http://code.google.com/p/svgweb/
1/ probably never - if IE wanted to add it, then I would have though it would have done so by now; but there are workarounds using SilverLight and Gecko to provide rendering. On the other hand, there are cross-browser graphics APIs available. I've done largish front ends using XULRunner and SVG, but nothing on the web which had to cater for IE.
2/ The two I referred to most often were the SVG pages on mozilla.org and this SVG DOM reference . All of my SVG links are here on delicious
There's one existing editor at http://www.bpel4chor.org/editor/; also if all you want is schematics where all arcs are on a grid, you can do that quite well using divs and images without SVG. Or you could just go the lo-fi route
As #jwmittag mentioned <canvas> is an option.
It works in Saffari and Firefox 3, Opera 9, and people are developing support for IE.
You could easily capture mouse clicks associated with the current tool and properties.
Redrawing the canvas on every page display.
I just finished a project using <canvas> and it's a simple and very powerful API to work with, especially if you have ever done any OpenGL or Cairo work.
Good Luck, sounds like a cool project.
Related
Does anybody know of a comprehensive library to make SVG work with IE (7 and 8 in particular)?
I wanted something Javascript which could be included in my web page and which would silently convert all my SVG to VML in a fashion similar to what excanvas does for Canvas.
The Raphaël—JavaScript Library can help you out there.
Raphaël uses the SVG W3C Recommendation and VML as a base for creating graphics and supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
EDIT:
There are two more js-libraries which use vml to render svgs in IE:
Ample SDK (where it should be possible to easily integrate existing svg files)
DojoX GFX from the Dojo Toolkit
Google's SVG Web does this. According to the project website:
SVG Web is a JavaScript library which
provides SVG support on many browsers,
including Internet Explorer, Firefox,
and Safari. Using the library plus
native SVG support you can instantly
target ~95% of the existing installed
web base.
Whilst it's described as a JavaScript library it also requires Flash 9+. This isn't usually a problem, but if you're in a corporate environment with old Flash or no Flash on the workstations it's not going to work.
Also, it is still in Alpha which could be a problem, depending on what your project is.
I think SVGWeb is the way to go, even if it is based on Flash as VML is far from being fast enough for lots of applications.
Adobe provides scripts to automatically detect, install, and redirect you back to your original site:
http://support.adobe.com/devsup/devsup.nsf/docs/51780.htm
http://www.adobe.com/svg/workflow/autoinstall.html
I have been using this fairly successfully on my site.
A more low tech solution would be to use something like svg_alike (insert conflict of interest notification here :)). It checks for the SVG support, then if it doesn't find it it replaces all SVG images with PNGs.
https://github.com/forwardadvance/svg_alike
You lose the advantages of smooth vector zooming, and retina support, but IE8 users are unlikely to make use of these features anyway.
The advantage is that you don't have to convert your images into JavaScript. I think it provides 80% of the value for 5% of the work.
I like to generate a simplified version of the following static image in pure JavaScript. It should work with 2010 vintage browsers, so I can't wait for Firefox 4 and WebGL.
I do not need any fancy textures - the task is just to visualise how to stack some boxes.
BTW: the current image is generated with POV-Ray which is overkill for the job - and does not run in the browser ;-)
As you say you don't need fancy textures I'd recommend for vintage support that you stack images like mentioned earlier. I made an example for you: http://jsfiddle.net/andersand/5RsEx/
The simple function is just to illustrate, and does the drawing of a segmented box. Of course you may need to figure out box placement, orientation, and so on if that is your business goal.
That approach could help you with boxes of various height (z axis). If your boxes also vary in width (x and/or y) you'd need to create more images to suit your needs.
If you can do without IE support, or require a plug-in for IE users, or provide server-side rasterization for IE users, you could use computed svg files.
You could do a very basic projection of the vertices of the boxes, maybe start with a simple isometric projection and then go to a perspective projection. Use simple 4x4 matrix math as used in OpenGL for this and represent the 3D coordinates as [x, y, z, w] vectors. Since the images are small and simple enough you can get away with simply using a smart rendering order, i.e. bottom to top, back to front, which will make sure you don't have to worry about mucking about with a depth buffer or other such things. Should be fairly simple to implement, you don't need third party libs and it will be natively supported in most of the contemporary browsers.
Okay, I thought this to be an interesting experiment, so I made a working version of what I described above. It works in all major browsers with the notable exception of IE. SVG support should come to IE with the introduction of IE9. I've tested in Opera, Firefox and Safari under OS X and Opera and Firefox under Linux. It might be possible to add IE support by making VML output possible, though I must say that I do not know whether IE permits inlining of VML in XHTML using namespaces like I used here.
Computed SVG rendering of 3D stacked boxes
Right now it only does isometric projection. I might just spend a bit more time on this to add a perspective projection option as well. That would seem fun and should not be much more than adding another matrix multiplication.
Searching for Collada (XML based 3d file) support may be your best bet. Now that canvas has landed, lots of 3d routines are being ported from Flash Actionscript to Javascript.
You can export Collada files from all of the major 3D applications, as well as blender ;)
Try the following as an example;
http://www.rozengain.com/blog/2007/11/21/parsing-collada-3d-assets-with-javascript-in-the-html-5-canvas-element/
If you want to rotate a 3D scene using javascript, you may have a few months wait until the engines get released. They will most likely be HTML5 dependent.
There are a few WebGL implementations doing the rounds but they are for the bleeding edge browsers and are very unstable.
I know there are tons of great graphics libraries for javascript...
Now, I know that there are other questions asking for graphics library suggestions. But none of them address the following issues:
What is the most widely-used javascript-graphics library right now?
Can it handle text, rotation, arcs, bezier-style line geometries, and is compatible with at least FF, IE(7/8), Safari, and Chrome...
Also, because of my client's fears of required plug-ins that users need to add to their browser, it needs to be something that can load on-the-fly and not require the user to permanently install anything external.
Does such an animal exist?
I am looking for your experienced opinion on this one.
For cross platform support I generally find I can trust Raphael to do the job.
I'd look at processingjs first.
http://processingjs.org/
I suggest using the html5 <canvas/> element with the 2d graphics API.
Although the canvas element isn't supported in IE, you can make it work with excanvas.js from http://code.google.com/p/explorercanvas/.
Explorer canvas is a simple javascript include that emulates canvas element support using vector graphics. On the other browsers, you will have canvas support.
I used this approach to make a realtime scrolling trend control that worked across browsers.
I'm looking for a framework or library to use the browser as a 2D "drawing" tool.
Acctually drawing is not the right word. It should be a adding, removing and moving around of 2D objects and images on a canvas. The objects should be graphically connectable. So - kind a visio in a browser
I guess it's a bit to much for a javascript library like dojo or prototype but what about a flash framework like flex or openlaszolo?
Thanks!
Most modern browsers now support the <canvas> tag in HTML5, which does pretty much what you're asking for. You can draw directly onto it using Javascript. Also in most modern browsers is support for the SVG graphic format, which again can be manipulated via Javascript to do some very funky effects. The difference between canvas and SVG is that canvas is for bitmap graphics and SVG is vectors. But both are good for 2D drawing.
If you need a library or framework on top of that, you could try something like Raphael, which is a good JS library for drawing vector graphics. It even supports older versions of Explorer, which is a bonus. (if SVG isn't available it falls back to VML).
iLog Exlixir offers some graphing components which would probably help.
OpenLaszlo can definitely do this. Here is a link to an OpenLaszlo application that is an online alternative to Visio:
http://www.gliffy.com/
I also have personally developed and maintained an OpenLaszlo video editing application over the past 6 years that allows you to drag images and videos to different positions and layers similar to what you describe, you can try it here if you want:
http://www.sarolta.tv/web/sarolta-tools/template-editor.html
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I'm working on an interactive interface using SVG and JavaScript/jQuery, and I'm trying to decide between Raphael and jQuery SVG. I'd like to know
What the trade-offs are between the two
Where the development momentum seems to be.
I don't need the VML/IE support in Raphael, or the plotting abilities of jQuery SVG. I'm primarily interested in the most elegant way to create, animate, and manipulate individual items on an SVG canvas.
I've recently used both Raphael and jQuery SVG - and here are my thoughts:
Raphael
Pros: a good starter library, easy to do a LOT of things with SVG quickly. Well written and documented. Lots of examples and Demos. Very extensible architecture. Great with animation.
Cons: is a layer over the actual SVG markup, makes it difficult to do more complex things with SVG - such as grouping (it supports Sets, but not groups). Doesn't do great w/ editing of already existing elements.
jQuery SVG
Pros: a jquery plugin, if you're already using jQuery. Well written and documented. Lots of examples and demos. Supports most SVG elements, allows native access to elements easily
Cons: architecture not as extensible as Raphael. Some things could be better documented (like configure of SVG element). Doesn't do great w/ editing of already existing elements. Relies on SVG semantics for animation - which is not that great.
SnapSVG as a pure SVG version of Raphael
SnapSVG is the successor of Raphael. It is supported only in the SVG enabled browsers and supports almost all the features of SVG.
Conclusion
If you're doing something quick and easy, Raphael is an easy choice. If you're going to do something more complex, I chose to use jQuery SVG because I can manipulate the actual markup significantly easier than with Raphael. And if you want a non-jQuery solution then SnapSVG is a good option.
For posterity, I'd like to note that I ended up choosing Raphael, because of the clean API and "free" IE support, and also because the active development looks promising (event support was just added in 0.7, for instance). However, I'll leave the question unanswered, and I'd still be interested to hear about others' experiences using Javascript + SVG libraries.
I'm a huge fan of Raphael and the development momentum seems to be going strong (version 0.85 was released late last week). Another big plus is that its developer, Dmitry Baranovskiy, is currently working on a Raphael charting plugin, g.raphael, which looks like its shaping up to be pretty slick (there are a few samples of the output from the early versions on Flickr).
However, just to throw another possible contender into the SVG library mix, Google's SVG Web looks very promising indeed (even though I'm not a big fan of Flash, which it uses to render in non-SVG compliant browsers). Probably one to watch, especially with the upcoming SVG Open conference.
Raphael is definitely easier to set up and get going, but note that there are ways of expressing things in SVG that are not possible in Raphael. As noted above there are no "groups". This implies that you can't implement layers of Coordinate Transfomations. Instead there is only one coordinate transform available.
If your design depends on nested coordinate transforms, Raphael is not for you.
Oh Raphael has moved on significantly since June.
There is a new charting library that can work with it and these are very eye catching.
Raphael also supports full SVG path syntax and is incorporating really advanced path methods. Come see 1.2.8+ at my site (Shameless plug) and then bounce over to the Dmitry's site from there.
http://www.irunmywebsite.com/raphael/raphaelsource.html
I think it is not totally unrelated but did you consider canvas? something like Process JS can make it simpler.
You should also take a look at svgweb. It uses flash to render svg in IE, and optionally on other browsers (in the cases where it supports more than the browser itself does).
http://code.google.com/p/svgweb/
I will throw my vote behind Raphael - the cross-browser support, clean API and consistent updates (so far) make it a joy to use. It plays very nicely with jQuery too. Processing is cool, but more useful as a demo for bleeding-edge stuff at the moment.
As a Javascript beginner, I found Rapahel samples not so easy, I recommend http://cancerbero.mbarreneche.com/raphaeltut, which is a real Step by step tutorial.
For those who don't care about IE6/IE7, the same guy who wrote Raphael built an svg engine specifically for modern browsers: Snap.svg .. they have a really nice site with good docs: http://snapsvg.io
snap.svg couldn't be easier to use right out of the box and can manipulate/update existing SVGs or generate new ones. You can read this stuff on the snap.io about page but here's a quick run down:
Cons
To make use of snap's features you must forgo on support for older browsers. Raphael supports browsers like IE6/IE7, snap features are only supported by IE9 and up, Safari, Chrome, Firefox, and Opera.
Pros
Implements the full features of SVG like masking, clipping, patterns, full gradients, groups, and more.
Ability to work with existing SVGs: content does not have to be generated with Snap for it to work with Snap, allowing you to create the content with any common design tools.
Full animation support using a straightforward, easy-to-implement JavaScript API
Works with strings of SVGs (for example, SVG files loaded via Ajax) without having to actually render them first, similar to a resource container or sprite sheet.
check it out if you're interested: http://snapsvg.io
Since it's not mentioned here yet:
You should also take a look at Dojox.drawing, which also provides good SVG drawing capabilities. It has a pretty impressive set of features. I'm just starting a project with it, but it seems to me that it's far superior (at least in terms of features) to Raphael and JQuerySVG.
This presentation convinced me to use it instead of Raphael/JQuerySVG:
http://www.slideshare.net/elazutkin/dojo-gfx-svg-in-the-real-world-2114082
Reference:
http://dojotoolkit.org/reference-guide/dojox/index.html
Reference on Dojocampus:
http://docs.dojocampus.org/dojox/drawing
Download Dojo (including Dojox):
http://dojotoolkit.org/download/
Another svg javascript library you might want to look at is d3.js. http://d3js.org/
I prefer using RaphaelJS because it has great cross-browser abilities. However, some SVG & VML effects can't be achieved with RaphaelJS (complex gradients...).
Google has also developped a library of its own to enable SVG support in IE:
http://svgweb.googlecode.com/files/svgweb-2009-08-20-B.zip
If you don't need VML and IE8 support then use Canvas (PaperJS for example). Look at latest IE10 demos for Windows 7. They have amazing animations in Canvas. SVG is not capable to do anything close to them.
Overall Canvas is available at all mobile browsers. SVG is not working at early versions of Android 2.0- 2.3 (as I know)
Yes, Canvas is not scalable, but it so fast that you can redraw the whole canvas faster then browser capable to scroll view port.
From my perspective Microsoft's optimizations provides means to use Canvas as regular GDI engine and implement graphics applications like we do them for Windows now.