Image colours can bleed through

[backspace]

Hello, thanks for creating this, I’ve found it quite useful while working with our extensive SVG collection in travis-web!

I’ve found myself unable to use the component for some SVGs, they end up rendering with strange colouring. I noticed today that it’s evident in the image browser as well:

This is a busy time for me so I can’t dig into this further. Eventually I’ll have some free time to try to understand how this could be happening, but if you’re curious, you can reproduce with the repository, which is open source.

[voltidev]

Hi, I'm glad that the addon is useful for you. Actually the strange colouring problem has nothing to do with ember-svg-jar. Some of your SVGs have CSS styles from Adobe Illustrator with the same class names .st0, .st1 and so on. When such SVGs are embedded to an HTML page their CSS rules override each other. The last embedded SVG will be the one that overrides styles for any classes it declares. So when you select an SVG in the SVGJar viewer it gets embedded into the right panel and that affects the other SVGs with the same class names from Adobe Illustrator.

I can see at least 2 possible ways to solve that:

• by fixing affected SVGs directly in Adobe Illustrator - here is how
• or by trying out the inlineStyles SVGO plugin Add inlineStyles plugin (rewrite of localStyles plugin) svg/svgo#592, but it's not available yet in the current SVGJar version.

As soon as I upgrade SVGO it would be possible to turn it on like this:

 svgJar: {
      optimizer: {
        plugins: [
          {
            inlineStyles: { onlyMatchedOnce: false, removeMatchedSelectors: true }
          }
        ]
      }
    }

Also I found that some of your SVGs request PNG images (<image ... xlink:href="BEFA45F0C4EFA63F.png">). I'm not sure if it's desired, if it's not you could get rid of them in source files or by turning on the removeRasterImages SVGO plugin like this:

 svgJar: {
      optimizer: {
        plugins: [
          { removeRasterImages: true }
        ]
      }
    }

[backspace]

oh wow, well thanks for looking into this, I had no idea about this possibility!