I read while Googling that SVG was "dead". Although I disagree, could anyone tell me more/future vector based format to represent 2d/3d graphics? What about VML? What format should I use to represent 2D and 3D graphics on Web?
I playing around with graphics on web and I would like to know if I'm working with an obsolete technology.
Microsoft is supporting SVG in IE9, and gave a detailed explanation of why they were doing it on the IE blog:
http://blogs.msdn.com/b/ie/archive/2010/03/18/svg-in-ie9-roadmap.aspx
SVG's main advantage is that it becomes part of the DOM, so you can use CSS to style it and javascript to modify it. Canvas, by contrast, must redraw every frame completely. This makes canvas suited to spectrum analyzers, video processing, fast-paced games, and other non-gradual animations. SVG is better suited for gradual animations.
As far as 3D is concerned, the future is WebGL, a thin shim over OpenGL ES, but it's far off. Microsoft has not committed to supporting it, and that means it's not going to be in IE9. Maybe IE10, maybe not.
If you do use SVG, I recommend using svgweb to abstract away the browser differences (falls back to a flash applet on outdated browsers).
This post is rather late... but I think it is worth re-addressing, since your question has popped up again with all the html5 talk.
SVG is a vector drawing format that also supports animation, timing, and Javascript DOM support. In other words, it is a standalone format for static and dynamic vector graphics; you might say it is a web-focused (or screen-focused) alternative to EPS/PDF. The html5 canvas tag is not a format but a way to draw (static images) to the screen with Javascript — that is all; there is no competition between it and SVG, as they have entirely different purposes.
Most other vector "formats" involve plugins (Flash) or hardware support (webGL). Ironically, the VML format you mentioned is now deprecated in favor of SVG.
To answer your question: SVG is now the standard vector format for the web. Hopefully, in the near future, we will see it being used for video/animation as well.
You can try the Raphaël JavaScript Library.
It is easy to implement and provides the same UI features as SVG (and more!).
If it is SVG you are after the best way to go is svg.js. It supports SVG better and it is a fraction of the size (4.5k gzipped) of Raphaël (31k gzipped). It also has a very intuitive syntax.
All major browsers including ie9, firefox, safari and chrome are starting to supporting svg as part of the upcoming html5 standard. I wouldn't call that "dead"
2D: SVG
3D: X3DOM or webGL directly
Related
Why are there aliasing drawings with gdi? And even don't scale it.
If I don't scale it, I think it won't be aliased.
And draw a circle with SVG will not be aliased.
I guess by "sawtooth" you mean aliasing. GDI is about 30 years old. Since antialiasing requires quite a lot of computation power it's support has never been added. It is technically possible to draw smooth images using GDI and some additional code, however it is better to use newer API that supports antialiasing out of box, such as Direct2D or at least GDI+.
Also svg is just an xml-based file format. You don't "draw" anything with svg, you just describe image with svg and then it gets rendered with some rendering engine, such as cairo. If you render svg using plain GDI you'll still get aliased image.
What's the simplest, most reliable way to test if a browser / user agent / client supports the Raphael.js library? Raphael uses Javascript to create and control SVG vector graphics, or, if SVG isn't available but VML is (e.g. in Internet Explorer versions 6 to 8), it creates and controls equivalent graphics using VML.
One method would be to feature-detect SVG, then, if it's not available, feature-detect VML. There's an old question from 2009 with answers including some code for feature-detecting VML and SVG. However, the comments suggest that it might not work in all cases, and I'm sure a lot has changed since 2009. Also, there might be a simpler way specific to Raphael.
A simpler alternative might be to use some Raphael internal flags or functions. It already sets variables for whether it is operating in SVG mode or VML mode. Can this be used to reliably detect a 'neither' condition?
Or maybe there's a reliable approach based on creating an empty Raphael object and testing its properties or functions?
For general background, as far as I know the only common browser to not be compatible with Raphael is the Android stock browser in versions 1.x and 2.x, however, I'd prefer to use feature detection rather than browser version detection if possible (unless there's a good reason why that's actually unusually a better solution in this case).
Check the official docs: http://raphaeljs.com/reference.html#Raphael.type
if (!Raphael.type) alert('Your browser does not support vector graphics!');
(I apologize if this belongs in stackexchange.com - I'm not sure how to tell)
I am a big fan of the dot language and want to adopt a language for my more complex diagramming needs (e.g. software architecture graphics, business school papers, personal notes etc.) and want something that is a good compromise on these:
1) Relatively easy to read and understand (like dot), and not too verbose. So far my research has shown that there is no clear favorite.
2) Easy to tweak by hand (i.e. in a text editor). The initial drawing can be done in a graphics package but if you just want to change some text or a color, it should be easy to do with plain text *NIX tools. So that rules out Flash.
3) It won't fall out of favor one day and risk being a waste of effort and I'd need to migrate my diagrams to some other format.
I'm put off by Metapost because it looks complicated, but I'm not sure if SVG is being obsoleted and Adobe are putting all their investment into Flash.
1) Relatively easy to read and understand (like dot), and not too verbose. So far my research has shown that there is no clear favorite.
dot's more high-level than SVG is; last I checked, SVG was one of dot's output formats.
2) Easy to tweak by hand (i.e. in a text editor). The initial drawing can be done in a graphics package but if you just want to change some text or a color, it should be easy to do with plain text *NIX tools.
Handwritten SVG is fairly easy to edit in a text editor, much like handwritten HTML.
Computer-generated SVG is fairly irritating to edit in a text editor, much like Word-generated HTML.
3) It won't fall out of favor one day and risk being a waste of effort and I'd need to migrate my diagrams to some other format.
All current browsers have SVG support, including IE.. As far as I can tell, SVG is a relatively safe graphics format to write in.
I'm put off by Metapost because it looks complicated, but I'm not sure if SVG is being obsoleted and Adobe are putting all their investment into Flash.
Adobe's interest is fairly irrelevant at this point. You may be thinking of a time when Adobe's SVG plugin was the only way to view SVG, but those days are long gone (and the plugin is defunct). These days, SVG is fairly well supported in browsers, at least for static images. Additionally, the SVG-related technologies that browsers support has been steadily increasing in all browsers over the past few years (it's a complex spec), and I see no reason why SVG support would stall or reverse.
SVG has been a W3C recommendation since 2001 and modern browsers have supported it for years, IE recently joined in. As of now all major browser vendors are working in the direction of expanding their support.
Alot of info can be found here: http://caniuse.com/#cats=SVG
As far as I know SVG is a feature of HTML 5. So,if you use SVG there is a chance that it will not work in some old browsers. But, I think the world(all browsers) is moving to HTML 5.
I'm looking at some older code which is rendering some images, animations, etc... for a website by generating a web page containing significant SVG elements. The result is a fairly complicated, interactive, interface. I've been tasked with migrating the application to instead generate WebGL calls.
This is a non-trivial task, considering all of the niceties that come with SVG, which are not directly available if going straight to a WebGL implementation. I've been debating whether I should pitch migrating to using something like Three.js instead, but don't know enough about the available options to make a good decision.
What are some reasonable options I should consider when trying to build my battle plan here?
I would suggest you look at http://code.google.com/p/canvg/ as an option.
I assume it is using getContext("2d") not getContext("experimental-webgl") or getContext("webgl").
WebGL provides a 3d interface and I am not sure if there is any advantage to using it for 2d graphics, since you don't have any 3d transforms for the GPU to work on. If they are interested in Canvas not specifically webgl ... Canvg would bring over some of the niceties of SVG which would be the source content.
If the issue is lack of support for SVG in browsers http://code.google.com/p/svgweb/ goes a long way to solving that problem.
We are considering using SVG filters as part of our toolchain, serving the SVG to browsers capable of supporting it, while serving pre-rendered PNGs to other.
One problem we noticed is that the rendering of the filter chains seems to be very inconsistent across renderers. When looking at the "filters01" example from the SVG specification, the rendering looks very different across the tools we tried. Chrome (5.0.307.11) failed to render the image, while other tools (Firefox 3.6, Opera 10.10, Inkscape 0.47, GIMP 2.6.7) render something vaguely similar in style to the picture in the specification, but no two are truly the same.
Is that an issue of under-specification or are the tools just not there? If we would use SVG with filter effects: is there a reference tool that can give us a rendering the way it is intended by the spec?
Please report bugs on at least anything that doesn't look the same from a meter away to help improve the situation.