Coda Chang Coda Chang - 1 year ago 82
Javascript Question

Snap.svg doesn't work

This might be a simple and silly question.

I download this library here, and then I want to quickly get start it.

So, This is test.html in download package.

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<script src="dist/snap.svg.js"></script>
var s = Snap();
Snap.load("inkscape.svg", function (f) {

var c = Snap("#svg");
// Lets create big circle in the middle:
var bigCircle =, 150, 100);


But the browser seems blank, and console threw some errors

GET 404 (Not Found)

Uncaught TypeError: Cannot read property 'circle' of null

Did I miss some file?

Um, I am a beginner, should I download
by myself and reload it?

Ian Ian
Answer Source

There's 3 problems here...

1) It can't find the inkscape.svg file. Its not clear if this is runnng just locally on your PC, or on a remote server though, but you need to sort that, either place it alongside this html file, on the server or locally, however you are accessing it.

2) Snap.load will load a file into a fragment, but doesn't append it to the DOM. You need to do something to append the fragment.

Eg s.append(f) to add the lot.

3) The line c = Snap("#svg") needs to be INSIDE (or at least called from inside) the Snap.load function. This is assuming #svg is in the loaded file. Otherwise Snap goes off to load the svg, carries on running, tries to do Snap("#svg") but the file hasn't finished loading yet. So the logic needs to change a bit.


Snap.load( 'inkscake.svg', fragment ) {

function doOtherStuffOnceLoadingComplete() {
     var c = Snap("#svg");
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download