title: Where to place external svg file to be referenced by CSS?
body: <p>I'm trying to reference SVG filters from CSS. Both are external.</p>
  
  <p>It works fine when the SVG filter defs are inline but does not work when in external file.
  I do not want the SVG inline to avoid a bloated html file.</p>
  
  <p>According to this <a href="https://developer.mozilla.org/en-US/docs/Applying_SVG_effects_to_HTML_content" rel="nofollow">link</a>, it should work if the svg comes from the "same origins" as the html. I'm not clear what "same origins" means.</p>
  
  <p>My directory structure is:
  index.html
  \css</p>
  
  <p>I tried all these without success:</p>
  
  <ul>
  <li>putting the svg file on root with index</li>
  <li>as well as in the css directory</li>
  <li>using path url(css/test.svg#LightItUp);</li>
  <li>putting the css inline like so: #LightItUp {filter:url(css/test.svg#LightItUp);}</li>
  </ul>
  
  <p>The svg content:</p>
  
  <pre><code>&lt;svg width="500" height="262" viewBox="0 0 200 150"  &gt;
  &lt;defs&gt; 
    &lt;filter id="LightItUp" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="420"&gt;
  
    &lt;!-- Apply a uniform blur of the 
         alpha channel --&gt;
    &lt;feGaussianBlur in="SourceAlpha" 
       stdDeviation="3" result="blur"/&gt;
    &lt;/filter&gt;
  &lt;/defs&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>The css content:</p>
  
  <pre><code>.logo  { filter: url(test.svg#LightItUp);   }
  </code></pre>
  
  <p>Any help will be appreciated</p>