Create SVG Images using HTML Tags and Attributes!

If you've used SVG images while building a website or in any project, you might wonder why the SVG image doesn't lose quality when you zoom in.

In this post, I'll answer all your questions and By the end, you'll be able to write your own SVG code to create an SVG image.

What you will learn in this post:

• How an SVG image works?
• How to create an SVG image using code?

Understanding SVG and How It Works

SVG also known as "Scalable Vector Graphics", is an XML-based format for describing two-dimensional vector graphics.

Unlike normal images such as jpg, png, etc, which are made up of pixels, SVG graphics are composed of paths, shapes, and text that are defined mathematically.

Because of this SVG images can be scaled to any size without losing quality, making them ideal for responsive web design and high-resolution displays.

Creating Shapes in SVG

Before creating any kind of shape it is important to create an SVG and give it a width and height.

Rect (Rectangle)

<svg width="200" height="200">
  <rect x="10" y="10" width="100" height="50" fill="red" />
</svg>

In the above example, I have created a rectangle using a rect tag inside an SVG.

The x and y attributes define the position of elements within the coordinate system of the SVG.

In our case, the rectangle will be positioned 10px from the left (x) and 10px from the top (y).

Using the width and height attributes you can define the width and the height of the Rectangle.

Finally to make the Rectangle a little better use the fill attribute to give it a fill color.

The Final output will look something like this:

Circle

<svg width="200" height="200">
  <circle cx="100" cy="100" r="50" fill="#3b82f6" />
</svg>

Similarly, you can create a circle in SVG, but this time the attribute will be different.

instead of x and y we use cx and cy to set the position of a circle.

Using the r attribute we can set the radius of a circle, in the example r has a value of 50 which means the radius of the circle will be 50px

Finally using the fill attribute we can set a fill color, this time I used a HEX color code to show you we can use HEX colors as well.

Here is the final output of the circle:

Line
Now let's see how to create a line using line tag, Yes you can also draw lines in SVG with the help of line tag.

The process of creating a line is same as Rectangle and Circle, but there are some additional attributes you need to know.

Here is an example of SVG Line tag:

<svg width="200" height="200">
  <line x1="50" y1="50" x2="150" y2="150" stroke="black" stroke-width="3" />
</svg>

In the above example, I have created a line with a stroke color of black and a stroke width of 3.

Now, to draw a line, you need to use four attributes: x1, x2, y1, y2.

These attributes help us define where we want the line to be.

In my case, I drew a line positioned 50px from x1 and 50px from y1 for the starting point of the line. To define where the line should end, you need to use x2 and y2.

As mentioned, the end of the line should be 150px from x2 and 150px from y2.

Path
We can also create complex images using the path tag available in SVG.

The <path> tag doesn't rely on x or y for positioning, Instead, it uses the d attribute, which stands for data, to define the shape and position.

The d attribute specifies the path data, which consists of a series of commands to move to specific points and draw lines between them to create the star shape.

Here is an example where I create a star using the path tag:

<svg width="200" height="200">
  <path d="M 100 10 L 123.09 70.45 L 190.36 77.36 L 142.14 123.09 L 155.90 190.36 L 100 150.18 L 44.10 190.36 L 57.86 123.09 L 9.64 77.36 L 76.91 70.45 Z" fill="yellow" stroke="black" stroke-width="2"/>
</svg>

We can also use fill attribute to sets the fill color of the star to yellow.

The stroke attribute sets the stroke color of the star to black.

The stroke-width attribute sets the width of the stroke to 2 pixels.

Now you know how a SVG image works, you can upgrade your skills by learning D3.js which is a library to create Data visualization charts using SVG.

Previously on Newbiecoding Blog, I mentioned the top 6 methods to master in D3.js for beginners.

If you have any questions about SVG, feel free to mention them in the comments section. I'll be happy to answer them.