HTML SVG Tutorial for Beginners – Simple Explanation

SVG stands for Scalable Vector Graphics. Unlike regular images that get blurry when you zoom in, SVG graphics stay sharp at any size. They are perfect for logos, icons, and illustrations.

What is SVG?

SVG is a way to draw graphics using XML code. You write shapes, and the browser draws them. Because SVG is code, you can change it with CSS or JavaScript, and it never loses quality.

Key features of SVG:

Scalable without losing quality (no blur or pixelation)
Each shape is an object you can interact with
You can attach events like clicks and hovers to SVG elements
Works well with CSS and JavaScript
Supported by all modern browsers

The svg Element

The <svg> tag is the container for all SVG graphics. You set the width and height, then put shapes inside.

SVG Circle

Use the <circle> element to draw circles. cx and cy set the center position. r sets the radius. fill sets the inside color. stroke sets the border color.

SVG Rectangle

Use the <rect> element to draw rectangles. x and y set the top-left corner. width and height set the size.

rx and ry add rounded corners. opacity makes the shape see-through.

SVG Star (Polygon)

Use the <polygon> element to draw stars and other complex shapes. The points attribute lists all the x,y coordinates.

SVG Gradient (Ellipse and Text)

You can create gradients in SVG using <defs> and <linearGradient>. Then apply them with fill="url(#gradientId)".

SVG vs Canvas: Which One Should You Use?

Both SVG and Canvas let you draw graphics, but they work very differently. Here is how to choose.

Feature	SVG	Canvas
Quality when zoomed	Stays sharp (vector)	Gets blurry (pixel-based)
Event handlers (clicks, hovers)	Yes, on each shape	No, only on the whole canvas
Text rendering	Excellent	Basic
Performance with many elements	Slows down with thousands of shapes	Faster for many elements
Best for	Logos, icons, maps, charts	Games, animations, image editing

Tip: Use SVG for static graphics that need to stay sharp (like logos and icons). Use Canvas for dynamic graphics that change often (like games and animations).

Complete SVG Example: Logo Design

Here is a complete example of a simple logo made with SVG:

Quick Summary

SVG stands for Scalable Vector Graphics. It never loses quality when zoomed.
Use <svg> as the container. Set width and height.
<circle> draws circles. Use cx, cy, r, fill, stroke.
<rect> draws rectangles. Use x, y, width, height, rx for rounded corners.
<polygon> draws stars and custom shapes using points.
<defs> and <linearGradient> create gradients.
SVG supports text with <text>. You can style it with CSS-like attributes.
Use SVG for logos, icons, charts, and illustrations that need to stay sharp.
Use Canvas for games, animations, and pixel-based graphics.

What Just Happened? Let Me Explain

SVG is code, not an image file. That means you can change it with CSS and JavaScript.
Because SVG is vector-based, it uses math to draw shapes. That is why it never gets blurry.
Each shape in SVG is an object in the DOM. You can attach click events, hover effects, and animations to individual shapes.
If you right-click an SVG graphic in your browser, you can inspect its code just like HTML.
Many websites use SVG for their logos and icons. It is the standard for responsive web design.

Tip: Try changing the numbers in the examples above. Make the circle bigger. Change the star colors. Add more shapes. Experimenting is the best way to learn SVG.

HTML SVG Reference

Element	Description
`<svg>`	Container for SVG graphics
`<circle>`	Draws a circle
`<rect>`	Draws a rectangle
`<polygon>`	Draws a polygon (star, triangle, etc.)
`<ellipse>`	Draws an ellipse (oval)
`<text>`	Draws text
`<defs>`	Defines reusable elements like gradients
`<linearGradient>`	Creates a linear gradient