Paper.js won't load SVG from file but loads embedded

[Daniel O.]

Hello,

I am currently writing an application which loads a SVG image from file onto the canvas via paper.js. If I embed the svg in HTML and get it via it's ID it is loaded correctly (presumably not a string but proper SVG object). If I give Paper.js a string or SVG object created from string it dies on me. Safari shows following error:

 [Error] TypeError: 'undefined' is not a function (evaluating 'node.getAttribute('data-paper-data')')

importSVG (paper.js, line 11164)

importSVG (paper.js, line 11183) 

onload (st.js, line 65) 

Any idea what's not OK?

It doesn't matter if I do:

var svgReader = new FileReader();
svgReader.onload = function (event) {

    svgContent = event.target.result;
    var contentAsObject = new DOMParser().parseFromString(svgContent, 'image/svg+xml');
    ST.clear();
    canvas.width = width;
    canvas.height = height;
    paper.view.viewSize = [width, height];
    if (svgMode) {
        paper.project.importSVG(contentAsObject);
        var activeBounds = paper.project.activeLayer.bounds;
        var canvasSize = new paper.Size(canvas.width, canvas.height);
        var translationVector = getCenterTranslation(canvas.width, canvas.height, activeBounds);
        paper.project.activeLayer.translate(translationVector);
        var layer = new paper.Layer();
    }
};

svgReader.readAsText(file);

or

var svgReader = new FileReader();
svgReader.onload = function (event) {

    svgContent = event.target.result;
    ST.clear();
    canvas.width = width;
    canvas.height = height;
    paper.view.viewSize = [width, height];
    if (svgMode) {
        paper.project.importSVG(svgContent);
        var activeBounds = paper.project.activeLayer.bounds;
        var canvasSize = new paper.Size(canvas.width, canvas.height);
        var translationVector = getCenterTranslation(canvas.width, canvas.height, activeBounds);
        paper.project.activeLayer.translate(translationVector);
        var layer = new paper.Layer();
    }
};

svgReader.readAsText(file);

it always tries to do paper.project.importSVG(svgContent) (or paper.project.importSVG(contentAsObject) ) but the next line is never executed and it jumps out of the if block.

Cheers,

Daniel

[Jürg Lehni]

Could you tell me the result of `typeof svgContent`? If that's not 'string' then SVGImport assumes it's a SVG node...

> --
> You received this message because you are subscribed to the Google Groups "Paper.js" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.
> For more options, visit https://groups.google.com/groups/opt_out.

[Daniel O.]

Hi Jürg,

typeof svgContent returns string.

Cheers,

Daniel 

[Daniel O.]

The webpage is available at http://lotsovcookiez.com/example/ or zipped at http://lotsovcookiez.com/example/Archive.zip

On Saturday, 2 November 2013 23:32:53 UTC+1, Jürg Lehni wrote:

[Daniel O.]

Forgot to tell you how to get there. JS code is in st.js, loading SVG directly from HTML happens in Menu > Load, loading SVG from external file happens in Menu > New > From SVG file (width and height are not optional at the moment). Ghostscript tiger loaded just fine when embedded but doesn't when loaded from file: http://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg

[Jürg Lehni]

You're running an old version of paper.js. This bug has already been fixed in the meantime, just download a new version and you should be good to go.

BTW, I've just added support for async loading from urls:

project.importSVG('/path/to/file.svg', function(item) {
alert(item);
});

Or, if you need it with other options, then:

project.importSVG('/path/to/file.svg', {
expandShapes: true,
onLoad: function(item) {
alert(item);
}
);

And I'm now thinking that it would be great to also support a FileReader argument there, making your code simpler.

J

[Daniel O.]

Thank you very much! Async loading will be really helpful and support for FileReader would be a good addition too.

Best,

Daniel

[Jürg Lehni]

I've just committed a couple of changes that make this possible:

var file = document.getElementById('file');
file.addEventListener('change', function (event) {
var files = event.target.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
if (file.type.match('svg')) {
project.importSVG(file, function(item) {
console.log(item);
});
}
}
});

See the new "From File.html" example in the "SVG Import" folder.

I've also fixed a couple of more SVG bugs that I detected while working on this.

On Nov 3, 2013, at 12:29 , Daniel O. <dfx...@gmail.com> wrote:

> Thank you very much! Async loading will be really helpful and support for FileReader would be a good addition too.
>
> Best,
> Daniel
>
> On Sunday, 3 November 2013 11:25:51 UTC+1, Jürg Lehni wrote:
> You're running an old version of paper.js. This bug has already been fixed in the meantime, just download a new version and you should be good to go.
>
> BTW, I've just added support for async loading from urls:
>
> project.importSVG('/path/to/file.svg', function(item) {
> alert(item);
> });
>
> Or, if you need it with other options, then:
>
> project.importSVG('/path/to/file.svg', {
> expandShapes: true,
> onLoad: function(item) {
> alert(item);
> }
> );
>
> And I'm now thinking that it would be great to also support a FileReader argument there, making your code simpler.
>
> J
>
> On Nov 3, 2013, at 10:44 , Daniel O. <dfx...@gmail.com> wrote:
>
> > Forgot to tell you how to get there. JS code is in st.js, loading SVG directly from HTML happens in Menu > Load, loading SVG from external file happens in Menu > New > From SVG file (width and height are not optional at the moment). Ghostscript tiger loaded just fine when embedded but doesn't when loaded from file: http://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg
> >
> > On Sunday, 3 November 2013 10:38:23 UTC+1, Daniel O. wrote:

> > The webpage is available at http://lotsovcookiez.com/example/ or zipped athttp://lotsovcookiez.com/example/Archive.zip