Error with an SVG file created with Inkscape at a webapp

[rainer]

HI I'm Rainer and lucky that I found this community.
 

I'm using an online webapp for editing my SVG's. This import to the canvas works without problems using an SVG file created with Illustrator.
Please compare: http://cloud.ranala.com/8ac5e20494c1

When I want to import an SVG file, which was created by Inkscape I get an additional vertical bar in my canvas on the left side:
Compare the red marked bar in this file, please: http://cloud.ranala.com/9c77852b20b9

I tried to examine this issue, but don't have any idea anymore. The error appears when saving the file as normal SVG as well as Inscape SVG.

Thanks in advance

[brynn]

Welcome to the forum!

We would need to see the SVG file which has the extra line.  Actually it might be helpful to have both SVG files.  You can attach them here (use the Reply button, and not Quick Reply, then look below the message box and click on "Attachments") or upload them anywhere and give us the link.

Are those 2 images supposed to be the same?  Because I notice it's not just the gray line which is different.

Just curious why you're using the web app for editing.  Does it provide some feature which Inkscape doesn't?

[rainer]

Thanks for your quick reply, brynn
 

To your question: to show it to clients it's better to use a webapp, so you don't have to install something on clients devices

Here a screen shot and the original SVG file

[rainer]

And here, how it looks in my canvas.

It seems, that the grey vertical bar moved to the left

[brynn]

Ok, I see it now.  I thought you meant there was a new line that you didn't know where it was coming from.

I notice that the whole image is in a group.  Is it still in a group when you open it in the web app?  I would have to wonder why that one object was moved, if it was in a group.

Can anyone have access to that web app, or does it need membership or something?  I'd like to look at the image when it's opened in that app, if possible.

[brynn]

Hhmm, the XML for this file looks strange.  Was there ever some text in this file?

Is the SVG file that you shared the one you made originally in Inkscape?  The XML doesn't look right, although I'm not sure exactly what it means.

[rainer]

No, the first (original) file '1.svg' was created with Illustrator - size 64 x 64

1.svg
(4.1 kB - downloaded 245 times)
With Inkscape I changed sizes and colors and got file 'inkscape17_170x384.svg'

inkscape17_170x384.svg
(5.04 kB . 170x384)
(viewed 243 times)

@brynn - sent you PM

[brynn]

How did you get the drawing to Inkscape?  Did you open the Illustrator SVG file with Inkscape?  Or did you have the Illustrator SVG file open in Illustrator, and copy it to an Inkscape document?

Ok, nevermind.  I have an idea.  Open the SVG, and copy the drawing.  It looks like it's all in a group, so it should be easy.  Then open a new Inkscape document and paste it in.  Save it, and try opening that in your web app.

The process gets rid of the weird XML that I see, and so maybe it will solve the problem??  It's easy enough to try it, I guess.

[Moini]

The XML is fine. The web app has a bug. To get rid of the issue, convert the rectangle that makes the zipper to a path, then use the arrow key to move it up once, and the down arrow key to move it down again.

This will get rid of the transform attribute that the web app cannot deal with.

If you want to continue using it (what for? Every browser can display SVG files better than that!), you'll probably experience this issue in more cases, and in some, it's not fixable as easily as in this case.

[brynn]

If you want to continue using it (what for?

to show it to clients it's better to use a webapp, so you don't have to install something on clients devices

[Moini]

@brynn : please use complete quotes.

Every browser can display SVG files better than that!

[rainer]

Thanks Moini for jumping in.
 

Allow me to sort all, because it‘s a little bit confusing.
Here some screenshots:
1. is the original file '1.svg' (64 x 64)
2. is the file modified (from 1.svg) with Illustrator (size and colors) 'ill-1-170x384.svg'. When I insert this file in the canvas of my webapp it appears correctly
3. is the file modified (from 1.svg) with Inkscape (size and colors) 'inkscape17_170x384.svg'. When I insert this file into the canvas I get the gray bar, moved to the left - see screenshot 4
4. is how it looks on my canvas after inserting the modified files. Left the file, created with Illustrator (screen 2) and right the file, created with Inkscape (screen 3)

So for me it seems, that the issue is caused by using Inkscape, something must me different in the way to handle and save it after changing size and color, because, if I use Illustrator I don't get this error.

For comparing: you'll find original (1.svg), Illustrator modified SVG (ill-1-170x384.svg) and Inkscape modified SVG (inkscape17_170x384.svg) files below

[Moini]

Both applications (AI and Inkscape) create valid SVG files.

The webapp isn't able to interpret the full range of the SVG specification.

I have shown you a way to fix it (actually, two).

I don't know how else I can be of help.

[rainer]

Thanks Moini,

the question remains unanswered, why a file created by Illustrator works on my web app and the one I created with Inkscape, not

With both programs I did the same, changed the size and some colors

[brynn]

I think what she's saying is that there's a way in which Inkscape uses SVG (a particular SVG code) which your web app doesn't recognize.  Apparently your file created in Illustrator does not use the same kind of SVG code that Inkscape uses. 

Even though you did the same kinds of things in both files, Inkscape and Illustrator use different SVG codes that do the same thing.

From what I understand that Moini said, the problem is related to a transform attribute (see message #8).  For this particular file, you can get rid of the transform attribute.  But unless you fix the problem in the web app, you'll see problems with any file using this particular transform attribute.

[rainer]

Now I got it. Sometimes it's hard to understand relations when the basics are missing.
 

Thanks for your patience