Welcome to Part 26 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore SVG Styling & Manipulation.

SVGs (Scalable Vector Graphics) are XML-based vector image documents. Unlike raster images (like PNGs or JPGs), SVGs do not lose quality when scaled, and if they are embedded inline directly inside your HTML code, you can style their paths, shapes, borders, and fills directly using CSS.

---

Chapter 146: SVG Fills & Strokes

Standard HTML elements use background-color and border. Inline SVGs use specific SVG properties instead:

1. Fill Color (fill)

Sets the background color of vector shapes (like circles, rectangles, or paths):

svg path {
  fill: #3b82f6; /* Fills path shape with blue */
}

2. Stroke Properties (stroke)

Defines outline characteristics:

• stroke: The outline color (e.g. stroke: black;).
• stroke-width: Border thickness (declared in units or unitless coordinate units).
• stroke-linecap: The shape of the endpoints of open paths: butt, round (smooth caps), square.
• stroke-linejoin: The style of path corner intersections: miter, round (curved edges), bevel.

svg polyline {
  stroke: #10b981;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

---

Chapter 147: Hover & Transition States on SVGs

You can target nested SVG structures inside interactive containers:

/* Colorizes a link icon when the user hovers over its containing anchor tag */
.nav-link:hover svg path {
  fill: #ef4444;
  transition: fill 0.2s ease;
}

---

Chapter 148: SVG Path Animations (Dashoffset Math)

You can create “drawing” animations by manipulating dash characteristics of vector lines using two properties:

3. Stroke Dash Array (stroke-dasharray)

Specifies the pattern of dashes and gaps used to draw the path:

• stroke-dasharray: 100; (creates dashes of length 100 and gaps of 100).

4. Stroke Dash Offset (stroke-dashoffset)

Offsets the starting point of the dash pattern:

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}
.animated-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000; /* Pushes the dashes completely off screen (invisible) */
  animation: draw 2s forwards;
}

• Why it works: By animating the offset from 1000 (length of the path) down to 0, the browser draws the outline line-by-line, creating a self-drawing stroke animation.

---

Chapter 149: SVGs Practice & Self-Check

1. Practice Exercises

1. Exercise 1: Animated Checkmark Icon: Draw a checkmark path inside a success circle.

   @keyframes check {
     to { stroke-dashoffset: 0; }
   }
   .check-icon path {
     stroke: green;
     stroke-width: 3;
     fill: none;
     stroke-dasharray: 50;
     stroke-dashoffset: 50;
     animation: check 0.5s ease-out forwards;
   }

2. Self-Check Questions

1. What property sets the background color of an SVG path?
   • Answer: fill.
2. Which property sets the outline color of an SVG element?
   • Answer: stroke.
3. What is the difference between raster images (PNG) and SVGs in inline HTML?
   • Answer: Inline SVGs are DOM elements, meaning their internal vector nodes can be styled and animated using CSS, whereas raster images are external binary assets.
4. What property controls the shape of vector line endings?
   • Answer: stroke-linecap.
5. How is the drawing animation effect constructed on vector paths?
   • Answer: By setting stroke-dasharray and stroke-dashoffset to values matching the path length, and animating the offset down to 0.
6. Can you style SVG icons linked inside standard tags using external CSS?
   • Answer: No. SVG styling only works on inline <svg> structures embedded directly in the HTML DOM.
7. What does the currentcolor keyword do inside fill styles?
   • Answer: It inherits the parent element’s text color value, adapting the icon color automatically.
8. What stroke-linejoin value creates curved corners on line crossings?
   • Answer: round.
9. What is the default fill color of SVG shapes in browsers if undeclared?
   • Answer: black.
10. Can you use CSS variables to manage SVG fills?
    • Answer: Yes, CSS custom properties are valid inside SVG style sheets.