title: SVG Drop Shadow - opacity, feOffset and viewBox difficulties
body: <p>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 <code>feColorMatrix</code> not being applied to the shadow?</p>
  
  <p>Here is the filter:</p>
  
  <pre><code>&lt;defs&gt;
    &lt;filter id="drop-shadow" filterUnits="userSpaceOnUse" width="120" height="120"&gt;
      &lt;feGaussianBlur in="SourceAlpha" result="blur-out" stdDeviation="1" /&gt;
      &lt;feOffset in="blur-out" result="the-shadow" dx="0" dy="1"/&gt; 
      &lt;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"/&gt;
      &lt;feBlend in="SourceGraphic" in2="the-shadow" mode="normal"/&gt;
    &lt;/filter&gt;
  &lt;/defs&gt;
  </code></pre>
  
  <p>Also, is it possible that FireFox ignores <code>feOffset</code>? Or is there something wrong with the syntax?  </p>
  
  <p>Plus: In all browsers, the drop shadow seems to be clipped off at the top and on the left side. The svg (in an <code>img</code> tag) is 22px x 22px big and I already enlarged the <code>viewBox</code>:</p>
  
  <pre><code>&lt;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"&gt;
  </code></pre>
  
  <p>But still no luck. In my CSS file the the <code>img</code> has no set width or height, so I believe it has something to do with the SVG.</p>