Kadeem Laurie Kadeem Laurie - 2 months ago 7
HTML Question

How do you draw paths with SVG to show social media symbols

I've been experimenting alternatives to displaying images; namely PNG. I came across SVG and have been attempting to understand it. Could anyone explain how the paths are being drawn to display the social media icons.

The code is as follows:



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




Answer

I'm not sure what you mean by "source of the viewbox", but generally SVG's are just descriptions of how to draw the paths that make up the image. When you have:

<svg class="svg-icon icon icon--md">
  <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-twitter"></use>
</svg>

... the browser knows to lookup the "symbol-twitter" symbol and display it. It finds the symbol in the tag at the top of your snippet, and then sees the tag and draws that path on the screen, which appears to you as the twitter logo (see MDN).

Rather than rendering images pixel-by-pixel, like with PNGs, SVG's are rendered by procedurally by following the SVG tag instructions.