SVG Styling & Inlining

Q: Which property is used to change the internal background color of an SVG shape?

Answer: fill. In SVG terminology, 'fill' represents the internal color of a vector shape, whereas 'color' is reserved for text.

Q: To style an SVG with external CSS, how must it be added to the HTML?

Answer: Inlined directly in the HTML code. Only inlined SVGs are part of the main DOM, allowing CSS selectors to target their internal child elements (paths, circles, etc.).

Master the intersection of CSS and vector graphics. Learn how to inline, style, and animate SVGs directly from your stylesheet.

Expert Answer & Key Takeaways

Master the intersection of CSS and vector graphics. Learn how to inline, style, and animate SVGs directly from your stylesheet.

1. Inlining vs. External SVGs

An SVG can be used as an image file (<img src='file.svg'>), but to style its internal parts with CSS, you must Inline the code directly into your HTML.

The Example: The CSS-Responsive Icon

<!-- Inlined SVG -->
<svg class="icon" viewBox="0 0 24 24">
  <circle cx="12" cy="12" r="10" />
</svg>

<style>
  .icon:hover {
    /* Change internal parts via CSS */
    fill: red;
    stroke: black;
    stroke-width: 2px;
  }
</style>

Standard CSS	SVG Equivalent	Purpose
`color`	`fill`	The internal background color.
`border`	`stroke`	The outline color.
`border-width`	`stroke-width`	The thickness of the outline.
`border-style`	`stroke-dasharray`	Creating dashed or dotted outlines.

2. The `currentColor` Secret

This is the most important rule for building icon systems. By using fill="currentColor" inside your SVG, the icon will automatically inherit whatever color you set on the parent element.

.btn {
  color: white;
}

.btn svg {
  /* SVG will now be white! */
  fill: currentColor;
}

[!IMPORTANT] The img limitation: If you load an SVG using <img src="icon.svg">, the browser treats it as a 'Closed Box.' You cannot reach inside it to change the fill or stroke with CSS.

3. Animating SVG Strokes

You can create a 'Drawing' effect by manipulating the stroke-dasharray and stroke-dashoffset properties.

@keyframes draw {
  from { stroke-dashoffset: 1000; }
  to   { stroke-dashoffset: 0; }
}

.path {
  stroke-dasharray: 1000;
  animation: draw 2s ease-in-out;
}

🎯 Practice Challenge: The Animated Logo

Inline a simple SVG circle into your page.
Task 1: Use fill: none and stroke: blue to create a ring.
Task 2: Use transition: stroke-width 0.3s to make the ring get thicker when hovered.
Task 3: Change the stroke color to red on hover.
Observation: Notice how smoothly the vector math handles the change compared to a bitmap image.

4. Senior Interview Corner

Q: What is the main benefit of an inline SVG over a Font-Icon (like Webfonts)?

A: Accessibility and Precision. Font icons are technically 'text'—if the font fail to load, the user sees a weird box. SVGs are 'images' and will always render. Furthermore, SVGs allow multi-color paths and high-precision CSS animations on individual parts of the icon, which font-icons cannot do.

Q: How does viewBox="0 0 100 100" affect your CSS?

A: The viewBox is the internal 'coordinate system' of the SVG. If your viewBox is 100x100 and you set a stroke-width: 10 in CSS, that stroke will take up exactly 10% of the SVG's width, regardless of how large the SVG is scaled on the actual screen.

SVG Styling & Inlining

Expert Answer & Key Takeaways

1. Inlining vs. External SVGs

The Example: The CSS-Responsive Icon

2. The `currentColor` Secret

3. Animating SVG Strokes

🎯 Practice Challenge: The Animated Logo

4. Senior Interview Corner

Top Interview Questions

?Interview Question

?Interview Question

Course4All Engineering Team

Found an issue or have a suggestion?

SVG Styling & Inlining

Expert Answer & Key Takeaways

1. Inlining vs. External SVGs

The Example: The CSS-Responsive Icon

2. The currentColor Secret

3. Animating SVG Strokes

🎯 Practice Challenge: The Animated Logo

4. Senior Interview Corner

Top Interview Questions

?Interview Question

?Interview Question

Course4All Engineering Team

Explore More css

Aspect Ratio & Object Fit

Building a Modern CSS Reset

BEM Naming Convention

Cascade Layers (@layer)

Found an issue or have a suggestion?

2. The `currentColor` Secret