2013-02-27 SVG Filters

I need help with SVG filters. This question is also on StackOverflow.

This is what I want to achieve:

/pics/8511938807_5a793d726a.jpg

Previously, I’d duplicate the text element, make the background white, and blur it:

  <defs>
    <filter id="label-glow">
      <feGaussianBlur stdDeviation="1" />
    </filter>
  </defs>
  <text stroke="white" stroke-width="5" filter="url(#label-glow)">Harald's Repose</text>
  <text>Harald's Repose</text>

I’m trying not to duplicate the text element. Here’s how to do it using filters:

  <defs>
    <filter id="label-glow">
      <feFlood flood-color="white"/>
      <feComposite in2="SourceGraphic" operator="in"/>
      <feGaussianBlur stdDeviation="2"/>
      <feComposite operator="over"/>
      <feComposite operator="over"/>
      <feComposite operator="over"/>
      <feComposite operator="over"/>
      <feComposite in="SourceGraphic"/>
    </filter>
  </defs>
  <text filter="url(#label-glow)">Harald's Repose</text>

Unfortunately the output of the Gaussian blur is very weak which is why I need to overlay it multiple times. What am I missing?

Update*: As I’ve been experimenting with it, I’ve decided to drop filters altogether. When using Firefox and printing the map to PDF, the filters all result in bitmap elements that don’t scale well.

#SVG #Software