What causes the blur of SVGs to be clipped?

Question

I have found that when adding blur to an SVG, the blurred area often gets clipped, as if by some invisible container.

Luckily, Inkscape fixes this. All that is required is to open the SVG once in Inkscape and save it. But I want to understand why it happens.

I authored this test SVG in Illustrator. (Isn't it beautiful?) Then, in a text editor, I added blur using the standard feGaussianBlur filter primitive.

Viewing the SVG in a browser, we can see the blur is truncated on the left and on the top:

We can open the SVG it in Illustrator, and observe that this clipped area corresponds with the outer bounds of the leftmost and topmost paths on that layer. In the screenshot below, all paths on the layer are selected:

But this boundary where the blur rendering abruptly stops does not represent any clipping path or transparent rectangle, or any geometry. We can see from the Layers Panel that the only thing on the layer is the colored rectangles:

So what could be causing the clipping?

Here is the code of the SVG that renders clipped (before opening in Inkscape):

    <?xml version="1.0" encoding="UTF-8"?>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512">
      <!-- Generator: Adobe Illustrator 29.2.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 116)  -->
      <defs>
        <style>
          .st0 {
            fill: #e1c300;
          }
    
          .st1 {
            fill: #13e5b3;
          }
    
          .st2 {
            fill: #455133;
          }
    
          .st3 {
            fill: #848484;
          }
    
          .st4 {
            fill: #838cff;
          }
    
          .st5 {
            fill: #c0ffc7;
          }
    
          .st6 {
            fill: #ff96c4;
          }
    
          .st7 {
            fill: #85d5ff;
          }
        </style>
        <filter id="f1" x="0" y="0" xmlns="http://www.w3.org/2000/svg">
          <feGaussianBlur in="SourceGraphic" stdDeviation="8" />
        </filter>
      </defs>
      <g id="layer_bgfill">
        <rect class="st3" width="512" height="512"/>
      </g>
      <g id="layer_hills">
        <path class="st2" d="M0,339.951c20.637.374,50.784-1.483,84.56-13.302,21.956-7.683,26.793-13.049,46.556-18.622,42.654-12.03,80.516-4.067,91.781-1.33,47.107,11.444,44.714,32.453,99.762,51.876,36.146,12.754,60.192,21.239,86.461,11.971,27.041-9.54,38.921-31.712,78.48-39.905,10.078-2.087,18.637-2.581,24.401-2.66v184.02H0v-172.049Z"/>
      </g>
      <g id="layer_blur" filter="url(#f1)">
        <rect class="st0" x="127.125" y="238.859" width="43.895" height="81.14"/>
        <rect class="st1" x="221.567" y="26.032" width="15.962" height="70.499"/>
        <rect class="st5" x="256" y="279.429" width="10.792" height="164.275"/>
        <rect class="st1" x="297.386" y="217.576" width="13.302" height="67.838"/>
        <rect class="st0" x="363.894" y="53.966" width="9.311" height="117.054"/>
        <rect class="st1" x="390.497" y="251.495" width="10.641" height="145.653"/>
        <rect class="st5" x="442.374" y="171.02" width="9.311" height="55.867"/>
        <rect class="st1" x="52.636" y="96.531" width="17.292" height="85.131"/>
        <rect class="st7" x="44.655" y="309.357" width="7.981" height="78.48"/>
        <rect class="st4" x="210.925" y="160.379" width="18.622" height="38.575"/>
        <rect class="st6" x="127.125" y="26.032" width="11.971" height="45.226"/>
        <rect class="st4" x="127.125" y="406.787" width="21.948" height="59.53"/>
        <rect class="st6" x="471.637" y="309.357" width="11.971" height="78.48"/>
        <rect class="st1" x="193.633" y="361.566" width="10.641" height="35.582"/>
        <rect class="st7" x="330.64" y="364.649" width="9.504" height="42.138"/>
      </g>
    </svg>

Here is the markup of the fixed SVG after being opened and saved in Inkscape:

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
    <svg
       version="1.1"
       viewBox="0 0 512 512"
       id="svg46"
       sodipodi:docname="simple-image-blur-03.svg"
       inkscape:version="1.2.1 (9c6d41e4, 2022-07-14)"
       xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
       xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:svg="http://www.w3.org/2000/svg">
      <sodipodi:namedview
         id="namedview48"
         pagecolor="#505050"
         bordercolor="#eeeeee"
         borderopacity="1"
         inkscape:showpageshadow="0"
         inkscape:pageopacity="0"
         inkscape:pagecheckerboard="0"
         inkscape:deskcolor="#505050"
         showgrid="false"
         inkscape:zoom="1"
         inkscape:cx="199.5"
         inkscape:cy="256.5"
         inkscape:window-width="1390"
         inkscape:window-height="1205"
         inkscape:window-x="0"
         inkscape:window-y="25"
         inkscape:window-maximized="0"
         inkscape:current-layer="svg46" />
      <!-- Generator: Adobe Illustrator 29.2.1, SVG Export Plug-In . SVG Version: 2.1.0 Build 116)  -->
      <defs
         id="defs7">
        <style
           id="style2">
          .st0 {
            fill: #e1c300;
          }
    
          .st1 {
            fill: #13e5b3;
          }
    
          .st2 {
            fill: #455133;
          }
    
          .st3 {
            fill: #848484;
          }
    
          .st4 {
            fill: #838cff;
          }
    
          .st5 {
            fill: #c0ffc7;
          }
    
          .st6 {
            fill: #ff96c4;
          }
    
          .st7 {
            fill: #85d5ff;
          }
        </style>
        <filter
           id="f1"
           x="-0.043740447"
           y="-0.043608119"
           width="1.0874809"
           height="1.0872162">
          <feGaussianBlur
             in="SourceGraphic"
             stdDeviation="8"
             id="feGaussianBlur4" />
        </filter>
      </defs>
      <g
         id="layer_bgfill">
        <rect
           class="st3"
           width="512"
           height="512"
           id="rect9" />
      </g>
      <g
         id="layer_hills">
        <path
           class="st2"
           d="M0,339.951c20.637.374,50.784-1.483,84.56-13.302,21.956-7.683,26.793-13.049,46.556-18.622,42.654-12.03,80.516-4.067,91.781-1.33,47.107,11.444,44.714,32.453,99.762,51.876,36.146,12.754,60.192,21.239,86.461,11.971,27.041-9.54,38.921-31.712,78.48-39.905,10.078-2.087,18.637-2.581,24.401-2.66v184.02H0v-172.049Z"
           id="path12" />
      </g>
      <g
         id="layer_blur"
         filter="url(#f1)">
        <rect
           class="st0"
           x="127.125"
           y="238.859"
           width="43.895"
           height="81.14"
           id="rect15" />
        <rect
           class="st1"
           x="221.567"
           y="26.032"
           width="15.962"
           height="70.499"
           id="rect17" />
        <rect
           class="st5"
           x="256"
           y="279.429"
           width="10.792"
           height="164.275"
           id="rect19" />
        <rect
           class="st1"
           x="297.386"
           y="217.576"
           width="13.302"
           height="67.838"
           id="rect21" />
        <rect
           class="st0"
           x="363.894"
           y="53.966"
           width="9.311"
           height="117.054"
           id="rect23" />
        <rect
           class="st1"
           x="390.497"
           y="251.495"
           width="10.641"
           height="145.653"
           id="rect25" />
        <rect
           class="st5"
           x="442.374"
           y="171.02"
           width="9.311"
           height="55.867"
           id="rect27" />
        <rect
           class="st1"
           x="52.636"
           y="96.531"
           width="17.292"
           height="85.131"
           id="rect29" />
        <rect
           class="st7"
           x="44.655"
           y="309.357"
           width="7.981"
           height="78.48"
           id="rect31" />
        <rect
           class="st4"
           x="210.925"
           y="160.379"
           width="18.622"
           height="38.575"
           id="rect33" />
        <rect
           class="st6"
           x="127.125"
           y="26.032"
           width="11.971"
           height="45.226"
           id="rect35" />
        <rect
           class="st4"
           x="127.125"
           y="406.787"
           width="21.948"
           height="59.53"
           id="rect37" />
        <rect
           class="st6"
           x="471.637"
           y="309.357"
           width="11.971"
           height="78.48"
           id="rect39" />
        <rect
           class="st1"
           x="193.633"
           y="361.566"
           width="10.641"
           height="35.582"
           id="rect41" />
        <rect
           class="st7"
           x="330.64"
           y="364.649"
           width="9.504"
           height="42.138"
           id="rect43" />
      </g>
    </svg>

It's not clear what actually resolved the problem.

Comparing the two files, it can be observed that Inkscape added a bunch of sodipodi data. It created IDs for some elements.

Answer 1

I realized just as I finished authoring the question, what the big difference is:

Inside the <filter> tag, the values for X and Y were originally: x="0" y="0"

In Inkscape's modified SVG file, they are: x="-0.043740447" y="-0.043608119"

Inkscape must perform a calculation to determine where the visibility of the blur effect will end, and negatively offset the start of the filter-affected area's position by that amount.

User enxaneta pointed out that entirely removing the x,y coordinates from the filter tag also works. I have tested this, and it is correct.

I speculate that specifying the coordinates of the area for the filter to be applied yields some performance gain (quicker rendering of the SVG). Otherwise, it wouldn't make sense for that feature to exist. But don't worry about it, unless you're authoring large SVG files with lots of filter effects.

If you do leave the filter coordinates in, it's nice that Inkscape is clever, and will automatically make the offset adjustment for us. ;-)