 Hi, I'm Priyanka. I've been working with Adobe for the past four years. I've worked on fireworks, which is a web graphic design tool and in the past one year we have been working on a web tool that would generate graphics for the web and It would export to SVG as well. So today what I'll do is I'll share all the cool things that I I personally think are cool about SVG so Before we proceed, how many of you have heard of SVG? How many of you have used SVG? So what we'll do is we'll go over what SVG is and why we should use SVG and how you can use SVG and HTML and All the SVG elements and its properties and how you can animate and interact with SVG So SVG it is graphics that scales well across multiple screens Without any loss of fidelity What I mean by this is here. I have two versions one is a PNG version Which is a bitmap and I have a SVG When I scale it as you can see the image gets distorted, but with SVG There is no loss of fidelity and it works well across multiple screens Coming to HTML SVG and CSS SVG has been around for a while but what has changed in the recent past is that there is support for inline SVG now and Why is inline SVG important? It's because you can add SVG directly to your DOM and You can interact with it as you do with any other DOM elements So that is where you can make your web pages richer by making use of the goodness of HTML, CSS and SVG So coming to the properties of SVG SVG is Stylable you can use CSS or SVG styles. It's responsive. It works across multiple devices multiple screens Platforms and it works well with media queries as well. It's interactive. You can add event listeners to it and Walk with it as you would with any other DOM elements. It's Animatable you can add CSS or SVG animations to it here. You can see that the gradient is being animated and It is scriptable as well What I mean by this is you can generate your SVG and added to your DOM dynamically Frameworks like Raphael or Snap makes use of the scripting capability of SVG and it generates really good graphics that you can use directly within your HTML So in ways to include SVG in your HTML with X HTML you could use it as an image You could use it as an object with the object or the embed tag You could use it as a document with the iframe and with HTML 5 You can use it directly within your document or we'll be speaking more about inline SVG in this session So let's take a minute to look at all the SVG elements that are there You can use the SVG tag like this in your body or depth and It provides basic shapes like rectangle ellipse circle that you would expect any graphical language to have It has SVG text as well, which we'll look at in a while And it has other shapes like line polygon polylines, and it also has path with which you can Draw your shapes and busy your curves For styling we have SVG gradients and you can use SVG patterns You can use clip paths where you can define your shape and embed your bitmap within the shape There are SVG filters like blur grayscale and you it works well with CSS styles and There are transformation properties like translation or rotation Coming to SVG text a lot of things are being worked on to make the text rendering better on the browser with the new CSS specifications we have CSS regions and CSS shapes if you're not aware of it What CSS regions does is you can put your Text within your container and you can make the text flow from one container to the other and There are CSS shapes where you can embed your text within a particular shape but this is not yet supported on all the browsers and even with that CSS can't do something like this where I have the text on my path and It's really simple to do with SVG where you just define your path and have the text follow the path We look at some more examples on what you can work with SVG text in some time Animations so SVG has these presentation attributes Presentation attributes are more like fill stroke that CSS understands and we can use CSS animations to animate the SVG for other attributes like path which cannot be Handled by CSS because it doesn't understand it. We can use SVG animations Now we look at both right here So how many of you have played flappy bird? Here. So what I have here is my own pretty version of flappy bird As you can see it flaps. All it's doing is flap. It's not a game. So What I can do with this is what I have here is an SVG version and it's really simple to do this As you can see I have the bird The bird claws where I've defined my path for the wing and the rest of the bird And what we can do is the right wing that you see here We'll animate that using CSS And this is again really simple I'm using the webkit transform or the normal transform as well and I'm translating the bird to move up and down so it Shows the flapping of the bird Now that I have a flapping bird. I would want to make it move around Moving around a straight line is pretty simple, but what if I want to make it move across a shape like this This would be really difficult to do but with SVG This is a really simple to accomplish. All you have to do is you have to define your path Which you can create using any of the desktop tools like in scape or illustrator Or you can use online tools for this like SVG edit or Mondrian and Once you have your path what you have to do is use the animation motion tag and Just say which path to follow provide an ID and say okay follow this path This is how simple it is to do. There is no just to involve to do this at all it's really simple and One more thing that you can do is have SVG draw something like this with SVG path capabilities you can animate and make your Website much more richer and to do this again It's a really simple you just have your path and use the animate tag to animate it We'll just look at a real-world example of where this is being used So this is a New York Times article So New York Times is doing have these multimedia stories where they're exploring all the new web technologies and Using them to improve their user experience. So this is one which uses SVG path So what what this article talks about is the journey from one place to another So let's see how you how it goes. So it's from Petersburg to Moscow As the story progresses you can see that for every stop it kind of animates it like right there You can see that every stop animates really well and it Enhances your user experience with this. So this is what you can do with SVG And it's really simple to do and it improves the user experience CSS or SVG again, let's take a look at example So how many of you seen the Twitter fail whale? Quite a few of you. So there is an animated version of our Twitter fail whale. That's available online On the internet. So this was created completely using HTML and CSS and What I've done is I've created my own version of Twitter fail whale with SVG completely in SVG and as you can see it is responsive and there's no loss of validity because SVG itself is scalable and Here is a CSS version. Although this can be made responsive It's very hard to draw something like a bird using CSS and HTML SVG has the shape attribute just to draw something like this. So this is where you would want to use SVG instead of CSS pretty It's not bad the performance is not very bad. I've seen it. It has only like three transitions We can take a look at it. We'll look at it after we're done with the demo. I mean session Coming to interactions Now that we can use CSS Sorry SVG right within your HTML document. It works well with CSS interactions as well Here I have a path. So as I hover on it, you can see that I'm changing the fill color How this is done is that I define my path and since we have our Presentation attributes, which is fill which CSS understands we can Anime we can apply transitions on hover All I'm doing is on hover change the fill color. So this is how simple it is to do this and More role-world example would be to create something like an image map what I have here is a map and There are different locations of the map which on hover changes the color What I can do with this is as I hover on it. I can provide more information about the particular location or Take take the person to that location which would provide some more information about this location And it's really simple to do as well without any JavaScript again here I have the clip park and I'm using the image which is which I'm embedding within the Park and again on hover I change the fill color Okay, coming back to text This is one of the things that you can do with text right here What I'm doing is I have a path and I'm making the text flow on the path As you can see here, it's moving around How I can do this is again define my path and Get the text to follow the path using the animate attribute So let's look at some more animations that you can create. This is available in SVG. Wow This this will run through all the effects that you can do for text So it's like 40 seconds video that shows all the So these are the capabilities that SVG provides and So as you can see it, you can create really rich animations with text and SVG So coming to more richer interactions So we saw the word that we had back then It was following a path. So what I'll do now is Draw my own path that it should follow so I create my path and I'll go to follow the path that I just created So you can do a lot of drawing and interactions with using SVG and There's another example right here Where if you click on it, it adds an element and you can drag it along This is completely done in SVG And so these are some of the things that you can do but to do more complicated interactions you would want to use a library like Raphael or Snap or D3 which would help abstract all the complexity and make it simple for you to use it so this is what you can do and Coming to a browser support. This is a support for inline SVG As you can see most of the current browsers and devices supported Except for Opera Mini in SVG itself is supported across all the browsers, but this is the statistics for in Normal SVG when SVG is not supported you might want to use modernizer or a simple PNG to fall back on and What should you not do with inline SVG is you shouldn't create your entire HTML application using inline SVG because the performance of SV I mean your web page would slow down in crept incredibly because you should use it in web components like a logo or Components of your website rather than the entire website And you should also not use it when there is a lot of re-rendering of your assets That is required in that case. We would want to use something like canvas And these are where I found all the things from and let's look at another example So this is completely done in SVG again. So this shows the interaction where I click on it and it changes I can animate it These are the things that you can do with SVG and to improve the user experience and You can reach me write your sp.lk slash has geek and Yeah, that's about it. Do you have any questions? Yeah so canvas is what you use for bitmaps where you need a lot more like a gaming application a complicated gaming application which need not be responsive, but SVG is when you need more interactivity in your HTML applications Hello Can you hear me? Yeah. Yeah. Hi. So I wanted to ask why is it? It's suggested that you shouldn't use smell animation for SVG. It's in my I mean it's better to use Besides the fact that it's not supported in Internet Explorer. I mean is there any other reason why it's not the perform It's not. Yeah, that's one of the reasons that you shouldn't be using because it's not supported across all the things and the performance of CSS animations or SVG animations is a lot better than SMIL But smell animation SMIL animation is SVG animation, right? I mean that animate motion You have to choose between a CSS and SVG when So CSS animations are supported on browsers much more than a lot of How do I say this? so it SVG has a lot of geometrical operations that it has to do to do any of the animations like drawing a path involves a lot of geometrical operations or mathematical operations that you have to do but with CSS animations if it's just a transition It wouldn't have to look at any other path to follow So that is that code is not really embedded inside your browser to do it Actually, I'm not really asking between CSS animation and SVG animation Okay, because you can't do everything you can do an SVG animation using CSS animation I'm asking with regards to smell animation versus using something like Maybe a snap SVG or Raphael snap again uses the same thing But I mean instead of having the animation tags within SVG Uh-huh, you know if you want to do a small component So if you want to animate a small say I had a logo there If you want to just animate that you wouldn't want to get the entire library within your web page If it's small things that you're looking for then you can directly use inline SVG capabilities and add it right there but To do more complex things that is when you would want to use Library as such. Okay. Okay. Thank you. Does that answer your question sort of? Yeah, I can talk to you later. There's a question for you on screen Is there an SRC property for inline SVG? Yes inline SVG. What does that mean with an image tag? Okay, whoever asked has to clarify that now If you have an image tag and you provide the B64 is that what you're talking about? Yeah, so another binary format image I would have to use base 64, but since SVG is text anyway Can I just put the text inside the SRC tag rather than you know linking to an external? This or using base 64. Oh, I mean like can I use an SVG document right inside a Place where a data URL is expected for example in the image SRC or maybe in like inside CSS Exactly correct, but I do not want to link to an external SVG resource because that will cost the browser to you know You can embed the entire SVG within your inside say you you want to put it within a DevTag You can always do that, but unless you want more capabilities like interact with it Then it would not it's not really advisable because it just loads it right. Yeah, okay Slightly related question. I want to use a background image on you know using CSS, right? I want to add a CSS background image and again I can use a data URL over there background image URL, whatever So is there is it possible to use SVG over there? Yeah, you can just again get your SVG right there I mean you just provide your URL with the SVG file that you have Yeah Without using an external in it file. I mean embed it inside in not sure about that Yes, you can do that I mean you can always have SVG as Like if you've got an SVG file in your folder, then how if you got an SVG file in your folder Then how do you put the URL for a like is SVG property in the SVG property like I frame We are equal to right. Correct. Like if it's SVG attribute, how do you which attribute is we can give for like I have an SVG tag and what do you want to do with it? Yeah, SVG tag is there, but I don't want to put the complete SVG nodes in the HTML file I want to put I want to use an external SVG. Okay. How do you do that in there? The other Why we like why I need is like because I don't want to put the complete SVG pro tags Inside the steamer you can use the image tag or I frame or then it will work exactly the same as in line SVG No, it doesn't work like in line SVG is something that is present right within your DOM Yeah, so there is no option to put it like you and you just go to the SVG and get copied right here There are libraries which actually do that once you give the SVG it Optimizes that optimizes it and because otherwise if you want to use some in line SVG things Anyway, I need to put it inside the browser can I steamer completely right? Yes If I want to put it in a separate SVG and then use a single SVG is no option. That's right. Oh, no Come to a question in the back. Yes, you can do that So within the depth can I just go? Okay, so there are there's a particular track called a depth where you can define all your parts and you can use the use tag Okay, I'll just show So there is a tag called depth where you can define your Okay, I don't have it here So what you do is you have the depth tag where within which you can define all your Parts or attributes that you want to reuse and use the use tag again It's again use tag which you can reuse it providing the link the ID So I couldn't find that but I have it right here. I can show you the examples later. If you meet me offline Hello, can you have it one more question? Hello. Hello. Yeah, Piyanka one question the fact that you can actually You know in an image tag you can actually call a SVG file, right? Is it safe to assume that? in terms of the The way it renders like SVG versus an image is is it safe to assume that? It's just a different format But the way it behaves is similar For example, I mean like an image is a rasterd file Type and this is a scale. What happens is say Internet Explorer, right? It doesn't understand what SVG is so it might not really render it So you need to have a fallback for that. So yeah, I mean You know, I know that there are some You know products that give you a fallback in in the form of a PNG or whatever But I mean, I think this is also a follow-up question to you know, what someone asked I or rather I just wanted to clarify Can SVGs be also used as background images? Yes, you can Okay, and the what do you call it? The the size of an SVG is how you had saved it originally as in What is so for example, if I call an SVG file Is that what is the default size of that because it's obviously your XML file? So it's really small compared to no, no, I'm talking about the physical size. So for example, oh The dimensions even you can always change it right within your image tag But the default is how you saved it in your application. Okay, that's Okay, okay, cool That's it. Thanks Hello, so if I use the image tag to include an SVG How much of the DOM capabilities do I get or can I get? with image tag Mostly what you can do is say as the whole effects that image tag allows but not the SVG capabilities and you'll still get the Responsiveness and the scalability, but what you won't get is the SVG attributes and SVG Animations that if you ask the animations, etc. So what you still want to have like a hover But if you want to change the color again that comes back to SVG So you need to have inline SVG for that, but if you just want to say add the filter effect on Hover that you can easily do with so what if I want to use an external SVG resource? I just use the SVG tag Along if there's a SVG stored as an external resource, I want to load it Which is like the effect is similar to inline SVG. What do I do? I use the SVG tag and it has some source No, what if it's an external resource the SVG file that I want to load Then you should you need to put it within the image tag, but you need to copy and paste it right here You there is no way to just load it as I mean there are libraries that do that But so no Derek. So essentially I use the image tag to load it And then I load some external library which enables the DOM elements with the abilities SVG I forgot I'll get back to you, but yeah, there are libraries that Optimizes and puts it right into your DOM Snaps out that yeah Sorry Okay, is it good? Oh, yeah It's by the creator of Raphael only So it's really good. It's the it's basically Raphael 2.0, but with a lot more capabilities than Raphael We were using SNAP and we were building the tool so