HTML SVG

Previously, the mini project asked you to ship a small personal site — shared nav, real content, media, and a labeled form. This lesson starts an optional graphics track. SVG (Scalable Vector Graphics) lets HTML draw sharp icons and simple shapes with math instead of pixels. Scope stays practical: how to put SVG on a page, not a full design-tool course.

Why SVG in an HTML course

Raster images (PNG/JPEG) blur when you enlarge them. SVG describes paths and shapes, so a logo or icon stays crisp at any size. Beginners meet SVG as icons in a header, a simple badge, or a decorative mark next to a heading. Knowing inline versus file embedding keeps pages light and accessible — without rebuilding your mini-project from scratch.

Direct answer

1) Inline: put an <svg>…</svg> tree in the HTML where the graphic should appear.
2) File: save artwork as .svg and load it with <img src="…" alt="…"> (or sometimes <object>).
3) Prefer inline when you need CSS/JS hooks or precise accessible naming on the graphic itself.
4) Prefer img for static logos you reuse like any other image file.
5) Give meaningful graphics a name (aria-label / role="img" inline, or alt on img).
6) This course introduces embedding; complex path drawing and animation belong elsewhere.

Tiny inline SVG

Inline SVG is just markup. A circle with viewBox and an accessible name shows the HTML job: the browser draws the shape; you control size and meaning in the page.

Reading the inline demo

• <svg> is the root element for the graphic
• width / height set the layout box; viewBox defines the internal coordinate system
• <circle> is one shape child — cx/cy/r place and size the circle
• role="img" plus aria-label names the graphic for assistive tech
• Change width/height and the vector stays sharp (unlike a stretched bitmap)
• Mini-project used <img> for photos; here the “image” can live as markup

SVG as an image file

When a logo already exists as logo.svg, treat it like other media: point src at the file and write useful alt. Paths must match your folder layout — same habit as images in the mini project.

Reading the file pattern

• src points at a .svg file on disk or a URL
• alt carries the accessible name (same idea as any informative image)
• width (and optional height) control layout size; the vectors still scale cleanly
• CSS on the page styles the img box, not every path inside the file as easily as inline SVG
• Reuse one file across pages without pasting a huge markup tree
• Next lesson, canvas, draws with JavaScript pixels — different tool, different job

Choosing inline vs file

• One-off icon you want to tint with CSS: inline SVG is often easier
• Static brand logo reused on many pages: img (or a shared include) keeps HTML short
• Camera photos and screenshots: keep raster formats — SVG is for vectors
• Huge illustration pasted inline: prefer a file so the HTML stays readable
• Meaningful graphic: always name it; decorative fluff can be hidden from AT carefully
• Deep SVG authoring (paths, filters, SMIL): leave for a graphics or CSS/SVG follow-up

Practice — SVG on a page

1. Paste the circle SVG into a practice page; confirm it renders.
2. Change width/height (e.g. 40 and 160) — the circle should stay sharp.
3. Export or download a simple .svg, save under images/, and load it with img + alt.
4. Remove aria-label (or alt) temporarily and note how the accessible name disappears.
5. Add the inline icon next to a heading on a copy of your mini-project home page.
6. Write one sentence: SVG is scalable markup or a vector file — not a substitute for photos.
7. Peek ahead: canvas draws with scripts; decide which tool fits icons vs freehand drawing.

Easy mistakes

• Forgetting accessible names on meaningful SVG (no alt / no aria-label)
• Pasting enormous inline SVG trees that bloat every page when a file would do
• Using SVG for photographs instead of JPEG/PNG/WebP
• Omitting viewBox then wondering why resize looks wrong
• Confusing SVG (vector markup) with canvas (JS pixel drawing) — next lesson
• Treating this intro as a full Illustrator/Inkscape curriculum
• Dropping the mini-project a11y habits: unlabeled graphics are still unlabeled graphics

Summary

• SVG draws resolution-independent shapes and icons
• Embed inline with <svg> or load a .svg file with img
• Name meaningful graphics; keep huge art in files when possible
• Vectors scale cleanly; photos stay raster
• Mini-project was the site build; this lesson starts optional graphics
• Next: HTML canvas for script-drawn bitmaps