Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Other What is the best way to use svg symbols from a performance perspective?

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #242432
    magicspon
    Participant

    Hello,

    Is there a preferred method for using svg symbols.

    I am in favour of injecting the svg symbol code directly into the html mark up. And then using the <use> tag reference the symbols id.

    <i class="icon icon--icon-email">
    <svg>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-email"></use>
    </svg>
    </i>

    My colleague references an external svg symbol file, with the symbol id appended on the end of the file name. He then uses svg4everybody to give styling support for ie.

    <i class="icon icon--icon-email">
    <svg>
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/_assets/image/svg-symbols.svg#icon-email"></use>
    </svg>
    </i>

    I’m thinking inline is probably better. less requests and no need for the extra js.

    Any thoughts

    Cheers

Viewing 1 post (of 1 total)
  • The forum ‘Other’ is closed to new topics and replies.