Welcome to TalkGraphics.com
Page 1 of 2 12 LastLast
Results 1 to 10 of 18
  1. #1

    Question 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

    Test.xar
    Test.svg.zip
    Click image for larger version. 

Name:	Test_rendered_in_Chrome.png 
Views:	412 
Size:	26.9 KB 
ID:	86620
    IP

  2. #2
    Join Date
    Feb 2007
    Location
    UK
    Posts
    21,283

    Default 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.....
    -------------------------------
    Nothing lasts forever...
    IP

  3. #3

    Default 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)
    IP

  4. #4
    Join Date
    Dec 2007
    Location
    Sunshine Coast BC, Canada. In a beautiful part of BC's temperate rainforest
    Posts
    9,864

    Default Re: Exported SVG: Bitmaps Distorted - Workaround?

    This might be something for Dear Xara, where the Xara developers are more likely to see it.
    [SIGPIC][/SIGPIC]
    My current Xara software: Designer Pro 365 12.6

    Good Morning Sunshine.ca | Good Morning Sunshine Online(a weekly humorous publication created with XDP and exported as a web document) | Angelize Online resource shop | My Video Tutorials | My DropBox |
    Autocorrect: It can be your worst enema.
    IP

  5. #5

    Default 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
    Attached Thumbnails Attached Thumbnails Click image for larger version. 

Name:	test-svg.jpg 
Views:	334 
Size:	20.5 KB 
ID:	86642  
    Attached Files Attached Files
    IP

  6. #6
    Join Date
    Nov 2000
    Location
    Red Boiling Springs TN USA
    Posts
    19,208

    Default 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.
    Last edited by Soquili; 16 January 2012 at 05:59 AM.
    Soquili
    a.k.a. Bill Taylor
    Bill is no longer with us. He died on 10 Dec 2012. We remember him always.
    My TG Album
    Last XaReg update
    IP

  7. #7

    Question Re: Exported SVG: Bitmaps Distorted - Workaround?

    Quote Originally Posted by mwenz View Post
    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.
    IP

  8. #8
    Join Date
    Aug 2000
    Location
    Virginia
    Posts
    4,432

    Default Re: Exported SVG: Bitmaps Distorted - Workaround?

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

  9. #9

    Default Re: Exported SVG: Bitmaps Distorted - Workaround?

    Quote Originally Posted by angelize View Post
    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?
    IP

  10. #10
    Join Date
    Jan 2004
    Posts
    1,830

    Default 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.
    IP

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •