HTML SVG
SVG stands for Scalable Vector Graphics. It is a way to draw shapes, icons, charts, and illustrations using code. Unlike photographs, SVG graphics stay perfectly sharp at any size — whether displayed at 10 pixels or on a billboard. You embed SVG directly inside HTML, and it becomes part of your page.
What Makes SVG Different from Regular Images
Visual Diagram — Raster vs Vector
PNG / JPG (raster image): Zoomed in small: ■■ (sharp) Zoomed in large: 🔲🔲 (blocky / blurry pixels) SVG (vector image): Zoomed in small: ■■ (sharp) Zoomed in large: ■■ (still perfectly sharp) SVG is defined by math (coordinates, paths) — not by pixels. Scaling just recalculates the math. No quality loss.
Embedding SVG in HTML
You can place SVG code directly inside an HTML file. The browser reads it as part of the page structure.
<!-- Inline SVG directly in HTML --> <svg width="200" height="100" xmlns="http://www.w3.org/2000/svg"> <rect width="200" height="100" fill="steelblue"></rect> </svg>
You can also link to an external SVG file using an <img> tag:
<img src="logo.svg" alt="Company logo" width="200">
The SVG Coordinate System
Visual Diagram — SVG Canvas
svg width="400" height="300"
(0,0) ──────────────────── x increases →
|
| y increases ↓
|
↓
0 100 200 300 400
0 +────+────+────+────+
| |
100 | (100, 100) |
| * |
200 | |
| |
300 +────+────+────+────+
Top-left is (0,0). x goes right. y goes down.
Basic SVG Shapes
Rectangle — rect
<svg width="300" height="150" xmlns="http://www.w3.org/2000/svg">
<rect x="30" y="30" width="200" height="80"
fill="tomato" stroke="black" stroke-width="2"></rect>
</svg>
Attributes: x and y set the top-left corner. width and height set the size. fill sets the background color. stroke sets the border color. Add rx and ry for rounded corners.
<rect x="30" y="30" width="200" height="80" rx="15" ry="15" fill="coral"></rect>
Circle — circle
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="100" r="70" fill="gold" stroke="orange" stroke-width="4"></circle> </svg>
cx and cy are the center coordinates. r is the radius.
Visual Diagram — circle Attributes
(cx,cy) = (100,100) — center point
r = 70 — radius
(100, 30)
___
/ \
(30,100) |(100,100)| (170,100)
\ ___ /
(100, 170)
Ellipse — ellipse
<ellipse cx="150" cy="100" rx="120" ry="60" fill="mediumpurple"></ellipse>
rx is the horizontal radius. ry is the vertical radius. When both are equal, you get a circle.
Line — line
<line x1="20" y1="20" x2="280" y2="120" stroke="black" stroke-width="3"></line>
x1,y1 is the start point. x2,y2 is the end point. Lines have no fill — they only have stroke.
Polygon — polygon
A polygon connects a list of points with straight lines and closes the shape automatically.
<!-- Triangle --> <polygon points="150,20 280,180 20,180" fill="green" stroke="darkgreen" stroke-width="2"></polygon>
Visual Diagram — Triangle Polygon
points="150,20 280,180 20,180"
^ ^ ^ ^ ^ ^
x1 y1 x2 y2 x3 y3
(150,20)
/\
/ \
/ \
(20,180)---------(280,180)
Polyline — polyline
A polyline connects points like a polygon but does not close the shape — the start and end points are not connected.
<polyline points="20,100 80,20 140,80 200,20 260,80" fill="none" stroke="blue" stroke-width="3"></polyline>
Text in SVG
<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
<text x="30" y="60" font-size="28" font-family="Arial" fill="navy">
Hello SVG!
</text>
</svg>
SVG text is real, selectable text — not an image of text. Search engines and screen readers can read it.
The path Element
The <path> element is the most powerful SVG element. It draws any shape — straight lines, curves, and complex combinations — using a series of commands in the d attribute.
Common Path Commands
M x,y → Move to (lift pen, no line) L x,y → Line to H x → Horizontal line to x V y → Vertical line to y C ... → Cubic bezier curve Z → Close path (draw line back to start) Uppercase = absolute coordinates Lowercase = relative coordinates (from current position)
Simple Path — Drawing an L Shape
<path d="M 50,50 H 200 V 150 H 50 Z" fill="skyblue" stroke="navy" stroke-width="2"></path>
Visual Diagram — Path Commands
M 50,50 → move pen to (50,50)
H 200 → horizontal line to x=200 → draws: (50,50)──────(200,50)
V 150 → vertical line to y=150 → draws: |
(200,150)
H 50 → horizontal line to x=50 → draws: (50,150)────(200,150)
Z → close path → draws: |
(50,50) back
Grouping with g
The <g> element groups multiple SVG elements. Attributes applied to the group affect all elements inside it.
<g fill="crimson" stroke="darkred" stroke-width="2"> <circle cx="60" cy="60" r="40"></circle> <rect x="110" y="20" width="80" height="80"></rect> </g>
SVG Transforms
The transform attribute moves, rotates, or scales SVG elements.
<!-- Move (translate) --> <rect width="100" height="50" transform="translate(50, 30)" fill="teal"></rect> <!-- Rotate 45 degrees around its own center --> <rect x="100" y="100" width="100" height="50" transform="rotate(45, 150, 125)" fill="coral"></rect> <!-- Scale to twice the size --> <circle cx="50" cy="50" r="30" transform="scale(2)" fill="gold"></circle>
Gradients in SVG
<svg width="300" height="100" xmlns="http://www.w3.org/2000/svg">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="blue"></stop>
<stop offset="100%" stop-color="red"></stop>
</linearGradient>
</defs>
<rect width="300" height="100" fill="url(#grad)"></rect>
</svg>
The gradient fades from blue on the left to red on the right. The <defs> section stores reusable definitions — elements there are not drawn until referenced by fill="url(#id)".
Inline SVG vs External SVG
Method How to Use When to Use
----------------- -------------------------- -------------------------
Inline SVG <svg> code in HTML When you need CSS/JS control
<img src="f.svg"> Link like a regular image Simple display, fast to write
CSS background background: url("f.svg") Icons as CSS backgrounds
<object> tag <object data="f.svg"> When SVG has internal scripts
Inline SVG is the most powerful option — CSS can style individual shapes inside it and JavaScript can animate them. External SVG via <img> is the simplest for icons and logos that do not need interactivity.