I have tried to make some fantasy stuff on my website. For example circular progress bars and some animated logo. Then I realized that SVG is the solution and very useful. So I want to share my discoveries.
1. Why we need SVG?
When I was looking for a way to made circular progress bars, I found out that Antd a UI design framework uses SVG to do it. So I studied how to use SVG in web development And I found out that SVG has many useful features.
- It's scalable. this is one of the popular reasons why people use it in many of their works.
- You can assign its property via CSS selector.
- It supports pseudo-classes in CSS. For Instance, Click event, Hover event.
- It can be animated by CSS transition and keyframe. So This is one of my favorite parts.
Now, let's move to the core of this post.
2. How to write SVG code in HTML
Firstly, I want you to understand how SVG works in HTML. When you want to embed SVG code on websites. You need an SVG tag as your canvas that can be drawn shapes or images on it. Now, look at the code below.
<svg height="100px" width="100px" veiwbox="0 0 100 100"></svg>
- The height is the verticle length of our canvas.
- The width is the horizontal length of our canvas.
- The viewbox is the sequence of numbers that are used to calculate the coordinate and the unit that we will use it in drawing.
3. Viewbox property
For more of understand, I will explain more about Viewbox property.
<svg height="100px" width="100px" veiwbox="5 5 10 10"></svg>
From the code above, We know that the canvas height and width are 100px. But height and width aren't enough to describe the position of the shape that we will draw on the canvas. Because when we tell the system the position of anything on the canvas, We use something like (10px, 20px) as below the top by 10px and go to the right by 20px. Because the web coordinate looks like below.
In the SVG viewbox property, the first and the second number in the sequence are the location offsets of the canvas coordinate origin. For example, From the above code, The offsets are 5 and 5. That means the coordinate is far 5 units from the top and 5 from the left.
So, how long is a unit?
A unit's length can be calculated from the last two numbers of viewbox property. The first indicates the number of horizontal units. So if it is 10 and the width is 100px, a unit of width will be 10px. The second indicates the number of vertical units. Its calculation is the same as the first.
Now, we already know how to set up the canvas. So I want to draw some shape before finish this post.
4. Circle
The circle is the first basic shape. Let's see
<svg height="100px" width="100px" veiwbox="5 5 10 10">
<circle cx="2" cy="2" r="2"></circle>
</svg>
Before drawing a circle, you need to figure out where the center of the circle is. Then you can define "cx" and "cy" properties. And "r" is the radius of the circle.
I think this post is pretty long enough. In the next post, I'll introduce more properties and some more interesting shapes. see you next post.
Top comments (0)