BitWithBite
HTML Worksheet
🌐 SVG Basics
SCORE___ / 20
NameClassDate
After this worksheet you can
Inline SVG shapesrect, circle, line, textviewBox scalingSVG vs raster images🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1SVG graphics are:
2A circle uses attributes:
3The coordinate system comes from:
4SVG excels for:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5<rect width height x y> draws a .
6fill sets the colour.
7Draw a red circle r=40 at (50,50).
8SVG vs PNG for a logo - why SVG?
9What does viewBox="0 0 100 100" define?
🚀 Section C · Challenge ● CHALLENGE 5
10Draw a line from (0,0) to (100,100).
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-A 2-A 3-A 4-A | 5 rectangle 6 inside/fill 7 = <svg><circle cx="50" cy="50" r="40" fill="red"/></svg> 8 = Infinitely scalable, tiny file, editable/stylable with CSS 9 = Internal coordinate space that scales to the rendered size | 10 = <line x1="0" y1="0" x2="100" y2="100" stroke="black"/>