SVG Explained in 100 Seconds

Key Takeaways

scalable vector graphics or svg is an image format that's like html for 2d graphics they differ from raster images like png or jpeg that use a grid of tiny pixels to create an image and as you zoom in the pixels become larger making the image grainy in contrast a vector image can be scaled to any size without losing its resolution because instead of fixed pixels its appearance is based on geometry you can create svgs with tools like figma or illustrator or by writing the code directly which is easier than you might think and opens the door to animation and interactivity create one by opening an svg tag then define a coordinate system with the view box attribute that gives us a frame with a width and height of 100 units on which we can draw graphics draw basic shapes by adding elements like rectangle circle and polygon position the rectangle by defining its x-y value on the view box then give it a size which can take values that are either explicit or responsive we can change the color of the shape by defining its fill or define an outline with the stroke attribute and if our styling gets too complex we can extract everything into a separate css stylesheet by applying a class to it just like any html element we have the full power of css at our fingertips which means we can react to events on the shapes and then change their styling or animation accordingly but most graphics are more than just basic shapes they contain complex artwork with all kinds of twists and turns and that's where the path element comes in the shape of a path is determined by one attribute d for draw coding a path is like controlling the tip of a pen with a series of commands the most basic command is m for move which will move the pen tip to an x y coordinate an uppercase letter means move relative to the view box and lowercase means move relative to the last point in the path but move doesn't actually draw anything to put the pen tip down on the paper and draw something use the l command it works exactly like move but draws a line that can be styled straight lines are cool but what if we wanted to add a curve like we would with the handles in illustrator create bezier curves with the c and q commands define the position of two control points then the x and y coordinates where the curve should end then svg will automatically calculate a smooth curve for you at any scale this has been scalable vector graphics in 100 seconds if you want to see more short videos like this hit the like button and subscribe thanks for watching and i will see you in the next one