Add new features Filter feFlood feOffset

[Hellomik2002]

flutter: Ignoring filter tag(s) flutter: Ignoring feFlood tag(s) flutter: Ignoring feColorMatrix tag(s) flutter: Ignoring feOffset tag(s) flutter: Ignoring feGaussianBlur tag(s) flutter: Ignoring feBlend tag(s) flutter: Ignoring filter attribute(s) in g

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" width="401" height="401" viewBox="0 0 401 401" fill="none">
    <defs>
        <filter id="filter0_d_951_200" x="0" y="0" width="401" height="401" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
            <feOffset></feOffset>
            <feGaussianBlur stdDeviation="10"></feGaussianBlur>
            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.15 0"></feColorMatrix>
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_951_200"></feBlend>
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_951_200" result="shape"></feBlend>
        </filter>
        <filter id="filter1_d_951_200" x="52" y="52" width="296" height="296" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
            <feOffset></feOffset>
            <feGaussianBlur stdDeviation="10"></feGaussianBlur>
            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"></feColorMatrix>
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_951_200"></feBlend>
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_951_200" result="shape"></feBlend>
        </filter>
        <filter id="filter2_d_951_200" x="108" y="108" width="184" height="184" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
            <feFlood flood-opacity="0" result="BackgroundImageFix"></feFlood>
            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"></feColorMatrix>
            <feOffset></feOffset>
            <feGaussianBlur stdDeviation="10"></feGaussianBlur>
            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"></feColorMatrix>
            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_951_200"></feBlend>
            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_951_200" result="shape"></feBlend>
        </filter>
    </defs>
    <g filter="url(#filter0_d_951_200)">
        <circle cx="200.5" cy="200.5" r="180.5" fill="#C7CCFE"></circle>
    </g>
    <g filter="url(#filter1_d_951_200)">
        <circle cx="200" cy="200" r="128" fill="#D3D6FE"></circle>
    </g>
    <g filter="url(#filter2_d_951_200)">
        <circle cx="200" cy="200" r="72" fill="#DEE0FE"></circle>
    </g>

</svg> ``` EXAMPLE

[zathras]

Thanks! Let me know if there's any time-sensitive need for this; otherwise it might stay on the back burner for a while.

[zathras]

Completed? I didn't do anything :-)

Seems like a valid new feature.

[IchordeDionysos]

@zathras this would be an interesting addition for us :)

I've prepared an example file:

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 113 113" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="t" x1="119.87" x2="159.54" y1="475.04" y2="538.62" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1, 0, 0, 1, -83.608887, -454.509949)">
      <stop offset="0" stop-color="#575657"/>
      <stop offset="1" stop-color="#828182"/>
    </linearGradient>
    <mask id="u" width="77.94" height="6.42" x="101.25" y="537.8" maskUnits="userSpaceOnUse">
      <g filter="url(#a)">
        <g mask="url(#b)">
          <path fill="url(#c)" d="M179.18 538.33v3.58c0 1.27-1.06 2.31-2.35 2.31h-73.25c-1.29 0-2.34-1.04-2.34-2.31v-4.11c.29.11 1.93 2.66 2.27 2.66h73.58c.34 0 1.78-2.02 2.08-2.13Z"/>
        </g>
      </g>
    </mask>
    <filter id="a" width="77.94" height="6.42" x="101.25" y="537.8" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
      <feFlood flood-color="#fff" result="bg"/>
      <feBlend in="SourceGraphic" in2="bg"/>
    </filter>
    <mask id="b" width="77.94" height="32766" x="101.25" y="-8492" maskUnits="userSpaceOnUse"/>
    <linearGradient id="c" x1="140.22" x2="140.22" y1="551.43" y2="534.87" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#fff"/>
      <stop offset="0.09" stop-color="#e8e8e8"/>
      <stop offset="0.99"/>
    </linearGradient>
    <mask id="v" width="29.04" height="4.79" x="125.69" y="476.25" maskUnits="userSpaceOnUse">
      <g filter="url(#d)">
        <g mask="url(#e)">
          <path fill="url(#f)" d="M125.69 476.25h29.04v4.79h-29.04z"/>
        </g>
      </g>
    </mask>
    <filter id="d" width="29.04" height="4.79" x="125.69" y="476.25" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse">
      <feFlood flood-color="#fff" result="bg"/>
      <feBlend in="SourceGraphic" in2="bg"/>
    </filter>
    <mask id="e" width="29.04" height="32766" x="125.69" y="-8492" maskUnits="userSpaceOnUse"/>
    <linearGradient id="f" x1="-5954.48" x2="-5954.48" y1="53.21" y2="40.86" gradientTransform="rotate(-180 -2907.135 263.575)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#fff"/>
      <stop offset="0.99"/>
    </linearGradient>
  </defs>
  <path fill="#efefef" d="M 113.23 103.08 C 113.23 104.84 111.7 106.28 109.83 106.28 L 3.4 106.28 C 1.53 106.28 0 104.84 0 103.08 L 0 3.2 C 0 1.44 1.53 0 3.4 0 L 109.83 0 C 111.7 0 113.23 1.44 113.23 3.2 L 113.23 103.08 Z"/>
  <path fill="url(#t)" d="M 96.5 88.33 C 96.5 89.57 95.42 90.58 94.1 90.58 L 19.11 90.58 C 17.79 90.58 16.71 89.57 16.71 88.33 L 16.71 17.95 C 16.71 16.71 17.79 15.7 19.11 15.7 L 94.1 15.7 C 95.42 15.7 96.5 16.71 96.5 17.95 L 96.5 88.33 Z"/>
  <path fill="#d1d0d1" d="M 95.58 87.51 C 95.58 88.72 94.53 89.71 93.24 89.71 L 19.99 89.71 C 18.7 89.71 17.65 88.72 17.65 87.51 L 17.65 18.77 C 17.65 17.56 18.7 16.57 19.99 16.57 L 93.24 16.57 C 94.53 16.57 95.58 17.56 95.58 18.77 L 95.58 87.51 Z"/>
  <g mask="url(#u)" transform="matrix(1, 0, 0, 1, -83.608879, -454.509949)">
    <path fill="#858585" d="M179.18 538.33v3.58c0 1.27-1.06 2.31-2.35 2.31h-73.25c-1.29 0-2.34-1.04-2.34-2.31v-4.11c.29.11 1.93 2.66 2.27 2.66h73.58c.34 0 1.78-2.02 2.08-2.13Z"/>
  </g>
  <g mask="url(#v)" transform="matrix(1, 0, 0, 1, -83.608879, -454.509949)">
    <path fill="#b3b3b3" d="M125.69 476.25h29.04v4.79h-29.04z" opacity=".4"/>
  </g>
</svg>

[makinghappen]

any hope that gradient filters will be implemented?

[zathras]

any hope that gradient filters will be implemented?

I just took a look at the SVG 1.1 specification of the filter element, and it's quite big. Looking at dart:ui, there is ColorFilter that seems to address some of the underlying functionality that would be needed; from a quick look, it's not clear to me how complete Flutter's underlying support is at this time. I see there's also vector_math, vector_math_geometry and related packages that might come into play.

For reference, here's the SVG 1.1 spec for filters: https://www.w3.org/TR/SVG11/filters.html

All in all, this looks to be a large undertaking. I wouldn't rule out the possibility, particularly if e.g. someone who knows a lot about filter effects were to volunteer or something. But given the scope of the work that would be required, this looks unlikely. It's quite a stretch from the stated scope of the library.

[modulovalue]

Here's another datapoint:

I also appear to be encountering this issue with the following SVG:

Here's what I'm seeing in a Flutter App:

Here's what I was expecting:

Notice how some of the gradients appear to be wrong.

The following appears to be an error message reported by jovial_svg:

flutter:     Ignoring filter attribute(s) in g
flutter:     Ignoring filter tag(s)
flutter:     Ignoring feFlood tag(s)
flutter:     Ignoring feBlend tag(s)
flutter:     Ignoring feGaussianBlur tag(s)

It looks like these tags are not supported yet, which is how I found this issue.

That SVG was exported from Figma.