Skip to content

Instantly share code, notes, and snippets.

Created September 23, 2015 18:21
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
What would you like to do?
Difference Between Inline SVG reference and External reference
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
.icon {
width: 100px;
height: 100px;
.pencil-path {
fill: green;
<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="" xmlns:xlink="">
<symbol id="icon-spades" viewBox="0 0 1024 1024">
<path class="spade-path" d="M817.57 348.15c-193.566-143.858-260.266-259.018-305.566-348.148v0c-0.004 0-0.004-0.002-0.004-0.002v0.002c-45.296 89.13-112 204.292-305.566 348.148-330.036 245.286-19.376 587.668 253.758 399.224-17.796 116.93-78.53 202.172-140.208 238.882v37.744h384.032v-37.74c-61.682-36.708-122.41-121.954-140.212-238.884 273.136 188.446 583.8-153.94 253.766-399.226z"></path>
<!-- INTERNAL -->
<svg class="icon">
<use xlink:href="#icon-spades" />
<!-- EXTERNAL -->
<svg class="icon">
<use xlink:href="test-ext-svgdefs.svg#icon-pencil" />
var one = document.querySelectorAll(".spade-path");
var two = document.querySelectorAll(".pencil-path");
Display the source blob
Display the rendered blob
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Copy link

Aha my console is loaded with warnings and errors

Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”). Source: (function injected(eventName, injectedIn...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment