The Basics of SVG (Drawing Vector Images)

In this lesson you'll learn the basics of vector images using the SVG tag, so you can draw shapes that stay crisp even when enlarged. This is for people searching "SVG basics usage."

Using the <svg> tag lets you draw a "vector image" that stays crisp even when enlarged, directly in code. You combine shapes using tags like <circle> and <rect>. This is often used for icons and simple illustrations.

The sample code places a rectangle with <rect>, a circle with <circle>, and text with <text>, each with its own specified coordinates. The viewBox attribute defines SVG's internal coordinate system — you can freely position shapes anywhere inside this range.

A common beginner stumbling block is the relationship between SVG's internal coordinate system (viewBox) and its actual displayed size (width and height). The coordinate system is really just an internal blueprint — how large it's actually displayed needs to be specified separately.

A photo-like image file (JPEG, for instance) gets blurry when enlarged, but since SVG represents shapes mathematically, it stays crisp no matter how much you zoom in. This is exactly why SVG is favored for logos and icons.