Prevent <style> tags in SVG

[NathanPJF]

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]

cc @tauthomas01

[NathanPJF]

Relevant PRs / commits:

• Cimbthai addition: https://github.com/activemerchant/payment_icons/pull/173#pullrequestreview-222757898
• Interac addition: https://github.com/activemerchant/payment_icons/pull/180/commits/02ab9ebb80c15b57c97aaad2369887d49eb69919
• Circle K : https://github.com/activemerchant/payment_icons/blob/bd162be42b31a7b5f8ab3d2eebf874907ae637f6/app/assets/images/payment_icons/circlek.svg
• 7-Eleven: https://github.com/activemerchant/payment_icons/blob/bd162be42b31a7b5f8ab3d2eebf874907ae637f6/app/assets/images/payment_icons/seveneleven.svg
• UniPay: https://github.com/activemerchant/payment_icons/blob/999bafcb649005984c18f4e689fd5aa2e37818f7/app/assets/images/payment_icons/unipay.svg
• Ministop: https://github.com/activemerchant/payment_icons/blob/bd162be42b31a7b5f8ab3d2eebf874907ae637f6/app/assets/images/payment_icons/ministop.svg
• Sunkus: https://github.com/activemerchant/payment_icons/blob/bd162be42b31a7b5f8ab3d2eebf874907ae637f6/app/assets/images/payment_icons/sunkus.svg