Skip to content

Instantly share code, notes, and snippets.

@sparkalow
Created March 9, 2023 16:17
Show Gist options
  • Save sparkalow/613bf0dca2d0ed24b912a143f41a80d9 to your computer and use it in GitHub Desktop.
Save sparkalow/613bf0dca2d0ed24b912a143f41a80d9 to your computer and use it in GitHub Desktop.
Using SVG symbol example
<!--
define symbol using <defs> tag, include viewBox attribute on symbol and visually hide the svg
multiple symobls can be defined with unique id's
-->
<svg xmlns="http://www.w3.org/2000/svg" hidden>
<defs>
<symbol id="logo-symbol" viewBox="0 0 341 127">
<path fill="#FFF" d="m136.3 60.1 8.3-59h19.2v85h-12.6V25.2l-.6-.1-9.2 60.9h-11.5l-9-59.6h-.5V86h-12.1V1h19.3l8.3 59.1h.4m145.1-2.5-5.6-39.7h-.5l-5.5 39.7h11.6Zm-15.7 28.5H253L266.8.8h18.5L299.2 86h-13.6l-2.5-16.4-14.9.1-2.5 16.4m-57.4 0h-36.4v-85h36.4v12h-22.9v22.2h18.1v12.6h-18v25.9h22.8v12.3Zm33.8 0h-13.6V13.3h-14V1.1h41.3v12h-13.7v73ZM319 73.8h21.7V86h-35.3V1H319v72.8ZM39.9 25.7H27c0-2.2.1-4.3 0-6.4-.2-3.8-2.4-5.9-5.9-6.1-3.7-.2-6.2 1.7-6.8 5.5-.8 5.1.7 9.6 4.2 13.4 2.8 3 5.9 5.8 9 8.7 5.3 5 10.7 10.1 11.9 17.5.8 4.9 1 10.1.2 14.9-1.4 8.5-7.5 13.5-16.3 14.2a35 35 0 0 1-9.7-.6c-5-1-8.7-3.9-10.9-8.5A33.4 33.4 0 0 1 .3 61.7h13v6.8c.2 4.5 2.4 6.8 6.5 6.9 4.1.1 6.3-1.9 6.9-6.4.7-5.7-1.1-10.6-5-14.6-3-3.1-6.2-5.8-9.3-8.8-5.3-5-10.3-10.4-11.2-17.9A42 42 0 0 1 1.8 14C3.6 6.3 9.9 1.7 18.1 1.3a30 30 0 0 1 6.7.2 16.9 16.9 0 0 1 15.2 16c.1 2.5-.1 5.2-.1 8.2m33.8-6.9c-.3-3.8-2.9-5.7-6.7-5.5-3.8.1-6.2 2.1-6.3 6a745 745 0 0 0 0 29.9c.1 3.9 2.5 5.9 6.2 6.1 3.9.2 6.5-1.7 6.8-5.7.4-5.1.4-25.6 0-30.8m13.6 32c-1.5 13.8-12.4 18-23.8 16.5C53 65.9 47.5 60 47 48.5c-.5-10.4-.3-20.9.4-31.3.6-9.6 8.1-15.9 17.9-16 3.1 0 6.4.1 9.4.9 8.1 2.1 12.9 9 13.1 18.6.1 4.6.1 24.7-.5 30.1M67.5 74.7c3.4 0 5.6 2.2 5.6 5.7s-2.4 5.9-5.8 5.9a5.6 5.6 0 0 1-5.8-5.9c-.1-3.5 2.3-5.7 6-5.7M335.9 127c3.2 0 4.9-1.9 4.9-5.3 0-2.6-.8-4.2-3.5-6.6-2.1-1.9-2.8-3-2.8-4.5 0-1.4.6-2 1.6-2s1.6.6 1.6 2v1.1h3v-.7c0-3.3-1.6-5.2-4.7-5.2s-4.8 1.9-4.8 5.1c0 2.4.9 4 3.6 6.4 2.1 1.9 2.8 3 2.8 4.7 0 1.5-.6 2.1-1.7 2.1-1 0-1.7-.5-1.7-2v-1.4h-3v1.2c-.1 3.2 1.5 5.1 4.7 5.1m-15.4-12.1V109h1.5c1.1 0 1.6.6 1.6 2.1v1.6c0 1.7-.7 2.2-1.9 2.2h-1.2Zm-3.3 11.8h3.2v-8.9h1.1c1.5 0 2 .6 2 2.5v3.8c0 1.7.1 2 .3 2.5h3.3c-.3-.8-.4-1.5-.4-2.5v-3.6c0-2.3-.5-3.9-2.1-4.4v-.1c1.4-.6 2.1-1.9 2.1-4.1v-1.3c0-3.2-1.4-4.8-4.8-4.8h-4.8v20.9h.1Zm-9.7-2.6c-1 0-1.7-.6-1.7-2v-11.3c0-1.5.6-2 1.7-2 1 0 1.7.6 1.7 2V122c0 1.5-.6 2.1-1.7 2.1m0 2.9c3.2 0 4.9-1.9 4.9-5.2V111c0-3.3-1.7-5.2-4.9-5.2s-4.9 1.9-4.9 5.2v10.9c0 3.2 1.8 5.1 4.9 5.1m-15.3-.3h3.2V109h3.4v-3h-10v3h3.4v17.7Zm-12.4-6.8 1.4-10.2h.1l1.4 10.2h-2.9Zm-4 6.8h3l.6-4h3.7v-.1l.6 4.1h3.2l-3.3-20.7h-4.4l-3.4 20.7Zm-8.5.3c3.1 0 4.7-1.9 4.7-5.1V119h-3v3.2c0 1.4-.6 1.9-1.6 1.9s-1.6-.5-1.6-1.9v-11.5c0-1.4.6-1.9 1.6-1.9s1.6.6 1.6 1.9v2.4h3v-2.2c0-3.2-1.6-5.1-4.7-5.1s-4.7 1.9-4.7 5.1V122c0 3.1 1.6 5 4.7 5m-12.8-.3h3.2V106h-3.2v20.7Zm-11.2-11.8V109h1.5c1.1 0 1.6.6 1.6 2.1v1.6c0 1.7-.7 2.2-1.9 2.2h-1.2Zm-3.2 11.8h3.2v-8.9h1.1c1.5 0 2 .6 2 2.5v3.8c0 1.7.1 2 .3 2.5h3.3c-.3-.8-.4-1.5-.4-2.5v-3.6c0-2.3-.5-3.9-2.1-4.4v-.1c1.4-.6 2.1-1.9 2.1-4.1v-1.3c0-3.2-1.4-4.8-4.8-4.8H240v20.9h.1Zm-11.3-2.9v-6.3h1.4c1.5 0 2.1.6 2.1 2.5v1.8c0 1.5-.6 2-1.7 2h-1.8Zm0-9.3V109h1.6c1.1 0 1.6.6 1.6 2.1v1.2c0 1.7-.7 2.2-1.9 2.2h-1.3Zm-3.2 12.2h5.1c3.2 0 4.9-1.7 4.9-4.9V120c0-2.2-.7-3.7-2.4-4.3v-.1c1.4-.6 2.1-1.9 2.1-4v-.8c0-3.2-1.4-4.8-4.8-4.8h-4.9v20.7Zm-11.3-6.8 1.4-10.2h.1l1.4 10.2h-2.9Zm-3.9 6.8h3l.6-4h3.7v-.1l.6 4.1h3.2l-3.3-20.7h-4.4l-3.4 20.7Zm-10.9 0h3.2v-9h4.2v-3h-4.2V109h5.3v-3h-8.5v20.7Zm-20.1 0h8.5v-3h-5.3V106h-3.2v20.7Zm-11.3-6.8 1.4-10.2h.1l1.4 10.2h-2.9Zm-3.9 6.8h3l.6-4h3.7v-.1l.6 4.1h3.2L172 106h-4.4l-3.4 20.7Zm-8.6 0h3.2V109h3.4v-3h-10v3h3.4v17.7Zm-15.8 0h8.8v-3H143v-6.3h4.4v-3H143V109h5.6v-3h-8.8v20.7Zm-18.4 0h2.8v-15.6h.1l2.3 15.6h2.7l2.3-15.6h.1v15.6h3V106h-4.6l-2.1 14.8h-.1l-2.1-14.8h-4.6v20.7h.2Zm-22.5 0h2.9v-15.1h.1l3.9 15.1h3.3V106h-2.9v12.4h-.1L103 106h-4v20.7h-.1Zm-11.2-11.8V109h1.5c1.1 0 1.6.6 1.6 2.1v1.6c0 1.7-.7 2.2-1.9 2.2h-1.2Zm-3.2 11.8h3.2v-8.9h1.1c1.5 0 2 .6 2 2.5v3.8c0 1.7.1 2 .3 2.5h3.3c-.3-.8-.4-1.5-.4-2.5v-3.6c0-2.3-.5-3.9-2.1-4.4v-.1c1.4-.6 2.1-1.9 2.1-4.1v-1.3c0-3.2-1.4-4.8-4.8-4.8h-4.8v20.9h.1Zm-13.3 0H80v-3h-5.6v-6.3h4.4v-3h-4.4V109H80v-3h-8.8v20.7Zm-14.9 0h3.2v-9.3H63v9.3h3.2V106H63v8.4h-3.5V106h-3.2v20.7Zm-10.8 0h3.2V109h3.4v-3h-10v3h3.4v17.7Zm-12.3.3c3.2 0 4.8-1.9 4.8-5.2V106h-3.1v16c0 1.5-.6 2-1.6 2s-1.6-.5-1.6-2v-16h-3.2v15.8c-.1 3.3 1.6 5.2 4.7 5.2m-14.3-2.9c-1 0-1.7-.6-1.7-2v-11.3c0-1.5.6-2 1.7-2 1 0 1.7.6 1.7 2V122c-.1 1.5-.7 2.1-1.7 2.1m0 2.9c3.2 0 4.9-1.9 4.9-5.2V111c0-3.3-1.7-5.2-4.9-5.2S14 107.7 14 111v10.9c0 3.2 1.7 5.1 4.9 5.1m-14 0c3.2 0 4.9-1.9 4.9-5.3 0-2.6-.8-4.2-3.5-6.6-2.1-1.9-2.8-3-2.8-4.5 0-1.4.6-2 1.6-2s1.6.6 1.6 2v1.1h3v-.7c0-3.3-1.6-5.2-4.7-5.2s-4.8 1.9-4.8 5.1c0 2.4.9 4 3.6 6.4 2.1 1.9 2.8 3 2.8 4.7 0 1.5-.6 2.1-1.7 2.1-1 0-1.7-.5-1.7-2v-1.4h-3v1.2c-.1 3.2 1.5 5.1 4.7 5.1"/>
</symbol>
</defs>
</svg>
<!-- using the symbol -->
<a href="/">
<svg width="140" height="60">
<use href="#logo-symbol"/>
</svg>
</a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment