-3
私は画像の表示方法を試しています。すなわちPNGである。私はSVGに出会い、それを理解しようとしています。ソーシャルメディアのアイコンを表示するためにパスがどのように描かれているか誰にも説明できますか？次のようにソーシャルメディアシンボルを表示するためにSVGでパスを描く方法
コードは次のとおりです。
<div class="svg-container" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol viewBox="0 0 23.189 50.24" id="symbol-facebook"><path d="M5.26 16.42H0v8.59h5.26v25.23h10.12V24.91h7.06l.75-8.48h-7.81V11.6c0-2 .4-2.79 2.33-2.79h5.48V0h-7C8.66 0 5.26 3.31 5.26 9.66v6.76z"/></symbol>
<symbol viewBox="0 0 47.29 38.43" id="symbol-twitter"><path d="M47.29 4.55c-1.74.77-3.61 1.29-5.57 1.53 2-1.2 3.54-3.1 4.272-5.37a19.425 19.425 0 0 1-6.16 2.35A9.753 9.753 0 0 0 32.742 0C26.48 0 21.87 5.84 23.29 11.91c-8.06-.41-15.21-4.27-20-10.14-2.54 4.36-1.32 10.06 3 12.95a9.77 9.77 0 0 1-4.4-1.21c-.1 4.5 3.12 8.7 7.78 9.64a9.74 9.74 0 0 1-4.38.17 9.717 9.717 0 0 0 9.06 6.74c-4.08 3.2-9.22 4.62-14.36 4.02 4.29 2.75 9.39 4.36 14.87 4.36 18.01 0 28.19-15.22 27.58-28.86 1.91-1.38 3.55-3.08 4.85-5.03"/></symbol>
<symbol viewBox="120.6 5.13 58.8 49.74" id="symbol-medium">
<path d="M140.19,14.412v38.49c0,0.546-0.138,1.014-0.408,1.392c-0.27,0.378-0.672,0.576-1.2,0.576
c-0.372,0-0.732-0.091-1.08-0.265l-15.264-7.644c-0.462-0.216-0.846-0.588-1.164-1.098c-0.318-0.511-0.474-1.021-0.474-1.524V6.93
c0-0.438,0.108-0.81,0.33-1.116c0.216-0.306,0.534-0.462,0.954-0.462c0.306,0,0.786,0.162,1.446,0.492l16.77,8.4
C140.154,14.316,140.19,14.37,140.19,14.412L140.19,14.412z M142.29,17.73l17.521,28.417l-17.521-8.73V17.73z M179.4,18.318
v34.584c0,0.546-0.156,0.99-0.463,1.326c-0.306,0.342-0.72,0.51-1.248,0.51c-0.527,0-1.037-0.145-1.541-0.426l-14.467-7.219
L179.4,18.318z M179.305,14.382c0,0.066-2.809,4.656-8.418,13.764c-5.611,9.114-8.898,14.442-9.859,15.997L148.23,23.34
l10.631-17.292c0.373-0.612,0.943-0.918,1.705-0.918c0.306,0,0.588,0.066,0.852,0.198l17.754,8.862
C179.256,14.226,179.305,14.292,179.305,14.382L179.305,14.382z"/>
</symbol>
<symbol id="symbol-linkedin" viewBox="0 0 128 128">
<path d="M118.519,0H9.448C4.233,0,0,4.134,0,9.222v109.542C0,123.861,4.234,128,9.448,128h109.071c5.22,0,9.481-4.139,9.481-9.236
V9.222C128,4.134,123.739,0,118.519,0z M37.962,109.074H18.969V47.991h18.993V109.074z M28.467,39.639
c-6.086,0-11.005-4.933-11.005-11.012c0-6.072,4.919-11.005,11.005-11.005c6.069,0,11.002,4.933,11.002,11.005
C39.469,34.706,34.536,39.639,28.467,39.639z M109.067,109.074H90.104V79.37c0-7.088-0.139-16.199-9.868-16.199
c-9.88,0-11.387,7.718-11.387,15.685v30.219H49.87V47.991h18.213v8.343h0.259c2.535-4.801,8.729-9.866,17.965-9.866
c19.211,0,22.759,12.648,22.759,29.103L109.067,109.074L109.067,109.074z"/>
</symbol>
<symbol id="symbol-chevron" viewBox="121.187 12.958 59.062 34.058">
<polygon points="121.187,15.58 124.001,12.958 150.691,41.578 177.438,13.011 180.248,15.638 150.687,47.016"/>
</symbol>
<symbol id="symbol-instagram" viewBox="0 0 174.686 174.686">
<path d="M87.343,15.737c23.321,0,26.084,0.089,35.294,0.509c8.516,0.389,13.141,1.812,16.218,3.008
c4.077,1.585,6.987,3.478,10.043,6.534c3.057,3.056,4.949,5.966,6.534,10.042c1.195,3.078,2.619,7.703,3.007,16.219
c0.42,9.21,0.51,11.973,0.51,35.294s-0.09,26.084-0.51,35.294c-0.388,8.516-1.812,13.141-3.007,16.218
c-1.585,4.077-3.478,6.987-6.534,10.043c-3.056,3.057-5.966,4.949-10.043,6.534c-3.077,1.195-7.702,2.619-16.218,3.007
c-9.209,0.42-11.971,0.51-35.294,0.51s-26.085-0.09-35.294-0.51c-8.516-0.388-13.141-1.812-16.219-3.007
c-4.076-1.585-6.986-3.478-10.042-6.534c-3.057-3.056-4.949-5.966-6.534-10.043c-1.196-3.077-2.619-7.702-3.008-16.218
c-0.42-9.21-0.509-11.973-0.509-35.294s0.089-26.084,0.509-35.294c0.389-8.516,1.812-13.141,3.008-16.219
c1.585-4.076,3.478-6.986,6.534-10.042c3.056-3.057,5.966-4.949,10.042-6.534c3.078-1.196,7.703-2.619,16.219-3.008
C61.259,15.826,64.021,15.737,87.343,15.737 M87.343,0C63.622,0,60.647,0.101,51.331,0.525c-9.296,0.425-15.646,1.9-21.201,4.061
c-5.743,2.231-10.614,5.218-15.471,10.073C9.804,19.516,6.817,24.387,4.586,30.13c-2.16,5.556-3.636,11.905-4.061,21.201
C0.101,60.647,0,63.622,0,87.343s0.101,26.695,0.525,36.011c0.425,9.297,1.9,15.646,4.061,21.202
c2.231,5.743,5.218,10.614,10.073,15.471c4.856,4.855,9.728,7.842,15.471,10.074c5.556,2.158,11.905,3.635,21.201,4.06
c9.316,0.425,12.291,0.525,36.012,0.525s26.695-0.101,36.011-0.525c9.297-0.425,15.646-1.901,21.202-4.06
c5.743-2.232,10.614-5.219,15.471-10.074c4.855-4.856,7.842-9.728,10.074-15.471c2.158-5.556,3.635-11.905,4.06-21.202
c0.425-9.315,0.525-12.29,0.525-36.011s-0.101-26.695-0.525-36.012c-0.425-9.296-1.901-15.646-4.06-21.201
c-2.232-5.743-5.219-10.614-10.074-15.471c-4.856-4.855-9.728-7.842-15.471-10.073C139,2.426,132.65,0.95,123.354,0.525
C114.038,0.101,111.063,0,87.343,0L87.343,0z"/>
<path d="M87.343,42.491c-24.771,0-44.852,20.08-44.852,44.852c0,24.771,20.08,44.852,44.852,44.852
c24.771,0,44.852-20.081,44.852-44.852C132.194,62.571,112.113,42.491,87.343,42.491z M87.343,116.457
c-16.079,0-29.114-13.035-29.114-29.114s13.035-29.114,29.114-29.114s29.114,13.035,29.114,29.114S103.422,116.457,87.343,116.457z
"/>
<circle cx="133.966" cy="40.719" r="10.481"/>
</symbol>
</svg>
</div>
<div class="ltvt-social">
<div id="social-fixed" class="social social--floating social-fixed">
<ul class="social-list vertical ">
<li class="social-list__item social-list__item--vertical ">
<a data-ga-category="social" data-ga-action="click" data-ga-label="LinkedIn" href="" target="_blank" class="js-ga-track social-list__link">
<svg class="svg-icon icon icon--md">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-facebook"></use>
</svg>
</a>
</li>
<li class="social-list__item social-list__item--vertical ">
<a data-ga-category="social" data-ga-action="click" data-ga-label="" href="" target="_blank" class="js-ga-track social-list__link">
<svg class="svg-icon icon icon--md">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-twitter"></use>
</svg>
</a>
</li>
<li class="social-list__item social-list__item--vertical ">
<a data-ga-category="social" data-ga-action="click" data-ga-label="" href="" target="_blank" class="js-ga-track social-list__link">
<svg class="svg-icon icon icon--md">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-medium"></use>
</svg>
</a>
</li>
<li class="social-list__item social-list__item--vertical ">
<a data-ga-category="social" data-ga-action="click" data-ga-label="" href="" target="_blank" class="js-ga-track social-list__link">
<svg class="svg-icon icon icon--md">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-instagram"></use>
</svg>
</a>
</li>
</ul>
</div>