I am using an SVG based 64 as an image source.
This looks fine on a desktop, but when I view on my mobile (Iphone XS MAX - Safari), this looks really blury.
See below fiddle which has two images, one is just the raw SVG, and the second is the SVG base 64 used as source.
https://jsfiddle.net/t0e4sjw3/
You can see from the screenshot below, that the one used as an image is very blury and the filter seems to be a lot bigger than on the first image.
Is there any way to stop this?
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="110"
height="110"
>
<defs>
<filter id="dropShadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" />
<feOffset dx="0" dy="0" result="offsetblur" />
<feFlood flood-color="black" />
<feComposite in2="offsetblur" operator="in" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<image
xmlns="http://www.w3.org/2000/svg"
width="110"
height="110"
filter="url(#dropShadow)"
preserveAspectRatio="none"
xmlns:xlink="http://www.w3.org/1999/xlink"
xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NCIgaGVpZ2h0PSI2NCI+PHBhdGggZmlsbD0iI0VEQkE2RiIgZD0iTTU0Ljk1NSAxOC4yMTZjLjIxNi0yLjU3MiA4LjQ0Ni0xLjg0IDQuNDYzLTEuMTQzLTMuMjY3LjU3Mi00LjY3MiAzLjYyLTQuNDYzIDEuMTQzek00OS4yMTIgMjEuNDMyYzUuMTctMS4zNjcgMS40MDgtMjMuODg2IDEuMDkzLTEyLjY3OC0uMjYgOS4yMDItNi4wNjggMTMuOTk1LTEuMDkzIDEyLjY3OHoiLz48bGluZWFyR3JhZGllbnQgaWQ9ImEiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMjQuMzY1IiB5MT0iMjEuODk5IiB4Mj0iMzguMjk2IiB5Mj0iNjMuNDA3Ij48c3RvcCBvZmZzZXQ9Ii4yNDgiIHN0b3AtY29sb3I9IiNlZGJhNmYiLz48c3RvcCBvZmZzZXQ9Ii40OSIgc3RvcC1jb2xvcj0iI2ViYjg2ZCIvPjxzdG9wIG9mZnNldD0iLjYzIiBzdG9wLWNvbG9yPSIjZTJiMTY3Ii8+PHN0b3Agb2Zmc2V0PSIuNzQ1IiBzdG9wLWNvbG9yPSIjZDRhNDVkIi8+PHN0b3Agb2Zmc2V0PSIuODQ1IiBzdG9wLWNvbG9yPSIjYzA5MzRmIi8+PHN0b3Agb2Zmc2V0PSIuOTM1IiBzdG9wLWNvbG9yPSIjYTc3YzNjIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjOGY2NzJiIi8+PC9saW5lYXJHcmFkaWVudD48cGF0aCBmaWxsPSJ1cmwoI2EpIiBkPSJNMiA2MS43OXMyNi41NjMuODU5IDM1LjYwMy0uOWMxNy4wNjQtMy4zMiAxMy42MTktMzAuNjI5IDE3LjQxOS0zNC45NTMgNS4wMDEuMjA2IDYuNTAxLTguMzAyIDEuMTQ5LTguODc2LTQuNjgzLS41MDMtNy4xNTEtMy4wNjctOS42MzUgMi45OTJDMjguNTkxIDYzLjg0NSA0LjQyNSA1Ni42MDggMiA2MS43OXoiLz48cGF0aCBmaWxsPSIjRURCQTZGIiBkPSJNNTYuNTgxIDE5LjU3OGMxLjUzMy0yLjk5MiA3Ljk3NCAzLjQwOCA0LjMwNSAxLjU5My0zLjAxMy0xLjQ4OC01Ljc4MiAxLjI4Ny00LjMwNS0xLjU5M3oiLz48bGluZWFyR3JhZGllbnQgaWQ9ImIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMi44OCIgeTE9IjQ3LjIyNyIgeDI9IjIxLjY1MSIgeTI9IjQ3LjIyNyI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjOTE2OTU4Ii8+PHN0b3Agb2Zmc2V0PSIuNjY1IiBzdG9wLWNvbG9yPSIjNWU0MDMzIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNGEyZjI0Ii8+PC9saW5lYXJHcmFkaWVudD48cGF0aCBmaWxsPSJ1cmwoI2IpIiBkPSJNMi44OCA0NS42NDdjMi43ODQtMjAuMTIyIDIxLjYyOC01LjM3NSAxOC40IDguNzctMy4wNjcgNi45NTUtMTQuNTc5IDYuMTY2LTE4LjQtOC43N3oiLz48bGluZWFyR3JhZGllbnQgaWQ9ImMiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMi44OCIgeTE9IjQ4LjE1MiIgeDI9IjEwLjg3MSIgeTI9IjQ4LjE1MiI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjOTE2OTU4Ii8+PHN0b3Agb2Zmc2V0PSIuNjY1IiBzdG9wLWNvbG9yPSIjNWU0MDMzIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNGEyZjI0Ii8+PC9saW5lYXJHcmFkaWVudD48cGF0aCBmaWxsPSJ1cmwoI2MpIiBkPSJNMi44OCA0Ni42OTRjMS4wMDItMTAuNTM4IDkuODk1LTEuMDkgNy42MiA1Ljc5OS0xLjIxNSAzLjY4MS03LjMzNCAxLjg1Ni03LjYyLTUuNzk5eiIvPjxsaW5lYXJHcmFkaWVudCBpZD0iZCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIyLjMyNSIgeTE9IjQ3LjU0IiB4Mj0iNi41MjYiIHkyPSI0Ny41NCI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjOTE2OTU4Ii8+PHN0b3Agb2Zmc2V0PSIuNjY1IiBzdG9wLWNvbG9yPSIjNWU0MDMzIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNGEyZjI0Ii8+PC9saW5lYXJHcmFkaWVudD48cGF0aCBmaWxsPSJ1cmwoI2QpIiBkPSJNMi4zMjUgNDYuNzczYy41MjYtNS41NDIgNS4yMDMtLjU3MyA0LjAwNyAzLjA1LS42NCAxLjkzNi0zLjg1OC45NzYtNC4wMDctMy4wNXoiLz48bGluZWFyR3JhZGllbnQgaWQ9ImUiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMi4zMjUiIHkxPSI0OC4wMjUiIHgyPSI0LjMzNyIgeTI9IjQ4LjAyNSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjOTE2OTU4Ii8+PHN0b3Agb2Zmc2V0PSIuNjY1IiBzdG9wLWNvbG9yPSIjNWU0MDMzIi8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNGEyZjI0Ii8+PC9saW5lYXJHcmFkaWVudD48cGF0aCBmaWxsPSJ1cmwoI2UpIiBkPSJNMi4zMzMgNDcuMjI0Yy4wMzUtLjg5MiAyLjI0Ni0uMzgzIDEuOTgyLjkxNi0uMDcuMzQ1LTIuMTMgMi44NDktMS45ODItLjkxNnoiLz48bGluZWFyR3JhZGllbnQgaWQ9ImYiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iNC45MjgiIHkxPSI0MC43OTEiIHgyPSIzOC40NDciIHkyPSI0MC43OTEiPjxzdG9wIG9mZnNldD0iMCIgc3RvcC1jb2xvcj0iIzkxNjk1OCIvPjxzdG9wIG9mZnNldD0iLjY2NSIgc3RvcC1jb2xvcj0iIzVlNDAzMyIvPjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzRhMmYyNCIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggZmlsbD0idXJsKCNmKSIgZD0iTTQuOTI4IDM5LjExMmM2LjU3My0xOS4zMzcgMjMuOTU2LTEzLjk1MiAzMS40MjUtMy44OTUgMCAwIDEuNzE5LS41NzYgMS45OTUuOTc4IDEuNDkyIDguMzg2LTE0LjMzMiAxNS42MzItMTcuNjE5IDE5LjI1MSAxLjU5Mi05LjU5NS03LjE5MS0yNS4xNzctMTUuODAxLTE2LjMzNHoiLz48cGF0aCBmaWxsPSIjRURCQTZGIiBkPSJNNDguODU5IDE5Ljk3NmM0Ljc1OS0yLjc0MS0zLjMzLTIzLjYyLTEuNDMzLTEyLjYzMSAxLjU1NyA5LjAyMy0zLjE0OCAxNS4yNyAxLjQzMyAxMi42MzF6Ii8+PHBhdGggb3BhY2l0eT0iLjMiIGZpbGw9IiNBMzVEMzUiIGQ9Ik0yMy4xMjYgNTcuMDM2Yy4zMDkgMi4yNDQgMy4zMzYgMS44MzggMy4wMjUtLjQwOC0uMzEzLTIuMjk3LTMuMzM5LTEuODkxLTMuMDI1LjQwOHpNMzMuODM2IDUxLjgxM2MuMzA5IDIuMjQ1IDMuMzM2IDEuODM4IDMuMDI1LS40MDgtLjMxMy0yLjI5OC0zLjM0LTEuODkxLTMuMDI1LjQwOHpNMzUuNTYgNDYuNjExYy4yMTEgMS41MyAyLjI3NSAxLjI1MyAyLjA2NC0uMjc3LS4yMTQtMS41NjYtMi4yNzgtMS4yODktMi4wNjQuMjc3ek0zOS43MTUgNDMuMTQ3Yy4yMDkgMS41MjkgMi4yNzQgMS4yNTIgMi4wNjQtLjI3OS0uMjE1LTEuNTY2LTIuMjc4LTEuMjg5LTIuMDY0LjI3OXpNMzkuNzE2IDQ5LjgwMmMuMjA5IDEuNTMxIDIuMjcyIDEuMjU1IDIuMDYzLS4yNzctLjIxNS0xLjU2Ny0yLjI3OC0xLjI5LTIuMDYzLjI3N3pNMjkuMjc3IDUyLjc0NWMuMjEgMS41MjkgMi4yNzQgMS4yNTQgMi4wNjItLjI3OC0uMjEzLTEuNTY3LTIuMjc1LTEuMjg4LTIuMDYyLjI3OHpNMzAuOTk2IDU3LjI1N2MuMjA5IDEuNTI5IDIuMjczIDEuMjU0IDIuMDYyLS4yNzgtLjIxMy0xLjU2OC0yLjI3Ni0xLjI4OS0yLjA2Mi4yNzh6Ii8+PHBhdGggZmlsbD0iI0VEQkE2RiIgZD0iTTQ3LjM4MiA1Ljk5N2MtMS42MDcgMC0xLjYwNy0zLjk5NyAwLTMuOTk3IDEuNjA5IDAgMS42MDkgMy45OTcgMCAzLjk5N3oiLz48cGF0aCBmaWxsPSIjMzAyQzNCIiBkPSJNNDcuMzgyIDUuNDQ4Yy0xLjE2NiAwLTEuMTY2LTIuOSAwLTIuOSAxLjE2NyAwIDEuMTY3IDIuOSAwIDIuOXoiLz48cGF0aCBmaWxsPSIjNkU4MTg5IiBkPSJNNDcuMzgzIDMuNTY3YzAgLjUwNC0uNjI2LjUwNC0uNjI2IDAgMC0uNTA2LjYyNi0uNTA2LjYyNiAweiIvPjxwYXRoIGZpbGw9IiNFREJBNkYiIGQ9Ik01MC45MDIgNy4xODNjLTEuNjA4IDAtMS42MDgtMy45OTYgMC0zLjk5NiAxLjYxIDAgMS42MSAzLjk5NiAwIDMuOTk2eiIvPjxwYXRoIGZpbGw9IiMzMDJDM0IiIGQ9Ik01MC45MDIgNi42MzVjLTEuMTY2IDAtMS4xNjYtMi45IDAtMi45IDEuMTY3IDAgMS4xNjcgMi45IDAgMi45eiIvPjxwYXRoIGZpbGw9IiM2RTgxODkiIGQ9Ik01MC45MDMgNC43NTNjMCAuNTA0LS42MjYuNTA0LS42MjYgMCAwLS41MDYuNjI2LS41MDYuNjI2IDB6Ii8+PHBhdGggb3BhY2l0eT0iLjMiIGZpbGw9IiMyOTFFMUUiIGQ9Ik0zMS42NDEgMzEuOTI0YzEuNDI4LjQ2OC03Ljk0OCAxLjIzNy0xMi42NDMgOS40ODMgMS40MzktNi40NjYgOS40MDktMTAuNTQ2IDEyLjY0My05LjQ4M3pNOC44MzcgMzcuMjIxYy41MzUuMDUtMi4zMTQgMS4xNDUtMi4zOTIgNC42MDMtLjY1My0yLjUxOCAxLjE4MS00LjcxNyAyLjM5Mi00LjYwM3pNMTMuOTQ1IDM4LjMyMWMuNjcxLjAyOC0zLjQyOCAxLjQ0My00Ljg2MSA1LjQzNi4xMjgtMi44NjkgMy4zNDMtNS41MDIgNC44NjEtNS40MzZ6TTE4LjkxMSA0NS40ODVjLjY0Ni4zODEtNC4yNDctLjU4Ni04LjAzOSAyLjA2NCAxLjgzMy0yLjM4MiA2LjU3OS0yLjkyNSA4LjAzOS0yLjA2NHpNOC45OTQgNDQuNzUzYy4yODEuMTI5LTEuNjM1LjA4Ny0yLjcyOSAxLjcwNi40MDItMS4zMTggMi4wOS0xLjk5NyAyLjcyOS0xLjcwNnpNNC42ODkgNDQuOTAxYy4yMi4wNDQtMS4xNC4zMzQtMS42NTIgMS42Ni4wNzMtLjk5OCAxLjE1Ni0xLjc1OSAxLjY1Mi0xLjY2ek02LjA4OCA0Mi4yMzRjLjI3Mi4wMjYtMS4yMTEuNTc3LTEuMzI4IDIuMzM3LS4yNzgtMS4yODIuNzEyLTIuMzk2IDEuMzI4LTIuMzM3ek0yMC4zNjIgNTEuODA3Yy42MDctLjU5Mi00LjUzMiAyLjA1Ni05LjQ5Ljg1NiAyLjcxMSAxLjYzMyA4LjEyMS40ODMgOS40OS0uODU2ek0xMC42NTIgNDkuOTEyYy4yODItLjI3NS0yLjEwOS45NTctNC40MTguMzk5IDEuMjYyLjc2IDMuNzguMjI1IDQuNDE4LS4zOTl6TTYuMjY2IDQ5LjIxNGMuMTQyLS4yMjktMS4xODkuNjQ3LTIuNjg4LS4xODIuODc2Ljg5IDIuMzcuNjk3IDIuNjg4LjE4MnpNMTQuNDAyIDU3Ljk0MmMuNTUtLjI1OC0zLjE4NS0uMTg0LTUuMzMzLTMuNDM5Ljc5NyAyLjY0NiA0LjA5NCA0LjAxOSA1LjMzMyAzLjQzOXpNOC42NDYgNTMuNTA3Yy4zNjktLjE3Mi0yLjEzNy0uMTIyLTMuNTc4LTIuMzA3LjUzNSAxLjc3NiAyLjc0NiAyLjY5NyAzLjU3OCAyLjMwN3pNMzYuMTQ0IDM1Ljg0N2MtMi44MjIgNi4xMzMtMTIuNDc5IDkuNTQ5LTE0LjQ5MyAxNy4yODMgNS44MS03LjU4MiAxNS4wMDEtMTAuODQ4IDE0LjQ5My0xNy4yODN6TTIwLjc3NyAyNy4wMjRjMS4xNTQuMTg4LTUuMzU0IDIuMTItNi40MTQgOS41NTgtLjc3Ni01LjUyMSAzLjc5OS05Ljk4NCA2LjQxNC05LjU1OHpNMTEuNTk2IDI5Ljc2OWMuNzMyLjAxOS0yLjU0NiAxLjctMS4wNTYgNi4yMzItMi4wMjUtMy4yMzgtLjYwMy02LjI3NSAxLjA1Ni02LjIzMnoiLz48L3N2Zz4="
id="vsgDyp"
/>
</svg>
<img src="data:image/svg+xml;base64,PHN2Zw0KICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciDQogIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIg0KICB2ZXJzaW9uPSIxLjEiDQogIHdpZHRoPSIxMTAiDQogIGhlaWdodD0iMTEwIg0KPg0KICA8ZGVmcz4NCiAgICA8ZmlsdGVyIGlkPSJkcm9wU2hhZG93Ij4NCiAgICAgIDxmZUdhdXNzaWFuQmx1ciBpbj0iU291cmNlQWxwaGEiIHN0ZERldmlhdGlvbj0iMSIgLz4NCiAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjAiIHJlc3VsdD0ib2Zmc2V0Ymx1ciIgLz4NCiAgICAgIDxmZUZsb29kIGZsb29kLWNvbG9yPSJibGFjayIgLz4NCiAgICAgIDxmZUNvbXBvc2l0ZSBpbjI9Im9mZnNldGJsdXIiIG9wZXJhdG9yPSJpbiIgLz4NCiAgICAgIDxmZU1lcmdlPg0KICAgICAgICA8ZmVNZXJnZU5vZGUgLz4NCiAgICAgICAgPGZlTWVyZ2VOb2RlIGluPSJTb3VyY2VHcmFwaGljIiAvPg0KICAgICAgPC9mZU1lcmdlPg0KICAgIDwvZmlsdGVyPg0KICA8L2RlZnM+DQogIDxpbWFnZQ0KICAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyINCiAgICB3aWR0aD0iMTEwIg0KICAgIGhlaWdodD0iMTEwIg0KICAgIGZpbHRlcj0idXJsKCNkcm9wU2hhZG93KSINCiAgICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIg0KICAgIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIg0KICAgIHhsaW5rOmhyZWY9ImRhdGE6aW1hZ2Uvc3ZnK3htbDtiYXNlNjQsUEhOMlp5QjRiV3h1Y3owaWFIUjBjRG92TDNkM2R5NTNNeTV2Y21jdk1qQXdNQzl6ZG1jaUlIZHBaSFJvUFNJMk5DSWdhR1ZwWjJoMFBTSTJOQ0krUEhCaGRHZ2dabWxzYkQwaUkwVkVRa0UyUmlJZ1pEMGlUVFUwTGprMU5TQXhPQzR5TVRaakxqSXhOaTB5TGpVM01pQTRMalEwTmkweExqZzBJRFF1TkRZekxURXVNVFF6TFRNdU1qWTNMalUzTWkwMExqWTNNaUF6TGpZeUxUUXVORFl6SURFdU1UUXplazAwT1M0eU1USWdNakV1TkRNeVl6VXVNVGN0TVM0ek5qY2dNUzQwTURndE1qTXVPRGcySURFdU1Ea3pMVEV5TGpZM09DMHVNallnT1M0eU1ESXROaTR3TmpnZ01UTXVPVGsxTFRFdU1Ea3pJREV5TGpZM09Ib2lMejQ4YkdsdVpXRnlSM0poWkdsbGJuUWdhV1E5SW1FaUlHZHlZV1JwWlc1MFZXNXBkSE05SW5WelpYSlRjR0ZqWlU5dVZYTmxJaUI0TVQwaU1qUXVNelkxSWlCNU1UMGlNakV1T0RrNUlpQjRNajBpTXpndU1qazJJaUI1TWowaU5qTXVOREEzSWo0OGMzUnZjQ0J2Wm1aelpYUTlJaTR5TkRnaUlITjBiM0F0WTI5c2IzSTlJaU5sWkdKaE5tWWlMejQ4YzNSdmNDQnZabVp6WlhROUlpNDBPU0lnYzNSdmNDMWpiMnh2Y2owaUkyVmlZamcyWkNJdlBqeHpkRzl3SUc5bVpuTmxkRDBpTGpZeklpQnpkRzl3TFdOdmJHOXlQU0lqWlRKaU1UWTNJaTgrUEhOMGIzQWdiMlptYzJWMFBTSXVOelExSWlCemRHOXdMV052Ykc5eVBTSWpaRFJoTkRWa0lpOCtQSE4wYjNBZ2IyWm1jMlYwUFNJdU9EUTFJaUJ6ZEc5d0xXTnZiRzl5UFNJall6QTVNelJtSWk4K1BITjBiM0FnYjJabWMyVjBQU0l1T1RNMUlpQnpkRzl3TFdOdmJHOXlQU0lqWVRjM1l6TmpJaTgrUEhOMGIzQWdiMlptYzJWMFBTSXhJaUJ6ZEc5d0xXTnZiRzl5UFNJak9HWTJOekppSWk4K1BDOXNhVzVsWVhKSGNtRmthV1Z1ZEQ0OGNHRjBhQ0JtYVd4c1BTSjFjbXdvSTJFcElpQmtQU0pOTWlBMk1TNDNPWE15Tmk0MU5qTXVPRFU1SURNMUxqWXdNeTB1T1dNeE55NHdOalF0TXk0ek1pQXhNeTQyTVRrdE16QXVOakk1SURFM0xqUXhPUzB6TkM0NU5UTWdOUzR3TURFdU1qQTJJRFl1TlRBeExUZ3VNekF5SURFdU1UUTVMVGd1T0RjMkxUUXVOamd6TFM0MU1ETXROeTR4TlRFdE15NHdOamN0T1M0Mk16VWdNaTQ1T1RKRE1qZ3VOVGt4SURZekxqZzBOU0EwTGpReU5TQTFOaTQyTURnZ01pQTJNUzQzT1hvaUx6NDhjR0YwYUNCbWFXeHNQU0lqUlVSQ1FUWkdJaUJrUFNKTk5UWXVOVGd4SURFNUxqVTNPR014TGpVek15MHlMams1TWlBM0xqazNOQ0F6TGpRd09DQTBMak13TlNBeExqVTVNeTB6TGpBeE15MHhMalE0T0MwMUxqYzRNaUF4TGpJNE55MDBMak13TlMweExqVTVNM29pTHo0OGJHbHVaV0Z5UjNKaFpHbGxiblFnYVdROUltSWlJR2R5WVdScFpXNTBWVzVwZEhNOUluVnpaWEpUY0dGalpVOXVWWE5sSWlCNE1UMGlNaTQ0T0NJZ2VURTlJalEzTGpJeU55SWdlREk5SWpJeExqWTFNU0lnZVRJOUlqUTNMakl5TnlJK1BITjBiM0FnYjJabWMyVjBQU0l3SWlCemRHOXdMV052Ykc5eVBTSWpPVEUyT1RVNElpOCtQSE4wYjNBZ2IyWm1jMlYwUFNJdU5qWTFJaUJ6ZEc5d0xXTnZiRzl5UFNJak5XVTBNRE16SWk4K1BITjBiM0FnYjJabWMyVjBQU0l4SWlCemRHOXdMV052Ykc5eVBTSWpOR0V5WmpJMElpOCtQQzlzYVc1bFlYSkhjbUZrYVdWdWRENDhjR0YwYUNCbWFXeHNQU0oxY213b0kySXBJaUJrUFNKTk1pNDRPQ0EwTlM0Mk5EZGpNaTQzT0RRdE1qQXVNVEl5SURJeExqWXlPQzAxTGpNM05TQXhPQzQwSURndU56Y3RNeTR3TmpjZ05pNDVOVFV0TVRRdU5UYzVJRFl1TVRZMkxURTRMalF0T0M0M04zb2lMejQ4YkdsdVpXRnlSM0poWkdsbGJuUWdhV1E5SW1NaUlHZHlZV1JwWlc1MFZXNXBkSE05SW5WelpYSlRjR0ZqWlU5dVZYTmxJaUI0TVQwaU1pNDRPQ0lnZVRFOUlqUTRMakUxTWlJZ2VESTlJakV3TGpnM01TSWdlVEk5SWpRNExqRTFNaUkrUEhOMGIzQWdiMlptYzJWMFBTSXdJaUJ6ZEc5d0xXTnZiRzl5UFNJak9URTJPVFU0SWk4K1BITjBiM0FnYjJabWMyVjBQU0l1TmpZMUlpQnpkRzl3TFdOdmJHOXlQU0lqTldVME1ETXpJaTgrUEhOMGIzQWdiMlptYzJWMFBTSXhJaUJ6ZEc5d0xXTnZiRzl5UFNJak5HRXlaakkwSWk4K1BDOXNhVzVsWVhKSGNtRmthV1Z1ZEQ0OGNHRjBhQ0JtYVd4c1BTSjFjbXdvSTJNcElpQmtQU0pOTWk0NE9DQTBOaTQyT1RSak1TNHdNREl0TVRBdU5UTTRJRGt1T0RrMUxURXVNRGtnTnk0Mk1pQTFMamM1T1MweExqSXhOU0F6TGpZNE1TMDNMak16TkNBeExqZzFOaTAzTGpZeUxUVXVOems1ZWlJdlBqeHNhVzVsWVhKSGNtRmthV1Z1ZENCcFpEMGlaQ0lnWjNKaFpHbGxiblJWYm1sMGN6MGlkWE5sY2xOd1lXTmxUMjVWYzJVaUlIZ3hQU0l5TGpNeU5TSWdlVEU5SWpRM0xqVTBJaUI0TWowaU5pNDFNallpSUhreVBTSTBOeTQxTkNJK1BITjBiM0FnYjJabWMyVjBQU0l3SWlCemRHOXdMV052Ykc5eVBTSWpPVEUyT1RVNElpOCtQSE4wYjNBZ2IyWm1jMlYwUFNJdU5qWTFJaUJ6ZEc5d0xXTnZiRzl5UFNJak5XVTBNRE16SWk4K1BITjBiM0FnYjJabWMyVjBQU0l4SWlCemRHOXdMV052Ykc5eVBTSWpOR0V5WmpJMElpOCtQQzlzYVc1bFlYSkhjbUZrYVdWdWRENDhjR0YwYUNCbWFXeHNQU0oxY213b0kyUXBJaUJrUFNKTk1pNHpNalVnTkRZdU56Y3pZeTQxTWpZdE5TNDFORElnTlM0eU1ETXRMalUzTXlBMExqQXdOeUF6TGpBMUxTNDJOQ0F4TGprek5pMHpMamcxT0M0NU56WXROQzR3TURjdE15NHdOWG9pTHo0OGJHbHVaV0Z5UjNKaFpHbGxiblFnYVdROUltVWlJR2R5WVdScFpXNTBWVzVwZEhNOUluVnpaWEpUY0dGalpVOXVWWE5sSWlCNE1UMGlNaTR6TWpVaUlIa3hQU0kwT0M0d01qVWlJSGd5UFNJMExqTXpOeUlnZVRJOUlqUTRMakF5TlNJK1BITjBiM0FnYjJabWMyVjBQU0l3SWlCemRHOXdMV052Ykc5eVBTSWpPVEUyT1RVNElpOCtQSE4wYjNBZ2IyWm1jMlYwUFNJdU5qWTFJaUJ6ZEc5d0xXTnZiRzl5UFNJak5XVTBNRE16SWk4K1BITjBiM0FnYjJabWMyVjBQU0l4SWlCemRHOXdMV052Ykc5eVBTSWpOR0V5WmpJMElpOCtQQzlzYVc1bFlYSkhjbUZrYVdWdWRENDhjR0YwYUNCbWFXeHNQU0oxY213b0kyVXBJaUJrUFNKTk1pNHpNek1nTkRjdU1qSTBZeTR3TXpVdExqZzVNaUF5TGpJME5pMHVNemd6SURFdU9UZ3lMamt4TmkwdU1EY3VNelExTFRJdU1UTWdNaTQ0TkRrdE1TNDVPREl0TGpreE5ub2lMejQ4YkdsdVpXRnlSM0poWkdsbGJuUWdhV1E5SW1ZaUlHZHlZV1JwWlc1MFZXNXBkSE05SW5WelpYSlRjR0ZqWlU5dVZYTmxJaUI0TVQwaU5DNDVNamdpSUhreFBTSTBNQzQzT1RFaUlIZ3lQU0l6T0M0ME5EY2lJSGt5UFNJME1DNDNPVEVpUGp4emRHOXdJRzltWm5ObGREMGlNQ0lnYzNSdmNDMWpiMnh2Y2owaUl6a3hOamsxT0NJdlBqeHpkRzl3SUc5bVpuTmxkRDBpTGpZMk5TSWdjM1J2Y0MxamIyeHZjajBpSXpWbE5EQXpNeUl2UGp4emRHOXdJRzltWm5ObGREMGlNU0lnYzNSdmNDMWpiMnh2Y2owaUl6UmhNbVl5TkNJdlBqd3ZiR2x1WldGeVIzSmhaR2xsYm5RK1BIQmhkR2dnWm1sc2JEMGlkWEpzS0NObUtTSWdaRDBpVFRRdU9USTRJRE01TGpFeE1tTTJMalUzTXkweE9TNHpNemNnTWpNdU9UVTJMVEV6TGprMU1pQXpNUzQwTWpVdE15NDRPVFVnTUNBd0lERXVOekU1TFM0MU56WWdNUzQ1T1RVdU9UYzRJREV1TkRreUlEZ3VNemcyTFRFMExqTXpNaUF4TlM0Mk16SXRNVGN1TmpFNUlERTVMakkxTVNBeExqVTVNaTA1TGpVNU5TMDNMakU1TVMweU5TNHhOemN0TVRVdU9EQXhMVEUyTGpNek5Ib2lMejQ4Y0dGMGFDQm1hV3hzUFNJalJVUkNRVFpHSWlCa1BTSk5ORGd1T0RVNUlERTVMamszTm1NMExqYzFPUzB5TGpjME1TMHpMak16TFRJekxqWXlMVEV1TkRNekxURXlMall6TVNBeExqVTFOeUE1TGpBeU15MHpMakUwT0NBeE5TNHlOeUF4TGpRek15QXhNaTQyTXpGNklpOCtQSEJoZEdnZ2IzQmhZMmwwZVQwaUxqTWlJR1pwYkd3OUlpTkJNelZFTXpVaUlHUTlJazB5TXk0eE1qWWdOVGN1TURNMll5NHpNRGtnTWk0eU5EUWdNeTR6TXpZZ01TNDRNemdnTXk0d01qVXRMalF3T0MwdU16RXpMVEl1TWprM0xUTXVNek01TFRFdU9Ea3hMVE11TURJMUxqUXdPSHBOTXpNdU9ETTJJRFV4TGpneE0yTXVNekE1SURJdU1qUTFJRE11TXpNMklERXVPRE00SURNdU1ESTFMUzQwTURndExqTXhNeTB5TGpJNU9DMHpMak0wTFRFdU9Ea3hMVE11TURJMUxqUXdPSHBOTXpVdU5UWWdORFl1TmpFeFl5NHlNVEVnTVM0MU15QXlMakkzTlNBeExqSTFNeUF5TGpBMk5DMHVNamMzTFM0eU1UUXRNUzQxTmpZdE1pNHlOemd0TVM0eU9Ea3RNaTR3TmpRdU1qYzNlazB6T1M0M01UVWdORE11TVRRM1l5NHlNRGtnTVM0MU1qa2dNaTR5TnpRZ01TNHlOVElnTWk0d05qUXRMakkzT1MwdU1qRTFMVEV1TlRZMkxUSXVNamM0TFRFdU1qZzVMVEl1TURZMExqSTNPWHBOTXprdU56RTJJRFE1TGpnd01tTXVNakE1SURFdU5UTXhJREl1TWpjeUlERXVNalUxSURJdU1EWXpMUzR5TnpjdExqSXhOUzB4TGpVMk55MHlMakkzT0MweExqSTVMVEl1TURZekxqSTNOM3BOTWprdU1qYzNJRFV5TGpjME5XTXVNakVnTVM0MU1qa2dNaTR5TnpRZ01TNHlOVFFnTWk0d05qSXRMakkzT0MwdU1qRXpMVEV1TlRZM0xUSXVNamMxTFRFdU1qZzRMVEl1TURZeUxqSTNPSHBOTXpBdU9UazJJRFUzTGpJMU4yTXVNakE1SURFdU5USTVJREl1TWpjeklERXVNalUwSURJdU1EWXlMUzR5TnpndExqSXhNeTB4TGpVMk9DMHlMakkzTmkweExqSTRPUzB5TGpBMk1pNHlOemg2SWk4K1BIQmhkR2dnWm1sc2JEMGlJMFZFUWtFMlJpSWdaRDBpVFRRM0xqTTRNaUExTGprNU4yTXRNUzQyTURjZ01DMHhMall3TnkwekxqazVOeUF3TFRNdU9UazNJREV1TmpBNUlEQWdNUzQyTURrZ015NDVPVGNnTUNBekxqazVOM29pTHo0OGNHRjBhQ0JtYVd4c1BTSWpNekF5UXpOQ0lpQmtQU0pOTkRjdU16Z3lJRFV1TkRRNFl5MHhMakUyTmlBd0xURXVNVFkyTFRJdU9TQXdMVEl1T1NBeExqRTJOeUF3SURFdU1UWTNJREl1T1NBd0lESXVPWG9pTHo0OGNHRjBhQ0JtYVd4c1BTSWpOa1U0TVRnNUlpQmtQU0pOTkRjdU16Z3pJRE11TlRZM1l6QWdMalV3TkMwdU5qSTJMalV3TkMwdU5qSTJJREFnTUMwdU5UQTJMall5TmkwdU5UQTJMall5TmlBd2VpSXZQanh3WVhSb0lHWnBiR3c5SWlORlJFSkJOa1lpSUdROUlrMDFNQzQ1TURJZ055NHhPRE5qTFRFdU5qQTRJREF0TVM0Mk1EZ3RNeTQ1T1RZZ01DMHpMams1TmlBeExqWXhJREFnTVM0Mk1TQXpMams1TmlBd0lETXVPVGsyZWlJdlBqeHdZWFJvSUdacGJHdzlJaU16TURKRE0wSWlJR1E5SWswMU1DNDVNRElnTmk0Mk16VmpMVEV1TVRZMklEQXRNUzR4TmpZdE1pNDVJREF0TWk0NUlERXVNVFkzSURBZ01TNHhOamNnTWk0NUlEQWdNaTQ1ZWlJdlBqeHdZWFJvSUdacGJHdzlJaU0yUlRneE9Ea2lJR1E5SWswMU1DNDVNRE1nTkM0M05UTmpNQ0F1TlRBMExTNDJNall1TlRBMExTNDJNallnTUNBd0xTNDFNRFl1TmpJMkxTNDFNRFl1TmpJMklEQjZJaTgrUEhCaGRHZ2diM0JoWTJsMGVUMGlMak1pSUdacGJHdzlJaU15T1RGRk1VVWlJR1E5SWswek1TNDJOREVnTXpFdU9USTBZekV1TkRJNExqUTJPQzAzTGprME9DQXhMakl6TnkweE1pNDJORE1nT1M0ME9ETWdNUzQwTXprdE5pNDBOallnT1M0ME1Ea3RNVEF1TlRRMklERXlMalkwTXkwNUxqUTRNM3BOT0M0NE16Y2dNemN1TWpJeFl5NDFNelV1TURVdE1pNHpNVFFnTVM0eE5EVXRNaTR6T1RJZ05DNDJNRE10TGpZMU15MHlMalV4T0NBeExqRTRNUzAwTGpjeE55QXlMak01TWkwMExqWXdNM3BOTVRNdU9UUTFJRE00TGpNeU1XTXVOamN4TGpBeU9DMHpMalF5T0NBeExqUTBNeTAwTGpnMk1TQTFMalF6Tmk0eE1qZ3RNaTQ0TmprZ015NHpORE10TlM0MU1ESWdOQzQ0TmpFdE5TNDBNelo2VFRFNExqa3hNU0EwTlM0ME9EVmpMalkwTmk0ek9ERXROQzR5TkRjdExqVTROaTA0TGpBek9TQXlMakEyTkNBeExqZ3pNeTB5TGpNNE1pQTJMalUzT1MweUxqa3lOU0E0TGpBek9TMHlMakEyTkhwTk9DNDVPVFFnTkRRdU56VXpZeTR5T0RFdU1USTVMVEV1TmpNMUxqQTROeTB5TGpjeU9TQXhMamN3Tmk0ME1ESXRNUzR6TVRnZ01pNHdPUzB4TGprNU55QXlMamN5T1MweExqY3dObnBOTkM0Mk9Ea2dORFF1T1RBeFl5NHlNaTR3TkRRdE1TNHhOQzR6TXpRdE1TNDJOVElnTVM0Mk5pNHdOek10TGprNU9DQXhMakUxTmkweExqYzFPU0F4TGpZMU1pMHhMalkyZWswMkxqQTRPQ0EwTWk0eU16UmpMakkzTWk0d01qWXRNUzR5TVRFdU5UYzNMVEV1TXpJNElESXVNek0zTFM0eU56Z3RNUzR5T0RJdU56RXlMVEl1TXprMklERXVNekk0TFRJdU16TTNlazB5TUM0ek5qSWdOVEV1T0RBM1l5NDJNRGN0TGpVNU1pMDBMalV6TWlBeUxqQTFOaTA1TGpRNUxqZzFOaUF5TGpjeE1TQXhMall6TXlBNExqRXlNUzQwT0RNZ09TNDBPUzB1T0RVMmVrMHhNQzQyTlRJZ05Ea3VPVEV5WXk0eU9ESXRMakkzTlMweUxqRXdPUzQ1TlRjdE5DNDBNVGd1TXprNUlERXVNall5TGpjMklETXVOemd1TWpJMUlEUXVOREU0TFM0ek9UbDZUVFl1TWpZMklEUTVMakl4TkdNdU1UUXlMUzR5TWprdE1TNHhPRGt1TmpRM0xUSXVOamc0TFM0eE9ESXVPRGMyTGpnNUlESXVNemN1TmprM0lESXVOamc0TGpFNE1ucE5NVFF1TkRBeUlEVTNMamswTW1NdU5UVXRMakkxT0MwekxqRTROUzB1TVRnMExUVXVNek16TFRNdU5ETTVMamM1TnlBeUxqWTBOaUEwTGpBNU5DQTBMakF4T1NBMUxqTXpNeUF6TGpRek9YcE5PQzQyTkRZZ05UTXVOVEEzWXk0ek5qa3RMakUzTWkweUxqRXpOeTB1TVRJeUxUTXVOVGM0TFRJdU16QTNMalV6TlNBeExqYzNOaUF5TGpjME5pQXlMalk1TnlBekxqVTNPQ0F5TGpNd04zcE5Nell1TVRRMElETTFMamcwTjJNdE1pNDRNaklnTmk0eE16TXRNVEl1TkRjNUlEa3VOVFE1TFRFMExqUTVNeUF4Tnk0eU9ETWdOUzQ0TVMwM0xqVTRNaUF4TlM0d01ERXRNVEF1T0RRNElERTBMalE1TXkweE55NHlPRE42VFRJd0xqYzNOeUF5Tnk0d01qUmpNUzR4TlRRdU1UZzRMVFV1TXpVMElESXVNVEl0Tmk0ME1UUWdPUzQxTlRndExqYzNOaTAxTGpVeU1TQXpMamM1T1MwNUxqazROQ0EyTGpReE5DMDVMalUxT0hwTk1URXVOVGsySURJNUxqYzJPV011TnpNeUxqQXhPUzB5TGpVME5pQXhMamN0TVM0d05UWWdOaTR5TXpJdE1pNHdNalV0TXk0eU16Z3RMall3TXkwMkxqSTNOU0F4TGpBMU5pMDJMakl6TW5vaUx6NDhMM04yWno0PSINCiAgICBpZD0idnNnRHlwIg0KICAvPg0KPC9zdmc+DQo=" alt="snail" />
Related
I'm writing code based off of this SVG filter, however, even this simple filter does not displace the text. Any ideas on whats wrong or how I can get this to work in firefox and safari? In firefox there is no displacement, in safari text dissapears (only in my code, not in the minimum viable code, so maybe I have another issue). Another safari issue is that zooming in and out changes where the displacement effect occurs, which is a problem as well.
This might be due to the way units are inferred by chrome vs safari vs firefox and I heard that there was an issue with firefox not being able to read non URL based filters (although it does do the non displacement part, so I think it could be a units related issue), but I'm not sure how to go about fixing it.
View in chrome to see functioning code
This is the HTML with code for the glitch mask and svg filter
html,
body {
position: relative;
background: black;
width: 100%;
height: 100%;
}
#text {
filter: url("#filter");
}
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<defs>
<!-- MASK DEFS -->
<g id="glitch-mask-left" transform="translate(0, -2.5)">
<rect x="5%" y="45%" width="7%" height="5%" fill="white" />
<rect x="60%" y="25%" width="7%" height="4%" fill="white" />
<rect x="35%" y="75%" width="10%" height="4%" fill="white" />
<rect x="25%" y="50%" width="30%" height="2%" fill="white" />
</g>
<g id="glitch-mask-right" transform="translate(0, -2.5)">
<rect x="5%" y="35%" width="11%" height="2%" fill="white" />
<rect x="60%" y="60%" width="20%" height="1%" fill="white" />
<rect x="80%" y="35%" width="20%" height="3%" fill="white" />
</g>
<filter id="filter">
<!-- FLOODS -->
<feFlood flood-color="#00E200" result="COLOR-left" />
<feFlood flood-color="#E500E6" result="COLOR-right" />
<!-- MASKS -->
<feImage xlink:href="#glitch-mask-left" result="MASK-left-shift" />
<feImage xlink:href="#glitch-mask-right" result="MASK-right-shift" />
<!-- LEFT SHIFTED -->
<feComposite in="SourceGraphic" in2="MASK-left-shift" operator="in" result="LEFT_SHIFT_10" />
<feOffset dx="-7" dy="0" in="LEFT_SHIFT_10" result="LEFT_SHIFT_20" />
<!-- RIGHT SHIFTED -->
<feComposite in="SourceGraphic" in2="MASK-right-shift" operator="in" result="RIGHT_SHIFT_10" />
<!-- RIGHT SHIFT RESULT -->
<feOffset dx="12" dy="0" in="RIGHT_SHIFT_10" result="RIGHT_SHIFT_20" />
<!-- REMAINDER -->
<feComposite in="SourceGraphic" in2="MASK-left-shift" operator="out" result="REMAINDER_10" />
<feComposite in="REMAINDER_10" in2="MASK-right-shift" operator="out" result="REMAINDER_20" />
<feMerge result="RESULT_10">
<feMergeNode in="RIGHT_SHIFT_20" /> <feMergeNode in="LEFT_SHIFT_20" />
<feMergeNode in="REMAINDER_20" />
</feMerge>
<!-- REMAINDER LEFT -->
<feComposite in="COLOR-left" in2="RESULT_10" operator="in" result="RESULT_LEFT_10" />
<feOffset dx="-4" dy="0" in="RESULT_LEFT_10" result="RESULT_LEFT_20" />
<!-- REMAINDER RIGHT -->
<feComposite in="COLOR-right" in2="RESULT_10" operator="in" result="RESULT_RIGHT_10" />
<feOffset dx="4" dy="0" in="RESULT_RIGHT_10" result="RESULT_RIGHT_20" />
<feMerge result="RESULT_20">
<feMergeNode in="RESULT_RIGHT_20" />
<feMergeNode in="RESULT_LEFT_20" />
<feMergeNode in="RESULT_10" />
</feMerge>
</filter>
</defs>
<g id="text">
<text x="50%" y="50%" text-anchor="middle" alignment-baseline="middle" font-size="100" fill="white" font-family="helvetica" line-height="0" stroke-width="0">
ANY SVG CONTENT
</text>
</g>
</svg>
Link to codepen
I have a very simple SVG filter that produces totally different results in Chrome vs. Safari or Firefox (on Mac OS). The problem seems to center around using feComposite on an offset alpha channel. Here's my code:
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="-1 -1 2 2">
<defs>
<filter id="foo">
<feFlood flood-color="red" result="red-fill" />
<feOffset dx="0" dy="0.1" in="SourceAlpha" out="offset-text" />
<feComposite operator="in" in="red-fill" in2="offset-text" result="final" />
</filter>
</defs>
<text font-size="1px" filter="url(#foo)">1</text>
</svg>
In Chrome I see a large red digit "1", while Safari and Firefox show only a blank white canvas. If I remove the <feOffset> and use SourceAlpha directly for compositing, like so:
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="-1 -1 2 2">
<defs>
<filter id="foo">
<feFlood flood-color="red" result="red-fill" />
<feComposite operator="in" in="red-fill" in2="SourceAlpha" result="final" />
</filter>
</defs>
<text font-size="1px" filter="url(#foo)">1</text>
</svg>
...then I see the red digit "1" in all three browsers, as expected.
Why couldn't I use the <feOffset> output in <feComposite>, and is there a recommended alternative?
This is a simple fix. That "out=" should be a "result=" in your filter. (And your font-size needs to be in a style declaration (Chrome is more forgiving of bad syntax.))
<svg xmlns="http://www.w3.org/2000/svg" width="400px" height="400px" viewBox="-1 -1 2 2" >
<filter id="foo">
<feFlood flood-color="red" result="red-fill" />
<feOffset dx="0" dy="0.1" in="SourceAlpha" result="offset-text" />
<feComposite operator="in" in="red-fill" in2="offset-text" result="final"
/>
</filter>
</defs>
<text filter="url(#foo)" style="font-size:1px" >1</text>
</svg>
I have this SVG code in my HTML that renders a triangle with a shadow below it:
<svg class="svg-triangle">
<defs>
<filter id="shadow" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="0" dy="-1" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="2,5" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<polygon points="0,0 22,0 11,7" filter="url(#shadow)"/>
</svg>
That code works fine on Chrome and Firefox, but that's what happens when it get rendered on Internet Explorer 11, the gaussian blur stdDeviation value becomes:
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="1.65726e+009" />
And the shadow is obviously not showed
Any ideas on why this is happening?
Thank you
I need to make a shadow for rect element for svg. The snippet below does the job, but I don't know how to control the color/opacity of the shadow? Any help will be appreciated!
<svg height="120" width="120">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
</filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
Came across this w3schools page with similar examples. Based on the examples given there, it looks like you need to add few more filters (like feColorMatrix and feGaussianBlur) to bring the desired effect.
Your code with new filters:
<svg height="120" width="120">
<defs>
<filter id="f1" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceGraphic" dx="10" dy="10" />
<feColorMatrix result="matrixOut" in="offOut" type="matrix"
values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
<feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" /> </filter>
</defs>
<rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)" />
You can use this jsfiddle also.
Update:
We can achieve opacity & color change just with feColorMatrix filter. Check this updated jsFiddle.
But, in order achieve the desired color you need to understand more about setting values attribute of feColorMatrix.
Following links may be helpful:
Match colors in feColorMatrix filter
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feColorMatrix
SVG Drop Shadow - opacity, feOffset and viewBox difficulties
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>