HTML Tutorial
HTML SVG
SVG is vector graphics in XML. Icons and logos stay sharp at any size.
Pictures made of shapes
SVG stands for Scalable Vector Graphics. Instead of a grid of pixels, an SVG file is XML: circles, rectangles, and paths the browser draws at whatever size you ask for.
That is why logos and icons are often SVG. Zoom a phone, print a poster, or drop the same file into a 16-pixel tab icon — the edges stay clean.
Inline SVG and viewBox
You can paste SVG straight into HTML. The viewBox defines the coordinate system:min-x min-y width height. The graphic then scales to the CSS size of the<svg> element.
Example
<svg width="120" height="120" viewBox="0 0 120 120" aria-label="Teal square">
<rect x="10" y="10" width="100" height="100" fill="#0d9488" />
</svg>width and height on the tag are the display size.viewBox="0 0 120 120" means the drawing area is 120 by 120 units, starting at the top-left.
circle and rect
<rect> needs x, y, width, andheight. <circle> needs a center (cx,cy) and a radius r. fill paints the inside;stroke paints the outline.
Example
<svg width="200" height="120" viewBox="0 0 200 120">
<rect x="12" y="20" width="80" height="80" fill="#e2e8f0" stroke="#0f172a" stroke-width="3" />
<circle cx="150" cy="60" r="36" fill="#0d9488" />
</svg>Try this in the HTML preview at /html/try. Change r orfill and the shape updates. No extra JavaScript is required.
A simple path
<path> draws lines and curves with a d attribute. You do not need every command yet. Two are enough to start:
M— move to a point (start here)L— line to a point
Example
<svg width="200" height="80" viewBox="0 0 200 80">
<path d="M 10 70 L 70 10 L 130 70 L 190 20"
fill="none" stroke="#0f172a" stroke-width="4" />
</svg>fill="none" keeps the path as a stroke only. Design tools export much longerd strings; you can still drop those into the same <path> tag.
img src versus inline SVG
If the graphic is a file, you can treat it like any other image:
Example
<img src="icon.svg" alt="Site logo" width="48" height="48">Use <img> when you only need to show the picture. Use inline<svg> when you want to style parts with CSS, change a color from the page, or keep the markup in one file with no extra request.
icon.svg in the example is a filename, not a hosted file on StudyGrid. In the preview, replace it with a real path on your machine, or paste the SVG inline instead.
SVG versus canvas
| SVG | Canvas | |
|---|---|---|
| What it stores | Vectors (shapes in XML) | Pixels (a bitmap) |
| Scale | Stays sharp | Gets blocky |
| DOM | Each shape is an element | One element; pixels only |
| Best for | Icons, logos, diagrams | Games, charts that redraw often |
| Needs JavaScript | No, for static art | Yes, to paint anything |
If you click a circle and want that circle to be a real element, SVG wins. If you paint thousands of particles every frame, canvas is usually simpler.
When to pick SVG
- Logos and icons that must look crisp on a phone and a large monitor
- Simple charts you can describe as rectangles and lines
- Graphics you want to recolor with CSS
Next: media elements. Video and audio are files the browser plays, not drawings you author in XML.
Worked examples
The short listings above show the tag in isolation. These pages use the same markup on documents you would actually publish: a lab report, a clinic form, a timetable, a weather card.
HTML does not calculate. It names the pieces so a browser, a screen reader, and a search engine can tell a heading from a paragraph. The numbers below are classroom values — the same Ohm, pH, and pulse figures as the C track — now sitting in real page structure.
Preview them in the HTML editor at /html/try. Change a heading or a number and watch the page, not a print log.
Chemistry
A circle that stays sharp
SVG is vector XML. A circle at any size stays a circle. Icons and logos belong here. The markup is text, so it can be coloured with CSS.
viewBox maps the internal coordinates onto the drawn size. Changing width/height scales the graphic; the numbers inside stay the same.
Example
<svg width="120" height="80" viewBox="0 0 120 80" aria-label="Oxygen nucleus sketch">
<circle cx="60" cy="40" r="28" fill="#166534" />
</svg>
<p>O has 8 protons — the circle is a mark, not an orbital model.</p>Maths
A rectangle of known area
A 140 by 40 rectangle in SVG units is a shape, not 140 m. Put the real 4 m × 3 m in the caption. Graphics and SI units are different layers.
A = w × h
Example
<svg width="160" height="70" aria-label="Rectangle">
<rect x="10" y="15" width="140" height="40" fill="#4338ca" />
</svg>
<p>Diagram only. Area in the write-up is 12 m².</p>