Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

There's alot of buzz going around that HTML5/Canvas will eventually be a flash killer.

But upon some research I'm learning that HTML5/Canvas is just bitmap graphics. The real competitor with Flash is actually SVG. SVG was released a few years back. My question is, why didn't SVG turn out to be a flash killer?

share|improve this question

closed as primarily opinion-based by MichaelT, Robert Harvey, GlenH7, gnat, Bart van Ingen Schenau Nov 28 '13 at 11:17

Many good questions generate some degree of opinion based on expert experience, but answers to this question will tend to be almost entirely based on opinions, rather than facts, references, or specific expertise.If this question can be reworded to fit the rules in the help center, please edit the question.

    
Also note that Adobe's new flash to html5 converter (Wallaby) mostly uses SVG not canvas. –  foreyez Mar 10 '11 at 0:45
    
Flash is already a vector environment, so converting to another vector environment (SVG) makes sense. That doesn't necessarily indicate superiority of SVG; it just means that Flash is an existing vector format. –  Billy ONeal Mar 10 '11 at 2:04
1  
SVG plays h264 video? Didn't know that... –  user1249 Nov 19 '11 at 23:08
add comment

9 Answers 9

I think I just found out the reason... IE never supported SVG hence people never adopted it. IE9 will though. (IE9 gets released this month)

share|improve this answer
2  
IE8 and before don't support canvas either (will IE9?). The handy excanvas library emulates it using VML, which is another vector-based API –  Javier Mar 10 '11 at 1:16
    
IE9 is out already. I got the update from Windows Update two days ago. –  Craige Mar 10 '11 at 1:25
2  
@Craige: The release candidate is out; the final product is not. (The anticipated release date is 2011-03-14) –  Billy ONeal Mar 10 '11 at 2:15
    
In case anyone is snubbing SVG due to IE not supporting it: SVG Web is an excellent flash programme that allows you to use SVG in any of the major browsers, and allows native SVG capabilities to take over if available. It is an active project. I'm only a user, no other connection. –  Matt Ellen Mar 10 '11 at 12:45
add comment

first of all, let me say that I too think SVG is way cooler than Canvas, but it really doesn't get the love it needs from the browser developers.

Also, while "Canvas is just bitmap" is totally true, remember that the screen is bitmap too. The difference between Canvas and SVG is "vector vs bitmap"; but when you take Canvas+JS vs. SVG+JS, it becomes Retained mode vs. Immediate mode.

Currently, immediate mode programming is way more popular and well understood by most people, probably driving most of the general interest towards Canvas.

It's also the easiest to optimize, both by the implementation (faster primitives) and by the end developer (clever rendering). When using retained mode APIs, the implementation has to manage very high level constructs, and the end developer doesn't have so many options to pick. An analogy might be high-level vs. low-level programming. high level languages can be a lot more productive, but usually are way slower and took a long time to evolve, while low-level languages have been there almost from the beginning.

share|improve this answer
1  
I would argue that for RIA/UI/UX programming, people would rather use retained mode. This is evident from the shift to vector graphics in environments such as Silverlight and Flash. –  foreyez Mar 10 '11 at 1:28
1  
@foreyez: Keep in mind though, the driving reasons for Flash using vector graphics has less to do with programmer ease and more to do with the fact that Flash is designed to push multimedia content over dial up connections. (And I would argue that Silverlight is not a vector environment) –  Billy ONeal Mar 10 '11 at 1:57
    
WPF/Silverlight are vector environments see XAML. –  foreyez Mar 10 '11 at 2:05
    
@foreyez: I'm quite familiar with XAML, I assure you. XAML doesn't (usually) describe the look and feel of an application -- XAML describes how controls are laid out. Usually if you need to do anything graphics intensive you end up using bitmapped graphics on top of XAML, because Silverlight's method of drawing everything on top of each other doesn't scale very well for things that are very complicated, unless the computer in question has a decent graphics chip. –  Billy ONeal Mar 10 '11 at 2:10
1  
Just to be pedantic... XAML "is a declarative XML-based language created by Microsoft which is used to initialize structured values and objects" (see: en.wikipedia.org/wiki/Xaml). WPF " is a resolution-independent and vector-based rendering engine" that uses XAML to declaratively describe a hierarchy of controls. (See: msdn.microsoft.com/en-us/library/aa970268.aspx) –  dwynne Mar 10 '11 at 8:23
show 3 more comments

It's yet another of the formats that could be great, but there's just not enough commercial interest in them. In case of <canvas> you have two really powerful companies (Google and Apple) pushing for it. There was no big corporation backing up SVG.

BTW. It doesn't mean that SVG will not become popular. Just remember how long it took for example PNG to replace GIF in the webs. The turning point was when IE got decent support for it. And now IE9 has SVG support, so maybe the history will repeat itself.

share|improve this answer
add comment

It's basically history.

Flash Player has its origins in 1992, and was at version 3 by 1998, which included scripting support, at the time when Microsoft and Adobe proposed two different standards for vector graphics. The W3C chose to use neither, but instead develop their own one, which was released as late as 2001.

At the time SVG was released, Flash:

  • had proper tooling support, especially for graphic designers
  • supported scripting in a JS-dialect (which makes SMIL look like a bad joke in comparison)
  • was a mature platform
  • had very high availability in a WWW clearly dominated by MSIE, which was unlikely to support SVG in the near future
  • had a small, binary format in a time where size really mattered in the web

So choosing SVG meant going for a format, that is harder to create, harder to make interactive, slower to download, far less supported by clients and simply not really backed by any larger corporation. At the same time, it gave you no benefits managers or graphic designers would care about.

So why does canvas seem to take off? There's a number of reasons:

  • since a couple of years MSIE is loosing ground at an incredible rate, which means Microsoft can no longer ignore the other browser vendors, who all eagerly push their ideas through the W3C. Therefore there are realistic chances for wide HTML5 (which includes canvas) adaption in the nearer future.
  • In recent years, the mobile web has grown to a size not much different from the desktop, with a set of devices on each of which computational power is expensive and anything should run close to the metal. The advantage of a standard is, that every device vendor can attempt a fast, hardware specific implementation, while it is hard for a single company to provide such an implementation of its proprietary viewer, for every device, which is something Adobe has realized just this week. Canvas can fill this gap, and surely will, because the mobile web is a huge market yet to be conquered.
  • Canvas is neither a format, nor does it reinvent the wheel. Canvas is nothing but a relatively simple JavaScript API within a bigger standard, that is actively being designed and implemented by all browser vendors. It extends an existent API (DOM) for an existent language (JS) by a manageable set of features, which is a change that firstly is relatively local and secondly also answer the questions about both integration and scripting.
share|improve this answer
add comment

Now really? SVG is already used at many backend and as a vector format superior to Canvas. Canvas will be useful in games, but anything that needs some decent graphics design needs vectors. What people here fail to see is how powerful the scalability of SVG is.

One design for all screenformats, portrait, landscape, doesn't matter. SVG can handle it. It will finally empower the designer to overcome the primitive way of displaying content as he intends it. Now surely there are some hurdles to overcome, but anyone who's been using an application like Inkscape for a while and sees the examples of David Dailey running in a browser that fully supports SVG (currently Opera has the best support) will be convinced.

The lack of support in IE is one of the things that made IE less relevant. XAML was nothing but the MS ripoff of SVG. MS has finally seen the light and understands that it cannot fight the inevidable. Open standards will win in the long run simply because they are cheaper and can be maintained without risk of the patent holder to force you to use something else.

share|improve this answer
add comment

Much of the reason is that SVG is verbose, inconsistent, and poorly supported.

Canvas on the other hand relies on "the worlds most popular programming language": JavaScript (Douglas Crockford proclaimed that one, I have no idea how true it is). Additionally, Canvas is native to HTML, which means no worries of namespacing, or embedding. SVG requires just as much cross-browser embedding code as Flash, and people already know how to embed flash, so why learn something else?

I'm not saying that SVG is bad, I admire its potential. I just don't think it's anywhere near as easy (pick up in an hour and go) as working with canvas is. </twocents>

share|improve this answer
    
For me, RaphaelJS was pretty easy to pick up in a couple of hours and had the benefit of supporting IE 6 through VML. –  Sharpie Mar 10 '11 at 9:35
add comment

May be a bit off topic here, but SMIL holds promise. You can embed animation, audio and video with plain markup. Only IE has in-built support for SMIL, for the rest of the browsers some plugin is needed to view/play SMIL.

share|improve this answer
add comment

Flash provides one platform while SVG and Canvas must run on different browsers. This makes development in flash much nicer - although it comes with a price tag.

SVG has not had direct support from IE, while Flash plugs in automatically with all browsers. Now it does IE9 final release was Monday with SVG support. Both SVG and Canvas have methods that are defined in the standard. Although that does not resolve all issues. For example with HTML5 video if the video has stopped playing and you set the frame to the beginning firefox starts playing and chrome waits and does not start playing until a play() method is used - Changing the src loads automatically in chrome but firefox waits for the load() method.

These differences are minor compared to the market that existed that provided the opportunity for flash in the first place, which was one of needing a different program for each browser and in some cases a different program for a different version of the same browser.

share|improve this answer
add comment

SVG vs Flash

From my viewpoint as both a Flash/AS2/AS3 developer and Javascript canvas developer:

Flash has a nice and easy editor, while inkscape is nice it's not as powerful(not in is own fault but because the language wasn't designed for the use flash is used):

  • With the actionscript language right inside the editor it is arguably more visual(thus much more comfortable to do things in)
  • Flash has built-in animations(using frames and layers) while with SVG you have to use scripting just to get the just animation not to mention buttons, and other GUI elements in flash.

Thus a developer would have to do a lot more work to create something in SVG, and that is just the graphics stuff.

From the javascript viewpoint, it was only recently starting to gain speed and still not close to Flash at all, that means that doing certain things in SVG were not possible because javascript was that slow.

So you can look at SVG as a small part of flash which has much more to offer, and that is because SVG was designed to be viewed in a browser and animations were only added later on(as far as I know).

About Canvas and SVG

I think that SVG and canvas both have their strengths and weaknesses(canvas needs redrawing) so no comparison there, they are two tools for different tasks.

Conclusion

The faults of SVG might be because of not being supported in IE for so long, but from what I think it is because SVG was not designed for the tasks Flash was(displaying animations) but instead it was designed for displaying Scaleable Graphics.

share|improve this answer
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.