Skip to content

Instantly share code, notes, and snippets.

Created September 23, 2015 18:21
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");
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Copy link

what is this supposed to be? All I see is a large grey box with a separator line. Was that the plan? I'm using Firefox 57

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