# DOM.uid not compatible with SVG downloading **URL:** \ **Category:** Uncategorized\ **Created:** [December 1, 2018, 6:53pm UTC](https://talk.observablehq.com/t/dom-uid-not-compatible-with-svg-downloading/1450 "2018-12-01T18:53:37Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\ **Post date:** [December 1, 2018, 6:53pm UTC](https://talk.observablehq.com/t/dom-uid-not-compatible-with-svg-downloading/1450/1 "2018-12-01T18:53:37Z")
Example at [https://beta.observablehq.com/@fil/contour-labels-svg](https://beta.observablehq.com/@fil/contour-labels-svg) 🙂 if I use DOM.uid for the mask (to hide the white stroke under the white labels), it will work on Safari, but then I can’t use the downloaded SVG (and, vice-versa.) ---
**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\ **Post date:** [December 1, 2018, 9:45pm UTC](https://talk.observablehq.com/t/dom-uid-not-compatible-with-svg-downloading/1450/2 "2018-12-01T21:45:36Z")
Interesting! What follows are some observations from testing and messing around in Firefox, Chrome and Safari (on macOS)… unfortunately, I wasn’t able to figure out how to fix your issue, but maybe some of what follows will be helpful: Both the downloaded SVG and the SVG embedded in (the current version of) your notebook display properly in both Firefox and Chrome (i.e. the masks properly occlude the strokes). Using Safari, the masks don’t work when embedded in the notebook but they do appear in the downloaded SVG. I was able to edit a stroke element of the SVG in your notebook using Safari’s DOM inspector and get the mask to work by doing the following: - First, apparently you have to use the `-webkit-mask` style attribute instead of the `mask` attribute for Safari. See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/mask#Browser_compatibility). I ended up with something like this: ![Imgur](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/6/6a935f18d0e198e699fffa4eace690f64a79f9cd.png) - Second, Safari [apparently doesn’t deal well with URLs in SVGs when the tag is around](https://stackoverflow.com/a/44116525/). After I deleted the base node (inside the “worker” Observable iframe), the mask for that element started to work properly. It’s easy enough to [edit your notebook so that it adds a `-webkit-mask` style attribute in addition to the `mask` attribute](https://beta.observablehq.com/d/70b0eb3c0d28a135) which should take care of the first point. I don’t know how to deal with the second one, but I found some weird (browser-dependent) behavior when saving from my fork, which I guess is possible because of the way the `serialize` function works. - If I save the SVG using that notebook in Firefox, the `-webkit-mask` is replaced by `mask` in all of the style attributes. Chrome and Safari don’t do this. Fortunately, it seems like the masks work in the resulting SVG in all 3 browsers without issue. (Recall that Safari only had trouble with the notebook version anyways) - However, if I open that fork in Safari and then save an SVG, the `-webkit-mask` property values become `url(https://beta.observablehq.com/...#...)` instead of just `url(#...)`. Firefox and Chrome don’t do this. Oddly enough, what this means is that the masks in this saved SVG don’t work in Firefox (though they do in Chrome and Safari). ---
**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\ **Post date:** [December 2, 2018, 1:16am UTC](https://talk.observablehq.com/t/dom-uid-not-compatible-with-svg-downloading/1450/3 "2018-12-02T01:16:46Z")
The CSS Values specification (albeit draft?) defines the intended behavior for local URLs: [https://www.w3.org/TR/css-values-4/#local-urls](https://www.w3.org/TR/css-values-4/#local-urls) > If a [url()](https://www.w3.org/TR/css-values-4/#funcdef-url)’s value starts with a U+0023 NUMBER SIGN ( `#` ) character, parse it as per normal for URLs, but additionally set the local url flag of the url(). > > When matching a [url()](https://www.w3.org/TR/css-values-4/#funcdef-url) with the [local url flag](https://www.w3.org/TR/css-values-4/#url-local-url-flag) set, ignore everything but the URL’s fragment, and resolve that fragment against the current document that relative URLs are resolved against. This reference must always be treated as same-document (rather than cross-document). Unfortunately, Firefox and Safari don’t (yet?) conform to this behavior, and the base element we add to the sandboxed iframe break local fragments. I suspect it’d be pretty easy to patch the `serialize` function in @mbostock/saving-svg to strip the absolute URLs and replace them with fragment identifiers, if you want to fork my notebook and propose some changes. 😉 ---
**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\ **Post date:** [December 2, 2018, 6:45pm UTC](https://talk.observablehq.com/t/dom-uid-not-compatible-with-svg-downloading/1450/4 "2018-12-02T18:45:12Z")
I’ve [added a little logic](https://beta.observablehq.com/compare/576f8943dbfbd395@98...576f8943dbfbd395@100) to @mbostock/saving-svg so that it now preserves the local-ness of local URLs when serializing. ---
**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\ **Post date:** [December 2, 2018, 6:59pm UTC](https://talk.observablehq.com/t/dom-uid-not-compatible-with-svg-downloading/1450/5 "2018-12-02T18:59:17Z")
You’re too fast 🙂