SVG does not show right

Hello there

I use SVG images on my website. Now the thing is that I want to insert multiple SVG images in one place (Woodmart template). After inserting more than four SVG images, the already inserted SVG images change in an undesired way (warped). Please see screenshots.

Thanks for help.

Attachments:

You must be logged in to view attached files.

Hello,

You need to open your SVG icons file with some editor like Sublime Text or default system text editor and add width=”31″ height=”40″ 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

Hello

Thank you for the suggested solution.
I have done this, but without success. What’s weird is that it displays the SVG images correctly at first and then after I insert the third image in the row, the top two images change and no longer display correctly.

Do you have another approach?

Hello,

The problem is caused by SVG itself: some of your SVG images have styles that 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