 Thanks for coming after lunch. Thanks, Kiran, for the slot right after lunch. Alright, so the next 30 minutes that I have with you guys, I have a talk which actually tries to look at two basically graphics on the web. Produced many cameras in SVG. So I am trying to do a talk which I made cameras in SVG, which way do I go. So it is really not an apple to apple comparison talk. So I have a little bit of a bias towards doing stuff in SVG. So don't be surprised if you actually have a little more moving towards SVG, but I am going to compensate that by having SVG worse than the cameras. So that is the talk. I have kept it pretty live. We can keep it interactive. I have a few demos to show, and I also have some bit of bigger intermediate kind of stuff going on there. So before I get started, I just want to take a quick start. Who is doing challenge stuff in this room? Alright. One person? Two three? Alright. How many of us are doing SVG there? Not a full hour. So I think my content structure would be useful for you guys. You know, I am trying to keep it as basic as possible and let's see how far we get in the next 30 minutes. Yeah. So, sorry. My name is Harish. I am the web and open standards guy for a region in this region. So I run the band listening team for Adobe in South East Asia region. So that's my job. I also have an after-life as a musician. I play for a band called Agam. I am a nice guy. It's important to know because even if this content makes sense, you don't like it. So let's quickly set a context here. So I mean, talking about graphics on the web, we have come a long way. We have started with the whole picture. Everything was actually in the image. Then we actually moved to the chip animations. Then flash, then we started using SVG and then canvas. We have come a full long distance right now. But this time around, we try to focus on two more complicated models of doing graphics on the web. So let's actually look at what is the current web graphics model on the web. So web graphics models are two okay. The first one is a declarative model of doing graphics. How do you write this? You write tags. So again, going back to the declarative model, which is being able to write tags to actually define the UI. And the other model is working with pixels, which is called the declarative program model. So basically look at it this way. So if you're given a small regular rectangle, if you're actually drawing the pixels onto it, that is typically dealing with pixels. You can control every single pixel like that. That's what the model canvas on the web tries to access. You can do a rectangle drawing surface and you can actually draw colored pixels onto it. While in HTML, everybody writes HTML here, right? So HTML, we have tags. Every tag is indicative of some action. It could be UI. It could be like semantic tags. But ideally, it's a declarative programming model where you have access to individual elements that you're programming, which is actually part of the problem. So SPG actually follows the principle of declarative graphics. So you can actually define something like a G, then say a circle, then say a rectangle, then say a path. And then it actually pulls out a graphic. While in Canvas, all you would do is draw those pixels on a rectangle. So this is the difference, primary difference between the two ways we are comparing. The first way is working with pixels on a given rectangular surface, which is the imperative graphics model. The other one is a declarative model where every graph I'm going to be working on has an appropriate tag. Right, let's quickly look at an example. It's a simple graphic, it's an animal browser. Now, quick question to wake yourself up. How many circles do you see? Did this serve the upper line? You see four circles, but correct, but there are only two. It's a circle with a stroke. Instead of having four circles, we have two circles with a stroke. So this is an SVG graph. That's how it should have ideally looked like. So this was my previous slide, just that I wanted to say that there are two models that I mentioned. So you have the Canvas way of doing things and you have the SVG way of doing things. It's pretty simple, it's not going to go back and spend a lot of time on it. It is just for you to sort of make out what needs to be done. So we saw this. Let us just quickly look at what making a circle like this would entail in SVG. I'm not on code because I only coded this up. I'm going to show you what that code looks like. Can you see it at the back? Better. So I have an SVG and specifying a width of 600 and 400, a new box, and then I say a circle. This is a radius 175, a stroke of it, a film, and another circle. So if you can see that the width is actually 50 pixels, that's what gave you the illusion of four circles. The circle has a very thick outer stroke and it actually fits conceptually. You can see the illusion that it's actually four circles. But this is what I mean by calling it a particular little way of doing a graph. I will move on and I will actually show you a canvas example in some time. But this is how you actually do a simple circle. Now let us quickly look at how these graphics are rendered. It's not a file, it's not a PEG, it's not a JPG, it's actually like a format. It's actually rendered on the browser. So the following types are rendered, shapes, text, pictures, a combination of all. And sometimes you can actually have mixed math situations of these things going. I mean you can have SVG in the context of canvas and things like that. We are not going to touch up on this. But in a nutshell, this is what gets rendered on your browser. In definitive drawing, you are rendering this calculated based on the values. It's actually extrapolated and calculated based on the values that you provided during these graphic elements. Like when you make a circle and say it's width is 200, height is 400, the radii is so and so. At runtime, it will be actually inspected as tags one after the other and then it will be rendered. So all the values that are required for computing what should be drawn on your screen is actually based on the properties and values that you set for the usual SVG objects. Also, the thing to remember is that the tags are executed one after the other. So if you actually declare a circle and a declare a circle, the first circle is declared rendered first, followed by a second. So if you want to put one over the other, always make sure that you're putting the one which needs to come on top is always declared second. In terms of canvas, it has got a context which is the 2D and the 3D context. It is available only once you create a canvas, you can get by the context called. You actually get an access to the context and then you actually draw it to the context. The most popular one is the 2D context but if you're actually a real programmer with some minimalistic support, you can do 3D stuff as well as I can. So again, recapping in canvas you are given with the context which is nothing but a pixel painting area and you actually start drawing pixels into it. While in SVG, it is like an HTML job. You are actually adding graphic elements, it has tags and it is part of it now. What does that mean? Everybody is working with JavaScript canvas in all of us. So the people who are working with canvas is going to ask you, how easy is to do actually events on things that you add onto canvas? Did somebody say difficult? Without a framework, I will not do it. I have better things to do in that way. My brain goes into kappa problem when I do that. So I actually put an ExcelJS framework on top and I start working with the object around the canvas. The canvas only gives you event access at a macro level, at the canvas level. But the stuff that you're adding onto the canvas, it is really, really hard to do eventing on it. See, by eventing what I mean, you have a circle. When I click the circle, I want the circle to fly in old flash sort of thinking. Like you have a monkey image and you click it, it has to jump. And you want to do it in canvas, it's quite a pain in the ass. But considering SVG is similar to DOM and it is inherently eventable, it becomes much easier for you to actually attach events to SVG. Mind you, you can attach events to objects that you add to a canvas. I'm not saying it is not. It is just that it is actually a little harder. At the face of it, it's actually harder than how you do it in SVG. Right? I just said, object level is hard to do. It means frameworks. ESLJS, just one of them. You don't have to necessarily use it. It's a flavor that I'm very fond of. And the guy who wrote it is actually a old friend of mine. So both reasons put together. That's all. So I have, I'm going to show you a small little demo of what we call as pointer events in SVG. Any guesses in terms of a pointer and so on? Anybody who has any questions? Yes. So yes, it's of course, Mao's attached. Pointer events actually allow you to actually track which particular section of an SVG that you are actually interacting with. Right? So SVG has the following. It's got path. It's got fill. It's got the outer and the inner portions in case of a constixer. And so the pointer events will actually help you track which particular region of a particular SVG object are you acting with. There's a demo of that. I'm going to just show you the demo that will give you a clear picture of what pointer events are. Can you see the back? Right. So you can see the events here. Visible painted, visible fill, visible stroke, painted, visible fill, stroke, and all. See these are available pointer events in SVG. So when we can just, when I'm going to act on one of these things now. We can animate this text below to show you whether that event was triggered or not. That's how this demo is structured. So visible painted. Click anywhere. It's all painted. The whole graphic is actually drawn. So we are clicking anywhere. It's actually painted region. So the pointer event, this will paint in files. Right? Visible fill. So if I click on the stroke, nothing happens. If I click on fill, it should just animate. The animation is nothing per se. I'll show you how to do animations in SVG. That's my next one. But this is about the events that you need to do. The next one is visible stroke. You click on the stroke in the file, you click on the fill, it would run. So I'm not going to run the whole thing, but you get the picture. So these are the events that kind of keep track if you're actually acting on one. These are the points that events in SVG sort of. Let's reuse. Let us now actually go. This is a small snippet of the same demo. We can look at it. There is a circle with ID visible painted and point events visible painted. So I'm just doing a simple animate. When you are clicking this, it just begins the animation and there's a text below. Then visible painted.click that animation to this. It's actually fairly straightforward. You can actually do it to the model. So there's a circle. It has got an ID called visible painted. Yeah. And then I have defined an animate for that one, which is actually the amount of changes in the opacity. If you click in the middle, you see that it kind of becomes white and comes back. And then there is a text, which is at the bottom of the circle. That is triggered when the visible paint is clicked. See this syntax I'll touch upon in a short while in the next five minutes as to how you can do different animations in SVG. But it's important to know how you can use the point events. This is a problem in Canvas. There's no direct way of doing animations on Canvas. See you will have to actually use your own mechanisms to actually be able to paint things on a Canvas in a time fashion. It could be done in the old fashion. Your set interval, set timeout way of the more modern browser frame rate base. That's really a callback. There's no direct way of actually doing it on Canvas. So that's where again a framework or a green base is part of the great JS library to which even these are JS belongs. That comes handy. But let me look at declarative animations. This is important in SVG. Do you know what an SMIL is? Nothing but a small snippet of XML, which actually lets you define properties and styles and a bunch of things. SVG actually lets you do declarative animations. You can actually add tags to define animations. You saw my previous example. You could see a small snippet of that. But I have a much nicer demo of that. Anybody knows what a shape is? It's a very flash terminology. I don't know what you call it. It's actually about a morphine. You actually take one shape and you actually morph it into another shape. So I have a small little demo to show how you can do morphine using SVG. That's an SVG graphic. So this cross, if I click it, it becomes static. And by morphine, it is not an advantage story. It has to animate a morphine. Let's say it works. You wouldn't really know. It's actually a fairly intense piece of SVG. I didn't hand code it. I used illustrator for it. There's a tool called Adobe Illustrator, which actually helps you create vector graphics for the SVG. But what is interesting to see here is that from the generated SVG, you can actually create an animation like this. I have a simple demo of this. But before I go into that, that's what I'm going to come to. This is not an illustrator session. But when you're doing SVG, SVG has something called path. When you're actually making a non-standard geometric shape, what you're actually creating is an SVG path. So to be able to do a morph, like what I have demonstrated here, what you need to remember is the number of path points between the first shape and the morphed shape has to be equal. See, if you have X path points in shape A, you need to have X path points in shape B. That is when you can animate from shape A to shape B. See, animate is actually a tag. And now if the question is specifically about how to create SVG, so what I do is you actually draw a path in the strata and there's a tool called blending as you can see here. You can use the blending tool to actually create, it will actually extrapolate the path for you. So use the same blending filter on the target shape. It will create the same path points for you and give to SVG tags. Then throw it and code this up. So coding this up is nothing. Let me show you. Okay, don't worry about all this. I hope everybody knows what the m and n and all that what we didn't see in SVG. It's a simple, you'll move to line to sort of commands that you typically have in any kind of graphics program that you're actually drawing. It is actually set as parameters inside a tag in that code. But that's not the point. So if you see here, see I have a path called morph. This is actually my cross, which starts with n29.766. And I'm saying this one will stop when the cross is clicked. So basically that shake is called cross. I click that and this is the tick. And start to animate when the tick is clicked. That's about it. So you actually get this from Illustrator. You simply say, on click or path, go there, on click or path, go there. It's as simple as that. And just to make this demo a little reliable and video because it's actually the SVG's beauty is that it will actually draw empty spaces between the untainted areas. So if you're drawing a cross on the cross, it's drawn. The bounding box is not drawn. Bounding box won't have any pixels. So just to prevent that, I added two rectangles and kind of filled them so that the click almost always receives an area click on the cross. That's what you see in the code. It won't be so affected by the code, but it's pretty simple. You have to create like two paths from Illustrator here for your favorite SVG generation program. And you can morph it by simply putting n, and you get directed. And give the attribute name, and then just say 2. So this is done without any JavaScript as you see. But now the question is, can I do the scripting or anything? Yes, there are frameworks for that. A lot of people that I spoke to here said they're all using RafaelJS for all their SVG work. 99% of people who I spoke to are doing lunch on said that they are all on RafaelJS. Some people are on D3 as well. Some people are doing paperJS. You're free to use micro frameworks which actually help you do stuff. JavaScript don't even pay for SVG. But since I'm talking about SVG, because the most honest way of showing how you can do animation in SVG is by actually showing how you can do it with the glory. Now, who's working with CSS Transitions Transforms here? Do you like it? I love it. But you know there's a small problem that I face with CSS animations like that. They are not the same. Can you do, can you directly do, can you out of the box do a signature animation in CSS? If you can, I'd like to be, but I believe you cannot. Because they are inherently parallelized and they just run. You call two CSS translations, they just run. You cannot say after my X translation is over, trigger my Y. You cannot. See, that is the reason why I suddenly became a huge fan of the SVG animations. I was building a project. I was building Impressionist Operations. Most of my translation-translation efforts internally I wanted to build with SVG. I didn't want to build them with CSS Transitions. Eventually they generate CSS, but I wanted to experiment with time management. The big synchronized animations can be done in SVG's mind. See, I mean, it's amazing. I mean, you have to do nothing. You have to write so less code to actually figure out time transitioning in SVG. It's best shown with the demo. Let me show you that. Yeah, it's a Dumbass, a Benjamin, but then I want to play this leftmost guy. He will sway, come and knock this, and by principle of physics, the guy on the right will sway. Correct? He's studying his code. No, so I want to show you that. It's a simple piece of animation. Nothing too complex about it, but to see the code, that's what it is. Can I switch it? I'll show it online. Of course, I mean, recycling this piece of code is nothing. That thing is actually a pendulum, so it naturally has a line, and then that gray circle, that's the graphic. That's what you see here. Line, a circle, and another circle. The stroke is also a spot, just to be the gradient perspective. Then I have just given an animate transform, and I'm saying type is rotated, values 0 to 90 to 0, and then begin when part A is clicked. See, part A is an entire section. See, when you actually do SVG, you actually move them together. So you actually put a G tag, then you have the part, then you have the line, then you have the circle, and then you have the attribute. So I'm saying, when you click part A, begin this animation, and when this whole animation ends, just similar to this begin event mode, I have a end event. So when this ends, then part A, this animation, then raise to your anim.n, I will say part A now. That animation now. See, that's what I'm doing over here. For the little involved, but see here. So this is the golden circle, the section. What I'm highlighting, that's the part B. So I am just asking that transformation, that animation to begin, when the race here animation has ended. See, that's exactly what we see in the demo. So this is the part A clicked, ended, part B triggered. See, what you see over here is, it's all decorated. There is no real code like ever. But you can actually do this with code. Actually, we are actually building an application. You do not do it this way. But the beauty is, it actually gives you type information, and these are all vectors. They're all vector graphics. They have resolution independent. And it actually works so smoothly. I don't know. It works very smoothly. Sometimes even smoother than some of the CSS stuff that is debatable. That's just probably my own illusion, because I have a specific liking towards SVG, like I mentioned. I'm kidding, okay. Can I have 5 minutes for the speaker? Okay. Since I have time. 5 minutes. Yeah, I think I'll have 5 minutes more material to cover this. Okay. We just saw the timing and the situation. It's not that you can do that. So that was something which is world frameworks. This is very important to know. So what I showed you is to actually compare SVG and Canvas in bare-bone sort of structure. What Canvas offers to you, like I mentioned. See, I am tending towards SVG more in the stock. But between Canvas and SVG, there are a bunch of really great frameworks. And I've stacked out most of this work that you're doing right now. So this framework that I would like to name for Canvas, I already named easel.js. There is a, like a rather lightweight library called Kinetic. I don't know if anybody is using it. It actually just gives you, like, you know, object access. It doesn't give you animations and stuff. That kind of JS is actually pretty nice and handy. So I'll actually show you a simple demo that I built in Canvas using easel.js. Let me just pull up that demo. Yeah, so I'll tell you what impression it is in a while. So this is the demo that I built using Canvas which was inspired by the Google Zeitgeist experiment that everybody has seen. Have you seen the Google Zeitgeist.com site? They have a bunch of visualization. So this is actually done using Canvas. It's pure HTML JavaScript CSS. This is the demo that I built. So it is on Canvas. You'll not see a single line of HTML written for this. And similarly, this is actually, there's another demo that I built for, so that uses a combination of CSS and SVG inspired by the Zeitgeist experiment. So this is a combination of SVG images and regular HTML. So it's just stuff like this. The idea is not my recommendations. Yeah, so this is something I also built I said it's a combination. So basically that some of the Python stuff is not SVG, some of the Python stuff is CSS. The moving objects, the moving parts has to see the gradients, the caps, the blues, the blues, the ones that actually grow there are SVG. Can you affect the SVG elements using CSS? Not to a great deal. I know the support is patching up. You can do something, but you cannot do a whole lot. So I also built one more, which is, oh, sorry. I built another demo which I'd like to show you. This is actually an application which was initially flexed. I just ported that to HTML. Again, some of the transitions and some of the assets that you see are actually connected to SVG. So I don't know if you've seen the flex demo of this. Anybody seen the flex demo of this? You guys should have seen it. Yeah. Okay, so this is again another one which actually uses some bit of SVG and stuff like this. So these are all a couple of experiments that I've been doing to actually mix and match things. This also has, it's not exactly SVG, obviously, an HTML JavaScript, but this is another example that I did. And of course, right. So these demos I just wanted to, these are all posted in my blog. You can actually go and take a look. So, right, now where am I? D3Refral.js, Paper.js, Go check them. I don't know if you're sure about these frameworks. They are out there. They are already using them. If you're interested to see what you can do with them, I'm sure you'll see that. Canvas SVG is both off of great capabilities for the web. You can build stuff in Canvas, build in SVG, I have been doing both. I could show you a couple of demos. So both of them actually offer great capabilities, but every few graphics iteratively and through scripting makes SVG more interesting for me because I'm working with a rectangular area of just dark pixels. So this is not always suitable for all sort of problems. See, there are specific situations where you should use Canvas because you want to have pixel analysis, but you want to have high rendering, you want to do high performance stuff. There is a place for Canvas, but there's another, some of the integration support is a huge plus. This makes it very powerful for games, data visualization. This one. Do I have an example? Yes, sure. You see that again? You see that? See that? It's completely Canvas for my site, it's not a game. Just spread out. Should I? Yeah. I should have spoken to you before this time. I should have spoken to you before this time. So you guys see, have you all seen R0.MA? R0.MA, yeah. Okay, okay, okay. Before you all make a judgment on me being the Zabbit Canvas hater who's actually actively making propaganda against Canvas, I'm sorry I'm not. I was really mentioning that there is a use case for that. For most of the time, of course, there's a great example of how you can use Canvas to build something which is not a game and which is not a digital version. Props to you for that. And just to reiterate, that is not my intent. But as a guy, as an engineer with personal likes and dislikes, I like the semantic aspect of this beauty. I like the fact that this is dominant, and I like the fact that I can access very individual parts of it rather than working only with pixels. And secondly, I also hold a little bit of blood from my previous life as a flash evangelist where everybody used to say that no SEO optimization, I can't even read the text from my subject of movie. Can you read the text from Canvas? So comparing apples against apples, Canvas is actually a nice variant for a plug-in fewer than what we used to do in the plug-in earlier. You can now do it without a plug-in. But the real thing has its place. Sometimes I personally would not want that pendulum animation to be when you see the case. It actually required 10 nights of markup. I would want it to become that. That's me. I'm not evangelizing. I'm evangelizing me, but I don't have to take money from. So that's what I was trying to say. Like if we just go to Ganskin's 3JS page, he has some mind-blowing demos of what he has done with these in JS. For all you see this from a hello world probably something as complex as like building a space shuttle. So my intent was not to tell that to not use Canvas. And this is a great example. That's what's a good thing to do as to what you can do with the powers of Canvas. Once again, it shows us how a nice plug-in free, open world can have this kind of great filmmaking experience. So that's a great thing. Not far. I have a few minutes and I can... I was wondering if that would be good. That's okay. Questions? Is there any cross browser issues? The question, cross browser... I wouldn't call it cross browser issues. His question is, is there any cross browser issues with SPG? I wouldn't call it cross browser issues as SPG is a spec and different browser is implemented. Like, you know, it's an implementation question. So if you're using SPG, you will be able to check which browser implements what feature of SPG to what extent. So to that extent, it does cross-cloud compatible, but you also need to understand that different browser vendors have different browser in terms of what features they want to implement first. So it would be good to look at them before that. Same with Canvas actually. So most of Canvas 2D is supported all across. For Canvas 3D, you might have to check which browser is supporting and... SPG used to be called... SPG had its own... ... SPG for... ... Right. I think it's still on. You can actually, you know... Yeah. Yeah. Yeah. Yeah. So he's saying you can... You can output SPG specific to which browser platform that you're targeting. Like, you know, you can output SPG for Chrome, SPG for... Yes. What's the drag and drop support for SPG? Can it be done... It's done. It's done. What is the drag and drop support for SPG? Any more questions? I don't know. No more questions. We'll save the next speakers sometime. Go. Sure. They're not giving that to you. Please. If I'm plotting some visualization, I'm putting in a DOM element for this machine. Is it better to use a canvas or better for this? For a... A huge amount of... Use your description. Good question. See... You're plotting your DOM, whether it is SPG or whether it is HTML. Actually, ruining your DOM with way too many elements, especially with nice things, especially with a whole lot of pixels being drawn under them is terrible, whether you're doing a SPG or not. So, in that particular case, that's what I mean. So if you're actually plotting with little points into a... a canvas stick chart or something like that, Raphael and I explained that they do it... Kickass. I'm not going to... I mean, they have their optimizations of their own to actually probably do virtualization. See, virtualization is the way you actually control the number of DOM elements, right? You actually resize it. Like, you have 10 elements, and at one point in time, you're showing 10, but you're actually scrolling the list to actually virtualize, right? Multiple ways of DOM virtualization that's possible. You can implement your own. So, Michael Fritz was great at making it do that. But if I was going to frame work-free sort of workloads, I would be skeptical to add way too many DOM elements, doing way too many things. See, even adding DOM is one thing. Attaching listeners to that, and those listeners actually doing more stuff is something more. So, a cascade effect of that would actually cost you very, very slow-paced things. And of course, if you are not a really good JavaScript programmer, you're going to have lurking objects, ISC around dynamic programmers, generally randomly create objects, kind of attached. Listeners with DOM elements and the DOM's kind of input, but the listener is not. So, don't fall into that mess. If you actually know that your DOM is going to get flooded, virtualize like a lot of the objects. That's right. But that's my suggestion. Of course, there will be something reasonable. It does happen, actually. Like what you said to Rafael, it's as big a claim that there are, like a lot of libraries that would have all that lurking. Right. See, eventually, I just spotted the experience of mine, which is not specific to JavaScript. I used to work in the Adobe Flex, SCV, whatever, whatever, it's similar, it's similar like language to Flash. So, I was doing the job that they have in component, which had a virtualizer, virtualization support, and even today, I get, you know, threat mails from people last room. How that feature has been being used. Like, a lot of people are using, like, a large enterprise that you're seeing, I myself have confidence in the components. So, like I said, you need to be watchful and cautious for your own use cases and so what do you want to do? Well, large enterprise cameras actually can work better with learning because Tom inherently lets you write whatever you want while cameras actually puts a little more distinction in terms of what you can do and what you cannot do. So, right. Any more questions, sir? He can ask personal questions, don't be shy. All right. Okay. Okay. So, Vincent Hardy's presentations, couple of demos are both, the folded hands is for Vincent Hardy. See, he's actually my guru in SVG. I have been working with him for like, for the last two to three months, working on some CS, shaders, and stuff. So, go check Vincent Hardy's presentation. It is really hard to build a presentation which is better than in a sense. So, Vincent is your man. If you want to go and do more stuff, svgwow.com, half of the motivation is also by Vincent. So, Vincent is a principal scientist in Adobe. He works in San Francisco office. Great guy. Very responsive. Vincent, I'm just for Hardy and Vita. So, he's a man himself. Go ask Vincent. Vincent, what's your name? Michael, right? Yeah. I don't know. So, we are 4th Cup. Anything to be dropped in email or follow me on Twitter or please follow me on Twitter. Makes me look good in the general context. And of course I have a blog which is xoround.com. And follow me on Twitter and say hi if anyone is here. And please read me and a last small word for my own good. This is an Impress.js presentation and we're introducing a tool called Impress.js. Impress.js is a tool that I am building to be able to create Impress.js presentations in a visual way. So, the Impress.js is available at Vata.com on Impress.js and my tool is free open source. You can see it over there. If you guys have something to look up to me I'll give you a demo of Impress.js because I don't want to take rats from the hazy guys for shamelessly creating my application. So, thanks for coming in this afternoon and not sleeping and actually putting a nice brave face for my talk and see guys out here. Thanks for coming in this