Learn full SVG creating by coding and adding effects to it like animations.
Scalable Vector Graphics or SVG is an image format that is like HTML for 2d graphics.
They differ from raster images like PNG, JPEG… that is 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 make SVG by 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 “viewBox” 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 its “x-y” values on the “viewBox”, then give it a size which can take value 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 art work 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 upper letter means move relative to the view box and a lowercase letter means move relative to the last point in the path, but “move (M)” doesn’t draw anything.
To put the pen tip down on the paper and draw something use the “I” 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 Bézier curves with the “C” and “Q” commands, define the position of two control points, then “x” and “y” coordinates where the curve should end, then SVG will automatically calculate a smooth curve for you at any scale.
This was SVG (Scalable Vector Graphics) in minutes.
Hope reading this short article helped you to know what really SVG is and able to create a simple SVG. 😊
Don’t forget to support and inspire me by just following me, clapping and sharing your experience in the comment section. 🥰
Thanks for reading till the end and if you see any issue with this article you can share with me in the comments. 🙏
… HAPPY CODDING :) …
— You can follow me on Twitter/X also.😊
— Check out my newsletter as well! 💛
Top comments (0)