0

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>
Jagger
  • 41
  • 3
  • 7
  • use links must be same domain. Your's isn't so fails. – Robert Longson Oct 08 '16 at 06:01
  • @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. is using href="sprite.svg#test". Should this work in Firefox: https://s3.amazonaws.com/jagger/svg/index.html – Jagger Oct 10 '16 at 15:44
  • 1
    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 Answers1

0

using of external sprite is working in the latest version of all modern browsers

for IE (and older browsers) just use polyfill svg4everybody

Michal Miky Jankovský
  • 3,089
  • 1
  • 35
  • 36