Skip to content

Instantly share code, notes, and snippets.

@netpoetica

netpoetica/Paperjs-ImportSVGFromFile.html

Created January 8, 2013 05:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save netpoetica/4481374 to your computer and use it in GitHub Desktop.
Save netpoetica/4481374 to your computer and use it in GitHub Desktop.
Download ZIP
Using Paperjs and jQuery, import a .svg file as a symbol into a Paperjs project. Without having to append it to the DOM first and remove it, without having inline SVG.
Raw
Paperjs-ImportSVGFromFile.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Paperjs - ImportSVG to Symbol</title>
<script type="text/javascript" src="js/lib/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/lib/paper.js"></script>
<script type="text/paperscript" canvas="canvas">
function SVGSymbol(file){
var sym = null;
$.ajax({
type: "GET",
async: false,
url: file,
dataType: "xml",
success: function(xml){
sym = new Symbol(paper.project.importSvg(xml.getElementsByTagName("svg")[0]));
}
});
return sym;
}
$(document).ready(function(){
var a = SVGSymbol("img/_forest.svg");
if(a){
var n = 20;
while(n--){
var p = a.place();
p.position = new Point(n * 40, 100);
p.scale(0.25 + Math.random() * 0.75);
}
}
});
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:500px; height:1000px;" id="svg">
<circle cx="40" cy="300" r="20" style="fill:orange;stroke:yellow;stroke-width:2px;stroke-dasharray:3px" id="circle1" />
</svg>
<canvas id="canvas" width="595px" height="841px"></canvas>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment