SVG - Inset and drop shadow at the same time

css, shadow, svg, svg-filters

Solution

It depends on exactly what you want to do (the order matters), but you can e.g combine the two filters into one, like this:

<filter id="inset-and-drop-shadow" primitiveUnits="objectBoundingBox" x="0%" y="0%">
    <feOffset dx="0.01" dy="0.02" />
    <feGaussianBlur stdDeviation="0.01" result="offset-blur" />
    <feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse" />
    <feFlood flood-color="black" flood-opacity="1" result="color" />
    <feComposite operator="in" in="color" in2="inverse" result="shadow" />
    <feComposite operator="over" in="shadow" in2="SourceGraphic" result="inset-shadow" />
    <feGaussianBlur in="SourceAlpha" stdDeviation="0.0012" />
    <feOffset dx="0.006" dy="0.013" result="offsetblur" />
    <feFlood flood-color="black" />
    <feComposite in2="offsetblur" operator="in" />
    <feMerge>
        <feMergeNode/>
        <feMergeNode in="inset-shadow" />
    </feMerge>
</filter>

See fiddle.

Problem

Original source