How do I reference an svg file?

CanJS
1

I am trying to reference a stacked svg file in my project but after a brief appearance on screen, it disappears leaving an empty element.

This code makes the svg flash for a second before disappearing

<svg role="img" width="70" height="70" >
    <use  xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../src/assets/images/icons.svg#logo" />
</svg>

this code works

<svg width="70px" height="70px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
    <path fill="#0AE" d="M4.66 5.05c-0.5 0-0.86-0.41-0.86-0.91c0-0.5 0.36-0.91 0.86-0.91c0.5 0 0.86 0.41 0.86 0.91 C5.52 4.64 5.16 5.05 4.66 5.05z"/>
    <path fill="#0AE" d="M10.23 11.24H9.35c-0.17 0-0.31-0.14-0.31-0.31V7.24c0-0.28-0.12-0.49-0.48-0.49c-0.5 0-0.86 0.48-0.86 1.15 v3.02c0 0.17-0.14 0.31-0.31 0.31H6.51c-0.17 0-0.31-0.14-0.31-0.31V5.88c0-0.17 0.14-0.31 0.31-0.31h0.67 c0.19 0 0.29 0.12 0.32 0.28l0.08 0.37c0.44-0.48 0.93-0.73 1.53-0.73c0.87 0 1.43 0.58 1.43 1.46v3.98 C10.55 11.1 10.41 11.24 10.23 11.24z"/>
    <path fill="#0AE" d="M13.52 13.61c-1.24 0-2.43-0.41-2.47-1.76c0-0.17 0.14-0.34 0.31-0.33l0.83 0.03 c0.19 0.01 0.24 0.12 0.29 0.29c0.12 0.47 0.59 0.59 1.07 0.59c0.75 0 1.1-0.3 1.1-0.68c0-0.4-0.15-0.51-0.72-0.51h-1.21 c-0.61 0-1.38-0.19-1.38-1.06c0-0.37 0.2-0.68 0.46-0.92c-0.48-0.36-0.77-0.93-0.77-1.65c0-1.35 0.88-2.11 2.24-2.11 c0.25 0 0.48 0.05 0.72 0.05h1.38c0.27 0 0.36 0.12 0.36 0.33v0.37c0 0.26-0.06 0.3-0.22 0.34l-0.3 0.07 c0.17 0.29 0.32 0.58 0.32 0.96c0 1.29-0.85 2.12-2.25 2.12c-0.19 0-0.37-0.02-0.54-0.06C12.7 9.76 12.67 9.8 12.67 9.9 c0 0.2 0.19 0.22 0.37 0.22h1.09c1.14 0 1.87 0.51 1.87 1.56C16 13.16 14.59 13.61 13.52 13.61z M13.3 6.63 c-0.44 0-0.78 0.13-0.78 0.97c0 0.89 0.35 1.02 0.78 1.02c0.39 0 0.79-0.17 0.79-1.02C14.08 6.75 13.72 6.63 13.3 6.63z"/>
    <path fill="#0AE" d="M5.12 5.57H2.41c0 0 0-1.29 0-1.3V3.91c0-0.18-0.14-0.31-0.31-0.31H1.22C1.04 3.6 0.9 3.74 0.9 3.91l0 1.65 H0.31C0.14 5.57 0 5.71 0 5.88v0.51c0 0.17 0.14 0.31 0.31 0.31H0.9v3.17c0 0.89 0.38 1.44 1.35 1.44c0.41 0 0.85-0.07 1.12-0.16 c0.15-0.05 0.22-0.16 0.2-0.31l-0.14-0.73C3.4 9.92 3.28 9.85 3.1 9.9C3.01 9.92 2.86 9.93 2.76 9.93c-0.21 0-0.35-0.14-0.35-0.45 V6.71h1.52v4.22c0 0.17 0.14 0.31 0.31 0.31h0.88c0.17 0 0.31-0.14 0.31-0.31V5.88C5.44 5.71 5.3 5.57 5.12 5.57z"/>
</svg>
2

what happens if you add use to namespaces similar to "svg":

3

No effect.

The weird part is that it is there when the page initially loads but then disappears, so my guess is that something is happening client-side but I can’t figure out what.

4

I’m having a similar issue with one of my SVG icons. Only the front-most layer disappears. No clue on the cause, yet.

5

Disappears visually, but is it still in the DOM? If it is, can you check the element’s namespace?

6

Namespace is http://www.w3.org/2000/svg

I can’t actually see if it’s in the dom because when I inspect it, there is a container the right size but it’s not displaying anything.

7

Can you create an issue? I’ll take a look at it.

8

github.com/donejs/donejs/issues/647