Update en-US.mdx

packages/quiz/questions/are-you-familiar-with-styling-svg/en-US.mdx

@@ -1,21 +1,88 @@
+
 ---
-title: Are you familiar with styling SVG?
+````markdown
+---
+title: Understanding SVG in Simple Terms
 ---
 
-There are several ways to color shapes (including specifying attributes on the object) using inline CSS, an embedded CSS section, or an external CSS file. Most SVGs you find on the web uses inline CSS, but there are advantages and disadvantages associated with each type.
+**SVG** stands for **Scalable Vector Graphics**. It’s a way to create images using text (XML code) instead of pixels. Unlike JPEG or PNG images, which are made of fixed pixels, SVGs are made of shapes (like lines, circles, rectangles, and paths).  
 
-Basic coloring can be done by setting two attributes on the node: `fill` and `stroke`. `fill` sets the color inside the object and `stroke` sets the color of the line drawn around the object. You can use the same CSS color naming schemes that you use in HTML, whether that's color names (that is `red`), RGB values (that is `rgb(255,0,0)`), Hex values, RGBA values, etc.
+Because SVGs are vector-based, they can be scaled up or down infinitely **without losing quality**. That makes them perfect for logos, icons, and illustrations that need to look sharp at any size.
+
+---
+
+## Example
+
+Here’s a simple red circle written in SVG:
 
 ```html
-<rect
-  x="10"
-  y="10"
-  width="100"
-  height="100"
-  stroke="blue"
-  fill="purple"
-  fill-opacity="0.5"
-  stroke-opacity="0.8" />
+<svg width="100" height="100">
+  <circle cx="50" cy="50" r="40" fill="red" />
+</svg>
+````
+
+* `<svg>` → container
+* `<circle>` → draws a circle
+* `cx="50" cy="50"` → center of the circle
+* `r="40"` → radius
+* `fill="red"` → color
+
+Put this inside an HTML page and you’ll see a red circle 🎯
+
+---
+
+## Key Features of SVG
+
+1. **Scalable** – zoom in/out infinitely with no blur.
+2. **Text-based** – editable with any text editor.
+3. **Lightweight** – smaller file sizes for simple graphics.
+4. **Stylable** – colors, borders, and effects can be changed with CSS.
+5. **Interactive** – parts of the SVG can be clickable or animated with JavaScript.
+
+---
+
+## Styling SVG with CSS
+
+SVG elements support CSS styling. For example, you can change a circle’s color when hovering:
+
+```css
+circle {
+  fill: red;
+  transition: fill 0.3s;
+}
+circle:hover {
+  fill: blue;
+}
 ```
 
-The above `fill="purple"` is an example of a _presentational attribute_. Interestingly, and unlike inline styles like `style="fill: purple"` which also happens to be an attribute, presentational attributes can be [overridden by CSS](https://css-tricks.com/presentation-attributes-vs-inline-styles/) styles defined in a stylesheet. Hence if you did something like `svg { fill: blue; }` it will override the purple fill that has been defined.
+---
+
+## Common Use Cases
+
+* Website icons and logos
+* Charts and graphs (e.g., with d3.js)
+* Animations and loading spinners
+* Diagrams and illustrations
+* Interactive maps
+
+---
+
+## SVG vs PNG/JPEG
+
+| Feature   | SVG 🖼️                   | PNG/JPEG 🖼️           |
+| --------- | ------------------------- | ---------------------- |
+| Type      | Vector (shapes)           | Raster (pixels)        |
+| Scaling   | Infinite, no blur         | Blurry when zoomed     |
+| File size | Small (for simple shapes) | Can be large           |
+| Best for  | Icons, logos, charts      | Photos, complex images |
+
+---
+
+## Summary
+
+* SVG = vector graphics in XML text.
+* Scales infinitely with no loss of quality.
+* Can be styled, animated, and made interactive.
+* Best choice for icons, logos, charts, and simple graphics (not for photos).
+
+```