SVG stands for Scalable Vector Graphics, and it is a standard used to describe a graphic in a XML-based format. Let's learn how to create SVGs by creating circles, rectangles, rounded rectangles, stars, and learn the difference between SVGs and images in HTML.
Creating an SVG requires the use of the
svg tag. The
height attributes are required because they define the size of the SVG. Here's an example of a SVG with a width of 100 and a height of 100:
<svg width="100" height="100"> </svg>
It won't render anything because the SVG is empty. Let's add some content to it now.
You can create an SVG circle. We can do this by using the
After creating a new SVG, we used the
circle tag to define a new circle with the following attributes:
cx: The X position of the circle's center.
cy: The Y position of the circle's center.
r: The length of the circle's radius.
stroke: The color of the stroke on the circle.
stroke-width: The thickness of the stroke on the circle.
fill: The color of the circle.
You can create an SVG rectangle. We can do this by using the
You can create an SVG rounded rectangle. We can do this by using the
rect tag but with the
You can create an SVG star. We can do this by using the
The difference between an SVG and image in HTML is that an SVG file is simply describing a graphic whereas an image is the graphic itself. With an SVG, it is the browser's job to actually parse those XML-like instructions and render something on the page.
There some advantages to using an SVG graphic over a traditional image. Because they are meant to be scalable, they will look crisp at any resolution. They are written in plain text so they are easily editable using any text editor. Finally, because it doesn't take too much text to describe a simple graphic, they are very tiny compared to a similar graphic in a traditional image format.