I'm currently facing an issue with referencing SVG filters from CSS, where both are external files.
While it works perfectly fine when the SVG filter defs are inline, I encounter problems when they are in an external file. I prefer not to have the SVG inline to prevent bloating the HTML file.
Based on information from this source, it should work if the svg originates from the "same origins" as the html. However, I'm unsure of what exactly qualifies as "same origins."
Here is my directory structure:
- index.html
- \css
I've tried the following methods without success:
- Placing the svg file in the root directory along with index.html
- Also in the css directory
- Using path url(css/test.svg#LightItUp);
- Embedding the css inline like so: #LightItUp {filter:url(css/test.svg#LightItUp);}
The SVG content:
<svg width="500" height="262" viewBox="0 0 200 150">
<defs>
<filter id="LightItUp" filterUnits="userSpaceOnUse" x="0" y="0" width="400" height="420">
<!-- Apply a uniform blur of the alpha channel -->
<feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
</filter>
</defs>
</svg>
The CSS content:
.logo { filter: url(test.svg#LightItUp); }
Any assistance on this matter would be highly appreciated.