‫Hey, there.
‫Welcome back, Shabangu, the site now in this lecture, let us discuss about this 3-D that is scalable
‫vector graphics.
‫Now why this topic is important since when we work with any type of image, maybe we are working with
‫any type of background image, any type of logo, or maybe any type of dog jpg or not being image.
‫Now all these type of image depend on pixels.
‫So maybe if I zoom in, maybe if I zoom out, chances are they will be affected.
‫So we have a type called not a 3D.
‫Now, these scalable vector graphics can be zoomed in, zoomed out without getting affected.
‫Now one thing you need to understand that these switches are basically code that create the image.
‫For example, if I copy as we go right now, I can save this one and see the demo.
‫Hey, you can see we design our circle.
‫So that means this is the code which design this stuff.
‫Now, this can get complicated to design logos.
‫So if you talk about Google, if you talk about Twitter, they don't use not being you are not jpg.
‫They utilize these sweeties.
‫Why?
‫Because they are scalable.
‫That means if I want to the Google logo, it is not going to get pixelated.
‫Also, the second thing is they are easy to load.
‫That means Google is serving millions of views out on, I should say, billions of user every single
‫day.
‫So it's easy to solve the logo part.
‫But as we do, instead of not being our dog body, I hope you got the best idea.
‫Now there are certain things that are by default, or I should say, that are sold in common ships that
‫are heavily well with SPG code itself.
‫Now remember, this is a code part how you design this image with the help of this code itself.
‫So if I jump here.
‫This is the cold part which help us grow to find a different type of shape now.
‫Currently, I'm utilizing so-called but there are ellipse.
‫There is a line that has polygon that is rectangle and few others as well.
‫So there are a few different things that we can utilize.
‫Now, if you jump onto this whole cone, you will see we have defined width height.
‫Then there is radius for this particular circle that is border color.
‫There is weight of border as well.
‫As defined is basically the background color.
‫So this is the yellow, this is border.
‫Then there is word for a border and also there are certain other properties like six and Zeevi, which
‫refers to a center point of the circle on X and Y coordinate.
‫So the default values zero zero.
‫So if I talk about 50-50.
‫So that's the center point for ourselves concurrently.
‫Now you don't need to remember this again.
‫I'm telling you you are not going to draw shapes directly, as we do in real life, my work base.
‫So as a beginner, you don't need to remember that our dances that, OK, for example, you can create
‫the tango.
‫So if I copy the code for a rectangle here, save this one midmarket.
‫You can see I created a rectangle.
‫So that's how this is going to work.
‫But this is some basic stuff that you should be aware of.
‫Now how to utilize this 3D things to do some difficult tasks because we are not going to do this red
‫circle rectangle.
‫We have tons of resources.
‫We already read enough of CIUSSS to just carry on these basic stuff.
‫What we can do is we can design some views like this.
‫It's pretty hard to do this type of stuff with the help of CSS directly or if you see the dividers that
‫you see with the header part.
‫So if I just zoom out a bit.
‫This is pretty common design like waves that you see with different type of website, it's pretty popular
‫on the header part or I should say, the banner part of our website or maybe different type of shape
‫we can utilize either border radius or we can utilize as we depart.
‫So there are a lot of things that we can utilize Swedish port.
‫Remember, it basically utilized the common images like logo or any type of water content, which we
‫utilized again and again.
‫So on the repetitive task, as with use grid or any type of difficulty that we cannot implement directly
‫with CSE's.
‫And that's where this whole video game come into picture.
‫Now, as we give a lot of flexibility to draw things out, currently, we are growing this whole so-called
‫rectangle thing and then utilizing their own attribute.
‫Remember this spot?
‫We are utilizing the fixed values like so-called rectangle line polygon poly line.
‫There are a few things that we can utilize, but how do you draw stuff like this view?
‫So if I copied this one, you can jump on to get waves start.
‫I'll just randomly select anyone for now.
‫Click here to download Download.
‫As we do, we will do that later.
‫Or just copy this stuff and let me paste it here so we can discuss a lot of things now here with as
‫we do when we try to have complicated structure.
‫You will see a view walks, then you will see this part actually by save this one.
‫You will see this part instead of circle or instead of rectangle.
‫Now we have about then you will see this film, then you will see full opacity.
‫Then you will see this B and this B has some value, pretty big value.
‫And that stands so testy.
‫So you see what we are trying to do now.
‫We have this view walks.
‫Basically, what this view walks is it is defining shape in general terms.
‫Then this bill is going to take the color.
‫So whatever the color we have defined.
‫If you jump over this, this is the color.
‫So this bill is going to take the color.
‫Then we can define the opacity.
‫So if you change opacity here, maybe if I see five here or maybe 50 here, you can see how this is
‫changing.
‫And if I go over 200 here.
‫So that's how it's changing.
‫So this is fairly opacity, and then this is the which is defining the part of how this whole thing
‫is moving.
‫So we have this and we have this L what are they and how this is going to work?
‫Don't worry, we will discuss.
‫So I jump back here if I utilize a tool called Ezrahi Part Ed and just clear the screen for us utilizing
‫this potentially path.
‫Now we can design any type of image with the help of this tool.
‫Maybe I want to draw a rectangle or maybe any type of ship shape or any other shape.
‫So what I have to do is I have to click here and these are the items that you are going to see.
‫Move line, vertical line, horizontal line go.
‫So these are the you can see code to draw something in SPG.
‫If I jump here again, you can see inside our D, we have M that has move, then you will see and then
‫you will see see, which is spoko L is for line.
‫So this is basically a code that is drawing our image, remember?
‫So basically, if you see this, this is code behind the scene which is drawing this image.
‫OK, let me get back here and let's let's practice.
‫So I suppose if I select the line on had I draw a line here from this point to this point, if you see
‫this move as zero zero, that is higher X and Y direction, but L is line, which is 0.8 Higgins's zero
‫to eight.
‫Now, I heard if I insert another line, I go from this point to this point.
‫Now here you can see our code is increasing, so this is the first part.
‫Now the second part is we are moving towards IL 17, which is the x axis and eight, which is the y
‫axis.
‫Now from here, let me draw a go and go from this point to this point, and maybe let me take this go
‫ahead.
‫OK.
‫You can see we just draw this.
‫So now this is the new part, which is go 11, seven three five zero zero.
‫So here we just created our direction, and these are the point which are affected indirectly.
‫So if I want to copy this, I can copy this whole bag.
‫And let me get back to my vehicle now instead of this.
‫Let me replace it with my only.
‫So let me clear this denial.
‫OK, great.
‫So now I can add my own path.
‫And if I save this one, this is my path.
‫If I get back here now, here are the top right corner you can see we have that ship.
‫This is the exact shape.
‫Now the thing is, these are small coordinates and we need to increase their size.
‫So let me try to use instead of equipment, try to use 80, 170, 80.
‫I'm doing it randomly just to increase the size and see if this one.
‫It back out.
‫You can see this is the exact ship that we created.
‫Remember, this is not an image.
‫This is a squeegee.
‫So if you right click here, click on to the source part.
‫This is as we remember this point.
‫And you can scale it as much as you want, according to your requirement.
‫And this is not going to get big, senator.
‫Let me go with 10x more.
‫That means change their size.
‫For just reference, what was with the save this one, get back here.
‫You can see it's walking.
‫So that's how this whole pot thing is going to work.
‫And in general, we can create any type of shape.
‫Now, if I clear this one again and increase our scale and maybe go with Ben and Ben here, how can
‫we have increased our scale?
‫Now, if I try to draw something?
‫Maybe use a line.
‫And use a line again.
‫Here I can also convert this line, maybe let me select this line again, this point.
‫And converted to go, and now I can change it.
‫OK.
‫We just try to slide it, yeah, and I can also select this line.
‫And try to convert it.
‫Change the car park.
‫Maybe this yeah, something like this.
‫And here, let me add on new line itself, so let me select the line.
‫Cover this one.
‫So this one part is clear.
‫Let me also draw something else.
‫Let me create a call.
‫And you can see I am designing something.
‫This looks fine just for the demo, Bob, but no, let me copy this one, this whole thing and it had.
‫In our part, again, we need to resize it, but you can understand that what we are trying to do.
‫Let me add them with then multiples.
‫Save this one.
‫Get back here, and if you see if we does design this.
‫And here you can declare whichever you want.
‫Also the ambassador to Iraq, so I hope you got the idea how to work with, as we did behind the scene.
‫Chances are you are not aware of this and more student and even the junior developers who are currently
‫working and feel are not aware of this.
‫So I hope you got the idea how to utilize this tool just for understanding purposes.
‫Now there are several other tools that can help us to design readymade as we do that we can use directly
‫on our project.
‫I hope you got the idea.
‫I'm going to clear this up.
‫So remember, you can either use your own custom part or there are by default values where the so-called
‫rectangle helps and a few other thing.
‫So you can utilize them.
‫I hope that that's the basic thing that is clear for you now.
‫So I'm going to remove this part.
‫And currently, we don't have anything with CSIS.
‫So what I'm going to do is I'm going to create order and design these waves, the ship dividers and
‫experiment things with the help of our banner.
‫So that's all for this lecture.
‫Let us continue this stuff in the next one so we can play with ships with the help of these pre-defined
‫builders.
‫Thank you for calling.
‫I hope this lecture was helpful, and I see you guys in the next one.