Skip to content

Instantly share code, notes, and snippets.

@chriscoyier

chriscoyier/index.html

Created September 23, 2015 18:21
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save chriscoyier/6085a237571a3abe315c to your computer and use it in GitHub Desktop.
Save chriscoyier/6085a237571a3abe315c to your computer and use it in GitHub Desktop.
Download ZIP
Difference Between Inline SVG reference and External reference
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.icon {
width: 100px;
height: 100px;
}
.spade-path,
.pencil-path {
fill: green;
}
</style>
</head>
<body>
<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-spades" viewBox="0 0 1024 1024">
<title>spades</title>
<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>
</symbol>
</defs>
</svg>
<!-- INTERNAL -->
<svg class="icon">
<use xlink:href="#icon-spades" />
</svg>
<!-- EXTERNAL -->
<svg class="icon">
<use xlink:href="test-ext-svgdefs.svg#icon-pencil" />
</svg>
<script>
var one = document.querySelectorAll(".spade-path");
console.log(one);
var two = document.querySelectorAll(".pencil-path");
console.log(two);
</script>
</body>
</html>
Display the source blob
Display the rendered blob
Raw
test-ext-svgdefs.svg
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@SoftwarePerfectionist
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

@SoftwarePerfectionist
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 https://assets-cdn.github.com”). Source: (function injected(eventName, injectedIn...

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