SVG filter not rendering when viewed from hard drive

Question

I'm not able to view an SVG filter effect when rendering the code for a custom SVG file in a browser on my OS X hard drive. I've established that I can display SVG filter effects from my hard drive, just not on this custom SVG file. I've also tried some things from other StackOverflow posts to try to fix this, with interesting but ultimately unsuccessful results.

I'm seeking help getting the W3.org example effect to work on my test image.

Establishing that I can show SVG effects

To assure myself that I could display SVG effects from .svg files on my hard drive, I used the W3.org example found at http://www.w3.org/TR/SVG/images/filters/filters01.svg

Using the code unchanged actually works. Steps:

1. Save as local hard drive file file:///Users/[username]/Pictures/svg/w3orgfiltertest.svg
2. Open file in Firefox or Safari

Actual and expected results: Filter effect occurs.

So far so good.

Trying to apply those effects to an existing complex file

Next, I download the file at https://commons.wikimedia.org/wiki/File:KHHRMEN.svg (Copyright by Taiwan Junior under Creative Commons 3.0 with remix permission) to my hard drive with the .svg extension.

The version I am working on has 17635 lines.

I insert </g> between lines 189 and 190, just before the </g> and <g id="車站"> tags (where "車站" means "station").

I insert <g filter="url(#MyFilter)" > between lines 15 and 16, after the <rect> tag and before the next <g> tag.

The above two changes wrap all line drawings of rail lines with the filter attribute.

And finally the following code between lines 5 and 6, between the <svg> and <rect> tags:

<defs>
        <filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">
      <feGaussianBlur in="SourceAlpha" stdDeviation="4" result="blur"/>
      <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>
      <feSpecularLighting in="blur" surfaceScale="5" specularConstant=".75" 
                          specularExponent="20" lighting-color="#bbbbbb"  
                          result="specOut">
        <fePointLight x="-5000" y="-10000" z="20000"/>
      </feSpecularLighting>
      <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut"/>
      <feComposite in="SourceGraphic" in2="specOut" operator="arithmetic" 
                   k1="0" k2="1" k3="1" k4="0" result="litPaint"/>
      <feMerge>
        <feMergeNode in="offsetBlur"/>
        <feMergeNode in="litPaint"/>
      </feMerge> 
    </filter>
  </defs>

Next I open the file from my hard drive in Safari.

Actual result: The rail lines no longer display.

Expected result: The rail lines display with the effect.

Next I follow the suggestion at How to apply SVG filter to an element? to add the namespace filter. This changes

<g filter="url(#MyFilter)" >

now at line 34 to

<g filter="filter:url(#MyFilter)" >

Actual result: Rail lines are restored without SVG effect.

Expected result: Rail lines are restored with SVG effect.

Oddly, if I add the filter namespace to my hard drive version of the W3.org example code, their example filter stops working.

Next, I tried the tip at SVG not working when access on localhost. Why?. I'm using the .svg extension, not .html, but if I change the extension to .xhtml it gives the same results as with the .svg extension, both for the W3.org example and the complex file.

Finally, I tried the tip at SVG filter fails to render in Firefox and prevents fill attribute from being applied and replaced

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

with

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="w3.org/2001/xml-events" x="0px" y="0px" width="6452px"
 height="9134.5px" viewBox="0 0 6452 9134.5" enable-background="new 0 0 6452 9134.5" xml:space="preserve">

with no apparent effect.

Any idea how to allow me to add the filter effect to the complex file?

Answer 1

The filter you copied says:

<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="200" height="120">

which means that it applies to a rectangle at the top left with a width of 200 and a height of 120. In the SVG you copied, this is roughly everything between the top left corner and the boxed text "TRA Trunk Line" - there is only empty space.

Try applying the filter to the whole image area. The viewBox attribute says viewBox="0 0 6452 9134.5", so use those values in your filter:

<filter id="MyFilter" filterUnits="userSpaceOnUse" x="0" y="0" width="6452" height="9134.5">