Example


<svg width="13.5cm" height="2.7cm" viewBox="0 0 1350 270" version="1.1">
     <title>Example enable-background01</title>
     <desc>This test case shows five pictures which illustrate the rules for background image processing.</desc>
     <defs>
          <filter id="ShiftBGAndBlur" filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400">
               <desc> This filter discards the SourceGraphic, if any, and just produces a result consisting of the BackgroundImage shifted down 125 units and then blurred. </desc>
               <feOffset in="BackgroundImage" dx="0" dy="125"/>
               <feGaussianBlur stdDeviation="8"/>
          </filter>
          <filter id="ShiftBGAndBlur_WithSourceGraphic" filterUnits="userSpaceOnUse" x="0" y="0" width="1200" height="400">
               <desc> This filter takes the BackgroundImage, shifts it down 125 units, blurs it, and then renders the SourceGraphic on top of the shifted/blurred background. </desc>
               <feOffset in="BackgroundImage" dx="0" dy="125"/>
               <feGaussianBlur stdDeviation="8" result="blur"/>
               <feMerge>
                    <feMergeNode in="blur"/>
                    <feMergeNode in="SourceGraphic"/>
               </feMerge>
          </filter>
     </defs>
     <g transform="translate(0,0)">
          <desc>The first picture is our reference graphic without filters.</desc>
          <rect x="25" y="25" width="100" height="100" fill="red"/>
          <g opacity=".5">
               <circle cx="125" cy="75" r="45" fill="green"/>
               <polygon points="160,25 160,125 240,75" fill="blue"/>
          </g>
          <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
     </g>
     <g enable-background="new" transform="translate(270,0)">
          <desc>The second adds an empty 'g' element which invokes ShiftBGAndBlur.</desc>
          <rect x="25" y="25" width="100" height="100" fill="red"/>
          <g opacity=".5">
               <circle cx="125" cy="75" r="45" fill="green"/>
               <polygon points="160,25 160,125 240,75" fill="blue"/>
          </g>
          <g filter="url(#ShiftBGAndBlur)"/>
          <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
     </g>
     <g enable-background="new" transform="translate(540,0)">
          <desc>The third invokes ShiftBGAndBlur on the inner group.</desc>
          <rect x="25" y="25" width="100" height="100" fill="red"/>
          <g filter="url(#ShiftBGAndBlur)" opacity=".5">
               <circle cx="125" cy="75" r="45" fill="green"/>
               <polygon points="160,25 160,125 240,75" fill="blue"/>
          </g>
          <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
     </g>
     <g enable-background="new" transform="translate(810,0)">
          <desc>The fourth invokes ShiftBGAndBlur on the triangle.</desc>
          <rect x="25" y="25" width="100" height="100" fill="red"/>
          <g opacity=".5">
               <circle cx="125" cy="75" r="45" fill="green"/>
               <polygon points="160,25 160,125 240,75" fill="blue" filter="url(#ShiftBGAndBlur)"/>
          </g>
          <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
     </g>
     <g enable-background="new" transform="translate(1080,0)">
          <desc>The fifth invokes ShiftBGAndBlur_WithSourceGraphic on the triangle.</desc>
          <rect x="25" y="25" width="100" height="100" fill="red"/>
          <g opacity=".5">
               <circle cx="125" cy="75" r="45" fill="green"/>
               <polygon points="160,25 160,125 240,75" fill="blue" filter="url(#ShiftBGAndBlur_WithSourceGraphic)"/>
          </g>
          <rect x="5" y="5" width="260" height="260" fill="none" stroke="blue"/>
     </g>
</svg>
Original SVG source