我一直在试验显示图像的替代方案;即PNG。我遇到了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>
答案 0 :(得分：2)
我不确定“视图框的来源”是什么意思，但一般来说SVG只是描述如何绘制构成图像的路径。当你有：
<svg class="svg-icon icon icon--md">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-twitter"></use>
</svg>
...浏览器知道查找“symbol-twitter”符号并显示它。它会在代码段顶部的<svg>标记中找到该符号，然后会看到<path>标记，并在屏幕上绘制该路径，这在您看来是twitter徽标（请参阅{{3 }}）。
不是像PNG一样逐像素地渲染图像，而是渲染SVG 按照程序按照SVG标记说明进行操作。