が「使用」タグは、ページ上だが、私はこの<a href="https://medium.com/" rel="nofollow">website</a>にこれらのHTMLコードを見て「DEF」タグ

Question

を見つけることができません。

<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を、など）を見つけるのですか？

Answer 1

彼らは<defs>の代わりに<symbol>タグを使用します。

<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>