SVG icons look "swollen" or are colored when they should not be

This topic has 9 replies, 3 voices, and was last updated 5 years, 5 months ago by Elise Noromit.

Viewing 10 posts - 1 through 10 (of 10 total)

Author

Posts
June 19, 2019 at 7:58 pm #129330

erobles
Participant

I need help, I am trying to add some SVG icons to a default template bu for some reason they show in a weird way, even the defaults icon are getting this weird look

Attachments:
You must be logged in to view attached files.

June 20, 2019 at 5:23 am #129348

Elise Noromit
Member

Hello,

Try to open your SVG icons file with some editor like Sublime Text or default system text editor and add width=”31″ height=”40″ (set your sizes) attributes to your <svg> tag like it is shown: http://prntscr.com/m4n0qw
Then you will need to re-upload your icons in WordPress Dashboard.

Best Regards

June 20, 2019 at 6:13 am #129360

erobles
Participant

please check the file I attached to the post, the problem happens even with the stock svg that comes with the template, I already changed the sizes atributes, the problem is that they are “acting” weird and lookin “swollen”.

Pd: I attached an image where you can see the intended SVG and the result when its uploaded to the web page

Attachments:
You must be logged in to view attached files.

June 20, 2019 at 11:13 am #129419

Artem Temos
Keymaster

Hello,

Could you please disable all plugins that are not related to our theme and provide us your admin access so we can check it?

Thank you in advance

June 20, 2019 at 4:05 pm #129479

erobles
Participant

I just installed the theme, I haven’t add anything else besides what it comes with woodmart, I will give you my login access

thanks in advance

June 21, 2019 at 6:09 am #129523

Artem Temos
Keymaster

Currently, you have 17 plugins active. Please, leave only the plugins required for our theme.

June 21, 2019 at 6:29 am #129531

erobles
Participant

Ok, I disabled all that is not necessary, the other plugins are like the “stock” I have not installed more than 2 by myself, but ok. Now I just have 7 that I am most likely sure is from the theme and the problem still persists, please help

June 21, 2019 at 8:34 am #129534

Artem Temos
Keymaster

The problem with the first SVG icon you have uploaded https://gyazo.com/759d03a497d1de11a74d94aac9e995ac
It has .st0 and add unnecessary CSS rules to it. This class exists on other icons as well and they conflict with each other. Try to change the class or create icons without classes.

June 24, 2019 at 3:53 pm #129865

erobles
Participant

thanks for the help, that was it. 🙂

June 24, 2019 at 8:23 pm #129892

Elise Noromit
Member

You are welcome! If you have any questions please feel free to contact us.

Best Regards
Author

Posts