Smashing Animations Part 5: Adaptive SVGs with CSS

Introduction

In the fifth part of our Smashing Animations series, we dive into the world of adaptive SVGs. SVGs (Scalable Vector Graphics) are infinitely scalable and can be manipulated with CSS and JavaScript, making them a powerful tool for modern web developers. This guide will focus on the use of the <symbol> and <use> elements to create reusable SVG components, complemented by CSS media queries for responsive design.

Understanding SVG Symbols and Use

The <symbol> element allows you to define reusable SVG components, while the <use> element enables you to instantiate these symbols wherever needed. This approach not only keeps your code clean and organized but also enhances performance by reducing redundancy.

Defining SVG Symbols

To create an SVG symbol, you wrap your graphic elements in a <symbol> tag and give it an ID.

<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
  <symbol id="icon-star" viewBox="0 0 24 24">
    <path d="M12 17.27L18.18 21 16.54 13.97 22 9.24 14.81 8.63 12 2 9.19 8.63 2 9.24 7.46 13.97 5.82 21 12 17.27z"/>
  </symbol>
</svg>

Using Symbols in Your SVGs

Once defined, you can use the symbol by referencing its ID with the <use> tag.

<svg width="100" height="100">
  <use href="#icon-star" />
</svg>

Adaptive SVGs with CSS Media Queries

To make your SVGs adaptive, you can use CSS media queries to change their styles based on the viewport size. This allows you to optimize the appearance of your graphics on different devices.

Setting Up Media Queries

Hereā€™s how to apply media queries directly to your SVG:

<style>
  svg {
    fill: gold;
    transition: fill 0.3s;
  }

  @media (max-width: 600px) {
    svg {
      fill: silver;
    }
  }
</style>

In this example, the star icon will change its fill color based on the screen width.

Step-by-Step Implementation

  1. Define your SVG symbols within a hidden SVG element.
  2. Use the <use> tag to reference these symbols in your HTML.
  3. Apply CSS styling, including media queries, to adapt the SVGs for different screen sizes.
  4. Test your implementation across various devices using tools like the Responsive Simulator.

Code Example

Hereā€™s a full example that combines everything:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Adaptive SVG Example</title>
  <style>
    svg {
      fill: gold;
      transition: fill 0.3s;
    }

    @media (max-width: 600px) {
      svg {
        fill: silver;
      }
    }
  </style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
  <symbol id="icon-star" viewBox="0 0 24 24">
    <path d="M12 17.27L18.18 21 16.54 13.97 22 9.24 14.81 8.63 12 2 9.19 8.63 2 9.24 7.46 13.97 5.82 21 12 17.27z"/>
  </symbol>
</svg>

<svg width="100" height="100">
  <use href="#icon-star" />
</svg>
</body>
</html>

FAQs

What are SVG symbols and why should I use them?

SVG symbols allow you to define reusable graphics, reducing redundancy and improving performance.

How do media queries work with SVGs?

Media queries can be applied in CSS to change the SVGā€™s styles based on the viewport size, making them more responsive.

Conclusion

By leveraging the <symbol> and <use> elements along with CSS media queries, you can create adaptive SVGs that enhance the user experience across various devices. For more tools to optimize your web projects, check out WebToolsLab (All Tools) and explore resources like the CSS Minifier and HTML Minifier.

Scroll to Top