页面上有一个“use”标签，但我找不到“def”标签答案

【问题标题】：there's a 'use' tag on the page, but I cannot find the 'def' tag页面上有一个“use”标签，但我找不到“def”标签
【发布时间】：2016-03-20 07:46:27
【问题描述】：

我在 website 上看到了那些 html 代码：

<a href="https://medium.com/" class="siteNav-logo" data-log-event="home">
    <svg viewBox="0 0 45 45" width="45" height="45" class="svgIcon svgIcon--logoNew svgIcon-size--45px">
        <use class="svgIcon-use svgIcon-use--part0" xlink:href="#svg-logoNew-45px-p0"></use>
        <use class="svgIcon-use svgIcon-use--part1" xlink:href="#svg-logoNew-45px-p1"></use>
        <use class="svgIcon-use svgIcon-use--part2" xlink:href="#svg-logoNew-45px-p2"></use>
        <use class="svgIcon-use svgIcon-use--part3" xlink:href="#svg-logoNew-45px-p3"></use>
    </svg>
    <svg viewBox="0 0 95 45" width="95" height="45" class="svgIcon svgIcon--logoWordmarkNew svgIcon-size--95x45px">
        <use class="svgIcon-use svgIcon-use--part0" xlink:href="#svg-logoWordmarkNew-95x45px-p0"></use>
    </svg><span class="u-textScreenReader">Homepage</span>
</a>

通常当svg 内部有use 标签时，您需要使用defs 标签来指定use 引用的具体形状。如下：

<svg>
  <defs>
    <g id="shape">
        <rect x="50" y="50" width="50" height="50" />
        <circle cx="50" cy="50" r="50" />
    </g>
  </defs>

  <use xlink:href="#shape" x="50" y="50" />
  <use xlink:href="#shape" x="200" y="50" />

</svg>

但是我在页面上找不到任何defs标签，那么浏览器在哪里找到这些外部svgs（#svg-logoNew-45px-p0、#svg-logoNew-45px-p1等）？

【问题讨论】：

标签： javascript html css svg

【解决方案1】：

他们使用<symbol> 标签而不是<defs>：

<div style="display: none;">
    <svg xmlns="http://www.w3.org/2000/svg">
        <symbol viewBox="-17 18 45 45" id="svg-logoNew-45px-p0">...</symbol>
    </svg>
</div>

【讨论】：