This Lesson is for PRO Members.

Subscribe today and get access to all lessons! Plus direct HD download
for offline use, member comment forums, and iTunes "podcast" RSS feed.
Level up your skills now!


Already subscribed? Sign In


30% off

1 Year Pro Membership

Load an External SVG Inside a “Use” Tag

Learn how to load a single SVG icon set from an external URL in order to take advantage of caching. This has the added benefit of not needing to include the same chunk of SVG on every page where icons are displayed. Since it’s the same resource being requested for each icon, the browser can cache the file as well.

Note: The SVG must be hosted on the same domain as the requested page.

Some older/less feature complete browsers don’t support this functionality. If you only care about the latest browsers, you can get away with not using a JavaScript polyfill (but you should still provide some sort of fallback). However, the svgxuse polyfill can help provide a cross browser experience, with the added necessity of a JavaScript dependency.

Please take a moment to tell your friends:

You must be a PRO Member to view code