SVG Sprites & Allow Embed inside a link

Several Webflow sites I have built in the past where they are icon heavy suffer from too many HTTP requests. When adding an SVG as an image it creates an http request for each one.

My solution to this is using SVG sprites, I do this by creating an embed for each icon eg:

<svg viewBox="0 0 100 100" class="icon pencil"> <use xlink:href="#shape-codepen"></use></svg>

Unfortunately this is hard to implement in Webflow for 2 main reasons.

  • An embed character limit makes it impossible to include more than several icons in an svg sprite.
  • Cannot use SVG icon inside a link due to Webflow limiting Embeds inside links. 

This means no way to have a menu with svg use icons inside it.

  • Andy Neale
  • Mar 22 2018
  • Michael Wells commented
    25 Jan, 2019 08:08am

    Andy, have a look at my recommended solution here- I think it solves this and a number of other styling and inline-embedding challenges for SVG's.

    However one thing I'm not certain of is whether there is a fundamental conflict between SVG's xlink:href and a containing HTML A href. Ultimately that still has the potential for the link-within-link conflict, and may be unsupported by some browsers, or the HTML standard itself?  Haven't found any references to this on Google though. 

  • Joel Auge commented
    18 Oct, 2018 02:29pm

    I want to start using several repeating icons across a site as well; using a sprite would dramatically decrease kbs, and better still t the sprite source can be changed and update the iconography across the site with one simple update.

  • and 13 more