Information box svg bug

Hi,
Im trying to add svg to infobox image, but when I use just one image, it work perfectly. After I add 1 more infobox with svg image it started cut off the first one height. After I set the 4th svg image it filled all of the images with green color. What is the problem?

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

I have set it, but still have issue.

<?xml version=”1.0″ encoding=”utf-8″?>
<!– Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) –>
<svg version=”1.1″ id=”Layer_1″ xmlns=”http://www.w3.org/2000/svg&#8221; xmlns:xlink=”http://www.w3.org/1999/xlink&#8221; x=”0px” y=”0px” width=”35″ height=”35″
viewBox=”0 0 35 35″ style=”enable-background:new 0 0 35 35;” xml:space=”preserve”>
<style type=”text/css”>
.st0{fill:none;stroke:#5cc0a8;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
</style>
<circle class=”st0″ cx=”17.5″ cy=”17.5″ r=”16″/>
<polyline class=”st0″ points=”17.5,8 17.5,17.5 27,23 “/>
</svg>

Hello,

The problem is caused by SVG itself: 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:
remove this <circle class="st0"></circle>
insert this instead: <circle style="color: #5сс0а8"></circle>

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-element

Best Regards

[Author]

Posts