Scalable Vector Graphics
Table of Contents
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.
- HTML
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.
- HTML
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.
- HTML
Creating an SVG Star
You can create an SVG star. We can do this by using the polygon
tag.
- HTML
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
- Getting Started with TypeScript
- Getting Started with Svelte
- Create an RSS Reader in Node
- Getting Started with Electron
- How to deploy a .NET app using Docker
- How to deploy a MySQL Server using Docker
- Getting Started with Sass
- Using Puppeteer and Jest for End-to-End Testing
- How to Scrape the Web using Node.js and Puppeteer
- Getting Started with Moment.js
- Using Push.js to Display Web Browser Notifications
- Building a Real-Time Note-Taking App with Vue and Firebase