Exported SVG: Bitmaps Distorted - Workaround?

Hi!

Take a look at the attached XAR file (Xara Designer Pro 7). It contains vector graphics as well as a bitmap copy of those graphics. I exported the XAR file to an SVG file.

When I open the exported SVG file in the latest Chrome, then the bitmap copy is rendered distorted - see the attached image. The same happens in the latest Opera and the latest Firefox, all on WinXP/32. Curiously the SVG is rendered correctly in Inkscape.

Any idea if there is a workaround, to get the SVG rendered correctly in browsers? What may be the reason for the problem?

Xara's SVG export is useless to me if bitmaps aren't rendered correctly.

The attached SVG file is contained in a ZIP archive, because the forum software doesn't allow uploading SVG files. It was exported using the option: "Clip path (Adobe)". Of course, I also tried the other options: "Pattern (Inkscape)" and "Non-repeating as clip path". No difference.

- Felix

Attachment 86615
Attachment 86614
Attachment 86620

is it a xara problem

or is it the way browsers read the bitmaps in the svg spec

one way to test - does it happen if you create the file from scratch in inkscape.....

I could not replicate the problem with Inkscape, neither with separate images (default) nor with embedded images. In other words: images in SVGs from Inkscape are displayed without distortion in Chrome, Opera, and Firefox.

Seems like Xara is generating SVG files that browsers don't like. Perhaps some transformations are to blame. I noticed, for example, that in Xara SVG files, the direction of the y-axis is changed, using a transformation of the group with ID "Document": scale(1 -1)

This might be something for Dear Xara, where the Xara developers are more likely to see it. :)

I can replicate your issue with your file. But I cannot relicate it with one of my own. Attached are both the XAR file and SVG export as a ZIP file, and a screen shot from my browser.

Take care, Mike

Just for testing purposes try this link to a page with some svg images created using several applications. The page was made about a year ago and was made for testing various web browsers and their ability to render the svg output from different applications.
http://btaylor.50megs.com/svg-test2/

If you are using IE9 you will need to turn off compatibility mode because older versions of IE did not support svg images very well if at all.

Open the link in different browsers to see which renders the svg files best.

BTW the top row if svg images use object data in the placeholder.

Code:

---

<object data="index_htm_files/smilie-2.svg" width="141px" height="141px"  type="image/svg+xml"></object>

---

The second row uses embeded

Code:

---

<embed  id="smiley" src="index_htm_files/smilie-2.svg" width="141px" height="141px"  type="image/svg+xml">

---

The third row use image.

Code:

---

<img  id="smily" src="index_htm_files/smilie-2.svg" width="141px" height="141px"  type="image/svg+xml">

---

That was used to see how each method worked with different browsers.

Quote:

---

Originally Posted by mwenz

But I cannot relicate it with one of my own.

---

Thanks for the input. That made me come up with step by step instructions on how to replicate the issue:

1. Open Xara Designer Pro 7.
2. Create a new document: 640 pix web page (VGA)
3. Draw a rectangle sized 200×200 px.
4. Scale the rectangle non-uniformly to 200×100 px.
5. Create a bitmap copy of the rectangle.
6. Export the page to SVG with default options.
7. Open the SVG in Chrome, Opera, or Firefox. The bitmap copy looks like it has 50% the height of the rectangle next to it. Its size is probably 200×50 px.

Note: I haven't tried opening the SVG in IE9 as it isn't available on WinXP.

You're right. I've just followed your instructions, and I got the same result. Hmm.

Quote:

---

Originally Posted by angelize

This might be something for Dear Xara, where the Xara developers are more likely to see it. :)

---

Can you move the thread, or do you suggest I repost the issue there?

Thanks for steps to reproduce this problem. A bug has been logged allowing for the problem to be investigated.

Thanks! :)

That's good news! A complete reimplementation of the SVG export would be even better.

Currently, the exported SVG is unnecessarily complex, and it is not possible to specify important options such as "convert text to outlines" or "link to images". The lack of these options and the bad quality of the exported SVG is the reason why I am currently experimenting with Illustrator and Inkscape for creation of SVG graphics for the web. Unfortunately, that is, because I much prefer Xara as an editor.

As well as improved svg export I would like to see svg import added as well.

Quote:

---

Originally Posted by bb2

Thanks for steps to reproduce this problem. A bug has been logged allowing for the problem to be investigated.

---

Unfortunately, the bug still is in Xara Designer Pro X 8.1.1.

I am feeling driven to Illustrator which has awesome SVG export, but I don't really want to. :(

By the way, SVG is important to me for authoring Prezi like presentations that can be viewed with pres/v/g (written by me). But it's not only that: SVG is becoming increasingly useful on the web for all kinds of purposes. It's a pity that Xara instead decides to concentrate on 90s HTML authoring features...

Yet the same file imports back into DPX fine..

Might be an idea to post this in the Dear Xara.. forum?

Quote:

---

Originally Posted by bb2

Thanks for steps to reproduce this problem. A bug has been logged allowing for the problem to be investigated.

---

Any idea when this bug will be fixed?

It's still in version X10.

Hi feklee, no nothing has changed desipte the two and a half year interval since you found a way to replicate this issue. It's still exactly the same in XDP10.

I attach two svg's created in the same way, one in Xara and one in Inkscape.

The Xara svg doesn't even show the bitmaps in IE. Safari does but as you discovered the bitmap is half the size in height.

The Inkscape version shows correctly in both browsers.

I've no idea how svg code is produced in either progamm but the Inkscape code, which works, when looked at in notepad is a sixth the size of the Xara generated code that doesn't work.

Perhaps we're another niche market and such niggly issues aren't worth Xara persuing?

I need WORKABLE svg files from Xara for use in VideoScribe but without severely editing the code in Notepad it's useless. And that's just for vector objects, throw in a bitmap & it just doesn't port across!

Xara is very seriously off track by disregarding these known deficiencies.

It's not isolated either, I've pointed out that the "Mouse Over" option is now no longer available in Xara Animations (only the on click) but again even though the help files says it is, it aint.

No wonder users are very unhappy with the latest upgrade.

The scaling bug is fixed in version 10.1.2.35097, I just confirmed that. Thanks Xara!

What remains is the issue that the bitmap doesn't appear in IE11. Anyhow, I am now trying Inkscape on small projects. It has matured a lot over the past years, though it's still very slow.