Examples with images that will not load in Codepen

[spectranaut]

Unfortunately, in codepen we cannot use the <use xlink:href.... because of cross origin policies, so the button example will not be able to load the mute/sound icon. I replaced the <use... pattern with an inline SVG. Is this the approach we want? Is there a cleaner, better looking way to inline or reference these SVGs? The previous method was cool and I'm sad to take it out.

Here is the raw githack button example

The SVGs in the menubar editor aren't rendering for a different reason -- it's because the relative paths from the CSS file do not work in codepen because all of the resources are loaded without a file structure. I'm leaving this PR in Draft in case anyone wants to chime in with a way to solve that problem other then adding A LOT of inline SVGs in the menubar editor.

Here is the raw githack for the menubar editor

[carmacleod]

@spectranaut
I believe svg use href with a fragment id will work (I haven't done much svg, so not 100% sure, but I think it's worth a try 😄 ):

... first, define the svg in the document (create a group to contain the drawing code, and give the group an id):
<svg ...>
    <defs>
        <g id="checkmark">
            ... SVG content for drawing checkmark goes here ...
        </g>
    </defs>
</svg>

... then I think you can reuse the g content by pointing to its fragment id later in document
    (at least it would only take 3 lines, because you wouldn't need to repeat all the drawing code):
<svg viewBox=... ...>
   <use xlink:href="#checkmark" />
</svg>

... then you can reuse it again and again (I think):
<svg viewBox=... ...>
   <use xlink:href="#checkmark" />
</svg>

Notes:

• the defs element has display: none by default, so the initial defining svg won't be displayed
• xlink:href is deprecated in favor of just href, but I think (?) the xlink: part is still needed in order for it to work in Safari
• this article goes through an example

[spectranaut]

Wow @carmacleod I was also just looking into the same idea yesterday! Good to know there is a +1, I'll try it on some examples today.

[spectranaut]

closing in favor of #1642