Chapter 30: SVG Quiz

SVG Quiz 

We’ve spent a lot of time together learning almost every important piece of SVG:

• basic shapes (rect, circle, ellipse, line, polyline, polygon, path)
• text (<text>, <tspan>, <textPath>)
• fill, stroke, gradients (linear & radial), patterns
• markers, links (<a>), <image>, transformations (translate, scale, rotate…)
• filters (blur, drop shadow), clipping & masking
• animation (CSS keyframes + stroke-dasharray tricks)
• scripting basics (change attributes, events, dynamic creation)

Now it’s time to see how much you remember — and more importantly — to help you notice what you still mix up or forget.

I prepared a detailed SVG Quiz for you in the style of a friendly but thorough teacher.

Rules are simple:

• 20 questions (mix of multiple choice, short answer, “spot the mistake”, “what does this code do”)
• Read each question carefully
• Try to answer before scrolling down to the solution
• After each block of questions I’ll give the answers + explanation + common trap / why students usually get it wrong

Ready? ✏️ Let’s begin!

────────────────────────────── Section 1 – Basic shapes & attributes (questions 1–6)

Q1. Which attribute is required on <rect> but not required on <circle>?

a) fill b) stroke c) width & height d) cx & cy

Q2. What will happen if you write this line?

a) red line appears b) red filled rectangle appears c) nothing visible (line has no fill area) d) syntax error

Q3. You want a perfect circle. Which is the shortest correct code?

a) <circle cx=”100″ cy=”100″ r=”50″ /> b) <ellipse cx=”100″ cy=”100″ rx=”50″ ry=”50″ /> c) both a and b are correct and equally short d) <circle cx=”100″ cy=”100″ diameter=”100″ />

Q4. What does stroke-linecap=”round” do?

a) makes corners round b) makes line endings round (caps) c) makes the stroke color change smoothly d) rounds the entire path

Q5. Which element automatically closes the path?

a) <polyline> b) <polygon> c) <path> (only when Z is used) d) both b and c

Q6. You wrote:

What shape do you see?

a) filled black triangle b) empty (invisible) triangle outline c) black line from (10,10) to (90,10) only d) syntax error

────────────────────────────── Answers & explanations – Section 1

Q1 → c <rect> requires width & height (otherwise zero size = invisible). <circle> requires r instead.

Q2 → c <line> has no area → fill is ignored. You only see the stroke.

Q3 → c Both are correct. <circle> is shorter & clearer when you want a perfect circle.

Q4 → b stroke-linecap controls line endings (butt / round / square). stroke-linejoin controls corners.

Q5 → b & d <polygon> always closes automatically. <path> closes only when you write Z or z.

Q6 → b fill=”none” → only stroke is visible → black triangle outline.

────────────────────────────── Section 2 – Fill, Stroke, Gradients, Text (questions 7–12)

Q7. Which code gives a dashed border?

a) stroke-dasharray=”10″ b) stroke-dasharray=”10 5″ c) stroke=”dashed” d) both a and b work

Q8. What does fill=”currentColor” mean?

a) fill is the same as stroke color b) fill inherits the CSS color property of the element / parent c) fill is always black d) fill is transparent

Q9. You want text curved along a half-circle path. Which element do you need?

a) <textPath> b) <tspan> c) <animateMotion> d) <use>

Q10. This gradient goes from left to right:

What should you change to make it go from top to bottom?

a) x2=”0%” y2=”100%” b) x1=”0%” y1=”0%” x2=”0%” y2=”100%” c) both a and b d) spreadMethod=”reflect”

Q11. Which property lets you make a soft rounded corner on <rect>?

a) stroke-linecap=”round” b) rx=”12″ ry=”12″ c) border-radius=”12px” d) corner-radius=”12″

Q12. What is wrong with this code?

(assuming <linearGradient id=”grad1″> exists)

a) nothing b) url() must be url(#grad1) (no quotes around id) c) circle cannot use gradient d) gradient must be radial for circle

────────────────────────────── Answers & explanations – Section 2

Q7 → b stroke-dasharray=”10″ = very long dash stroke-dasharray=”10 5″ = dash 10 units, gap 5 units → classic dashed line

Q8 → b currentColor reads the CSS color property — very useful for icons that change color via parent class.

Q9 → a <textPath href=”#myPath”> is the correct way to make text follow a path.

Q10 → c Both a and b do the same thing — vertical gradient.

Q11 → b rx and ry on <rect> create rounded corners (SVG way). border-radius works only on HTML elements (not SVG <rect>).

Q12 → a Nothing is wrong — both url(#grad1) and url(“#grad1”) are valid in modern browsers.

────────────────────────────── Section 3 – Advanced features & common traps (questions 13–20)

Q13. You want a soft drop shadow. Which modern one-line way is preferred in 2026?

a) <feGaussianBlur> + <feOffset> + <feMerge> b) <feDropShadow dx=”4″ dy=”6″ stdDeviation=”4″ flood-opacity=”0.4″/> c) CSS filter: drop-shadow(4px 6px 4px rgba(0,0,0,0.4)) d) both b and c are good

Q14. What does clip-path=”url(#myClip)” do?

a) applies a soft transparency fade b) cuts the element with a hard shape (only inside shape is visible) c) adds a shadow using the referenced shape d) fills with the referenced shape

Q15. Which attribute makes a pattern tile repeat every 30×30 pixels?

a) patternUnits=”objectBoundingBox” width=”30″ height=”30″ b) patternUnits=”userSpaceOnUse” width=”30″ height=”30″ c) patternSize=”30 30″ d) repeat=”30 30″

Q16. You want the heart shape to grow on hover. What is the cleanest way?

a) JavaScript changing transform attribute b) CSS: .heart:hover { transform: scale(1.2); } c) <animateTransform> inside the path d) both b and c work

Q17. What is wrong here?

a) path is not closed → fill ignored b) fill is not allowed on open paths c) both a and b d) nothing wrong

Q18. How do you make text follow a circle path?

a) <textPath href=”#circle”> b) <tspan path=”#circle”> c) <textPath xlink:href=”#circle”> d) both a and c (modern = a)

Q19. Which CSS property do you almost always need when rotating SVG elements?

a) transform-origin b) animation-timing-function c) will-change d) backface-visibility

Q20 (bonus – spot the mistake)

What is wrong / not ideal?

a) nothing b) inline style should use SVG attributes instead (fill=”red” stroke=”blue”) c) style attribute is not allowed on SVG d) r should be radius

────────────────────────────── Answers & explanations – Section 3

Q13 → d Both the modern <feDropShadow> and CSS drop-shadow() are excellent in 2026. CSS is often easier for simple cases.

Q14 → b clip-path = hard cutout (inside = visible, outside = invisible).

Q15 → b userSpaceOnUse + fixed pixels = pattern size stays constant regardless of shape size.

Q16 → b CSS transform + :hover is the cleanest and most performant way in modern web.

Q17 → a Open path → fill is ignored (even if you set a color).

Q18 → d Modern code uses href=”#circle”. Older code used xlink:href — both still work, but prefer href.

Q19 → a transform-origin: center (or 50% 50%) prevents rotation around (0,0).

Q20 → b While style attribute works, it’s better practice to use SVG presentation attributes (fill, stroke) instead of CSS style when possible — cleaner, more consistent with SVG philosophy.

──────────────────────────────

How did you do? Count your correct answers and tell me your score (out of 20) if you want — I’ll give you feedback on which topics you might want to revisit.

Which question was the trickiest for you? Or would you like another quiz (harder / focused on filters / animation / scripting / etc.)?

I’m here — let’s keep learning together! 🚀