Author Topic: Repositioning of lines and text relative to a bitmap in browser rendering.  (Read 4358 times)

May 19, 2017, 10:31:24 AM
Read 4358 times

billctrcain

  • Jr. Member

  • Offline
  • ***

  • 16
Inkscape displays everything as desired, but once the svg is pulled into an html page and displayed in a browser, the lines and texts are incorrectly positioned.  I've tried adding rectangles of different sizes in different positions with several different groupings but with no apparent effect.  Please see attachment.  Thanks.

May 20, 2017, 02:47:49 AM
Reply #1

Moini

  • IC Mentor

  • Offline
  • ******

  • 1,568
    • VektorRascheln
(I think this post is in the wrong category)

I think the reason may be that you're using a different computer to look at the html page, and that the font you used in the SVG is not installed on that computer. Can you test this hypothesis by converting all texts to paths? (select them, do Path -> Object to Path, Save as... some_different_name.svg, so you keep a backup with editable texts.)

If this doesn't work, can you provide the original SVG file?

May 20, 2017, 04:03:13 AM
Reply #2

bipper

  • Sr. Newbie

  • Offline
  • **

  • 7
Can you try saving a copy of the file as   .eps    format in Inkscape. Then close, reopen the  .eps  file.  Then save the file as  .svg again.  The use the resulting  .svg and see what happens.

This may flatten some of the svg transforms - possibly a quick fix for the misaligned lines. Don't erase the original svg of course.

May 21, 2017, 09:36:11 AM
Reply #3

brynn

  • Administrator

  • Offline
  • ******

  • 3,941
  • Gender
    Female

    Female
    • Inkscape Community
Welcome to the forum!

Re bipper's suggestion.  Did I see an extension somewhere, that removes all the transforms?  Or maybe it was a script someone wrote?  Might be easier than saving in different format (which could introduce even more problems).

I don't understand this option very well, so don't take this as a well-informed answer.  Also, don't consider it, if any of the other suggestions fix the problem.    And especially, please provide the SVG file, so we can test, before you change this setting.

Now having said all that, if you've ever changed the setting in Inkscape Preferences > Input/Output > SVG Output > Path Data, you might need to change it back.  The default is "Optimized."

(I think this post is in the wrong category)

Moved  :)

  • Inkscape version 0.92.3
  • Windows 7 Pro, 64-bit
Inkscape Tutorials (and manuals)                      Inkscape Community Gallery                        Inkscape for Cutting Design                     



"Be ashamed to die until you have won some victory for humanity" - Horace Mann                       

May 22, 2017, 04:59:29 AM
Reply #4

billctrcain

  • Jr. Member

  • Offline
  • ***

  • 16
Thanks for your suggestions guys.  I forgot to say that I tried three browsers that gave approximately the same result.  I am also using the same computer to create and display the svg.  I tried changing the text to path but got no improvement.  I've attached the svg.   I haven't tried saving it in a different format yet.

May 22, 2017, 07:18:44 AM
Reply #5

billctrcain

  • Jr. Member

  • Offline
  • ***

  • 16
Hey guys, I was able to get the browser to display the lines and text in the same position as Inkscape.  I would like to understand why it now works.  I opened the svg in Inkscape, selected the group which includes all elements, resized it slightly and saved the svg.  Examining the source in a text editor shows that is added a transform tag to the group and changed the inkscape:cx parameter, and for some reason changed the x parameter of just one of the texts.

May 22, 2017, 09:48:56 AM
Reply #6

billctrcain

  • Jr. Member

  • Offline
  • ***

  • 16
I forgot to send the bmp files with the svg.  Since bmp files are not up-loadable,  I've attached a png version.

May 22, 2017, 02:57:09 PM
Reply #7

brynn

  • Administrator

  • Offline
  • ******

  • 3,941
  • Gender
    Female

    Female
    • Inkscape Community
Hhm, I thought I had BMPs allowed.....  Will have to check on it.

I'm glad to hear the good news, that you now have some clues.  But I don't understand this well enough to be able to explain it to you.  But I'm sure other members will be able to explain it. And it shouldn't be too long before they visit.
  • Inkscape version 0.92.3
  • Windows 7 Pro, 64-bit
Inkscape Tutorials (and manuals)                      Inkscape Community Gallery                        Inkscape for Cutting Design                     



"Be ashamed to die until you have won some victory for humanity" - Horace Mann                       

May 23, 2017, 06:52:16 AM
Reply #8

Moini

  • IC Mentor

  • Offline
  • ******

  • 1,568
    • VektorRascheln
If you want to share SVG files with others, you can quickly include all the images by using an extension:
Extensions -> Images -> Embed images

It seems to be quite a custom SVG, edited manually in several places. Does there actually exist a 'viewport' groupmode in the Inkscape namespace? After I deleted that groupmode, it looked correct in the browser.

May 23, 2017, 07:59:37 AM
Reply #9

billctrcain

  • Jr. Member

  • Offline
  • ***

  • 16
Hi Moini, I use a script called SVGPan.js to pan and zoom my svgs.  I don't think it is in the svg I uploaded, but it needs to have the group id to be named viewport  in order for it to work.  I manually changed the id value from what Inkscape assigned.  I may not have needed to also change Inkscapes groupmode value.  But anyway, when I remove the groupmode value from the svg, it doesn't effect the positioning issue that I see in the browser.

May 24, 2017, 06:20:12 PM
Reply #10

Moini

  • IC Mentor

  • Offline
  • ******

  • 1,568
    • VektorRascheln
Hm, yeah, can't reproduce today. It would really be helpful if you could upload the image with the embedded pictures somewhere, that would make it possible to actually test without modifying too much first (importing images, changing their size, swapping positions, deleting old ones,...) or editing the xml. Also it could help to know which browser you're using, and how the image is supposed to look.

(I don't see any issues today, in Firefox - which is weird, because it looked strange yesterday.)

May 25, 2017, 05:06:03 AM
Reply #11

billctrcain

  • Jr. Member

  • Offline
  • ***

  • 16
Hi Moini.  Attached are two files with the graphics embedded instead of referenced.  One ( the uncorrected) has the lines and text out of position, the other has been corrected.

May 25, 2017, 05:37:21 AM
Reply #12

billctrcain

  • Jr. Member

  • Offline
  • ***

  • 16
Hi Moini.  I just noticed that the files I uploaded are both displaying correctly.  I'm not able to reproduce the issue.

May 25, 2017, 11:43:24 AM
Reply #13

Moini

  • IC Mentor

  • Offline
  • ******

  • 1,568
    • VektorRascheln
Strange things happen... Sometimes, our computers seem to have a life of their own ;-)

May 25, 2017, 12:13:26 PM
Reply #14

billctrcain

  • Jr. Member

  • Offline
  • ***

  • 16
Hi Moini, I found a copy of the svg that had the issue and embeded the bmp.  See the attachment.

May 26, 2017, 01:47:13 PM
Reply #15

Moini

  • IC Mentor

  • Offline
  • ******

  • 1,568
    • VektorRascheln
Mmh. Seems any rewrite of the file does the trick. I only need to move the group, change the groupmode, or whatever, and it changes, then looks correct.
Not really sure what the issue may be, sorry.