SVG attributes stripped after updating to Tangible Blocks 3.2.0

elearningkings · July 29, 2023, 10:20am

Greetings,

I’ve been troubleshooting a bug since Tangible Blocks 3.2.0 was released. I think I am able to spot the bug.

So, in my templates I would have some SVG mockup as follow

In version 3.1.9, it works fine. However, after updating to 3.2.0 and above, the mockup on the front end is rendered as

<svg class="icon icon--sm" viewBox="0 0 32 32"><title>note</title></svg>

I swapped out themes, deactivated plugins etc, but couldn’t understand why it was happening. Did something major change in 3.2.0 that’s causing the issue?

Can you please help?

eliot · July 29, 2023, 11:49am

Hi Kendell, thank you for reporting the issue.

Looks like the g and path elements within SVG are getting removed for some reason. I checked the plugin change log, but I don’t see anything that’s directly related.

I’ll try to reproduce the issue on my end, and see if I can figure out what could be happening. It’s helpful to have the exact versions to compare against, it must have been some change introduced in 3.2.0.

elearningkings · September 7, 2023, 9:18pm

@eliot would you like to have a temporary access to a staging site to test or so? I can quickly spin that up if you desire.

elearningkings · April 8, 2024, 10:32am

Greetings @eliot1

Just quickly pinging you on this. Any thoughts?

ghen · April 8, 2024, 1:04pm

Hey there @elearningkings there have been some enhancements to the plugin since 3.2.0. Updating it might fix the issue you’re experiencing. Thank you

elearningkings · April 8, 2024, 6:40pm

Hi @ghen. Thanks for jumping in.

I’ve been trying this on every update with the hope that it might get fixed, but the issue still exists.

ghen · April 9, 2024, 1:53pm

Thanks @elearningkings for trying on the updates. I’ll investigate and keep you posted.

ghen · April 10, 2024, 11:48am

Hey @elearningkings I’ve also tested different block versions, but none seem to fix the issue. This makes me wonder if the problem might lie with the SVG itself. The code below appears to work on my end. Could you try it on your end?

<svg class="icon icon--sm" viewBox="0 0 32 32" width="1em" height="1em" fill="#212121"><title>note</title><g ><path d="M31.584,1.189C31.323,1,30.988,0.951,30.684,1.051L16,5.946L1.316,1.051C1.011,0.951,0.676,1,0.416,1.189 C0.154,1.377,0,1.679,0,2v23c0,0.431,0.275,0.812,0.684,0.949l15,5C15.787,30.983,15.893,31,16,31s0.213-0.017,0.316-0.051l15-5 C31.725,25.812,32,25.431,32,25V2C32,1.679,31.846,1.377,31.584,1.189z M13.632,24.932l-9.897-3.299l0.633-1.897l9.897,3.299 L13.632,24.932z M3.76,15.68l0.56-1.92l9.92,2.894l-0.56,1.92L3.76,15.68z M13.632,12.932L3.735,9.632l0.633-1.897l9.897,3.299 L13.632,12.932z M18.368,24.932l-0.633-1.897l9.897-3.299l0.633,1.897L18.368,24.932z M17.76,16.653l9.92-2.894l0.56,1.92 l-9.92,2.894L17.76,16.653z M18.368,12.932l-0.633-1.897l9.897-3.299l0.633,1.897L18.368,12.932z"></path></g></svg>

For reference, I added a height and width attribute directly to the SVG tag and also moved the fill attribute there.
Thank you

elearningkings · April 10, 2024, 3:17pm

Hi @ghen ,

Thanks for your efforts.

I did get the chance to try the markup you sent but it still doesn’t show. I then went on to past the markup on this site (https://svgomg.net/) and the optimized version works fine.

So as you suggested, it seems to be a problem with the SVG itself. Thoughts or recommendations for moving forward?

ghen · April 10, 2024, 3:46pm

Hey @elearningkings! We also use SVGOMG (https://svgomg.net/) for optimizing SVGs. Adding width and height attributes to SVGs, as we discussed earlier, is also a great best practice. For fonts, I like using Font Awesome’s free icons(Free Icons | Font Awesome) if I can. They’re easy to use – just copy the SVG code from the SVG tab and add height , width , and fill attributes. And You are good to go!