Embedding SVG: Free HTML & CSS Tutorial

Topics Covered in This HTML & CSS Tutorial:

Embedding SVG (instead of Linking), Styling SVG Using CSS, Using CurrentColor

Exercise Preview

Exercise Overview

In the previous exercise we introduced you to SVG basics, but treating SVG files as simple linked images barely scratches the surface of their potential. When you embed SVG code directly into HTML, you unlock powerful styling and interaction capabilities that aren't possible with traditional image linking. This approach gives you programmatic control over individual SVG elements, enabling dynamic color changes, hover effects, and responsive styling that adapts to your design system.

Modern web development increasingly favors embedded SVG for icons and simple graphics because it eliminates HTTP requests, ensures crisp rendering at any scale, and provides the flexibility that today's interactive interfaces demand.

Getting Started

The files for this exercise build upon the previous lesson's foundation, with additional assets that demonstrate advanced SVG integration techniques.

1. In your code editor, close any files you may have open to start with a clean workspace.
2. For this exercise we'll be working with the Tahoe Embedding SVG folder located in Desktop > Class Files > Advanced HTML CSS Class. Open this folder in your code editor if it supports project-based workflows (like Visual Studio Code, which provides enhanced file management for multi-file projects).
3. Open index.html from the Tahoe Embedding SVG folder.
4. On line 29, examine the Read More link—notice it includes an arrow.svg file immediately after the text.
5. Preview index.html in a browser to see the current implementation.

6. Navigate to the Take a Hike section and observe the Read More link's black arrow. You'll notice several issues: it's positioned too low relative to the text baseline, lacks appropriate spacing, and the black color doesn't integrate well with the overall design.

   The positioning problem stems from our earlier CSS rule that aligns all images to the bottom baseline to eliminate unwanted spacing—a common technique that's now working against us in this context.

7. Keep the page open in your browser for immediate feedback as we make changes, then return to your code editor.

Positioning the Arrow

Before diving into advanced SVG embedding, let's fix the basic positioning and spacing issues with our current image-based approach.

1. Open main.css from the css folder.

2. Near the bottom, after the header img rule, add the following targeted rule:

   .read-more img {
      vertical-align: baseline;
      margin-left: 5px;
   }

   This rule specifically overrides our global image alignment for read-more contexts, positioning the arrow relative to the text baseline rather than the bottom of the line height.

3. Save main.css and reload index.html in the browser. The arrow should now align properly with the text and include appropriate spacing.

Embedding SVG (Instead of Linking)

While we could modify the SVG file directly to change its appearance, embedding SVG code into HTML unlocks far more sophisticated styling possibilities. This approach allows us to use CSS for dynamic effects like hover states, theme-based color changes, and responsive adjustments—capabilities that are impossible when SVG is treated as a static image asset.

The key difference is that embedded SVG becomes part of the DOM, making its internal elements accessible to CSS selectors and JavaScript manipulation.

1. Return to your code editor and open arrow.svg from the img folder.
2. Examine the SVG structure and note these important elements:

3. Review the code structure carefully:

   • Three elements use ID attributes (arrow, line, and tip)—these correspond to layer names from the original graphics application
   • The arrow element serves as a container for two nested elements: tip and line

   Since our webpage contains three Read More buttons, we'll embed this arrow multiple times. HTML's ID uniqueness requirement means we must convert these IDs to classes, which can be safely reused across multiple instances.

4. Access your editor's Find and Replace functionality:

   • In Visual Studio Code: Edit > Replace (or Ctrl/Cmd + H)
   • In Sublime Text: Find > Replace
   • In Atom: Find > Find in Buffer

5. Execute the following replacement:

   Find: id= Replace: class=

6. Execute Replace All—you should see exactly 3 replacements, confirming all ID attributes have been converted.
7. Save the file to preserve your changes.
8. Select all code (Ctrl/Cmd + A) and copy it to your clipboard.
9. Close the arrow.svg file and switch to index.html.

10. On line 29, remove the entire img tag for arrow.svg, leaving:

    <p><a href="#" class="read-more">Read More</a></p>

11. Position your cursor immediately after Read More (before the closing </a> tag).
12. Paste the SVG code directly into the HTML.
13. Save the file and return to your browser.
14. Reload index.html and check the Take a Hike section. The arrow should still appear, but you'll notice the spacing has disappeared—this occurs because our CSS targets img elements, not the svg element we've just introduced.
15. Return to main.css in your code editor.

16. Update the selector to target SVG elements:

    .read-more svg {

17. Save main.css and reload the page. The arrow positioning should be restored.
18. Now add arrows to the remaining buttons. In index.html, locate line 38 and position your cursor after Read More (before </a>).
19. Paste the SVG code.
20. Repeat this process around line 47 for the third Read More link.

21. Save the file and reload index.html. All three Read More links should now display arrows, and we're ready to implement advanced CSS styling.

Styling SVG Using CSS

Now that our SVG elements are embedded in the DOM, we can style them using standard CSS properties. This represents a significant advantage over linked images, as we can create cohesive design systems where SVG elements automatically adapt to color schemes, themes, and interaction states.

1. In index.html, examine any of the three embedded SVG arrows:

2. Note the key styling attributes:

   • Both line and tip elements contain stroke="#000", which renders them black
   • These elements use stroke rather than fill because they represent line art rather than solid shapes
   • The elements are nested within the main svg container
3. Switch to main.css to implement CSS-based styling.

4. After the existing .read-more svg rule, add this new rule to override the SVG's inline styling:

   .read-more svg * {
      stroke: red;
   }

   The asterisk (*) is a universal selector that targets all child elements within the SVG. This approach ensures we style every visual element regardless of its specific tag name or class.

   The CSS stroke property overrides the inline stroke attribute, demonstrating CSS specificity in action.

5. Save the file and reload index.html. All three arrows should now appear in red, confirming our CSS successfully controls the SVG styling.
6. While red proves our technique works, let's implement a more sophisticated approach. Return to main.css.

7. Replace red with currentColor:

   .read-more svg * {
      stroke: currentColor;
   }

   The currentColor keyword is one of CSS's most powerful features for creating maintainable design systems. It instructs the element to inherit the computed color value from its parent, ensuring automatic color coordination without hard-coded values.

   Note: Unlike most CSS properties, currentColor retains its camelCase formatting from its SVG specification origins, though CSS's case-insensitivity means any capitalization works.

8. Save and reload to observe the results:

   • The arrows now match the link color perfectly, creating visual harmony
   • However, the stroke width appears heavy compared to the text weight
9. Return to index.html and examine the stroke-width="2" attributes in the SVG elements.
10. Rather than editing the SVG directly, we'll override this attribute with CSS for greater flexibility. Switch to main.css.

11. Add the stroke-width override:

    .read-more svg * {
       stroke: currentColor;
       stroke-width: 1.2;
    }

12. Save and reload to see the refined arrows with thickness that better matches the text weight.

Adding a Hover

One of the most compelling advantages of embedded SVG is its ability to participate in interactive states. Let's implement hover effects that demonstrate how currentColor creates seamless integration between text and graphics.

1. In main.css, add this rule above the existing .read-more svg rule:

2. Add the hover state:

   .read-more:hover {
      color: red;
   }

3. Save and reload index.html in your browser.

4. Hover over any Read More link and observe how both the text and arrow change color simultaneously. This demonstrates currentColor's power—the SVG automatically inherits the hover color without additional CSS rules.

   For accessibility and inclusive design, we should also provide focus styles for users who navigate with keyboards rather than mice. This ensures consistent visual feedback regardless of input method.

5. Return to main.css and enhance the selector:

6. Add focus state support:

   .read-more:hover, .read-more:focus {

7. Save and reload index.html in Chrome (or any modern browser with keyboard navigation support).
8. Press Tab to highlight the logo, then continue tabbing through the page elements.

9. When you reach a Read More link, it should display the same visual treatment as the hover state, ensuring consistent user experience across different interaction methods.