Skip to content

Instantly share code, notes, and snippets.

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

SoftwarePerfectionist commented Nov 26, 2017

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

SoftwarePerfectionist commented Nov 26, 2017

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