SVG in HTML

You've already learned about different ways of drawing graphics for the web. In this topic, you will learn a new way of creating graphics — not by drawing, but by describing two-dimensional vector graphics for the web using HTML SVG graphics. In the end, you will have the same outcome but accomplished in a different way. To learn how to do that, we will go through different shapes that you can later perfect. Let's get started with the theory first!

SVG in HTML

SVG stands for Scalable Vector Graphics. SVG is a markup language based on XML and it is used for describing two-dimensional vector graphics for the web. The HTML element <svg> is used to make a container for SVG graphics. The question is, why would you use SVG? First and foremost, SVG is great for drawing paths, boxes, circles, text, and graphic images. To do that, SVG offers several methods that we will be covering in the following sections.

Previously, you learned about HTML Canvas Graphics. So, let's see the difference between HTML Canvas graphics and SVG.

HTML Canvas Graphics uses JavaScript code to draw different shapes on the canvas, while SVG is a language for describing 2D graphics in XML. SVG is XML-based, which allows attaching JavaScript event handlers to an element since every element is available within the SVG DOM. It is also an open web text-based standard used for describing pictures that work well with other standards such as CSS, DOM, JavaScript, etc. Also, a cool feature of SVG images is that images can be rendered in any size because it has better scalability, that is, they can be printed in high quality and in any resolution. It is vector based and made of shapes, which leads to higher-quality images.

Now that you've learned about its special features, let's go through some basic shapes you can generate using SVG graphics — rectangle, circle, and line.

Creating a rectangle

First, let us start with the rectangle. A rectangle is a shape that can be drawn with the element <rect>. To draw a rectangle, you will use six basic attributes that control the shape and position of the rectangle on the screen. Let's take a look at the following syntax:

<svg>
<rect x="50" y="50" width="450" height="350"/>
</svg>

As mentioned before, you will first use the <svg> element to make a container. Once you've created a container, you will use <rect>and the following attributes to draw a rectangle:

• x that set the x position of the top left corner of the rectangle;

• y that sets the y position of the top left corner of the rectangle;

• width for the width of the container;

• height for the height of the container.

This is what your code output looks like:

Creating a circle

Great job! Now, let's continue with the circle! The first rule is the same — you will need the <svg> element. Let's look at the syntax:

<svg>
  <circle cx="100" cy="100" r="50"/>
</svg>

To draw a circle, you need to use the <circle> element along with three basic attributes:

• cx — the x-axis coordinate of the center of the circle;

• cy — the y-axis coordinate of the center of the circle;

• r — the radius of the circle.

This is the code output:

Creating a line

Last but not least, let's draw a simple line shape. In order to draw a line, you will need the <line> element with five basic attributes:

• x1 — the x-axis coordinate of the line starting point;

• x2 — the x-axis coordinate of the line ending point;

• y1 — the y-axis coordinate of the line starting point;

• y2 — the y-axis coordinate of the line ending point;

• stroke — the outline of the shape.

Check out the code snippet below:

<svg>
<line x1="0" y1="90" x2="100" y2="20" stroke="black" />
</svg>

This is the code output:

Conclusion

In this topic, you learned how to draw some basic shapes — rectangle, circle, and line with the help of SVG. You can see that the process is quite intuitive and mostly depends on the attributes you use. Feel free to explore and add some of the attributes on your own.