htmlxlink

Location of svg data referenced by xlink?


I need to understand, where the svg data from an xlink reference are located. More explicitly: In the following web page

enter image description here

the facebook icon (marked by me) is included by the html code

<a href="http://www.facebook.com/Continental" class="cwt-social-media-bar-link" target="_blank">
  <svg viewBox="0 0 70 70" class="cwt-smb cwt-smb-facebook" width="38px" height="38px">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-s-facebook"></use>
  </svg>
  <span class="cwt-sr-only">facebook</span>
</a> 

To my understanding, the reference "#icon-s-facebook" should reference the svg data that constitute the icon image. Unfortunately, I'm not able to find these svg data.

I saved the web page with firefox and the saved html document contains the following generated code, that is not part of the original html document:

<svg viewBox="0 0 70 70" id="icon-s-facebook" xmlns="http://www.w3.org/2000/svg">
  <title>icon-s-facebook</title>
  <g data-name="s-facebook">
    <path data-name="White" d="M66.17 1H3.83A2.83 2.83 0 0 0 1 3.83v62.34A2.83 2.83 0 0 0 3.83 69h33.3V43.5h-8.5V32.88h8.5v-8.5c0-8.78 5.56-13.1 13.4-13.1a72.71 72.71 0 0 1 7.92.4v9.18H53c-4.26 0-5.25 2-5.25 5v7h10.63L56.25 43.5h-8.5l.17 25.5h18.25A2.83 2.83 0 0 0 69 66.17V3.83A2.83 2.83 0 0 0 66.17 1z"></path>
  </g>
</svg>

There, the svg data for the icon are in the path tag.

Question: Where are these data located in the original web page?

PS: I know that xlink is deprecated, but I have to understand the mechanism in existing pages.


Solution

  • OK, I found the source. There is no magic.

    enter image description here

    The link

    https://www.continental-corporation.com/resource/blob/22752/4156b0b5ceb15cf13ade26773d9616b6/sprites-svg-data.svg

    that is loaded by an xhr request contains the data:

    <svg viewBox="0 0 70 70" id="icon-s-facebook" xmlns="http://www.w3.org/2000/svg">    
      <title>icon-s-facebook</title>
      <g data-name="s-facebook">
        <path data-name="White" d="M66.17 1H3.83A2.83 2.83 0 0 0 1 3.83v62.34A2.83 2.83 0 0 0 3.83 69h33.3V43.5h-8.5V32.88h8.5v-8.5c0-8.78 5.56-13.1 13.4-13.1a72.71 72.71 0 0 1 7.92.4v9.18H53c-4.26 0-5.25 2-5.25 5v7h10.63L56.25 43.5h-8.5l.17 25.5h18.25A2.83 2.83 0 0 0 69 66.17V3.83A2.83 2.83 0 0 0 66.17 1z"/>
      </g>
    </svg>