SVG Icon’s Appearing White

Hello,

I’m trying to work on a page within my website and whenever I add SVG images for my icons they change to the colour white.

The SVG’s I’ve created are blue and automatically turn white when uploaded to the site.

Please advise how I can prevent this from happening. Page link in private content.

Screenshot for reference: https://gyazo.com/dddc1b6456e241e81d0c4776b8cd70ce

Hello,

The problem is caused by SVG itself: some of your SVG images have styles which are applied to the whole page. As a result, the styles of one SVG icon influence the other. In order to solve this, you need to insert inline styles without classes.

You can open your SVG image in any text editor and manually change styles to inline like is shown on this screenshot https://prnt.sc/loz0mw.

If you create SVG in Adobe Illustrator we would suggest exporting SVG with appropriate CSS properties in the first place. During export from Illustrator choose style attributes. You can read more about resolving this issue in Illustrator here https://cobwwweb.com/inline-style-attributes-svg-elements.

Best Regards

[Author]

Posts