Flutter_svg: unhandled element filter

[joaorpalma]

When using a svg image from adobe xd, I'm getting this error message:

flutter: unhandled element filter; Picture key: AssetBundlePictureKey(bundle: PlatformAssetBundle#9c758(), name: "assets/neuro_text_white.svg", colorFilter: null)

The image ends up showing but its not renderer right after the page shows.

[dnfield]

Filter effects aren't supported yet, sorry

[dnfield]

You can follow #53 - that's what I'm using to track it currently. But it will require some upstream changes to flutter/engine

[gskinner]

@joaowd - are you able to provide an XD file that reproduces this issue here?
https://github.com/AdobeXD/xd-to-flutter-plugin/issues/66

I'm unable to reproduce, and I don't see an obvious path in the plugin code that would create a filter on the SVG.

[pA1nD]

I can provide one that gives the same error:

<svg width="141" height="140" viewBox="0 0 141 140" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_dd)">
<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="6" y="2" width="129" height="128">
<circle cx="70.5" cy="66" r="64" fill="#C4C4C4"/>
</mask>
<g mask="url(#mask0)">
<g clip-path="url(#clip0)">
<path d="M145.5 2H-4.5V152H145.5V2Z" fill="#EDEDED"/>
<path d="M52.73 88.3437C52.73 88.3437 60.59 80.9037 57.05 63.4437C55.55 56.1237 86.6 66.1737 86.6 66.1737C84.74 70.5237 83.3 76.1637 85.34 81.5337C87.02 85.9737 89.93 87.2037 89.36 89.7237C88.37 94.0137 72.68 97.7037 69.68 97.4037C66.65 97.1037 57.26 94.6437 56 92.8437C54.92 91.2237 54.02 89.7837 52.73 88.3437Z" fill="#BCBCBC"/>
<path d="M15.5 152.874C22.13 160.614 23.78 155.304 32.66 160.434C33.65 161.004 34.61 161.514 35.6 162.054C38.15 163.404 40.79 162.774 43.49 163.884C51.98 167.394 61.13 163.974 70.73 164.724C70.85 164.724 70.97 164.754 71.09 164.754V135.174C71 135.384 70.94 135.564 70.91 135.774C70.88 135.804 70.88 135.864 70.88 135.894C70.85 136.014 70.79 136.164 70.76 136.284C70.73 136.374 70.7 136.464 70.67 136.554C69.41 132.534 68.18 128.484 66.92 124.434C64.4 116.214 61.85 107.964 59.33 99.7137L59.3 99.6237C58.73 97.7037 58.1 95.7837 57.53 93.8637C57.5 93.8037 57.5 93.7437 57.47 93.6837C57.47 93.6537 57.47 93.6537 57.47 93.6537C57.41 93.5037 57.38 93.3537 57.35 93.2037C56.45 90.2937 55.55 87.3837 54.68 84.5037C54.53 84.0837 54.41 83.6337 54.26 83.1837C54.38 83.5437 54.32 83.9037 54.14 84.2637C54.05 84.4437 53.9 84.6537 53.72 84.8337C53 85.6737 51.59 86.5137 49.85 87.2937C49.16 87.5937 48.47 87.8637 47.72 88.1637C46.85 88.4937 45.92 88.7937 44.99 89.0937C43.82 89.4837 42.65 89.8137 41.51 90.1437C37.85 91.1637 34.67 91.8837 34.16 92.0337C24.86 94.8837 19.28 97.3737 16.73 106.854C15.62 111.024 15.5 141.474 15.5 152.874Z" fill="#D7D7D7"/>
<path d="M50.4501 88.3435C50.4501 88.3435 59.6901 93.9235 71.6901 94.6435C84.8001 95.4535 93.3801 88.9735 93.3801 88.9735C93.3801 88.9735 95.4501 95.0635 84.9501 107.844L71.2701 140.034C71.1501 140.274 71.0301 140.484 70.8501 140.664C70.6701 140.484 70.5201 140.274 70.4301 140.034L56.7801 107.844C49.2201 94.2235 50.4501 88.3435 50.4501 88.3435Z" fill="#9A9A9A"/>
<path d="M126.02 152.874C119.39 160.614 117.74 155.304 108.86 160.434C107.87 161.004 106.91 161.514 105.92 162.054C103.37 163.404 100.73 162.774 98.0297 163.884C89.5397 167.394 80.3897 163.974 70.7897 164.724C70.6697 164.724 70.5497 164.754 70.4297 164.754V135.174C70.5197 135.384 70.5797 135.564 70.6097 135.774C70.6397 135.804 70.6397 135.864 70.6397 135.894C70.6697 136.014 70.7297 136.164 70.7597 136.284C70.7897 136.374 70.8197 136.464 70.8497 136.554C72.1097 132.534 73.3397 128.484 74.5997 124.434C77.1197 116.214 79.6697 107.964 82.1897 99.7137L82.2197 99.6237C82.7897 97.7037 83.4197 95.7837 83.9897 93.8637C84.0197 93.8037 84.0197 93.7437 84.0497 93.6837C84.0497 93.6537 84.0497 93.6537 84.0497 93.6537C84.1097 93.5037 84.1397 93.3537 84.1697 93.2037C85.0697 90.2937 85.9697 87.3837 86.8397 84.5037C86.9897 84.0837 87.1097 83.6337 87.2597 83.1837C87.1397 83.5437 87.1997 83.9037 87.3797 84.2637C87.4697 84.4437 87.6197 84.6537 87.7997 84.8337C88.5197 85.6737 89.9297 86.5137 91.6697 87.2937C92.3597 87.5937 93.0497 87.8637 93.7997 88.1637C94.6697 88.4937 95.5997 88.7937 96.5297 89.0937C97.6997 89.4837 98.8697 89.8137 100.01 90.1437C103.67 91.1637 106.85 91.8837 107.36 92.0337C116.66 94.8837 122.24 97.3737 124.79 106.854C125.9 111.024 126.02 141.474 126.02 152.874Z" fill="#D7D7D7"/>
<path d="M70.8798 135.174V136.554L70.8498 140.664L70.8198 152.964L70.7898 164.754C70.6698 164.754 70.5498 164.784 70.4298 164.784C68.1498 164.934 65.8698 165.024 63.5298 165.024H62.6898C62.4498 165.024 62.1798 165.024 61.9398 164.994C61.0998 164.994 60.2898 164.964 59.4798 164.934C57.6798 164.844 55.9098 164.724 54.1698 164.574C53.3298 164.484 52.5198 164.394 51.6798 164.274C51.4098 164.244 51.1098 164.184 50.8398 164.154C49.8498 164.034 48.8598 163.854 47.8698 163.674C44.8098 163.134 41.7798 162.444 38.8098 161.604C38.4198 161.514 38.0898 161.424 37.7298 161.274C37.8498 151.914 37.3398 141.894 35.2698 138.534C35.0598 138.804 34.8498 139.074 34.6098 139.374C34.7898 124.794 36.4998 110.034 34.8198 95.8436C34.6398 94.4636 34.5198 93.3836 34.2798 92.0036C37.6698 91.3136 40.5498 90.2936 44.7498 89.1536C44.8698 89.0936 45.1098 89.2736 45.4398 89.0936H45.4698C46.4598 88.5236 48.2898 87.4136 49.9698 86.3036C51.9198 85.0136 53.7198 83.7536 53.9898 83.3036C54.0198 83.2736 54.0198 83.2136 54.0198 83.2136C54.1098 83.5436 54.1998 83.8436 54.2898 84.1436C54.4098 84.5636 54.5598 84.9836 54.6798 85.4036L54.7098 85.5236V85.5536C55.2798 87.4436 55.8498 89.3036 56.4498 91.1936C56.7198 92.0636 56.9898 92.9336 57.2598 93.8336C60.4098 104.064 63.5298 114.264 66.6798 124.464C67.9098 128.514 69.1698 132.564 70.3998 136.614C70.4298 136.524 70.4898 136.434 70.5198 136.344C70.5498 136.254 70.5798 136.164 70.6098 136.074C70.6398 136.044 70.6398 135.984 70.6398 135.954C70.6698 135.804 70.7298 135.684 70.7598 135.534V135.504C70.8198 135.354 70.8498 135.264 70.8798 135.174Z" fill="#CFCFCF"/>
<path d="M70.8801 135.773L77.9001 112.613L87.8001 83.1234L92.4501 86.8734C94.8801 88.1634 99.8001 98.8434 100.64 101.453L88.6701 106.133L95.4201 113.543C95.9301 114.443 73.0101 145.823 70.8801 153.053C70.8201 152.873 70.7301 152.693 70.6401 152.483V134.963L70.8801 135.773Z" fill="#DFDFDF"/>
<path d="M53.5101 107.274L42.1401 101.424C42.9801 98.8135 46.8801 88.1335 49.3101 86.8435L53.9601 83.0935L63.8601 112.584L70.6401 134.934V152.454C66.7101 143.604 45.8601 114.414 46.3401 113.514L53.5101 107.274Z" fill="#EEEEEE"/>
<path d="M96.3798 41.0937C96.4098 41.0037 96.3798 40.8537 96.3498 40.7037C96.3198 41.0637 96.2898 41.3337 96.3798 41.0937Z" fill="#5B5B5B"/>
<path d="M96.2301 140.874L93.9201 140.004C94.0401 139.674 106.58 106.494 97.2501 90.2036C94.5801 85.5236 90.2601 82.6736 84.4401 81.7136L84.3501 81.6836C84.3201 81.6836 84.1401 81.6236 83.7801 81.5636C83.6901 80.7236 83.6301 79.8536 83.6001 78.9836C84.2901 79.1336 84.7401 79.2236 84.8901 79.2836C91.4601 80.3936 96.3201 83.6336 99.3801 88.9736C109.31 106.284 96.7701 139.494 96.2301 140.874Z" fill="#878787"/>
<path d="M45.4101 132.474L42.2601 125.574C41.9901 124.884 38.9301 116.484 43.0101 101.874C43.7001 99.3836 44.6001 96.7436 45.7701 93.9236C47.6301 89.3336 50.7201 86.2136 54.3201 84.1436C54.3201 84.1436 54.3201 84.1136 54.3501 84.1136C54.6501 83.9336 54.9801 83.7536 55.2801 83.5736C56.2101 82.2536 56.4801 81.2336 56.6601 80.3336C52.1601 81.2936 48.2001 84.6536 45.4701 89.0336H45.4401C44.6601 90.2636 44.0001 91.5836 43.4601 92.9336C34.8501 114.084 39.7401 125.994 40.0101 126.564C40.9701 128.814 41.2401 131.424 41.5401 133.914C41.5101 134.394 41.5101 134.994 41.5101 135.774C41.5101 141.714 42.1101 155.724 47.8701 163.614C48.8601 163.794 49.8501 163.944 50.8401 164.094C51.1101 164.124 51.3801 164.184 51.6801 164.214C43.5801 156.924 44.0901 141.534 44.1501 138.504L44.3901 134.844C45.1401 134.934 53.0301 141.414 54.9501 143.544C58.7901 147.774 62.6601 153.714 60.8601 159.684C60.3501 161.394 59.9901 163.194 59.4801 164.904C60.2901 164.934 61.1001 164.964 61.9401 164.964C62.4501 163.314 62.8401 161.724 63.2301 160.404C67.2201 147.264 47.9601 134.184 45.4101 132.474Z" fill="#878787"/>
<path d="M90.4103 43.6435C89.6903 40.7335 88.1903 38.0935 86.2103 35.8435C83.3303 32.5735 79.6103 30.2335 75.3803 29.0935C73.7003 28.6435 71.9303 28.4035 70.3103 27.7135C70.2203 27.6835 70.1003 27.6235 70.0103 27.5635V78.9835C70.0703 78.9835 70.1303 78.9835 70.1903 78.9835C71.3903 79.0735 72.6203 78.9535 74.0003 78.4735C77.3303 77.3335 79.8803 75.0235 82.4603 72.8935C82.7003 72.6835 82.9703 72.4735 83.2103 72.2635C86.9303 69.2635 88.4303 64.8835 89.8403 60.7435C91.5803 55.6435 91.7003 48.8335 90.4103 43.6435Z" fill="#CFCFCF"/>
<path d="M67.5801 25.0735C66.9501 24.4435 66.2001 23.7535 65.3601 22.7935C64.8801 22.2535 64.4001 21.7135 63.7701 21.3535C62.5401 20.6635 61.0101 20.7235 59.6901 21.1435C56.3301 22.1635 53.7802 25.0735 52.5202 28.3735C51.4102 31.3435 51.5301 34.2235 51.4401 37.3135C51.3801 39.9535 50.3602 42.0235 49.8202 44.6635C48.8302 49.5835 48.9802 55.9435 50.6302 60.7435C52.0401 64.8535 53.5402 69.2635 57.2602 72.2635C57.6802 72.5935 58.0701 72.9235 58.4901 73.2835C60.8901 75.2935 63.3501 77.3935 66.4701 78.4735C67.7601 78.9235 68.9301 79.0435 70.1001 78.9835C70.1601 78.9835 70.1001 71.2435 70.1001 70.7935C70.1001 61.1335 70.1001 51.4435 70.1001 41.7835C70.1001 38.0335 70.1001 34.2835 70.1001 30.5035C70.0401 27.5935 69.1701 26.6035 67.5801 25.0735Z" fill="#CFCFCF"/>
<path d="M50.4504 60.0237C49.5804 59.8437 48.7404 59.5437 48.1104 58.9737C47.2404 58.1937 46.9104 56.9637 46.7304 55.7937C46.5504 54.6237 46.4904 53.4237 46.0404 52.3437C45.7404 51.6237 45.2604 50.9937 44.9904 50.2737C44.7204 49.5537 44.6304 48.6537 45.1104 48.0237C45.5904 47.3937 46.4604 47.2137 47.2404 47.2437C48.1404 47.2437 48.8604 47.5437 49.4004 48.0537C49.3704 48.5937 49.3404 49.1337 49.3404 49.7037C49.3104 51.9237 49.4904 54.1437 49.8204 56.3337C49.9704 57.5637 50.2104 58.7937 50.4504 60.0237Z" fill="#CFCFCF"/>
<path d="M95.0601 50.2739C94.7901 50.9939 94.3101 51.6239 94.0101 52.3439C93.5601 53.4239 93.5001 54.6239 93.3201 55.7939C93.1401 56.9639 92.8101 58.1639 91.9401 58.9739C91.4301 59.4539 90.8001 59.7239 90.1401 59.9039C90.5001 58.7039 90.7701 57.4139 90.9501 56.0639C91.2501 53.9039 91.3401 51.6239 91.2501 49.4039C91.2201 48.8339 91.1601 48.2639 91.1301 47.6939C91.6101 47.4239 92.1501 47.2439 92.8401 47.2439C93.6201 47.2439 94.4901 47.3939 94.9701 48.0239C95.4201 48.6539 95.3301 49.5539 95.0601 50.2739Z" fill="#CFCFCF"/>
<path d="M98.3902 38.4837C98.0002 34.4637 97.0702 30.4437 95.9902 26.8437C92.9302 16.6737 80.4502 10.2237 69.8602 10.4037C68.3002 10.4337 66.7702 10.6137 65.3302 10.9437C63.3502 11.3937 61.4302 12.0837 59.5102 12.7737C56.8402 13.7637 54.1702 14.7837 51.8902 16.4637C46.2802 20.6637 43.3702 27.1137 42.4102 33.8937C42.0802 36.2637 42.1102 38.6637 42.1702 41.0637C42.2302 44.8437 42.7102 47.9637 43.9402 51.5637C44.5402 53.2737 45.1102 55.0137 46.0402 56.5737C46.4902 57.3237 47.0302 58.0437 47.5702 58.7637C47.6302 58.7037 47.7202 58.6737 47.7802 58.6437C47.1502 57.8637 46.8502 56.8137 46.7002 55.7937C46.5202 54.6237 46.4602 53.4237 46.0102 52.3437C45.7102 51.6237 45.2302 50.9937 44.9602 50.2737C44.6902 49.5537 44.6002 48.6537 45.0802 48.0237C45.5602 47.3937 46.4302 47.2137 47.2102 47.2437C48.6802 47.2737 49.6102 48.1737 50.0302 49.5537C49.8202 48.8637 50.1802 47.7837 50.1802 47.0337C50.1802 46.0437 50.2702 45.0537 50.4502 44.0937C50.9902 41.0937 53.0302 37.9137 54.4702 35.2437C56.4202 31.5837 57.9502 27.7737 58.9102 23.7537C61.6702 27.3537 65.5402 30.0837 69.8602 31.5237C70.7902 31.8237 71.7202 32.0937 72.6802 32.2737C74.5102 32.6337 76.4002 32.7837 78.2302 33.2037C82.7902 34.2537 85.6402 36.4137 87.9502 40.2837C87.9502 39.7437 87.3202 37.1637 87.9502 38.1537C88.9402 40.7937 90.5602 45.6837 90.1702 48.5037C90.5302 47.9937 90.8002 47.4537 91.0102 46.8837C91.0402 47.1837 91.0702 47.4837 91.1002 47.7837V47.7537C91.5802 47.4837 92.1202 47.3037 92.8102 47.3037C93.5902 47.3037 94.4602 47.4537 94.9402 48.0837C95.4202 48.7137 95.3602 49.5837 95.0602 50.3337C94.7902 51.0537 94.3102 51.6837 94.0102 52.4037C93.5602 53.4837 93.5002 54.6837 93.3202 55.8537C93.1402 57.0237 92.8102 58.2237 91.9402 59.0337C91.5502 59.3937 90.5002 59.6037 90.1402 59.9637C89.5102 60.5937 89.6902 61.4337 89.6002 62.4237C94.4902 58.5537 97.5202 52.5837 98.3602 46.4037C98.6602 43.8237 98.6602 41.1537 98.3902 38.4837Z" fill="#878787"/>
<path d="M92.1804 65.0939C92.6604 66.5039 93.1404 67.9439 93.3504 69.4139C93.9204 73.5239 92.2404 77.6339 90.0804 81.1739C88.2204 84.2339 85.9104 87.2639 85.5504 90.8339C85.1604 94.8839 87.3504 98.7539 87.4104 102.804C87.4704 107.664 84.0504 112.404 79.4004 113.844C80.6904 112.164 82.0104 110.484 82.8804 108.534C83.7504 106.614 84.1104 104.364 83.5104 102.354C83.0304 100.854 82.0404 99.5639 81.5004 98.0639C80.9604 96.6539 80.8704 95.0939 80.8704 93.5639C80.8404 87.3539 80.9904 80.3339 83.7504 74.7839C85.7604 70.7039 88.4304 67.4039 89.3604 63.0839C89.5104 62.3639 89.9304 61.6439 90.1404 60.9539C90.3204 60.2639 90.5604 59.8739 91.1904 59.5439C91.0404 61.4639 91.5804 63.3239 92.1804 65.0939Z" fill="#878787"/>
<path d="M85.7302 106.434C85.6102 107.034 85.4302 107.634 85.2202 108.204C84.8002 109.314 83.4202 111.774 82.1602 112.044C84.6802 111.504 86.8402 109.704 88.0702 107.454C89.3002 105.174 89.6302 102.504 89.2102 99.9539C88.7902 97.1939 87.5602 94.4039 88.4002 91.7639C89.1202 89.5438 91.1002 88.0439 92.6302 86.3039C95.1802 83.3339 96.5002 79.4039 96.5302 75.4739C96.5602 71.5439 95.3902 67.6739 93.4402 64.2839C92.6002 62.8139 91.5502 61.2839 91.6102 59.5739C90.5602 59.8739 89.9002 60.9239 89.7202 62.0039C89.5402 63.0839 89.7502 64.1639 89.9602 65.2439C90.9202 70.7039 91.0702 76.6139 88.4002 81.4739C87.6802 82.7939 86.7502 83.9939 86.0302 85.2839C84.4402 88.1039 83.7802 91.4339 84.1702 94.6739C84.4702 97.4039 85.5202 100.014 85.9102 102.744C86.0602 103.914 86.0002 105.204 85.7302 106.434Z" fill="#878787"/>
</g>
</g>
</g>
<defs>
<filter id="filter0_dd" x="0.5" y="0" width="140" height="140" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<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"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="3"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<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"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="2"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
<feBlend mode="normal" in2="effect1_dropShadow" result="effect2_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
</filter>
<clipPath id="clip0">
<rect width="150" height="150" fill="white" transform="translate(-4.5)"/>
</clipPath>
</defs>
</svg>

For reference here's the picture. The filter is the drop-shadow.