How to style SVG with external CSS?

Spread the love

Sometimes, we want to style SVG with external CSS.

In this article, we’ll look at how to style SVG with external CSS.

How to style SVG with external CSS?

To style SVG with external CSS, we add a style tag.

For instance, we write

<style>
  .fill-red {
    fill: red;
  }
  .fill-blue {
    fill: blue;
  }
</style>

<a href="//www.example.com/">
  <svg class="fill-red">
    <use xlink:href="images/icons.svg#example"></use>
  </svg>
</a>

to add a few styles for some classes in the style tag.

Then we apply the classes to the svg element to apply the styles.

Conclusion

To style SVG with external CSS, we add a style tag.

Leave a Reply

Your email address will not be published. Required fields are marked *