social-media.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="display: none;">
    <symbol id="icon-twitter" viewBox="0 0 512 512">
	<title>Twitter</title>
        <desc>Icon, das zu dem Twitter-Account verlinkt</desc>
        <path d="m481 117c-13 18-28 34-46 47c0 3 0 7 0 12c0 25-3 50-11 74c-7 25-18 49-33 71c-14 23-32 43-52 61c-21 17-45 31-74 41c-29 11-60 16-92 16c-52 0-99-14-142-42c7 1 14 2 22 2c43 0 81-14 115-40c-20 0-38-6-54-18c-16-12-27-27-33-46c7 1 13 2 18 2c8 0 16-1 24-4c-21-4-39-15-53-31c-14-17-21-37-21-59l0-1c13 7 27 11 42 11c-13-8-23-19-30-32c-8-14-11-29-11-44c0-17 4-33 12-47c23 28 51 51 84 68c33 17 69 27 107 29c-2-8-3-15-3-22c0-25 9-47 27-65c18-18 40-27 66-27c26 0 49 10 67 29c21-4 40-11 59-22c-7 22-21 39-41 51c18-2 35-7 53-14z"/>
    </symbol>

    <symbol id="icon-facebook" viewBox="0 0 512 512">
        <title>Facebook</title>
        <desc>Icon, das zu dem Facebook-Account verlinkt</desc>
        <path d="m292 159l74 0l-9 81l-65 0l0 235l-97 0l0-235l-49 0l0-81l49 0l0-49c0-35 8-61 24-79c17-18 44-26 81-26l65 0l0 81l-40 0c-8 0-14 0-18 2c-5 1-8 3-10 6c-2 4-3 7-4 10c0 3-1 8-1 14z"/>
    </symbol>

    <symbol id="icon-rss" viewBox="0 0 512 512">
        <title>RSS</title>
        <desc>Icon, das zum RSS-Feed verlinkt</desc>
        <path d="m165 384c0 15-6 28-16 39c-11 11-24 16-39 16c-16 0-28-5-39-16c-11-11-16-24-16-39c0-15 5-28 16-39c11-11 23-16 39-16c15 0 28 5 39 16c10 11 16 24 16 39z m146 35c0 5-1 10-5 14c-3 4-8 6-13 6l-39 0c-5 0-9-2-12-5c-4-3-6-7-6-12c-4-43-22-81-53-112c-31-31-68-48-112-52c-4-1-8-3-11-6c-4-3-5-8-5-12l0-39c0-5 2-10 6-13c3-4 7-5 12-5l2 0c30 2 59 10 87 23c28 13 52 30 74 52c22 21 39 46 52 74c13 28 20 57 23 87z m146 1c1 5-1 9-5 13c-3 4-8 6-13 6l-41 0c-5 0-9-2-13-5c-3-3-5-8-5-12c-3-41-12-80-29-117c-17-37-39-69-66-96c-27-27-59-49-96-66c-37-17-76-27-117-29c-5 0-9-2-12-6c-3-3-5-8-5-12l0-41c0-5 2-10 6-13c3-4 7-5 12-5l1 0c50 2 98 13 143 34c46 20 86 48 122 84c35 35 63 76 84 121c20 46 32 94 34 144z"/>
    </symbol>

    <symbol id="icon-google-plus" viewBox="0 0 512 512">
        <title>Google Plus</title>
        <desc>Icon, das zum Google-Plus-Profil verlinkt</desc>
        <path d="m504 236l-45 0 0-45-45 0 0 45-45 0 0 45 45 0 0 45 45 0 0-45 45 0m-338-45l0 54 90 0c-4 22-27 67-90 67-54 0-97-45-97-98 0-54 43-99 97-99 32 0 52 13 63 25l43-41c-27-27-63-42-106-42-88 0-158 69-158 157 0 87 70 156 158 156 90 0 151-62 151-152 0-11 0-18-2-27z"/>
    </symbol>
</svg>

Kann so genutzt werden:

<ul class="social">
    <li><a href="#"><svg class="icon-google-plus"><use xlink:href="social-media.svg#icon-google-plus"></use></svg></a></li>
    <li><a href="#"><svg class="icon-twitter"><use xlink:href="social-media.svg#icon-twitter"></use></svg></a></li>
    <li><a href="#"><svg class="icon-facebook"><use xlink:href="social-media.svg#icon-facebook"></use></svg></a></li>
    <li><a href="#"><svg class="icon-rss"><use xlink:href="social-media.svg#icon-rss"></use></svg></a></li>
</ul>