Nowadays it's common to see cool interactive SVG art embedded inside pages. I suppose people make their original art in Illustrator and then export SVG? How do they add behavious, etc.
Does anyone have a good resource for PRACTICAL SVG web development?
The first thing is making your SVG. You're unlikely to be able to write your path data manually, unless you are have very simple animations. The most popular editors are Illustrator (but it's very expensive) and Inkscape (just about fine for my purposes, and free). There are plenty of tutorials on how to make things with those. Inkscape can export to fairly neat and standard SVG, which you then will most likely need to animate manually.
The two ways I have added interractivity to my SVGs before is either by putting JS into the SVG itself (quite funky) and importing the SVG into the page with object or img; or by putting the SVG actually inside the page, and operating on it with the same JS as the rest of the page. It isn't hard: anything you could with JQuery to a page, like adding click handlers to items, moving things around, styling with CSS, you can do with the JavaScript. It's very handy.
As far as practical resources go, I use the Mozilla Developer Network a lot (MDN) because it has good resources on the SVG elements, and jQuery has its own excellent documentation as well as a near-infinity of googleable tutorials. Finally, Inkscape and Illustrator come with their own manuals. In a sense, you're probably asking the question because you're looking some really specific site that will make it all easy, but I don't think there is one, simply because it's basically the same web technologies as all the usual stuff you use, with the addition of a few SVG elements to get used to, and those aren't too fiddly if you generate them with a vector graphics package.
Related
I realize that some people think it is crazy to re-implement all the UI functionality of HTML in a canvas-based framework (and there are some stackoverflow questions that suggest this), but is anyone actually working on a library like this?
To clarify, the library would render all UI elements like edit boxes, labels, buttons, combo boxes, list views, etc. on the canvas directly. There would be no HTML or CSS.
I stumbled upon this idea today. Found the library Zebra. Haven't tried it out yet.
https://zebkit.org/
For web apps I think this makes perfect sense. HTML/CSS is just not good enough to create stable apps easily. The DOM and layouts are just too quirky and the performance too low.
What we need is something like Silverlight but without the plugin. Stable components and a great framework.
Canvas apps could be made just as accessible as html web apps. Probably more so even.
Perhaps WebGL is even better, its performance is definitely better than Canvas if done properly.
Thunderhead was a mozilla experiment built along with bespin (now skywriter).
From the project description:
Thunderhead is a Mozilla Labs experiment to explore a JavaScript-based
GUI toolkit that works with DOM elements and canvas to render
components.
The problem is accessibility, canvas just isn't.
I've just reviewed zebkit.com today. Amazing and absolutely not crazy, rather essential. Try running most DOM node trees on a mobile device and you will soon know this is true. Then in contrast run the Zebkit kitchen sink demo and be shocked. You might have to reconsider your projects approach.
Coming from Java to HTML5 I definitely see some nice OOP at play in the Zebkit API, it is needed to provide the simple canvas some powerful structure. Also I really like the JSON support, it acts much like a CSS format for the canvas. Using JSON this way fits well into the Web Component mindset and the practicality of HTML partials. There are a lot of goodies in this API.
In the end all ways of producing graphics for the Web render pixels anyways. Maybe we have just added to many abstractions between the logic we what to produce and the end screen to realize this fact. With Zebkit it feels like your almost working at the native level, plus it adds in all the graces of Javascript and JSON, sweet indeed. Plus your free to mix and match in DOM as desired.
Now there is Flutter's CanvasKit renderer. Google docs is moving to Canvas.
I know that html 5 canvas will allow for paint style image creating and manipulation, but what use does this really have? I just don't really understand all the hype when the practice use seems limited.
Thanks
GAMES! That's what I'm using it for. Diagonal lines, spinning cubes, triangles (all previously very difficult in basic HTML) are now easy. Combine this with Node.js and you've got COMET backed multi-player GAMES!!! All without the user needing to download Flash or Silverlight or whatever...
Here's some sources on the subject:
http://www.canvasdemos.com/type/games/
Creating a live checkers-like web app with PHP, JS, CSS and HTML?
Other than this, I guess you could use it to "Paint" your website. Instead of using images for gradients, buttons, whatever you could use the canvas instead. Could be more performant since it would reduce the amount of files the client needs to download, but do you really want to programmatically draw all your images??? Not sure about that, but for some images, like gradients, I could see it being useful.
Oh! I would daresay that you haven't seen good HTML5 + CSS3 implementations.
Check these wonders on Canvas.
CSS3-Man
Ball Droppings ( Bonus: View Source to see the wonderfully commented source code)
And if that didn't leave you dumbstruck, check out the wonderful website http://www.chromeexperiments.com for pretty nifty canvas works.
Plus, do you know that there is a new library called processing.js for these kind of stuff.
You just don't see it production much because, browsers haven't fully adopted HTML5 yet. But they soon will. That being said, please open all these examples on a Web-Kit Browser (Google Chrome or Apple Safari) for better results.
I'm looking into providing several methods of visualizing a large volume of data. This may include, but will not be limited to, simple graphing. The techniques I'm exploring will involve shapes, text and lines. It will also involve interaction with elements (hiding, focusing, etc.) and animation (shifting, dragging, systematic reorganizing, etc.) of those elements.
SVG or Canvas seem like the obvious choices (in conjunction with a JS library--probably jQuery), but the lack of cross-browser availability is a concern. I'd prefer to avoid Flash/Flex, but right now it's the only rock solid, cross-browser technology I've found if support for IE7/8 is a requirement.
Does anyone have any other suggestions or any additional information that would make a technology I've listed seem even more appealing?
Thanks.
Check out the original Processing.org.
It may seem strange/anachronistic that they are using Java applets, but they were able to get better performance with Java than JavaScript. The applets seem to work everywhere, and you'll have access to lots of great Java libraries.
Don't think I saw this one mentioned: JavaScript InfoViz Toolkit
An interesting visualization I personally like is the treemap view. Nice for summarizing a lot of data in a single view.
You might want to take a look at Raphael and GRaphael. Raphael allows you to create vector graphics and will use SVG on SVG-capable browsers while automatically switching to VML on IE.
You could also take a look at the canvas-based processing.js.
HighCharts is a Javascript, good, free and cross-browser charting tool.
Take a look at the Highcharts demo
SVG is available on everything except IE, and VML is available on IE (since 5.5, IIRC). If you can serve both SVG and VML, you'll have vector graphics that virtually everyone can see. RaphaelJS is a Javascript library that can generate both formats from the same Javascript code, but of course that's just one way to do it.
Canvas is also available pretty much on everything except IE, but some crazy people wrote something called excanvas that emulates Canvas in, again, VML. From my friends and coworkers who have used it, I've heard the performance is worse than pretty much any other browser graphics solution, but if you want to do bitmap graphics portably, it's pretty much the only non-plugin game in town.
Which route you take -- vector or raster -- really depends on your application.
You might also try Protovis. (http://vis.stanford.edu/protovis/)
SVG and Canvas works for relatively simple data (i.e. where a few lines are enough). For complex data (say, frequency distributions, or something where you emit one sample per pixel), you should render a normal image on the server.
If you are using jquery for the graphing, I would definiately check out Flot which is as cross browser graphing/charting library.
Why do we need the html5 canvas element, when the same can be achieved through embedded svg?
SVG and canvas aren't really interchangeable technologies. SVG is a type of retained mode graphics where everything is drawn from a rather abstract model (the SVG document). Canvas on the other hand is a kind of immediate mode graphics, where there is no model and the client (JavaScript) must take care of redrawing, animations etc.
SVG is a markup language for vector graphics and has DOM. This makes it very easy to alter the content after its creation.
Canvas is a painting surface just like MS Paint without an undo button. You cannot alter the content. You only can overpaint it. It is very performant because the browser does not need to handle a complete DOM for the image. And there is a possibility that canvas can handle 3D drawing in the future.
http://people.mozilla.com/~vladimir/xtech2006/ has nice comparison.
With canvas you don't have to deal with the DOM, which leads to faster and easier to write code. SVG is a mess as a specification, too...
an illustration: My blog engine (blogger) doesn't support SVG (it's not a XHTML document). I wrote a tool converting SVG to the canvas element: http://plindenbaum.blogspot.com/2009/11/tool-converting-svg-to-canvas_22.html
Here is an explanation of how to parse a simple svg and draw it on a canvas..
http://www.ikeralbeniz.net/2010/11/03/jugando-con-html5-canvas-y-svg-i/
http://www.ikeralbeniz.net/2010/11/04/jugando-con-html5-canvas-y-svg-ii/
in further posts the svg parser will be completed with transparencies and gradients
you might also find this comparison useful:
http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/
This isn't really a technical answer but I think it's the correct answer.
The bottom line is we don't need both. Yes I know there are differences between vector and raster graphics and different ways to control paths, objects, animations, etc. between the two, but to the end-user it's all the same. Yes, SVG is a little more powerful right now because of its longer existence but with a little more work you can do the same things with Canvas.
I believe the reality is Canvas is part of an overwhelming backlash against XML itself in web development. I believe most web developers, especially those working with limited time and resources, outside "enterprise" environments, dislike the complexity of XML. Canvas is part of a set of preferred just-do-one-thing technologies just like HTML5 is preferred over XHTML, JSON is preferred over XML, and even YAML is preferred over XML.
I think the idea is similar to the *nix philosophy of having many specific tools doing one thing right and efficiently rather than one mega tool doing many things. (It's also similar to the philosophy held by many fixed gear bicycle riders who shun incredibly precise and advanced derailleur technology for the simplicity of one direct drive gear.)
Don't get me wrong, I believe XML is an incredibly powerful and brilliant technology thought up and developed by brilliant people to be the ultimate Swiss army-knife of the web, programming, configuration, data storage, etc; but that doesn't mean it's easier to manage and style a series of complex paths than it is to just draw pixels on a .
I know my answer is opinionated and I don't intend this to be a flame. I love SVG and I wish it would have gotten more support over the years (especially from IE), but I feel the tide turning towards Canvas simply due to the psychology of standards setters and the web developers that influence them.
Long term I'd like to see SVG make XML optional and move to a more JSON-like structure that's simpler to manipulate with JavaScript, perhaps even becoming a vector-based Canvas context. That would be the best solution for the web in my opinion.
Because we then do not need to worry about what support such embedding ;-)
In this fashion the focus for application developpers is to adhere to standards and let the client designers do the same. and hence spare everyone to worry about plug-ins, versions, security setups, etc...
i have this GUI screen shots from the design team which i needs to convert to a web page and what not. i'm thinking of finding some website which resembles the GUI so that i can copy and paste the html so i don't have to start from scratch. the only drawback about this method is i don't know what website actually looks like that so that might means a lot of browsing time. hehe.
So just wondering if there's a tool which can help me do the search? Or even better yet if there's a tool which can convert image into html web page equivalent, that would be even better.
i guess i'm just another lazy uncreative programmer trying to get the gui part done quick and dirty, hehe.
thanks.
You mean you have a PNG, GIF or JPG screen-shot... and you want to feed that into a program and have it spit out a collection of HTML and CCS which when viewed in a browser would look just like that image?
I'm sorry to burst your bubble, but I would be very, very, very surprised if this was the case.
It's basically just impossible. If you see a box on the screen, it could be a text area, or a div, or a td, or a gif, or any one of fifteen different things. There's no way at all a program could every figure out which HTML element to use.
I'm sorry, but you're going to have to write HTML yourself. A tool like Dreamweaver will help speed the process if you're new to HTML. But I'll bet ya two bits to a farthing that there's nothing on the planet which will automate this job.
Not the answer you wanted, sorry. But it's the answer.
I am pretty sure that you can use Adobe Dreamweaver to do this - going from design to HTML.
You mention that they used Fireworks to do the design. Is that Adobe Fireworks? If so, that application has the option of outputting the design into HTML for you.
From the feature list:
Design once, deploy to many platforms
Output Fireworks designs to HTML or the application of your choice: Adobe Flash, Adobe AIR™, or Adobe Flex®. Craft custom skins with exceptional design tools. Now your tools will play well together. Design within Fireworks and then export standards-compliant CSS-based layouts — complete with external style sheets — to Dreamweaver CS4. Create components in Fireworks for use in Adobe Flex Builder™ software. Create HTML-based Adobe AIR prototypes directly from Fireworks.
I'm not aware of any tool that can convert an image of a GUI into the equivalent HTML. I would imagine that would be very dependent on the styling of the GUI anyway. On top of that, it would probably produce some pretty nasty and nightmarish-to-maintain HTML.
It's probably not the answer you want to hear, but I'd start coding.
Did the design team do the design in HTML? Photoshop mockups? Both of those would give you a better shot at avoiding hand-coding time.
From a screenshot?
You probably don't wanna do this. You want probably want, at minimum, the file saved as jpeg or png, or any format, preferably with no compression so you dont lose quality.
Then you can slice it. Google "photoshop slicing tutorial" and tons will appear.
At best, you want the PSD file, which you can then slide it up and hide/show layers of things you dont want, etc.