# SVG symbol mask anomaly

**URL:** https://forum.kirupa.com/t/svg-symbol-mask-anomaly/652033
**Category:** Uncategorized
**Created:** [May 31, 2022, 1:56am UTC](https://forum.kirupa.com/t/svg-symbol-mask-anomaly/652033 "2022-05-31T01:56:11Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)
#### Post date: [May 31, 2022, 1:56am UTC](https://forum.kirupa.com/t/svg-symbol-mask-anomaly/652033/1 "2022-05-31T01:56:11Z")

</div>

Hey guys,

I have an SVG icon that I want to use on a page as a `<symbol>` that has a `<mask>` and `<filter>` applied to it.

When I embed the SVG inline and use it like so, there are no issues…

```auto
<svg class = 'svg-icon' fill = "none" version="1.1" xmlns="http://www.w3.org/2000/svg">
 <use href="#example" xlink:href = "#example" />
</svg>

<svg fill = "none" version="1.1" xmlns="http://www.w3.org/2000/svg">
<symbol id = "example" viewBox="0 0 84.062 84.062" >
-------------------- path, path, mask, filter----------------
</symbol>
<svg>

```

When I shift the svg with `<symbol>` to another file `symbols.svg` and reference it like this…

```auto
<svg class = 'svg-icon' fill = "none" version="1.1" xmlns="http://www.w3.org/2000/svg">
 <use href="./symbols.svg#example" xlink:href = "./symbols.svg#example" />
</svg>

```

It “imports” the svg without the `<mask>` applied…

There is **absolutely** no difference between the `XML` applied inline and in the file… only the location…

TBH I dont often used `<mask>`… and there are no issues with the `<filter>` (drop shadow)…

Does anybody have any idea why this occurring?.. 🙂

---

<div class="post-metadata">

### Author: ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)
#### Post date: [May 31, 2022, 2:13am UTC](https://forum.kirupa.com/t/svg-symbol-mask-anomaly/652033/2 "2022-05-31T02:13:53Z")

</div>

Weirdly there is exactly the same behavior when the inline reference svg is set to `display: none` ( to not appear in the layout)…