SOLVED: Bug in SVG icons and save as template

Bugs
1

Browser: Chrome 128.0.6613.85
OS: Windows

Hi,

If we save a container that has several elements with SVG icons as a template, if the template is viewed, the size of the SVG icons will return to their default state. After rewriting the size of SVG icons, the problem is solved.

Video :

template :

2

Hey @HOSEIN,

sadly, the template code seems to be wrong, and I was not able to import it.

But, I tried to reproduce the error and I couldn’t. I think it might be also related to the SVG icons you use. Would be possible to also send SVG icons, so I test them?

Thanks!

3

Hi, I downloaded the template and was able to import it. Anyway, I had used the following svg code in that format. thanks🥂

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="24" height="24" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24" xml:space="preserve"><path class="st0" d="m15.1 9.1-4.3 4.3-1.9-1.9c-.3-.3-.8-.3-1.1 0-.2.3-.2.7 0 1l2.5 2.5.5.2.5-.2 4.9-4.9c.2-.3.2-.7 0-1-.3-.3-.8-.3-1.1 0z"/><path class="st0" d="m22.1 10.2-1.3-1.5c-.2-.2-.3-.5-.3-.8V6.2c0-1.5-1.2-2.7-2.7-2.7h-1.7c-.3 0-.6-.1-.8-.3l-1.5-1.3c-1-.9-2.5-.9-3.5 0L8.7 3.2c-.2.2-.5.3-.8.3H6.2c-1.5 0-2.7 1.2-2.7 2.7v1.7c0 .3-.1.6-.3.8l-1.3 1.6c-.8 1-.8 2.4 0 3.4l1.3 1.6c.2.2.3.5.3.8v1.7c0 1.5 1.2 2.7 2.7 2.7h1.7c.3 0 .6.1.8.3l1.6 1.3c.5.4 1.1.7 1.7.7.7 0 1.3-.3 1.8-.7l1.5-1.3c.2-.2.5-.3.8-.3h1.7c1.5 0 2.7-1.2 2.7-2.7v-1.7c0-.3.1-.6.3-.8l1.3-1.6c.9-1 .9-2.5 0-3.5zM21 12.8l-1.4 1.5c-.3.5-.6 1.2-.6 1.8v1.7c0 .7-.5 1.2-1.2 1.2h-1.7c-.6 0-1.2.2-1.7.6L12.8 21c-.5.3-1.1.3-1.6 0l-1.5-1.4c-.5-.4-1.2-.6-1.8-.6H6.2c-.7 0-1.2-.5-1.2-1.2v-1.7c0-.6-.3-1.3-.6-1.8L3 12.8c-.3-.5-.3-1.1 0-1.6l1.4-1.6c.4-.5.6-1.1.6-1.7V6.2C5 5.5 5.5 5 6.2 5h1.7c.6 0 1.3-.2 1.8-.6L11.2 3c.5-.3 1.1-.3 1.6 0l1.6 1.4c.5.4 1.1.6 1.7.6h1.7c.7 0 1.2.5 1.2 1.2v1.7c0 .6.2 1.2.6 1.7l1.4 1.6c.4.5.4 1.1 0 1.6z"/></svg>
4

Hi,

Thank you for SVG. I was not able to import the template… it was my mistake and I probably messed up something during the import. :grimacing:

But, I could not replicate this still. It always shows the correct size of SVG icons. Can you try to disable all plugins, just to make sure that there is no problem with them?

Also, can you also give me that “X” SVG, so I can test with that?

Thank you,
M

1 Like
5

Hi again,

In your bricks settings, is the CSS loading method option set to inline styles? I just found out that this bug occurs if the CSS loading method option is set to external.

This is the X SVG file :

<?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1080" height="1080" viewBox="0 0 1080 1080" xml:space="preserve">
<desc>Created with Fabric.js 5.2.4</desc>
<defs>
</defs>
<g transform="matrix(1 0 0 1 540 540)" id="61157053-d2d6-4961-a4f0-5f10aa12847d"  >
<rect style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: ; fill-rule: nonzero; opacity: 1; visibility: hidden;" vector-effect="non-scaling-stroke"  x="-540" y="-540" rx="0" ry="0" width="1080" height="1080" />
</g>
<g transform="matrix(1 0 0 1 540 540)" id="438c6d6d-a5ca-44f7-a4f7-65e9580f4e1f"  >
</g>
<g transform="matrix(0.82 0 0 0.82 540 540)" id="057c7a4c-061f-4560-8bc3-b12e6bd45df8"  >
<path style="stroke: rgb(0,0,0); stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-dashoffset: 0; stroke-linejoin: miter; stroke-miterlimit: 4; fill: ; fill-rule: nonzero; opacity: 1;" vector-effect="non-scaling-stroke"  transform=" translate(-613.18, -613.18)" d="M 727.348 519.284 L 1174.075 0 L 1068.2150000000001 0 L 680.322 450.887 L 370.513 0 L 13.185 0 L 481.677 681.821 L 13.185 1226.37 L 119.051 1226.37 L 528.676 750.2179999999998 L 855.857 1226.37 L 1213.185 1226.37 L 727.322 519.284 z M 582.35 687.828 L 534.8820000000001 619.934 L 157.19600000000008 79.69399999999996 L 319.8 79.69399999999996 L 624.597 515.685 L 672.0649999999999 583.579 L 1068.2649999999999 1150.3 L 905.661 1150.3 L 582.35 687.854 z" stroke-linecap="round" />
</g>
</svg>
6

HI,

thank you for this, I’ve added both icons to the template, but it’s still not happening to me. I’ve also set CSS loading style to external. I even tried with RTL language, to check if it’s that, but it’s not.

Can you try to regenerate CSS styles, because maybe it’s just that. Additionally, can you try to replicate this with all plugins disabled?

Best regards,
M

7

Hi again,

No plugins are installed and active. I will try to investigate this in more detail and let you know the result.

1 Like
8

Ok, thank you.

And if you will not figure it out, you can set up a staging/test website and send us login credentials and a link to this thread, to help@bricksbuilder.io using the email address you used during the purchase, so we can take a look.

Best regards,
M

1 Like
9

Hi @Matej,

I just emailed the access information. thank you

10

Hi,

as per the email, I’ve reproduced this even locally and I’ve added it to the internal bug tracker.

Thanks,
M

1 Like