Scalable Vector Graphics

SVG Graphics

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

Creating an SVG requires the use of the svg tag. The width and 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:

HTML
<svg width="100" height="100">
</svg>

It won't render anything because the SVG is empty. Let's add some content to it now.

Creating a SVG Circle

You can create an SVG circle. We can do this by using the circle tag.

An SVG circle.

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.

Creating a SVG Rectangle

You can create an SVG rectangle. We can do this by using the rect tag.

An SVG rectangle.

Creating an SVG Rounded Rectangle

You can create an SVG rounded rectangle. We can do this by using the rect tag but with the rx and ry attributes.

Creating an SVG Star

You can create an SVG star. We can do this by using the polygon tag.

Difference Between SVG and Images

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.

Resources

• SVGs - MDN Web Docs

• Support Us
• Discord
• Share
• Post
• Share