curl in SVG

101 views
Skip to first unread message

Gabri elle

unread,
Mar 15, 2014, 6:50:41 AM3/15/14
to cuj...@googlegroups.com
Hello,

curl does not seem to support being run from within an svg document because svg documents do not have a head node (TypeError: head is undefined). Support for this feature would be nice though.
Kind regards


unscriptable

unread,
Mar 18, 2014, 7:55:23 AM3/18/14
to cuj...@googlegroups.com
Hello Gabri,  

Interesting.  If I understand correctly, the entire document is SVG?  Until yesterday, I hadn't heard of anybody doing this.  

I created a simple SVG document and loaded it with Chrome and Safari.  Each of those browsers inserted a <head> and a <body> element, and then placed the <svg> element inside the <body>.  Here's what I used for an SVG document:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect x="0" y="0" height="100%" width="100%"/>
</svg>

Obviously, I don't understand how to create an SVG-only document.  Can you elaborate a bit?  how can I simulate your situation?

Thanks!

-- John

Gabri elle

unread,
Mar 20, 2014, 4:23:02 AM3/20/14
to
Hello John,

you are right, the entire document is svg. It could be embedded in an html page, by means of the <object> tag, or it could stand on its own.

Your SVG document looks okay. If Chrome and Safari insert <head> and <body> by themselves, it might be due to the fact that they don't treat the document with "image/svg+xml" (or similar) mime-type, but as an html page instead. Not sure.

You can find online svg documents on the web. One example : http://openclipart.org/people/mireille/blue_circle.svg. Also, I can open a local svg document as svg from Firefox.

I have been playing a little bit with curl in svg, and found that the <head> element is not the only missing piece. One additional failure seems to be that script elements in svg do not have a "src" attribute, but instead use an "href" attribute from the xlink namespace (http://www.w3.org/TR/SVG11/single-page.html#script-ScriptElement - by the way, you can find other simple svg examples in this document).
Example:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink" >
<script type="application/javascript;version=1.7" xlink:href="./curl.js" />
<!-- ... -->

I have not gone any further, though.

Hope it helps.
Best regards


unscriptable

unread,
Mar 20, 2014, 9:38:20 AM3/20/14
to cuj...@googlegroups.com
Hey Gabri,

This seems like a good use case for a curl.js shim. Seems pretty easy to create.  In fact, given the information we have learned so far, this is probably close:

// file name: "myApp/svg.js" -- should be the same as the id in the define, below:
define(/*=='myApp/svg',==*/ ['curl/_privileged'], function (priv) {
"use strict";

// override loadScript to work in SVG docs
priv['core'].loadScript = function (def, success, failure) {
var el = doc.createElement('script');

el.onload = el.onreadystatechange = process;
el.onerror = fail;
el.type = def.mimetype || 'text/javascript';
el.charset = 'utf-8';
el.async = !def.order;
el.href = def.url; // ***** Note "href" instead of "src"
activeScripts[def.id] = el;
// ***** Note: append to documentElement instead of document.head:
document.documentElement.appendChild(el);

return el;

function process (ev) {
ev = ev || global.event;
if (ev.type == 'load' || readyStates[el.readyState]) {
delete activeScripts[def.id];
el.onload = el.onreadystatechange = el.onerror = '';
success();
}
}

function fail (e) {
failure(new Error('Syntax or http error: ' + def.url));
}
};

});

I made two changes in this code: it uses "href" instead of "src" and scripts are appended to the documentElement instead of document.head.

Once you've got something working, you could build your own custom curl.js.  It's easy.  The instructions are in the curl/bin folder (README.md).  

Try it out, and keep us informed of your progress!

-- John

Gabri elle

unread,
Mar 22, 2014, 8:00:26 AM3/22/14
to cuj...@googlegroups.com
Thanks John,


To make it work, one needs to take into account the namespaces:

var el = document.createElementNS("http://www.w3.org/2000/svg", 'script');

and

el.setAttributeNS("http://www.w3.org/1999/xlink", 'href', def.url)

Cheers

unscriptable

unread,
Mar 22, 2014, 4:20:54 PM3/22/14
to cuj...@googlegroups.com
Cool. I forgot about the namespacing.  I imagine you may have to use el.setAttributeNS() on the other attributes, too.  Let us know if it works!

-- John

Gabri elle

unread,
Mar 23, 2014, 8:08:10 AM3/23/14
to
Hi John, yes it works!

PS: it is not required to use setAttributeNS (DOM level 2) with a null namspace, instead of setATtribute (DOM level 1) for the other attributes, but it wouldn't harm (some may argue it would be good practice).

unscriptable

unread,
Mar 26, 2014, 1:30:51 PM3/26/14
to cuj...@googlegroups.com
Do you mind posting the working code so others may discover it?  Thanks!

Gabri elle

unread,
Mar 27, 2014, 2:02:35 PM3/27/14
to cuj...@googlegroups.com
Hi John,
I have been lazy and used the code as suggested by you (above, March 20) with the two modifications explained by me (above, March 22nd). Nothing more, nothing less.

unscriptable

unread,
Mar 27, 2014, 4:37:58 PM3/27/14
to cuj...@googlegroups.com
Thanks, Gabri.  Posting for all to use...


// file name: "myApp/svg.js" -- should be the same as the id in the define, below:
define(/*=='myApp/svg',==*/ ['curl/_privileged'], function (priv) {
"use strict";

    // override loadScript to work in SVG docs
    priv['core'].loadScript = function (def, success, failure) {

    var el = doc.createElementNS("http://www.w3.org/2000/svg", 'script');


    el.onload = el.onreadystatechange = process;
    el.onerror = fail;
    el.type = def.mimetype || 'text/javascript';
    el.charset = 'utf-8';
    el.async = !def.order;

    el.setAttributeNS("http://www.w3.org/1999/xlink", 'href', def.url);
    activeScripts[def.id] = el;
Reply all
Reply to author
Forward
0 new messages