search

activemerchant / payment_icons

An easy to use library that allows you to manage and access payment icons
MIT License
144 stars 423 forks source link

Prevent <style> tags in SVG #179

Closed NathanPJF closed 3 hours ago

NathanPJF commented 5 years ago

Issue

I noticed that a number of SVG icons have nested <style> tags. Search results

Example of a nested <style>:

<svg ...>
  <title id="...">...</title>
  <style>.b{fill:#fff}</style>
  <path ...>

This is a problem because the cascading effect of CSS means that the styles of one icon can overwrite another.

In the example below I have the 7-Eleven svg followed by the Circle K svg. The green color of 7-Eleven is being overwritten by styles in set in the Circle K svg.

Proposed solution

We should have a test that rejects nested <style> tags. This is similar to the work @maximevaillancourt did for checking for nested <img> tags in https://github.com/activemerchant/payment_icons/issues/174

Contributors are welcome to inline their styles with style or fill attributes as this doesn't have the cascading effect. Examples of icons using fill in the markups.

NathanPJF commented 5 years ago

cc @tauthomas01

NathanPJF commented 5 years ago

Relevant PRs / commits: