1. Introduction : Hey guys. A trade from Polly in motion and welcome to this class. In the short class, we will talk about voters svg on why it is very important for front end developers to use SVG on their pipelines. And we will talk about how to extract SVG codes from different Istana graphic applications like Adobe Photo Shop and S cage. And also we will put discourse in an HTML documents and we will create on simple animation by using off HTML seizes on s vehicles If you don't know about SVG And if you want to have a very brief introduction to SVG, this glass is perfect for you. Enroll in this class and let's get started. 2. What is SVG: Okay, Now let's talk about SVG and various SVG. Ah, why? It is very important. Maybe if you are of a Web developer or you want to become a VIP developer or you in New York's Designer, why in some very important in VEP on in vivo application? And if you ever, um, see the documents and different websites and if you open an image, most of them are SVG. And let's talk about this and the reason why it is very important on why it's created, actually why we need to know about us. Fiji SVG is a Stanifer scalable vector graphic, and it means that did the name representing the all meaning off SVG. And it's scalable, literal graphic. It is Victor based, and it is supported by whip technologies like HTML and CSS is, and most of the Web browsers, like Mozilla Firefox like chrome, are all actually all of them, almost all of them. They're there supporting SVG forms, and and the cool thing about SVG is that it is Victor based. You don't need to worry about the pixel or affection or picks, elation, effects or something like that. It's it's different if you if you. Ah, working with some graphic Softwares like Photoshopped, you might know about Rast arised, a raster based graphic or on and victory piece to the main difference between these two kind of graphic mall Is that in Racer and rest arised All of the things that you see all of the all of the shapes that you that you will create after you saving that all of them are change and converted to a pixel beast Two pixels on If you zoom on if you zoom in, you might get some pixel are fiction like like formers like like Jay Peak farmers, PNG forms or these kind of his time and farmers for photos and these kind of stuff. So SVG is ah graphic former based on XML extensible markup language. What it means It means that you can create this Fiji. You can compress it. You can, uh, make some changes to the scraps and also on by changing coats and lines of codes you can you can create some changes to your to your vector graphic that you've created in SPG form . The other cool thing about SVG is that SVG is created by doubly tree See team doubly. Tracy is supporting the standard whip Technologies like HTML and CIA says, and also is VG is created by W Treaty on 2000 one. So that is the reason why is VDs supporting supporting the HT male and seizes? Or or you can integrated xvg with CSS html codes. And that is the important thing is that without each team hell without s, he says we don't need actually svg because we need some we need We need ah area framework to open its Fiji formers without browsers. Without these these frameworks actually or that we have these environments, we can actually open SPD on. There's a thing we need HTML page we need ceases to open svg some Although there are some frameworks, there are some website and tools that help you to open your SPG body, you need to to have an environment that read that can read SVG performance in this class. I don't want to go in tipped off svg and trying to create a great animations or things like that. I don't want to go in depth of that, but I just want to introduce you guys with svg and how to use that in an HD middle page on also have to extract SVG cores and copy them from a standard graphic application like photo shop on de s cage. On also is veggie can support animations and you can create to the animation. And you can integrate those animation with CSNY she male. And that is the cool things. And most of most of the ah animation that you will see in some website they were created in SVG. If I open an SPG shape on defile, actually the court is look like that. You see that we have attack off this Fiji and it's the opening pack and closing tax. If you ever use a female, you would know some of these tags and these elements you're now they're not. Actually, they are not so complex. They are very easy to read. But in most complex shapes, you wouldn't have ah dis match. Of course, you might have lines of code and hundreds lines of court and on this kind of situation, you might overwhelmed or something like that. It's not important. You don't need to know all of these things, but to create and change some of the parameters. You need to know some of them in these tax. So you're looking like that. You see that we have an SPG open fact. We have some fails strokes, TD's properties, and also we have line cabs on. By changing us any of them, you'll get a different result, and that is very cool. For example, this piece of code is is an actual shape. And if you copy that on and save it in an A and and put it in an html pH, you will get a shape without doing any other things without creating him on. That is the cool thing about this Fujin. It's it's, um, cross platform. It's not depend to any platform. It's cross platform. It's very easy to use. I hope you understand that a main ah definition off svg and very, very svg in the next Listen, I will show you guys how to extract SVG codes and how to get access to its very core off the shapes and elements that you will create on photo shop on s cage 3. Exracting SVG Codes : as I mentioned on our first lesson that you can copy and extract is VG codes from Istana Graphic applications like Adobe Photo Shop and S Cage and illustrator has well, so in here I have a very, ah simple, bad and shape that I've created in photo shop. And you see that we have some round rectangle and text. There's not. It is no any other complex things or victor or path. Our custom pats it just rounded rectangle and a fixed. So so to extract this vehicle from photo shop. You don't need to do anything or you don't need to write anything, any codes or something like that. Nothing that you have to do a slicked both of them on its very good to put them in a group and call this group about and and now, by right clicking in here, you see that we have copy SVG and copies here says if you want to have an A C Cisco's and sees his feet court from this for this shape, you can copy that and pieces on a HTML document. But if you want to copy this figure, you can simply copy This is vehicle just copy it Now it's copied on clipboards on If I goto any text editor oral If you used windows you can go to note pad about in here I have text editor on simply can just peace in here Come see you See that I have gained all of those things that have created inside a Photoshopped from for example I have a pat fell I having a stroke and also a stroke way This two picks ill And also we have a fixed fun family that it is from sense San Francisco you I display if I go in here and if I slipped my ah fixed You see that I have the same funding here and that is very cool All the things Alphonse itis and found side is 15 and that is very cool All the properties that you create in photoshopped it just copy here in form of core on your svg coats. So that is from food shop from SKG. It's also the process, the process sort of saying bad. For example, if I created you, let me create a new art board in him and just drag very small our part in here and also go to insert shape and created a rounded rectangle shape in hand. I doesn't just create, reduce without barter, or maybe be Have you need the barber and also change the color like descendant simply Ah, if I had the tea and create my fixed in hand Also change the phone size in the end, changes in him and also put it in center off about it. Now we have a very simple shape. If I create a new group from him from these shapes, call it bad and you don't need to do that. You can also slicked both of them bad. It's It's very good to, uh, put too. Have these shapes in an organized group. Man, if I right click in here Yeah, And then you see that the same, um, tiles and the same properties that we have seen in Photoshopped It just copy seizes attributes are copy s physical. If I head the copy SVG cool on. If I go to fix it and lead these now you see that we have bad is Fiji could but in different form. It's not make any difference or something like that. It just the same as physical, but the in different formation and different form because they are a different software on , um, the cool thing about s cages, that s sketch will create all the things for for all of your ah shape and I d and that i d makes very easier to to call them in CSS code and make some changes. So these air from its physical and you can also do the same in Ah, Arabella adobe illustrator on all speak in a copy. Ah, this vehicle off off single sheeps, for example. If I want to have this vehicle off this rectangle, I simply slick this rectangle and just copies vehicle If I go to text editor and paste it now you see that we just have that rectangle we have. Those are ports for you. Have you have those bad on names in these kind of staff? Bad. The main shape is ah rectangle in here on, we just have the rectangle And if I ah, and if we copy this card and put it in an HTML document, you will gate just a rectangle on the process is the same and photo shop has well, so that is the process off Korea Off copying is physical for a photo shop on esque, each in the next. Listen, how onto used the's this vehicle in an HTML document and make some animation some some very simple animation by using off, CIA says. 4. Using SVG with HTML and CSS: So now in this listen, let's use is vehicles in an HTML document on on will create a very simple animation by using ceases coats so you can create HTML documents to any on any text editor. But in here I am using brackets open source Ah, and free software that you can use and down from from different VIP side. And you can install it. Andi, if you don't have brackets, been used any textures or all, for example, note pad ar um, things like that. So I have created any documents and I want to go to on I want to say that just save it Talented slicked my folder and now I'm just simply call it. It's Fiji coats Dar hte email data. She meal is very important. If you did, if you don't put a female extension in here, you wouldn't gate on Oshima Lachmann. And it's not good. So just mm, click on save. And now we haven't an HTML document. Ah, now let's start creating a very simple, um html document in tax. So I'm storing it. Ah, each team ill on also, And also now we have it on. We have body so I'm not Ah ah h t mail a specialized coder about it. I'm just doing like that. It's simple. And let's have a titled in half of this Welcome to s Fiji. Uh, documents, anything like that. Anything that he wants. And now we have a very simple issue. Lachman. If I ride a paragraph in here, for example, this is the example off svg file. Andi, if I see this on opened this. Now you see that I have that paragraph in hand. It means that anything that you ride in body will appear in your female document on that school. So now if I m go to a photo shop and just slipped my baton on in here this copy SVG on go to bracket. And here I want to create a new def. A Davis is a kind of group in here in female on. Just put the it's physical inside of this, def. And as I mentioned Davis like group and I have to just put them in here. So So now you see that we have our vehicle. If I save it, come see. And if I go to safari and my my document and just reload this speech. Now you see that I have that shape without saving that without and pouring that went out would have being thes things were just copying those codes. We have that shape in him and that is cool. We can change some of the parliament person here. For example, If I go to fund on in phone size, if I changes to 70 and if I reload this now you see that the take size has changed on. I want to put this back 50 and save this and and you see that we have different options. We have different for months. Now. I want to show you guys how to use uses to change some of the parameters and ham. So what I'm going to doing here, Just giving these shapes class name, and by using that class a name has a reference our ah, our work will be easier. The process will be easier to Ah, just point out thes fix and applying ah Caesar's court to these shapes. So I'm just going here and finding the text and in text I want to add a class stack class properties on Just call. They call it. Text one and in pad also just at a class and call this box one, something like. Okay, now we have box one box one class that's referring to dispatch this path at the wrecking ball. And also we have the text one that is referring to over fixed. Now, if I go t style And in here I can just simply our season school. For example, If I put dark, maybe we will star with ah, our box box one and box one mean just opening and closing curly braces box one mean that you just apply those ceases code to just at this shape in hand. And now I can simply add awesome coats like maybe transform and go to transform and find me you condone apply all all of them But I just want to go for a scale and scale I can put some numbers and valleys for 1 200 on If I put to it it means that the transform property will scale your shape Two eyes as it previews are as a default value in here. If I save this and go to the browser and you see that it just scale it up and you see some cat out in here because our our port is not large enough. I can simply go to as Fiji Coeur in him. And I can change the within high, for example, with and hide off. Um, this match in height off tree 100 Excellency, that a non fi a refresher. You see that? We see the changes in hand, and also we can decrease the value just the default value, the default value and just the default value of over shape. Ah, pint floating point as well. See that on now. Why don't we want to do is create animation and transition for this pattern. I mean that when we put the, um, uh, cursor over it over this battle, it will change a skill. Ah, off itself. And also And also we want this sticks to become a smaller alongside of this shape as well. So for this purpose and here we have a fact svg and who over, and it means that it is of, ah, this court. It just applied. And when ah, the user over the mouse in it. And if I save it now, when I put the cursor over it. You see that as change. It doesn't have any transition, something like that. But we will create transition and first transition. I'll go in here and create another instance off the class. And for this I just type transition. There we have transition and also time. There a speed of it are, are in second and in here I want to go for a pint. Five second, just cynical. And if I refresh it, you'll see this animation and you see how cool is that? The animation is very smooth and very nice, and also we can do the same thing for our tile fixed one and just and then hand just because it's a tanks we can use phone size and for fun size it default value is ah, 50. And now we want this to be 35 pixel like this. Now, if I just change it to is Fiji Hoffa, um create on other innocents off takes one and type transition and find me for the selective it faster and save that Gu browser. And now, if I put the culture over it, you see that it just change the scale of it itself and we can also do so out of things like changing the color of it. If I out of Phil in here and type me with blue, save it and go to a browser, you see that it is changing the color of itself for the very nice and smooth transition. You see that on? We can have some different seizes coats in here and just we can link them with our shapes in here. And you have seen that how easy it is to integrate SVG shapes where T says and HTML codes and you can do bunch of other great animations Ah, with these type of things in hands. So ah, there are some other Alling tools like, um svg eat it and boxy svg editor that help you to create SVG shapes and SVG animation and copy the codes in its tansley. And that is very core if you don't have ah, a photo shop. If you don't have, um escaped, you can use some online edit Ah told that help you to create shapes and extract is physical and use it on your extreme enlargements and also for tutorials and for things on if you want to improve your SPG knowledge. You can go to deadly tree school schools SVG tutorial in half and you see that we have lots of tutorials in here from the SPD creators on that will help you a lot to improve your SVG knowledge. So that was from our class. If you have any questions or any suggestion, feel free to ask me and also a few in dried this class. Don't forget to put your reviews on the need off the review sections off this glass and also make sure to check out Sarah Polley in motion class on the skates here and also check out art. It's moody dot com for graphic oracles and creative articles. So my name is a true See you guys next time.