Question

I’m trying to experiment with SVG on Firefox. Since I’m using jQuery, I’d like to at least try out jQuery SVG. I’m currently using Firefox 3.6.12 on Windows 7 Home Premium.

When I access http://keith-wood.name/svgBasics.html, the demo works fine for me. However, when I download by clicking the “Download now” button on http://keith-wood.name/svg.html, extract the ZIP into a folder on my own machine, and try to run the same demo, none of the SVG seems to do anything (this includes the initial piece that should run with no user interaction).

According to Firefox, the server is serving up the page as MIME type ‘text/html’ (not, for example ‘text/svg+html), so that’s not what is different.

Any insights would be welcome; of course, I’d most like to hear from anyone who experienced the same and found a workaround.

(For anyone who might care, I haven’t decided yet whether I’ll ultimately use jQuery SVG or Raphael, or even really whether I’ll use SVG or HTML5 canvas, but I’d like to have my hands on all of them before making decisions.)

Answer 1

There are some bugs in the downloaded code. If you open up svgBasics.html from the zip file, you’ll see:

<style type="text/css">
@import "css/jquery.svg.css";

#svgbasics { width: 400px; height: 300px; border: 1px solid #484; }
</style>
<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.svg.js"></script>

In the zip archive, there is no css or js directories. Secondly jQuery is not included. If you replace the above lines in svgBasics.html with this, the example works. (Tested in FF4b6 and Chrome9.)

<style type="text/css">
@import "jquery.svg.css";

#svgbasics { width: 400px; height: 300px; border: 1px solid #484; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.svg.js"></script>