SOLVED: Part of the SVG removed from the code

Bugs
1

Bricks Version: 1.5.2
Browser: Chrome 90
OS: Windows

I was trying to upload an SVG image and I have noticed the SVG does not take the right width. After some investigation. I have noticed that when an SVG image is uploaded, part of the filter code is omitted.

Example,

Here is the SVG image code

<svg xmlns="http://www.w3.org/2000/svg" width="1111" height="514" viewBox="0 0 1111 514" fill="none">
<g opacity="0.2" filter="url(#filter0_f_156_3881)">
<circle cx="555.5" cy="354.5" r="311.5" fill="url(#paint0_linear_156_3881)"/>
</g>
<defs>
<filter id="filter0_f_156_3881" x="0" y="-201" width="1111" height="1111" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="122" result="effect1_foregroundBlur_156_3881"/>
</filter>
<linearGradient id="paint0_linear_156_3881" x1="403.183" y1="334.524" x2="788.345" y2="191.571" gradientUnits="userSpaceOnUse">
<stop stop-color="#FF77A8"/>
<stop offset="0.239583" stop-color="#6FCBFE"/>
<stop offset="0.494792" stop-color="#9FB4FC"/>
<stop offset="0.776042" stop-color="#B7E4BB"/>
<stop offset="1" stop-color="#6CF760"/>
</linearGradient>
</defs>
</svg>

.
.
.

After Uploading it as SVG, this part filterUnits=“userSpaceOnUse” omitted from the code and cause layout issue.
.
.
.

<svg xmlns="http://www.w3.org/2000/svg" width="1111" height="514" viewBox="0 0 1111 514" fill="none">
  <g opacity="0.2" filter="url(#filter0_f_156_3881)">
    <circle cx="555.5" cy="354.5" r="311.5" fill="url(#paint0_linear_156_3881)" />
  </g>
  <defs>
    <filter id="filter0_f_156_3881" x="0" y="-201" width="1111" height="1111" color-interpolation-filters="sRGB">
      <feFlood flood-opacity="0" result="BackgroundImageFix" />
      <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
      <feGaussianBlur stdDeviation="122" result="effect1_foregroundBlur_156_3881" />
    </filter>
    <linearGradient id="paint0_linear_156_3881" x1="403.183" y1="334.524" x2="788.345" y2="191.571" gradientUnits="userSpaceOnUse">
      <stop stop-color="#FF77A8" />
      <stop offset="0.239583" stop-color="#6FCBFE" />
      <stop offset="0.494792" stop-color="#9FB4FC" />
      <stop offset="0.776042" stop-color="#B7E4BB" />
      <stop offset="1" stop-color="#6CF760" />
    </linearGradient>
  </defs>
</svg>

How to test ?

1- Open the text editor and
2- paste the first SVG code and save it as .svg
3- upload it to WordPress

The issue

How it suppose to look

image
image1900×520 84.1 KB

How it actually looks

image
image1903×519 92.2 KB

Do you see the different ?

I tried to use Happy files plugin but also does not solve it. I am not really sure if this is a Bricks bug or WordPress known issue.

I will appreciate any help on how to fix it.

Thanks

2

Hi Mohammed,
Thanks so much for your report!

To be honest, I don’t see any difference between the two images :smiley: We use an SVG sanitizer to optimize the SVGs, which works well in most cases. The problem with SVGs is that no two SVGs are alike :smiley:

However, you have two filter options to make your SVG display as it should.
Add one of these filters to the functions.php of your child theme:

  1. skip the sanitzer
    add_filter( 'bricks/svg/bypass_sanitization', '__return_true'); // skip sanitization

  2. allow filterAttributes

add_filter( 'bricks/svg/allowed_attributes', function( $attributes ) {
    $attributes[] = 'filterUnits';

    return $attributes;
} );

Best regards,
timmse

2 Likes
3

Thank you so much for the quick reply.

There is indeed a different. The first image takes a full radius shape while the other one takes a square shape.