Home/ Questions/Q 9242081
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T08:30:23+00:00

I want to apply a simple drop shadow to an SVG file. As this

  • 0

I want to apply a simple drop shadow to an SVG file. As this is really my first dive into SVG filters, I am stuck and can’t find a solution for the (probably simple) problem: Why is the feColorMatrix not being applied to the shadow?

Here is the filter:

<defs>
  <filter id="drop-shadow" filterUnits="userSpaceOnUse" width="120" height="120">
    <feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="1" />
    <feOffset in="blur-out" result="the-shadow" dx="0" dy="1"/> 
    <feColorMatrix in="the-shadow" result="color-out" type="matrix"
      values="0 0 0 0   0
              0 0 0 0   0 
              0 0 0 0   0 
              0 0 0 0.1 0"/>
    <feBlend in="SourceGraphic" in2="the-shadow" mode="normal"/>
  </filter>
</defs>

Also, is it possible that FireFox ignores feOffset? Or is there something wrong with the syntax?

Plus: In all browsers, the drop shadow seems to be clipped off at the top and on the left side. The svg (in an img tag) is 22px x 22px big and I already enlarged the viewBox:

<svg version="1.1" id="Layer_1"
  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
  y="0px" width="22px" height="22px" viewBox="0 0 24 24" enable-background="new 0 0 24 24"
xml:space="preserve">

But still no luck. In my CSS file the the img has no set width or height, so I believe it has something to do with the SVG.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    1) Your filter region is probably too small. You can enlarge the default values (although the default values: (-10%, -10%, 120%, 120%) are usually enough for normal drop shadows.)

    2) Also – as Robert mentions – your final filter is not wired up correctly.

    Here is a version that seems to work consistently cross browser – exaggerated so you can see clearly.

      <filter id="drop-shadow" x="-20%" y="-20%" width="140%" height="140%">
    <feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="2" />
    <feOffset in="blur-out" result="the-shadow" dx="0" dy="5"/> 
    <feColorMatrix in="the-shadow" result="color-out" type="matrix"
      values="0 0 0 0   0
              0 0 0 0   0 
              0 0 0 0   0 
              0 0 0 .5 0"/>
    <feBlend in="SourceGraphic" in2="color-out" mode="normal"/>
  </filter>
</defs>
    • 0