How to make svg sprite a regular picture? - html

I have such a picture for the background. It should be made normal and put in background
<svg class="iphone-background__img" viewBox="0 0 991 828" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_f_479_2171)">
<path d="M726.689 447.055C636.6 301.175 399.748 283.135 292.584 292.35C204.911 229.864 267.12 198.986 369.452 84.6792C471.785 -29.6278 716.462 36.8959 857.979 37.8365C999.495 38.777 1120.33 339.695 1101.17 471.585C1082.02 603.476 839.301 629.405 726.689 447.055Z" fill="#FA00FF" fill-opacity="0.2" />
</g>
<defs>
<filter id="filter0_f_479_2171" x="0.806396" y="-232.258" width="1352.37" height="1059.42" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="125" result="effect1_foregroundBlur_479_2171" />
</filter>
</defs>
</svg>

Related

hide svg affect its twin

I have two similar SVGs (twins) in my HTML, when I hide first one some parts of the second also disappear why is that? I use id and CSS display property to hide the SVG, I've tried visibility property and also the same result or worse (hide more parts)
SVG has many details inside of it
normal SVGs:
using display property:
display: none;
using visibility property:
visibility: hidden;
SVG file:
#C{
display:none;
<svg id="C" width="427" height="128" viewBox="0 0 427 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25 4H412L427 128H10L25 4Z" fill="#D6F4FA"/>
<path d="M10.5682 120.5L25.44 4.50009H411.56L426.432 120.5H10.5682Z" fill="#E8FBFF" fill-opacity="0.5" stroke="#E8FBFF"/>
<g opacity="0.6" filter="url(#filter0_f_208_1612)">
<mask id="mask0_208_1612" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="4" width="417" height="117">
<path d="M0.568195 120.5L15.44 4.50009H401.56L416.432 120.5H0.568195Z" fill="#F9FEFF" stroke="#EDFCFF"/>
</mask>
<g mask="url(#mask0_208_1612)">
<path d="M212.503 -71.2604L276.966 -30.9579L140.239 163.741L75.7754 123.439L212.503 -71.2604Z" fill="white"/>
</g>
</g>
<g opacity="0.6" filter="url(#filter1_f_208_1612)">
<mask id="mask1_208_1612" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="137" y="4" width="280" height="117">
<path d="M137.545 120.5L147.531 4.50009H406.469L416.455 120.5H137.545Z" fill="#F9FEFF" stroke="#EDFCFF"/>
</mask>
<g mask="url(#mask1_208_1612)">
<path d="M349.503 -71.2604L374.202 -55.8186L237.474 138.881L212.775 123.439L349.503 -71.2604Z" fill="white"/>
</g>
</g>
<path d="M113 58.8572C113 74.2422 95.7466 86.7143 78.7589 86.7143C61.7712 86.7143 48 80.407 48 58.8572C48 43.4721 61.7712 31 78.7589 31C101.393 31 113 43.4721 113 58.8572Z" fill="#D5FAFF"/>
<mask id="mask2_208_1612" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="48" y="31" width="65" height="56">
<path d="M113 58.8572C113 74.2422 95.7466 86.7143 78.7589 86.7143C61.7712 86.7143 48 80.407 48 58.8572C48 43.4721 61.7712 31 78.7589 31C101.393 31 113 43.4721 113 58.8572Z" fill="#D5FAFF"/>
</mask>
<g mask="url(#mask2_208_1612)">
<g filter="url(#filter2_f_208_1612)">
<path d="M108.011 59.3828C115.284 75.3691 94.7341 86.7143 78.3565 86.7143C61.9789 86.7143 44.2261 75.3691 48.7023 59.3828C53.1784 43.3964 61.9789 32.0512 78.3565 32.0512C94.7341 32.0512 104.094 44.4278 108.011 59.3828Z" fill="#A25A5A"/>
</g>
</g>
<g filter="url(#filter3_f_208_1612)">
<path d="M94.4285 58.8572C94.4285 66.6948 87.413 73.0485 78.7589 73.0485C70.1048 73.0485 59.0267 70.9461 63.0892 58.8572C63.0892 51.0195 70.1048 39.4097 78.7589 39.4097C90.366 39.4097 94.4285 51.0195 94.4285 58.8572Z" fill="#B30101"/>
</g>
<g filter="url(#filter4_f_208_1612)">
<path d="M96.75 48.9911C96.75 55.081 88.955 43.7679 79.3393 43.7679C69.7236 43.7679 61.9286 55.081 61.9286 48.9911C61.9286 42.9012 69.7236 37.9643 79.3393 37.9643C88.955 37.9643 96.75 42.9012 96.75 48.9911Z" fill="white"/>
</g>
<path d="M248.07 48.4563C256.54 67.1269 225.094 74.8907 210.434 85.0578C191.363 85.0578 185.898 74.2129 175.904 53.137C167.6 35.628 197.914 32.1889 216.984 32.1889C236.055 32.1889 237.934 36.9336 248.07 48.4563Z" fill="#FFF7CF"/>
<mask id="mask3_208_1612" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="174" y="32" width="76" height="54">
<path d="M248.07 48.4563C256.54 67.1269 225.094 74.8907 210.434 85.0578C191.363 85.0578 185.898 74.2129 175.904 53.137C167.6 35.628 197.914 32.1889 216.984 32.1889C236.055 32.1889 237.934 36.9336 248.07 48.4563Z" fill="#FFF7CF"/>
</mask>
<g mask="url(#mask3_208_1612)">
<g filter="url(#filter5_f_208_1612)">
<path d="M243.33 49.7524C250.742 66.0428 223.223 72.8168 210.394 81.6877C193.705 81.6877 188.922 72.2254 180.175 53.8364C172.909 38.5595 199.437 35.5589 216.126 35.5589C232.815 35.5589 234.459 39.6987 243.33 49.7524Z" fill="#F9983E"/>
</g>
</g>
<g filter="url(#filter6_f_208_1612)">
<path d="M221.979 57.4359C230.16 66.1739 219.377 73.9922 211.751 73.9922C204.126 73.9922 183.626 60.1172 187.206 50.5374C187.206 44.3265 200.546 42.025 208.172 42.025C218.399 42.025 213.797 52.377 221.979 57.4359Z" fill="#F83207"/>
</g>
<g filter="url(#filter7_f_208_1612)">
<path d="M232.858 56.4883C230.473 62.4822 225.148 54.3968 215.684 50.6315C206.22 46.8662 196.201 48.8469 198.585 42.8529C200.97 36.859 210.575 35.0524 220.039 38.8177C229.503 42.583 235.242 50.4944 232.858 56.4883Z" fill="white"/>
</g>
<path d="M364.378 62.2292C357.768 80.9583 349.053 90 330.149 90C311.245 90 310.774 77.9043 310.774 59C310.774 40.0958 311.245 28 330.149 28C349.053 28 372.128 40.2708 364.378 62.2292Z" fill="#E7E7E7"/>
<mask id="mask4_208_1612" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="310" y="28" width="56" height="62">
<path d="M364.378 62.2292C357.768 80.9583 349.053 90 330.149 90C311.245 90 310.774 77.9043 310.774 59C310.774 40.0958 311.245 28 330.149 28C349.053 28 372.128 40.2708 364.378 62.2292Z" fill="#F0F0F0"/>
</mask>
<g mask="url(#mask4_208_1612)">
<g filter="url(#filter8_f_208_1612)">
<path d="M359.858 60.9563C352.893 78.375 351.127 84.8334 332.087 84.8334C313.046 84.8334 316.447 80.6482 316.447 60.9563C316.447 41.2644 313.046 31.8938 332.087 31.8938C346.295 31.8938 367.729 41.2677 359.858 60.9563Z" fill="#F93E3E"/>
</g>
</g>
<g filter="url(#filter9_f_208_1612)">
<path d="M356.628 60.4784C356.628 69.3955 350.816 67.5307 340.483 76.6242C333.378 82.876 317.878 63.0099 324.337 60.4784C340.483 62.3641 331.565 44.3325 340.483 44.3325C349.4 44.3325 356.628 51.5613 356.628 60.4784Z" fill="#B50404"/>
</g>
<g filter="url(#filter10_f_208_1612)">
<path d="M350.816 46.4819C348.311 52.7788 349.779 47.9613 339.837 44.0056C329.894 40.0499 328.936 42.5525 331.441 36.2556C337.755 34.0708 337.755 36.2556 342.331 34.0708C352.273 38.0265 353.321 40.185 350.816 46.4819Z" fill="white"/>
</g>
<defs>
<filter id="filter0_f_208_1612" x="71.7754" y="9.15527e-05" width="209.191" height="125" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_208_1612"/>
</filter>
<filter id="filter1_f_208_1612" x="208.775" y="9.15527e-05" width="169.426" height="125" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_208_1612"/>
</filter>
<filter id="filter2_f_208_1612" x="38" y="22.0512" width="81.5178" height="74.6631" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_208_1612"/>
</filter>
<filter id="filter3_f_208_1612" x="52.2234" y="29.4097" width="52.2051" height="53.6388" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_208_1612"/>
</filter>
<filter id="filter4_f_208_1612" x="57.9286" y="33.9643" width="42.8214" height="20.8271" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_208_1612"/>
</filter>
<filter id="filter5_f_208_1612" x="168.943" y="25.5589" width="85.6344" height="66.1288" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_208_1612"/>
</filter>
<filter id="filter6_f_208_1612" x="176.79" y="32.025" width="58.1147" height="51.9672" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_208_1612"/>
</filter>
<filter id="filter7_f_208_1612" x="194.229" y="32.8523" width="43.1686" height="29.7799" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_208_1612"/>
</filter>
<filter id="filter8_f_208_1612" x="312.211" y="27.8938" width="53.334" height="60.9395" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_208_1612"/>
</filter>
<filter id="filter9_f_208_1612" x="312.797" y="34.3325" width="53.8315" height="53.5025" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_208_1612"/>
</filter>
<filter id="filter10_f_208_1612" x="326.27" y="30.0708" width="29.6991" height="23.4518" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_208_1612"/>
</filter>
</defs>
</svg>
<svg width="427" height="128" viewBox="0 0 427 128" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M25 4H412L427 128H10L25 4Z" fill="#D6F4FA"/>
<path d="M10.5682 120.5L25.44 4.50009H411.56L426.432 120.5H10.5682Z" fill="#E8FBFF" fill-opacity="0.5" stroke="#E8FBFF"/>
<g opacity="0.6" filter="url(#filter0_f_208_1612)">
<mask id="mask0_208_1612" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="4" width="417" height="117">
<path d="M0.568195 120.5L15.44 4.50009H401.56L416.432 120.5H0.568195Z" fill="#F9FEFF" stroke="#EDFCFF"/>
</mask>
<g mask="url(#mask0_208_1612)">
<path d="M212.503 -71.2604L276.966 -30.9579L140.239 163.741L75.7754 123.439L212.503 -71.2604Z" fill="white"/>
</g>
</g>
<g opacity="0.6" filter="url(#filter1_f_208_1612)">
<mask id="mask1_208_1612" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="137" y="4" width="280" height="117">
<path d="M137.545 120.5L147.531 4.50009H406.469L416.455 120.5H137.545Z" fill="#F9FEFF" stroke="#EDFCFF"/>
</mask>
<g mask="url(#mask1_208_1612)">
<path d="M349.503 -71.2604L374.202 -55.8186L237.474 138.881L212.775 123.439L349.503 -71.2604Z" fill="white"/>
</g>
</g>
<path d="M113 58.8572C113 74.2422 95.7466 86.7143 78.7589 86.7143C61.7712 86.7143 48 80.407 48 58.8572C48 43.4721 61.7712 31 78.7589 31C101.393 31 113 43.4721 113 58.8572Z" fill="#D5FAFF"/>
<mask id="mask2_208_1612" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="48" y="31" width="65" height="56">
<path d="M113 58.8572C113 74.2422 95.7466 86.7143 78.7589 86.7143C61.7712 86.7143 48 80.407 48 58.8572C48 43.4721 61.7712 31 78.7589 31C101.393 31 113 43.4721 113 58.8572Z" fill="#D5FAFF"/>
</mask>
<g mask="url(#mask2_208_1612)">
<g filter="url(#filter2_f_208_1612)">
<path d="M108.011 59.3828C115.284 75.3691 94.7341 86.7143 78.3565 86.7143C61.9789 86.7143 44.2261 75.3691 48.7023 59.3828C53.1784 43.3964 61.9789 32.0512 78.3565 32.0512C94.7341 32.0512 104.094 44.4278 108.011 59.3828Z" fill="#A25A5A"/>
</g>
</g>
<g filter="url(#filter3_f_208_1612)">
<path d="M94.4285 58.8572C94.4285 66.6948 87.413 73.0485 78.7589 73.0485C70.1048 73.0485 59.0267 70.9461 63.0892 58.8572C63.0892 51.0195 70.1048 39.4097 78.7589 39.4097C90.366 39.4097 94.4285 51.0195 94.4285 58.8572Z" fill="#B30101"/>
</g>
<g filter="url(#filter4_f_208_1612)">
<path d="M96.75 48.9911C96.75 55.081 88.955 43.7679 79.3393 43.7679C69.7236 43.7679 61.9286 55.081 61.9286 48.9911C61.9286 42.9012 69.7236 37.9643 79.3393 37.9643C88.955 37.9643 96.75 42.9012 96.75 48.9911Z" fill="white"/>
</g>
<path d="M248.07 48.4563C256.54 67.1269 225.094 74.8907 210.434 85.0578C191.363 85.0578 185.898 74.2129 175.904 53.137C167.6 35.628 197.914 32.1889 216.984 32.1889C236.055 32.1889 237.934 36.9336 248.07 48.4563Z" fill="#FFF7CF"/>
<mask id="mask3_208_1612" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="174" y="32" width="76" height="54">
<path d="M248.07 48.4563C256.54 67.1269 225.094 74.8907 210.434 85.0578C191.363 85.0578 185.898 74.2129 175.904 53.137C167.6 35.628 197.914 32.1889 216.984 32.1889C236.055 32.1889 237.934 36.9336 248.07 48.4563Z" fill="#FFF7CF"/>
</mask>
<g mask="url(#mask3_208_1612)">
<g filter="url(#filter5_f_208_1612)">
<path d="M243.33 49.7524C250.742 66.0428 223.223 72.8168 210.394 81.6877C193.705 81.6877 188.922 72.2254 180.175 53.8364C172.909 38.5595 199.437 35.5589 216.126 35.5589C232.815 35.5589 234.459 39.6987 243.33 49.7524Z" fill="#F9983E"/>
</g>
</g>
<g filter="url(#filter6_f_208_1612)">
<path d="M221.979 57.4359C230.16 66.1739 219.377 73.9922 211.751 73.9922C204.126 73.9922 183.626 60.1172 187.206 50.5374C187.206 44.3265 200.546 42.025 208.172 42.025C218.399 42.025 213.797 52.377 221.979 57.4359Z" fill="#F83207"/>
</g>
<g filter="url(#filter7_f_208_1612)">
<path d="M232.858 56.4883C230.473 62.4822 225.148 54.3968 215.684 50.6315C206.22 46.8662 196.201 48.8469 198.585 42.8529C200.97 36.859 210.575 35.0524 220.039 38.8177C229.503 42.583 235.242 50.4944 232.858 56.4883Z" fill="white"/>
</g>
<path d="M364.378 62.2292C357.768 80.9583 349.053 90 330.149 90C311.245 90 310.774 77.9043 310.774 59C310.774 40.0958 311.245 28 330.149 28C349.053 28 372.128 40.2708 364.378 62.2292Z" fill="#E7E7E7"/>
<mask id="mask4_208_1612" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="310" y="28" width="56" height="62">
<path d="M364.378 62.2292C357.768 80.9583 349.053 90 330.149 90C311.245 90 310.774 77.9043 310.774 59C310.774 40.0958 311.245 28 330.149 28C349.053 28 372.128 40.2708 364.378 62.2292Z" fill="#F0F0F0"/>
</mask>
<g mask="url(#mask4_208_1612)">
<g filter="url(#filter8_f_208_1612)">
<path d="M359.858 60.9563C352.893 78.375 351.127 84.8334 332.087 84.8334C313.046 84.8334 316.447 80.6482 316.447 60.9563C316.447 41.2644 313.046 31.8938 332.087 31.8938C346.295 31.8938 367.729 41.2677 359.858 60.9563Z" fill="#F93E3E"/>
</g>
</g>
<g filter="url(#filter9_f_208_1612)">
<path d="M356.628 60.4784C356.628 69.3955 350.816 67.5307 340.483 76.6242C333.378 82.876 317.878 63.0099 324.337 60.4784C340.483 62.3641 331.565 44.3325 340.483 44.3325C349.4 44.3325 356.628 51.5613 356.628 60.4784Z" fill="#B50404"/>
</g>
<g filter="url(#filter10_f_208_1612)">
<path d="M350.816 46.4819C348.311 52.7788 349.779 47.9613 339.837 44.0056C329.894 40.0499 328.936 42.5525 331.441 36.2556C337.755 34.0708 337.755 36.2556 342.331 34.0708C352.273 38.0265 353.321 40.185 350.816 46.4819Z" fill="white"/>
</g>
<defs>
<filter id="filter0_f_208_1612" x="71.7754" y="9.15527e-05" width="209.191" height="125" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_208_1612"/>
</filter>
<filter id="filter1_f_208_1612" x="208.775" y="9.15527e-05" width="169.426" height="125" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_208_1612"/>
</filter>
<filter id="filter2_f_208_1612" x="38" y="22.0512" width="81.5178" height="74.6631" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_208_1612"/>
</filter>
<filter id="filter3_f_208_1612" x="52.2234" y="29.4097" width="52.2051" height="53.6388" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_208_1612"/>
</filter>
<filter id="filter4_f_208_1612" x="57.9286" y="33.9643" width="42.8214" height="20.8271" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_208_1612"/>
</filter>
<filter id="filter5_f_208_1612" x="168.943" y="25.5589" width="85.6344" height="66.1288" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_208_1612"/>
</filter>
<filter id="filter6_f_208_1612" x="176.79" y="32.025" width="58.1147" height="51.9672" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_208_1612"/>
</filter>
<filter id="filter7_f_208_1612" x="194.229" y="32.8523" width="43.1686" height="29.7799" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_208_1612"/>
</filter>
<filter id="filter8_f_208_1612" x="312.211" y="27.8938" width="53.334" height="60.9395" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_208_1612"/>
</filter>
<filter id="filter9_f_208_1612" x="312.797" y="34.3325" width="53.8315" height="53.5025" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="5" result="effect1_foregroundBlur_208_1612"/>
</filter>
<filter id="filter10_f_208_1612" x="326.27" y="30.0708" width="29.6991" height="23.4518" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_208_1612"/>
</filter>
</defs>
</svg>

SVG background-color is not showing in firefoex and safari?

I'm using an svg for my navbar but somehow svg fill color is not showing in firefox or some of the mobile phone?
Here is my svg code:
<svg width="603" height="158" viewBox="0 0 603 158" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_b)">
<path d="M0 0.525391L603 0.525423V0.525423C589.552 0.525403 577.222 8.01149 571.018 19.9432L516.041 125.679C505.715 145.539 485.192 158 462.807 158H0V0.525391Z" fill="#ffffff"/>
<path d="M0.25 0.775391L596.99 0.775423C585.867 2.64133 576.105 9.61836 570.796 19.8278L515.82 125.564C505.536 145.341 485.098 157.75 462.807 157.75H0.25V0.775391Z" stroke="white" stroke-width="0.5"/>
</g>
<defs>
<filter id="filter0_b" x="-10" y="-9.47461" width="623" height="177.475" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImage" stdDeviation="5"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/>
</filter>
</defs>
</svg>
Here is what I want :
I want my svg background color black something like this
But when I open this in Iphone or firefox browser it is showing my background color white?
Here is the image how it is showing in Iphone or firefox
Someone help me out with this issue
Thank You

Hope this will work ..
div{width:600px; height:600px; background: white}
<div><svg width="603" height="158" viewBox="0 0 603 158" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_b)">
<path d="M0 0.525391L603 0.525423V0.525423C589.552 0.525403 577.222 8.01149 571.018 19.9432L516.041 125.679C505.715 145.539 485.192 158 462.807 158H0V0.525391Z" fill="#000000"/>
<path d="M0.25 0.775391L596.99 0.775423C585.867 2.64133 576.105 9.61836 570.796 19.8278L515.82 125.564C505.536 145.341 485.098 157.75 462.807 157.75H0.25V0.775391Z" stroke="white" stroke-width="0.5"/>
</g>
<defs>
<filter id="filter0_b" x="-10" y="-9.47461" width="623" height="177.475" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feGaussianBlur in="BackgroundImage" stdDeviation="5"/>
<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/>
</filter>
</defs>
</svg>
</div>

Add filter only to <image/> inside SVG, but not to the entire SVG

I have small problem with styling SVG and image inside. In SVG I have two filters. First effect (#innershadow) is to whole SVG object, second I want to apply only to image inside, because wave (#turbulance) effect spoils the whole svg object.
The effect I want to achieve is sharp edges with shadows inside SVG and a blurred image inside. (SVG and #turbulance effect is animated)
Is it possible?
.svg {
filter: url("#innershadow") url("#turbulence");
}
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 2100 1500" class="svg" x="0px" y="0px">
<filter id="innershadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="10" result="blur"></feGaussianBlur>
<feOffset dy="12" dx="12"></feOffset>
<feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowDiff"></feComposite>
<feFlood flood-color="#444444" flood-opacity="0.75"></feFlood>
<feComposite in2="shadowDiff" operator="in"></feComposite>
<feComposite in2="SourceGraphic" operator="over" result="firstfilter"></feComposite>
<feGaussianBlur in="firstfilter" stdDeviation="10" result="blur2"></feGaussianBlur>
<feOffset dy="-12" dx="-12"></feOffset>
<feComposite in2="firstfilter" operator="arithmetic" k2="-1" k3="1" result="shadowDiff"></feComposite>
<feFlood flood-color="#444444" flood-opacity="0.75"></feFlood>
<feComposite in2="shadowDiff" operator="in"></feComposite>
<feComposite in2="firstfilter" operator="over"></feComposite>
</filter>
<filter id="turbulence" x="0" y="0" width="100%" height="100%">
<feTurbulence id="sea-filter" numOctaves="0.1" seed="2" baseFrequency="0.02 0.05"></feTurbulence>
<feDisplacementMap scale="20" in="SourceGraphic"></feDisplacementMap>
<animate xlink:href="#sea-filter" attributeName="baseFrequency" dur="60s" keyTimes="0;0.5;1" values="0.02 0.06;0.04 0.08;0.02 0.06" repeatCount="indefinite"/>
</filter>
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" x="0" y="0" height="100%" width="100%">
<image xlink:href="../../assets/images/backgrounds/wall-main.png" x="0" y="0" height="100%" width="100%" preserveAspectRatio="xMidYMid slice"/>
</pattern>
</defs>
<path fill="url(#img1)" filter="url(#innershadow); url(#turbulence)" >
<animate repeatCount="indefinite" attributeName="d" dur="5s"
values="M382,118c100.383-77.825,276.671,59.258,448,34,65.577-9.668,196.57-94.87,294-58,83.39,31.556,92.13,116.309,174,136,108.23,26.031,207.9-110.974,286-74,61.42,29.075,37.81,132.343,110,186,47.83,35.547,81.23,14.642,132,52,51.7,38.043,88.14,109.739,82,176-6.17,66.5-50.93,79.125-60,144-10.14,72.489,46.43,113.009,26,170-29.24,81.6-166.19,63.417-218,148-53.48,87.31,29.83,209.23-26,264-44.42,43.57-141.41-7.81-226,14-93.36,24.07-100.33,81.2-194,104-111.76,27.2-217.186-20.32-268-52-70.153-43.73-98.14-121.36-180-146-83.052-25-141.572,21.65-252,46-131.847,29.08-259.955,29.4-324-40-85.126-92.25,17.341-275.707-12-436-23.665-129.279-80.6-204.706-36-294,33.223-66.508,93.383-72.786,138-128C349.1,273.539,310,173.817,382,118Z;
M500,190c90.412-66.126,238.022,65.138,388,26,86.586-22.595,152.56-120.7,236-104,94.03,18.821,101.05,142.366,196,170,115.58,33.639,245.25-120.028,314-76,38.98,24.962,16.27,88.038,60,136,36.16,39.655,72.52,30.721,114,68,29.47,26.484,75.25,85.812,64,146-15.53,83.071-131.92,94.889-144,172-12.37,78.965,107.48,140.205,90,192-28.41,84.17-381.55,26.287-402,96-14.33,48.86,147.88,116.62,138,192-4.81,36.7-57.51,62.76-150,102-79.12,33.57-154.38,62.03-210,70-115.07,16.49-217.716-1.22-252-18-104.652-51.21-150.906-194.87-242-198-73.985-2.54-105.059,84.42-190,98-112.843,18.04-211.468-78.6-246-120-83.04-99.54-53.27-201.986-90-356-36.055-151.181-93.562-237.142-48-288,55.26-61.683,186.476,13.989,268-52C476.816,378.965,421.53,247.392,500,190Z;
M500,238C621.91,181.654,670.957,61.767,796,44c50.491-7.174,172,34.215,306,118,95.1,59.463,151.04,109.438,226,112,134.95,4.612,236.05-139.415,334-104,60.82,21.99,62.5,101.2,122,156,35.17,32.392,126.79,61.5,136,110,9.71,51.11-75.16,127.335-96,168-43.83,85.544-49.3,148.558-38,198,22.31,97.671,140.35,163.962,124,220-15.75,53.99-135.29,38.81-192,106-67.3,79.73-5.52,200.99-70,254-55.53,45.65-226.87-25.52-290-30-68.89-4.89-132.47,22.44-214-4-84.21-27.3-124.8-95.16-216-108-84.892-11.95-141.558,31.08-236,76-153.42,72.98-293.092,83.99-342,70-117.669-33.66-209.643-140.55-242-250-37.527-126.93,29.383-207.227,24-322C126.26,691.617,18.046,548.78,70,440c17.439-36.513,83.745-86.988,188-128C347.2,276.909,413.476,277.991,500,238Z;
M382,118c100.383-77.825,276.671,59.258,448,34,65.577-9.668,196.57-94.87,294-58,83.39,31.556,92.13,116.309,174,136,108.23,26.031,207.9-110.974,286-74,61.42,29.075,37.81,132.343,110,186,47.83,35.547,81.23,14.642,132,52,51.7,38.043,88.14,109.739,82,176-6.17,66.5-50.93,79.125-60,144-10.14,72.489,46.43,113.009,26,170-29.24,81.6-166.19,63.417-218,148-53.48,87.31,29.83,209.23-26,264-44.42,43.57-141.41-7.81-226,14-93.36,24.07-100.33,81.2-194,104-111.76,27.2-217.186-20.32-268-52-70.153-43.73-98.14-121.36-180-146-83.052-25-141.572,21.65-252,46-131.847,29.08-259.955,29.4-324-40-85.126-92.25,17.341-275.707-12-436-23.665-129.279-80.6-204.706-36-294,33.223-66.508,93.383-72.786,138-128C349.1,273.539,310,173.817,382,118Z "/>
</path>
</svg>

Since the expected results has sharp edges the #turbolence filter must be applied only to the fill.
To achieve this, shape and fill must be on separate layers: an easy solution is to create a <rect> filled with your image and an animated <mask> for the sharp edge.
In the CSS, then, it is possible to assign each single filter to the right element.
.svg {
filter: url("#innershadow");
}
.svg .myfill {
filter: url("#turbulence");
}
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 2100 1500" class="svg" x="0px" y="0px">
<filter id="innershadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="10" result="blur"></feGaussianBlur>
<feOffset dy="12" dx="12"></feOffset>
<feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowDiff"></feComposite>
<feFlood flood-color="#444444" flood-opacity="0.75"></feFlood>
<feComposite in2="shadowDiff" operator="in"></feComposite>
<feComposite in2="SourceGraphic" operator="over" result="firstfilter"></feComposite>
<feGaussianBlur in="firstfilter" stdDeviation="10" result="blur2"></feGaussianBlur>
<feOffset dy="-12" dx="-12"></feOffset>
<feComposite in2="firstfilter" operator="arithmetic" k2="-1" k3="1" result="shadowDiff"></feComposite>
<feFlood flood-color="#444444" flood-opacity="0.75"></feFlood>
<feComposite in2="shadowDiff" operator="in"></feComposite>
<feComposite in2="firstfilter" operator="over"></feComposite>
</filter>
<filter id="turbulence" x="0" y="0" width="100%" height="100%">
<feTurbulence id="sea-filter" numOctaves="0.1" seed="2" baseFrequency="0.02 0.05"></feTurbulence>
<feDisplacementMap scale="20" in="SourceGraphic"></feDisplacementMap>
<animate xlink:href="#sea-filter" attributeName="baseFrequency" dur="60s" keyTimes="0;0.5;1" values="0.02 0.06;0.04 0.08;0.02 0.06" repeatCount="indefinite"/>
</filter>
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" x="0" y="0" height="100%" width="100%">
<image xlink:href="../../assets/images/backgrounds/wall-main.png" x="0" y="0" height="100%" width="100%" preserveAspectRatio="xMidYMid slice"/>
</pattern>
<mask id="myMask">
<path fill="#fff">
<animate repeatCount="indefinite" attributeName="d" dur="5s"
values="M382,118c100.383-77.825,276.671,59.258,448,34,65.577-9.668,196.57-94.87,294-58,83.39,31.556,92.13,116.309,174,136,108.23,26.031,207.9-110.974,286-74,61.42,29.075,37.81,132.343,110,186,47.83,35.547,81.23,14.642,132,52,51.7,38.043,88.14,109.739,82,176-6.17,66.5-50.93,79.125-60,144-10.14,72.489,46.43,113.009,26,170-29.24,81.6-166.19,63.417-218,148-53.48,87.31,29.83,209.23-26,264-44.42,43.57-141.41-7.81-226,14-93.36,24.07-100.33,81.2-194,104-111.76,27.2-217.186-20.32-268-52-70.153-43.73-98.14-121.36-180-146-83.052-25-141.572,21.65-252,46-131.847,29.08-259.955,29.4-324-40-85.126-92.25,17.341-275.707-12-436-23.665-129.279-80.6-204.706-36-294,33.223-66.508,93.383-72.786,138-128C349.1,273.539,310,173.817,382,118Z;
M500,190c90.412-66.126,238.022,65.138,388,26,86.586-22.595,152.56-120.7,236-104,94.03,18.821,101.05,142.366,196,170,115.58,33.639,245.25-120.028,314-76,38.98,24.962,16.27,88.038,60,136,36.16,39.655,72.52,30.721,114,68,29.47,26.484,75.25,85.812,64,146-15.53,83.071-131.92,94.889-144,172-12.37,78.965,107.48,140.205,90,192-28.41,84.17-381.55,26.287-402,96-14.33,48.86,147.88,116.62,138,192-4.81,36.7-57.51,62.76-150,102-79.12,33.57-154.38,62.03-210,70-115.07,16.49-217.716-1.22-252-18-104.652-51.21-150.906-194.87-242-198-73.985-2.54-105.059,84.42-190,98-112.843,18.04-211.468-78.6-246-120-83.04-99.54-53.27-201.986-90-356-36.055-151.181-93.562-237.142-48-288,55.26-61.683,186.476,13.989,268-52C476.816,378.965,421.53,247.392,500,190Z;
M500,238C621.91,181.654,670.957,61.767,796,44c50.491-7.174,172,34.215,306,118,95.1,59.463,151.04,109.438,226,112,134.95,4.612,236.05-139.415,334-104,60.82,21.99,62.5,101.2,122,156,35.17,32.392,126.79,61.5,136,110,9.71,51.11-75.16,127.335-96,168-43.83,85.544-49.3,148.558-38,198,22.31,97.671,140.35,163.962,124,220-15.75,53.99-135.29,38.81-192,106-67.3,79.73-5.52,200.99-70,254-55.53,45.65-226.87-25.52-290-30-68.89-4.89-132.47,22.44-214-4-84.21-27.3-124.8-95.16-216-108-84.892-11.95-141.558,31.08-236,76-153.42,72.98-293.092,83.99-342,70-117.669-33.66-209.643-140.55-242-250-37.527-126.93,29.383-207.227,24-322C126.26,691.617,18.046,548.78,70,440c17.439-36.513,83.745-86.988,188-128C347.2,276.909,413.476,277.991,500,238Z;
M382,118c100.383-77.825,276.671,59.258,448,34,65.577-9.668,196.57-94.87,294-58,83.39,31.556,92.13,116.309,174,136,108.23,26.031,207.9-110.974,286-74,61.42,29.075,37.81,132.343,110,186,47.83,35.547,81.23,14.642,132,52,51.7,38.043,88.14,109.739,82,176-6.17,66.5-50.93,79.125-60,144-10.14,72.489,46.43,113.009,26,170-29.24,81.6-166.19,63.417-218,148-53.48,87.31,29.83,209.23-26,264-44.42,43.57-141.41-7.81-226,14-93.36,24.07-100.33,81.2-194,104-111.76,27.2-217.186-20.32-268-52-70.153-43.73-98.14-121.36-180-146-83.052-25-141.572,21.65-252,46-131.847,29.08-259.955,29.4-324-40-85.126-92.25,17.341-275.707-12-436-23.665-129.279-80.6-204.706-36-294,33.223-66.508,93.383-72.786,138-128C349.1,273.539,310,173.817,382,118Z "/>
</path>
</mask>
</defs>
<rect class="myfill" fill="url(#img1)" filter="url(#innershadow) url(#turbulence)" mask="url(#myMask)" width="2100" height="1500" ></rect>
</svg>

SVG Bevel effect for all edges

#logo {
position:relative;
left:20px;
top:20px
}
#logo .container {
height:200px;
width:200px;
top:50px;
left:50px
}
#logo .container, #logo .slice {
position:absolute;
}
#logo .slice {
height:100%;
width:100%;
}
<div id="logo">
<div class="container">
<div class="slice" id="one">
<svg height="200" width="200">
<polygon points="0,200 100,100 200,200" style="fill:green" />
</svg>
</div>
<div class="slice" id="two">
<svg height="200" width="200">
<polygon points="0,0 100,100 0,200" style="fill:blue" />
</svg>
</div>
<div class="slice" id="three">
<svg height="200" width="200">
<polygon points="0,0 100,100 200,0" style="fill:red" />
</svg>
</div>
<div class="slice" id="four">
<svg height="200" width="200">
<polygon points="200,0 100,100 200,200" style="fill:yellow" />
</svg>
</div>
</div>
</div>
I couldn't figure out how to make a bevel filter as in this logo. All three edges of each slice must be equally darker like the light source is projected right above each slice. Briefly, I am expecting an end result exactly the same with the logo in the link.
EDIT:
<svg>
<filter id="inset-shadow">
<feComponentTransfer in=SourceAlpha>
<feFuncA type="table" tableValues="1 0" />
</feComponentTransfer>
<feGaussianBlur stdDeviation="5" />
<feOffset in="offsetblur2" dy="10" result="offsetblur" />
<feOffset dy="-10" result="offsetblur2" />
<feFlood flood-color="rgb(20, 0, 0)" result="color" />
<feComposite in2="offsetblur" operator="in" />
<feComposite in2="SourceAlpha" operator="in" />
<feMerge>
<feMergeNode in="SourceGraphic" />
<feMergeNode />
</feMerge>
</filter>
<polygon points="0,0 100,100 200,0" style="fill:red" filter="url(#inset-shadow)" />
</svg>
Something like this maybe but not enough dark?

Here's a bevel effect using a specular lighting filter:
<svg width="800px" height="600px" viewBox="0 0 200 150"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="MyFilter" height="220%">
<feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
<feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75"
specularExponent="30" lighting-color="white"
result="specOut">
<fePointLight x="100" y="75" z="200"/>
</feSpecularLighting>
<feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic"
k1="1" k2="1" k3="0" k4="0"/>
</filter>
</defs>
<rect x="1" y="1" width="600" height="800" fill="#888888" stroke="red" />
<g filter="url(#MyFilter)" >
<path fill="#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
</g>
</g>
</svg>
But you can do the same thing more elegantly just using composites and a blur.
<svg width="800px" height="600px" viewBox="0 0 200 150"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="MyFilter" height="220%">
<feFlood flood-color="black"/>
<feComposite operator="out" in2="SourceGraphic"/>
<feGaussianBlur stdDeviation="5"/>
<feComposite operator="atop" in2="SourceGraphic"/>
</filter>
</defs>
<rect x="1" y="1" width="600" height="800" fill="#888888" stroke="red" />
<g filter="url(#MyFilter)" >
<path fill="#D90000"
d="M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 z" />
</g>
</g>
</svg>

SVG drop shadow with filters is truncated

I am trying to make a drop shadow for the following SVG shape:
<svg style="overflow:visible; ">
<defs>
<marker orient="auto" refY="4" refX="2" markerHeight="13" markerWidth="13" id="_x0000_s1094end">
<path style="fill:yellow; " d="M2,2 L2,6 L6,4 L2,2" />
</marker>
</defs>
<path d="M 288,164 L 108,176" style="stroke-width:8; stroke:yellow; marker-end:url(#_x0000_s1094end); " y="4" x="4"/>
</svg>
After the drop shadow the shape is suppossed to look like this (ignore the bits except for the arrow and its shadow):
I tried the following SVG:
<svg style="overflow:visible; ">
<defs>
<marker orient="auto" refY="4" refX="2" markerHeight="13" markerWidth="13" id="_x0000_s1094end">
<path style="fill:yellow; " d="M2,2 L2,6 L6,4 L2,2" />
</marker>
<filter id="f1" x="0" y="0" width="500%" height="500%">
<feOffset result="offOut" in="SourceAlpha" dx="-8" dy="-8" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<path d="M 288,164 L 108,176" style="stroke-width:8; stroke:yellow; marker-end:url(#_x0000_s1094end); " y="4" x="4" filter="url(#f1)"/>
</svg>
http://fiddle.jshell.net/md3rT/
What I get is this:
The resulting SVG is coming out truncated.
Also, how can I change the opacity of the shadow?
Thanx in advance!

To stop truncating, just make the filter cover the shape (the drop shadow is above and to the left so the filter needs to cover that region).
<filter id="f1" x="-180%" y="-500%" width="500%" height="1000%">
<feOffset result="offOut" in="SourceAlpha" dx="-8" dy="-8" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
If you want the shadow not to be opaque, something involving a non-opaque flood would seem to do the trick. For a general drop shadow you need something like this...
<feGaussianBlur in="alpha-channel-of-feDropShadow-in" stdDeviation="stdDeviation-of-feDropShadow"/>
<feOffset dx="dx-of-feDropShadow" dy="dy-of-feDropShadow" result="offsetblur"/>
<feFlood flood-color="flood-color-of-feDropShadow" flood-opacity="flood-opacity-of-feDropShadow"/>
<feComposite in2="offsetblur" operator="in"/>
<feMerge>
<feMergeNode/>
<feMergeNode in="in-of-feDropShadow"/>
</feMerge>
Although, in Firefox and Chrome you can use the SVG Filter Effects <feDropShadow> filter or a CSS drop-shadow filter instead.

This is what I think you're looking for. It expands the filter region, keeps the drop shadow unblurred and dials the opacity on the shadow down to 50%. (I've also found browsers to get crotchety when you don't provide explicit dimensions for inline SVG.)
<svg x="0px" y="0px" width="500px" height="300px" style="overflow:visible;" viewBox="0 0 500 300">
<defs>
<marker orient="auto" refY="4" refX="2" markerHeight="13" markerWidth="13" id="_x0000_s1094end">
<path style="fill:yellow; " d="M2,2 L2,6 L6,4 L2,2" />
</marker>
<filter id="f1" x="-50%" y="-100%" width="200%" height="400%">
<feOffset result="offOut" in="SourceAlpha" dx="-8" dy="-8" />
<feComponentTransfer>
<feFuncA type="discrete" tableValues="0 .5"/>
</feComponentTransfer>
<feComposite operator="over" in="SourceGraphic"/>
</filter>
</defs>
<path d="M 288,164 L 108,176" style="stroke-width:8; stroke:yellow; marker-end:url(#_x0000_s1094end); " y="4" x="4" filter="url(#f1)"/>
</svg>