svg styles interfering with each other

Question

I have a bunch of logo's, generated with illustrator, that I would like to embed in my website directly. The svgs all have a <style> element where the styles are defined inside the svg element, something like this:

<svg>
  <style>
    .st1 { fill:#ff00ff; }
    .st2 { fill:#ff3421; }
    /* ... and so on */
  </style>
    <!-- svg paths and shapes -->
</svg>

The problem is that these styles interfer with each other. So if the last images defines .st21 {fill:#555555} this style is applied to all path with class="st21", including paths from all previously loaded svg images.

In another thread somebody suggested to wrap my svg-xml with an <object> tag, that doesn't seem to work.

How can I make sure that inline SVG styles are not interfering with each other, without touching the actual SVG code?

here's a pen to illustrate the problem: https://codepen.io/pwkip/pen/RLPgpW

Answer 1

I would suggest to export svg with appropriate CSS properties in the first place. During export from Illustrator choose :style attributes it would be something like this in svg:

<path style="fill: red"></path>

It could increase your file size but it definitely do the job. I found a nice explanation here