SVG use linked from an external source not showing svg data
SVG use linked from an external source not showing svg data
I have an html page with two svg use elements:
The first references inline svg.
The second references an external svg file (same code).
I am trying to figure out why the second example does not show the svg paths even though the SVG code that is inline is exactly the same as the SVG code in the linked file.
https://s3.amazonaws.com/jagger/svg/index.html
<svg class="svg-inline">
<use xlink:href="#test" />
</svg>
<svg class="svg-external">
<use xlink:href="sprite.svg#test" />
</svg>
<svg width="0" height="0">
<symbol id="test" viewBox="0 0 600 600">
<title>Test Icon</title>
<rect id="svg_2" height="214.39594" width="481.62782" y="10" x="10" stroke-width="5" stroke="#000000" fill="none"/>
<line fill="none" stroke="#000000" stroke-width="5" x1="10" y1="10" x2="400" y2="400" id="svg_1"/>
</symbol>
</svg>
@RobertLongson Same issue would occur if I hosted the svg file locally and linked to xlink:href="sprite.svg#test"
– Jagger
Oct 10 '16 at 15:18
Not on Firefox it wouldn't, we've tests in the build process that such a thing works correctly.
– Robert Longson
Oct 10 '16 at 15:19
I uploaded the index.html to the same host. <use> is using href="sprite.svg#test". Should this work in Firefox: s3.amazonaws.com/jagger/svg/index.html
– Jagger
Oct 10 '16 at 15:44
No, because your external SVG file is invalid (it does not have namespaces defined). If you view the sprite.svg file directly your UA will tell you this, something along the lines of "This XML file does not appear to have any style information associated with it. The document tree is shown below."
– Robert Longson
Oct 10 '16 at 16:05
1 Answer
1
using of external sprite is working in the latest version of all modern browsers
for IE (and older browsers) just use polyfill svg4everybody
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
use links must be same domain. Your's isn't so fails.
– Robert Longson
Oct 8 '16 at 6:01