3 Attachment(s)
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
Re: Exported SVG: Bitmaps Distorted - Workaround?
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.....
Re: Exported SVG: Bitmaps Distorted - Workaround?
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)
Re: Exported SVG: Bitmaps Distorted - Workaround?
This might be something for Dear Xara, where the Xara developers are more likely to see it. :)
2 Attachment(s)
Re: Exported SVG: Bitmaps Distorted - Workaround?
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
Re: Exported SVG: Bitmaps Distorted - Workaround?
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.
Re: Exported SVG: Bitmaps Distorted - Workaround?
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:
- Open Xara Designer Pro 7.
- Create a new document: 640 pix web page (VGA)
- Draw a rectangle sized 200×200 px.
- Scale the rectangle non-uniformly to 200×100 px.
- Create a bitmap copy of the rectangle.
- Export the page to SVG with default options.
- 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.
Re: Exported SVG: Bitmaps Distorted - Workaround?
You're right. I've just followed your instructions, and I got the same result. Hmm.
Re: Exported SVG: Bitmaps Distorted - Workaround?
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?
Re: Exported SVG: Bitmaps Distorted - Workaround?
Thanks for steps to reproduce this problem. A bug has been logged allowing for the problem to be investigated.