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.

The Different Between SVG and Raster Image

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.

Starting with SVG tag

Draw basic shapes by adding elements like rectangle, circle and polygon.

Basic Shapes in SVG

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.

Designing your first rectangle

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.

Extracting into CSS stylesheet

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.

Adding some effects to our SVG

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.

The Move attribute

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.

The Line attribute to start drawing

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.

Creating Bézier curves in SVG

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. 😊