I have a very fancy font I want to use in SVG so I can combine it with other things in an SVG for a final product. It clips off the overhangs and other fancy bits beyond the base font size. How do I get those to show again? For some reason, the snippet is not reading my font URL but my own file reads and displays it fine, so do whatever you need to do to get it to work enough for testing purposes.
<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/css" href="http://www.cafenocturne.com/fonts/FontPorcelain.css" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 500 300">
<defs>
<filter id="dropshadow" width="250px" height="250px">
<feOffset result="offOut" in="SourceAlpha" dx="3" dy="3" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
</defs>
<text x="80" y="80" style="font-family: PorcelainRegular;
font-size: 80px;
stroke: #000000;
fill: #ffffff;
filter: url(#dropshadow);">
Cafe
</text>
<text x="80" y="150" style="font-family: PorcelainRegular;
font-size : 80px;
stroke : #000000;
fill : #ffffff;
filter: url(#dropshadow);">
Nocturne
</text>
</svg>
Related
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" />
I want to make an svg looks like it's on 3D by adding a small light in the top and left BORDER and a shadow in the bottom and right BORDER
something like this
#div1 {
background: #ddd;
}
#div1, #div2, #div3 {
width: 100px;
height: 100px;
position: relative;
}
#div2 {
box-shadow: inset -2px -2px 10px 1px #000;
position: absolute;
}
#div3 {
box-shadow: inset 2px 2px 14px 1px #fff;
position: absolute;
}
<div id="div1">
<div id="div2"></div>
<div id="div3"></div>
</div>
But I don't know how to do that with svg filter
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="1000">
<defs>
<filter id="filter1" x="0" y="0">
<feSpecularLighting result="specOut"
specularExponent="20" lighting-color="#bbbbbb">
<fePointLight x="-100" y="-100" z="600"/>
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="specOut"
operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
</filter>
</defs>
<path filter="url(#filter1)" fill="#fff" stroke="#000" d="M20,20 L220,20 L220,220 L20,220 L20,20 "></path>
</svg>
Help please and thanks
Firstly, you are trying to light a pure white rectangle with a dim white light. You aren't going to see anything.
If you make the rectangle darker, you'll start to see some effect.
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="300">
<defs>
<filter id="filter1" x="0" y="0">
<feSpecularLighting result="specOut"
specularExponent="20" lighting-color="#bbbbbb">
<fePointLight x="-100" y="-100" z="600"/>
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="specOut"
operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
</filter>
</defs>
<path filter="url(#filter1)" fill="#666" stroke="#000" d="M20,20 L220,20 L220,220 L20,220 L20,20 "></path>
</svg>
But in the above example we are only getting gradient of light over our rectangle. How do we make a sort-of bevel edge on the rectangle?
It is important to know that it is not really the RGB channels of an element that determine how the lighting filter components behave. The lighting components treat the alpha component of the colour as a bump map. Varying values of alpha become a topological map that effects the way the pixels are lit.
One way to create varying values of alpha is to use a gaussian blur filter. Here's what that looks like. Note that it is the alpha channel (SourceAlpha) of our shape that we are blurring.
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="300">
<defs>
<filter id="filter2">
<feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur1"/>
<feBlend in="SourceGraphic" in2="blur1" mode="multiply"/>
</filter>
</defs>
<path filter="url(#filter2)" fill="#666" stroke="#000" d="M20,20 L220,20 L220,220 L20,220 L20,20 "></path>
</svg>
Now if use that blurred alpha channel, we get something close to what you are after.
You can fiddle with the blur, the lighting filter values, and the feComposite values to adjust the effect.
Note that I've also switched to using an feDistantLight here. I think it is more appropriate for this purpose.
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="300">
<defs>
<filter id="filter2">
<feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur1"/>
<feSpecularLighting result="specOut" in="blur1" specularConstant="1.2" specularExponent="12" lighting-color="#fff">
<feDistantLight azimuth="225" elevation="45"/>
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/>
</filter>
</defs>
<path filter="url(#filter2)" fill="#666" stroke="#000" d="M20,20 L220,20 L220,220 L20,220 L20,20 "></path>
</svg>
Update
To handle the situation where shapes overlap (see comments), then you will need to clip away any parts of the blur that is outside the shape. You can do that with another feComposite operation.
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="300">
<defs>
<filter id="filter2">
<feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur1"/>
<feSpecularLighting result="specOut" in="blur1" specularConstant="1.2" specularExponent="12" lighting-color="#fff">
<feDistantLight azimuth="225" elevation="45"/>
</feSpecularLighting>
<feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="result"/>
<feComposite operator="atop" in2="SourceGraphic"/>
</filter>
</defs>
<path filter="url(#filter2)" fill="#666" stroke="#000" d="M20,20 L220,20 L220,220 L20,220 L20,20 "></path>
<path filter="url(#filter2)" fill="#666" stroke="#000" d="M40,40 L200,40 L200,110 L40,110 L40,40 "></path>
<path filter="url(#filter2)" fill="#666" stroke="#000" d="M40,120 L200,120 L200,200 L40,200 L40,120 "></path>
</svg>
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 am trying to blur background with polygon svg shape. Below is svg. And here is Bin
<svg id="testSVG" style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;opacity: 0.5;">
<defs>
<filter id="blurry" x="0%" y="0%" height="100%" width="100%" primitiveUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="5" in="SourceGraphic" result="blurSquares"></feGaussianBlur>
<feComponentTransfer in="blurSquares" result="opaqueBlur">
<feFuncA type="linear" intercept="1"></feFuncA>
</feComponentTransfer>
<feBlend mode="normal" in="opaqueBlur" in2="SourceGraphic"></feBlend>
</filter>
</defs>
<g filter="url(#blurry)">
<polygon points="0,0 100,0 100,200 0,200 0,0"></polygon>
</g>
</svg>
I am expecting to see part of background image blurred. But it is not working as expected. What changes are required to make it work?
There is no reliable way for a blur filter in an SVG to automatically blur something behind the SVG on the page.
To achieve what you want, the background image has to be copied into the SVG and the blur filter applied to that. Of course you would need to make sure that the image in the HTML and the version of it in the SVG line up correctly.
So, for example, here's a version of your example with a blurred image in the SVG. But no polygon yet.
html, body {
height: 100%;
width: 100%;
margin: 0px;
}
body {
background-image: url('http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg');
}
<svg id="testSVG" style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;">
<defs>
<filter id="blurry">
<feGaussianBlur stdDeviation="5" in="SourceGraphic"></feGaussianBlur>
</filter>
</defs>
<image x="0" y="0"
width="500" height="332"
xlink:href="http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg"
filter="url(#blurry)" />
</svg>
Now if we want the blurred image to be inside the polygon, we can do that with a clipping path.
We turn the polygon into a clipping path and apply that to the blurred image.
html, body {
height: 100%;
width: 100%;
margin: 0px;
}
body {
background-image: url('http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg');
}
<svg id="testSVG" style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;">
<defs>
<filter id="blurry">
<feGaussianBlur stdDeviation="5" in="SourceGraphic"></feGaussianBlur>
</filter>
<clipPath id="polyclip">
<polygon points="50,200, 300,50, 400,300" />
</clipPath>
</defs>
<image x="0" y="0"
width="500" height="332"
xlink:href="http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg"
filter="url(#blurry)"
clip-path="url(#polyclip)" />
</svg>
Note that I'm using a slightly more interesting triangle polygon here. So that the effect is more obvious.
Put This code in your Polygon Tag :
<polygon points="200,0 0,160 500,330" style="fill:lime;stroke:purple;stroke-width:1"></polygon>
html, body {
height: 100%;
width: 100%;
margin: 0px;
}
body {
background-image: url('http://wp.patheos.com.s3.amazonaws.com/blogs/faithwalkers/files/2013/03/bigstock-Test-word-on-white-keyboard-27134336.jpg');
}
<svg id="testSVG" style="position: absolute;left: 0;top: 0;height: 100%;width: 100%;opacity: 0.5;">
<defs>
<filter id="blurry" x="0%" y="0%" height="100%" width="100%" primitiveUnits="userSpaceOnUse">
<feGaussianBlur stdDeviation="5" in="SourceGraphic" result="blurSquares"></feGaussianBlur>
<feComponentTransfer in="blurSquares" result="opaqueBlur">
<feFuncA type="linear" intercept="1"></feFuncA>
</feComponentTransfer>
<feBlend mode="normal" in="opaqueBlur" in2="SourceGraphic"></feBlend>
</filter>
</defs>
<g filter="url(#blurry)">
<polygon points="200,0 0,160, 500,330" style="fill:lime;stroke:purple;stroke-width:1"></polygon>
</g>
</svg>
Your code works if you remove your feComponentTransfer and feBlend tags.
http://jsbin.com/tuyorotome/1/edit?html,css,output
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