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
  • Joel Auge commented
    October 18, 2018 14:29

    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.

  • Michael Wells commented
    25 Jan 08:08

    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.