SVG Sprite

svg.php

<svg style="display:none">
  <defs>
    <?php /*

    This include defines several SVG images which may be called multiple times
    By defining them all in this hidden SVG as an icon system we can call them
    using the <use> to hopefully make everything easier to maintain.

    Commented out you will find examples of the <use> with a11y considerations
    and default styling classes.


    Chevron - arrow down

    If this element is not interactive, remove aria tag, title, desc,
    and use aria-hidden="true" as on the Content Arrow

    <svg class="chevron" role="img" viewBox="0 0 44 23" aria-labelledby="chevron_title chevron_desc">
      <title id="chevron_title">Next</title>
      <desc id="chevron_desc">An icon pointing downward calling to action the next item</desc>
      <use xlink:href="#chevron-down"></use>
    </svg>
    */
    ?>
    <symbol>
      <g id="chevron-down">
        <path transform="translate(21.920310, 0.920310) rotate(-315.000000) translate(-21.920310, -0.920310)" d="M36.4323726,16.4203102 L37.4203102,15.4323726 L36.4323726,15.4323726 L36.4323726,16.4203102 Z M36.4323726,-13.5917522 L37.4203102,-14.5796898 L37.4203102,16.4203102 L6.42031022,16.4203102 L7.40824785,15.4323726 L36.4323726,15.4323726 L36.4323726,-13.5917522 Z M37.4203102,15.4323726 L36.4323726,16.4203102 L36.4323726,15.4323726 L37.4203102,15.4323726 Z M36.4323726,-13.5917522 L37.4203102,-14.5796898 L37.4203102,16.4203102 L6.42031022,16.4203102 L7.40824785,15.4323726 L36.4323726,15.4323726 L36.4323726,-13.5917522 Z"></path>
      </g>
    </symbol>

    <?php /*

    Content Arrow - triangle pointing right

    <svg class="content-arrow" viewBox="0 0 13 15" aria-hidden="true">
      <use xlink:href="#content-arrow"></use>
    </svg>
    */
    ?>
    <symbol>
      <g id="content-arrow">
        <path d="M12.4114433,7.56249352 L0.55428631,14.1517871 C0.277500266,14.303573 0.0542857143,14.1696443 0.0542857143,13.8571439 L0.0542857143,0.714271069 C0.0542857143,0.401770696 0.277500266,0.267841965 0.55428631,0.41962786 L12.4114433,7.00892143 C12.6882293,7.16070732 12.6882293,7.41070762 12.4114433,7.56249352 Z"></path>
      </g>
    </symbol>

    <?php /*

    Facebook icon

    <svg class="footer__social" role="img" viewBox="0 0 448 512" aria-labelledby="facebook_title facebook_desc">
      <title id="facebook_title">Facebook</title>
      <desc id="facebook_desc">Connect with us on Facebook</desc>
      <use xlink:href="#icon-facebook"></use>
    </svg>
    */
    ?>
    <symbol>
      <g id="icon-facebook">
        <path d="M448 56.7v398.5c0 13.7-11.1 24.7-24.7 24.7H309.1V306.5h58.2l8.7-67.6h-67v-43.2c0-19.6 5.4-32.9 33.5-32.9h35.8v-60.5c-6.2-.8-27.4-2.7-52.2-2.7-51.6 0-87 31.5-87 89.4v49.9h-58.4v67.6h58.4V480H24.7C11.1 480 0 468.9 0 455.3V56.7C0 43.1 11.1 32 24.7 32h398.5c13.7 0 24.8 11.1 24.8 24.7z"/>
      </g>
    </symbol>

    <?php /*

    instagram icon

    <svg class="footer__social" role="img" viewBox="0 0 448 512" aria-labelledby="instagram_title instagram_desc">
      <title id="instagram_title">instagram</title>
      <desc id="instagram_desc">Connect with us on instagram</desc>
      <use xlink:href="#icon-instagram"></use>
    </svg>
    */
    ?>
    <symbol>
      <g id="icon-instagram">
        <path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/>
      </g>
    </symbol>

    <?php /*

    twitter icon

    <svg class="footer__social" role="img" viewBox="0 0 512 512" aria-labelledby="twitter_title twitter_desc">
      <title id="twitter_title">twitter</title>
      <desc id="twitter_desc">Connect with us on twitter</desc>
      <use xlink:href="#icon-twitter"></use>
    </svg>
    */
    ?>
    <symbol>
      <g id="icon-twitter">
        <path d="M459.37 151.716c.325 4.548.325 9.097.325 13.645 0 138.72-105.583 298.558-298.558 298.558-59.452 0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055 0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421 0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391 0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04 0-57.828 46.782-104.934 104.934-104.934 30.213 0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/>
      </g>
    </symbol>

    <?php /*

    youtube icon

    <svg class="footer__social" role="img" viewBox="0 0 576 512" aria-labelledby="youtube_title youtube_desc">
      <title id="youtube_title">youtube</title>
      <desc id="youtube_desc">Watch us on youtube</desc>
      <use xlink:href="#icon-youtube"></use>
    </svg>
    */
    ?>
    <symbol>
      <g id="icon-youtube">
        <path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/>
      </g>
    </symbol>
  </defs>
</svg>