SOLVED: SVG Element still incorrect

Bugs
1

Bricks Version: 1.4.01
Browser: Chrome 102.0.5005.115
OS: Windows

Hello,
I know the problem with the two IDs when using SVG element is corrected, but Bricks still doesn’t renders SVGs properly when using SVG Element. When I place the SVG code inside a code element, it works fine. Seems that Bricks has problems with the linear gradients, I create my SVGs with Illustrator.
Correct output (with Code element), incorrect output (with SVG Element):
svg-correct-and-incorrect

Here the code of the SVG file:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 538.6 538.6" enable-background="new 0 0 538.6 538.6" xml:space="preserve">
<g>
	<g>
		<polygon fill="#999999" points="405.5,467.5 269.3,504.1 133.1,467.5 101.6,126.9 436.9,126.9 		"/>
		<polygon fill="#AAAAAA" points="269.3,154.5 269.3,474.9 269.6,475 379.8,445.3 405.3,154.5 		"/>
		<g>
			<polygon fill="#999999" points="192,76.9 192,56.6 221.6,56.6 221.6,34.5 169.8,34.5 169.8,97.1 221.6,97.1 221.6,76.9 			"/>
			<path fill="#999999" d="M274.8,56.6h20.7V34.5h-51.8c0,0,0,11.1,0,22.2c6.9,6.9,10.5,10.2,20.5,20.3c-5.9,0-20.5,0-20.5,0v20.2
				h51.8V76.9L274.8,56.6z"/>
			<path fill="#999999" d="M348.1,56.6h20.7V34.5H317c0,0,0,11.1,0,22.2c6.9,6.9,10.5,10.2,20.6,20.3c-5.9,0-20.6,0-20.6,0v20.2
				h51.8V76.9L348.1,56.6z"/>
		</g>
		<g>
			<polygon fill="#FFFFFF" points="269.2,239.7 171.7,280.3 174.9,320.5 269.2,280.2 369.4,237.3 373.6,196.2 			"/>
			
				<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="220.45" y1="219.5" x2="220.45" y2="300.3" gradientTransform="matrix(1 0 0 -1 0 540)">
				<stop  offset="0.3865" style="stop-color:#D9DADA;stop-opacity:0"/>
				<stop  offset="1" style="stop-color:#D9DADA"/>
			</linearGradient>
			<polygon fill="url(#SVGID_1_)" points="171.7,280.3 174.9,320.5 269.2,280.2 269.2,239.7 			"/>
			
				<linearGradient id="SVGID_00000057848288316811730140000014773779061356021151_" gradientUnits="userSpaceOnUse" x1="321.4" y1="259.8" x2="321.4" y2="343.8" gradientTransform="matrix(1 0 0 -1 0 540)">
				<stop  offset="0.3865" style="stop-color:#D9DADA;stop-opacity:0"/>
				<stop  offset="1" style="stop-color:#D9DADA"/>
			</linearGradient>
			<polygon fill="url(#SVGID_00000057848288316811730140000014773779061356021151_)" points="373.6,196.2 269.2,239.7 269.2,280.2 
				369.4,237.3 			"/>
			
				<linearGradient id="SVGID_00000170276490453575087510000016713568775647296911_" gradientUnits="userSpaceOnUse" x1="171.8" y1="183.5" x2="365.9" y2="183.5" gradientTransform="matrix(1 0 0 -1 0 540)">
				<stop  offset="0" style="stop-color:#EEEDEC"/>
				<stop  offset="1" style="stop-color:#FFFFFF"/>
			</linearGradient>
			<polygon fill="url(#SVGID_00000170276490453575087510000016713568775647296911_)" points="171.8,280.3 175.1,320.5 319.7,320.9 
				316.5,374.5 268.9,387.9 223.1,376.4 220.3,343.1 177.8,343.1 183.4,407.3 269.3,432.7 354.8,407.8 365.9,280.3 			"/>
			<g opacity="0.05">
				<polygon points="269.2,280.3 171.7,280.3 174.9,320.5 269.2,320.8 				"/>
				<polygon points="269.2,387.8 268.7,387.9 223,376.4 220.2,343.1 177.7,343.1 183.2,407.3 269.2,432.7 				"/>
			</g>
			
				<linearGradient id="SVGID_00000169554493376165934060000017741383418983219584_" gradientUnits="userSpaceOnUse" x1="162.9" y1="323.25" x2="373.6" y2="323.25" gradientTransform="matrix(1 0 0 -1 0 540)">
				<stop  offset="0" style="stop-color:#EEEDEC"/>
				<stop  offset="1" style="stop-color:#FFFFFF"/>
			</linearGradient>
			<polygon fill="url(#SVGID_00000169554493376165934060000017741383418983219584_)" points="162.9,196.2 373.6,196.2 369.4,237.3 
				168,237.3 			"/>
			<polygon opacity="0.05" enable-background="new    " points="269.2,196.2 162.9,196.2 168,237.3 269.2,237.3 			"/>
		</g>
	</g>
</g>
</svg>
2 Likes
2

Hi,
Thanks so much for your report!

I was able to reproduce the issue and added it to our bug tracker. It seems like we are currently removing every ID from the SVG without exception, not just on the outer node.

Best regards,
timmse

3 Likes
3

I’ve got this same issue…it’s caused all the SVGs used throughout my site to no longer display gradients. In addition, it now shows a strange message in the content area of the sidebar (see image). Note the grammar issue.

Screen Shot 2022-06-21 at 10.46.27 PM
Screen Shot 2022-06-21 at 10.46.27 PM1872×1660 246 KB

In any event, I need a workaround…this is pretty bad. Seemed to start only with 1.4.0.1…should I just downgrade to 1.4.0 until this can be fixed?

4

Try using the image element instead of svg element

5

Yeah, no…I’m not about to replace every SVG element throughout the site with an image element instead.

1 Like
6

Yeah, just roll back to 1.4. I did and it seems fine. Probably best to do a site backup first just in case.

7

Sorry, wasn’t here for a few days …
In the meantime (in case you didn’t already downgrade), you can use the Code element instead of SVG and put the SVG code in there - that worked for me (put this in my opening post)

8

Hi Lars,
The issue has been fixed in Bricks 1.5beta.
Please let us know if you still encounter any problems.

Best regards,
timmse