Chapter 31: SVG Quiz

SVG Quiz means in the real world (especially for BCA/B.Tech/MCA students, web development learners, UI/UX aspirants, and interview preparation in India), and then I’ll give you a complete, ready-to-use SVG Quiz with questions, answers, explanations, and code examples — just like a real classroom session.

What is “SVG Quiz” actually?

When someone (especially a student or junior developer) searches or asks for “SVG Quiz”, they almost always mean one of these three things:

1. A set of practice questions (MCQ / short answer / code-based) to test SVG knowledge — most common for semester exams, placement prep, or self-study.
2. An online interactive quiz (like on W3Schools, GeeksforGeeks, TutorialsPoint, or YouTube channels) where you answer and get score.
3. A teacher/coaching center style revision session with important questions + explanations + code snippets (this is what most people want when they say “bhai SVG ka quiz kara do”).

So today I’m giving you the full teacher-style SVG Quiz session — the kind we do in coaching centers before internals or campus placements.

We’ll go level by level: Easy → Medium → Hard → Very Important Interview Questions.

Total 20 questions — attempt them first, then check answers + explanations + code.

Ready? Let’s start!

SVG Quiz – Level 1 (Basic – 8 Questions)

Q1. What does SVG stand for? A) Scalable Vector Graphics B) Simple Vector Graphics C) Standard Visual Graphics D) Scalable Video Graphics

Q2. Which tag is the root element of every SVG document? A) <svg> B) <vector> C) <graphics> D) <canvas>

Q3. Which attribute makes SVG responsive / scale correctly on different screen sizes? A) width & height B) viewBox C) preserveAspectRatio D) All of the above (but mainly viewBox)

Q4. Which attribute fills the inside of a shape? A) stroke B) fill C) color D) background

Q5. How do you make a shape have no fill (transparent inside)? A) fill=”none” B) fill=”transparent” C) opacity=”0″ D) display=”none”

Q6. Which shape tag draws a perfect circle? A) <circle> B) <ellipse> C) <oval> D) <round>

Q7. What is the default value of fill if you don’t specify it? A) white B) black C) none D) transparent

Q8. Which coordinate system does SVG use by default (top-left origin)? A) Cartesian (y increases up) B) Screen coordinates (y increases down) C) Polar D) Isometric

Level 2 (Medium – Important Concepts – 7 Questions)

Q9. Which attribute controls the border / outline color? A) border B) stroke C) outline D) line

Q10. How do you make a dashed line? A) stroke-dasharray=”10 5″ B) border-style=”dashed” C) line-style=”dash” D) stroke-pattern=”dash”

Q11. What does fill-rule=”evenodd” do? A) Fills everything B) Creates holes in overlapping paths (like donut or O letter) C) Makes fill transparent D) Changes fill color

Q12. Which element reuses an existing shape / group? A) <reuse> B) <use> C) <copy> D) <instance>

Q13. How do you rotate a shape around its center (example: 45°)? A) transform=”rotate(45)” B) transform=”rotate(45 cx cy)” C) rotate=”45deg” D) angle=”45″

Q14. Which filter creates a soft drop shadow? A) <feGaussianBlur> + <feOffset> B) <blur> C) <shadow> D) <dropShadow>

Q15. What is the modern single-line way to add drop shadow? A) <feDropShadow> B) <shadow> C) <filter type=”shadow”> D) CSS only

Level 3 (Hard / Interview Level – 5 Very Important Questions)

Q16. How do you clip a photo into a circle shape? A) <clipPath> + <circle> + clip-path=”url(#id)” B) border-radius on <image> C) mask=”circle” D) round=”100%”

Q17. How do you make text filled with a photo/image? A) <mask> with white text on black background + mask=”url(#id)” B) fill=”image.jpg” C) background-image on text D) <text> inside <image>

Q18. Which animation technique draws a line from start to end? A) stroke-dasharray + animate stroke-dashoffset B) <animate> on d attribute C) CSS keyframes on width D) SMIL <animateMotion>

Q19. What is the difference between gradientUnits=”objectBoundingBox” vs “userSpaceOnUse”? A) objectBoundingBox = relative to shape size (0%–100%), userSpaceOnUse = absolute SVG coordinates B) One is for fill, one for stroke C) No difference D) One is old, one is new

Q20. Which attribute lets you put text along a curved path? A) <textPath> + href=”#pathId” B) text-curve=”path” C) path-text=”yes” D) <curvedText>

Now – Answers + Detailed Explanations + Code Snippets

Q1. A) Scalable Vector Graphics Q2. A) <svg> Q3. B) viewBox (main one — controls coordinate system & scaling) Q4. B) fill Q5. A) fill=”none” Q6. A) <circle> Q7. B) black Q8. B) Screen coordinates (y increases down)

Q9. B) stroke Q10. A) stroke-dasharray=”10 5″ Q11. B) Creates holes in overlapping paths Q12. B) <use> Q13. B) transform=”rotate(45 cx cy)” Q14. A) <feGaussianBlur> + <feOffset> (classic) or <feDropShadow> (modern) Q15. A) <feDropShadow>

Q16. A) <clipPath> + <circle> + clip-path=”url(#id)” Code:

Q17. A) <mask> with white text on black background Code:

Q18. A) stroke-dasharray + animate stroke-dashoffset (CSS or JS) Q19. A) objectBoundingBox = relative (0–100%), userSpaceOnUse = fixed pixels Q20. A) <textPath> + href=”#pathId”

How did you do? Count your score (1 mark each) and tell me — 15+ correct? 10–14? Less than 10?

Want me to:

• Make a harder 20-question quiz?
• Give code solutions for every question?
• Focus on animation / filter / clipping questions only?
• Create a printable PDF-style quiz for revision?

Just say — we can make this exactly what you need for exams or interviews! 🚀