Improve SVG options

[timkelty]

Unfortunately, SVG references with use, by definition, don't allow cross-origin requests: w3c/svgwg#707

This means that Cloud users will be unable to use SVG/use with artifacts, because they will be cross-origin (cdn.craft.cloud).

A quick workaround is to simply stick the SVG in your templates/ directory, allowing it to be servable from your site's domain.

Even #9 wouldn't fix this, as even subdomains are considered cross-origin in this case.

[jamesmacwhite]

The easiest solution currently is using the webroot e.g.

{{ svg('@webroot/skin/craft-cloud.svg')|attr({
    'aria-hidden': 'true',
    width: 20
}) }}

Which directly injects the SVG into a template.

[timkelty]

That does assume the SVG is sourced in the repo. If it is generated from your NPM build, it would be a little trickier.

[jamesmacwhite]

It does, but we find that's the easiest, having the SVG in the source repo

[timkelty]

This is solved by #9, which is now in opt-in beta testing.