Why does SVG viewed in Chrome 51 not position correctly with added gap after text?

Question

I made a simple Scalable Vector Graphic image (using the Inkscape tool v0.91). The editor was displaying it all properly however when I opened the file in Google Chrome 51 it wasn't displayed like it should, with the positioning wrong (an added gap after some text). I created a simpler example version which is shown here where an embedded image on the left is removed and a line is added to the original where the horizontal text on the left should end.
The original image (viewed in the editor):

The image viewed in the Google Chrome 51 browser:
I don't understand why this would be happening as the browser should be drawing the text in the image at the same font size and position as the image describes, scaling them if the zoom is changed. A look at the element viewer in the developer tools confirms that the text did not have a smaller font size attribute and both viewers were at the same zoom level. The image shown in the editor is saved to the file and not modified before being used by the browser so it is definitely a browser problem. Even if no one can find the reason for this problem, I would still like a solution.

Here is an example image to reproduce the issue and test with (I forgot this earlier and was recommended to). SVG image host servers seemed rare so I added it as a code snippet however it can be copied back into a file with the .svg extension to be viewed normally in a browser.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="135.972"
   height="40"
   viewBox="0 0 135.97202 39.999998"
   id="svg2"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="test.svg"
   inkscape:export-filename="C:\blah\logo.png"
   inkscape:export-xdpi="90"
   inkscape:export-ydpi="90">
  <defs
     id="defs4">
    <marker
       inkscape:isstock="true"
       style="overflow:visible"
       id="marker4688"
       refX="0"
       refY="0"
       orient="auto"
       inkscape:stockid="Arrow1Send">
      <path
         transform="matrix(-0.2,0,0,-0.2,-1.2,0)"
         style="fill:#a5a5a5;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         d="M 0,0 5,-5 -12.5,0 5,5 0,0 Z"
         id="path4690"
         inkscape:connector-curvature="0" />
    </marker>
    <linearGradient
       osb:paint="gradient"
       id="linearGradient9980">
      <stop
         id="stop9982"
         offset="0"
         style="stop-color:#000000;stop-opacity:1;" />
      <stop
         id="stop9984"
         offset="1"
         style="stop-color:#000000;stop-opacity:0;" />
    </linearGradient>
    <marker
       inkscape:stockid="Arrow1Send"
       orient="auto"
       refY="0"
       refX="0"
       id="marker4688-8"
       style="overflow:visible"
       inkscape:isstock="true">
      <path
         inkscape:connector-curvature="0"
         id="path4690-0"
         d="M 0,0 5,-5 -12.5,0 5,5 0,0 Z"
         style="fill:#a5a5a5;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1"
         transform="matrix(-0.2,0,0,-0.2,-1.2,0)" />
    </marker>
    <marker
       inkscape:isstock="true"
       style="overflow:visible;"
       id="marker4688-5"
       refX="0.0"
       refY="0.0"
       orient="auto"
       inkscape:stockid="Arrow1Send">
      <path
         transform="scale(0.2) rotate(180) translate(6,0)"
         style="fill-rule:evenodd;stroke:#000000;stroke-width:1pt;stroke-opacity:1;fill:#a5a5a5;fill-opacity:1"
         d="M 0.0,0.0 L 5.0,-5.0 L -12.5,0.0 L 5.0,5.0 L 0.0,0.0 z "
         id="path4690-1" />
    </marker>
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:zoom="2"
     inkscape:cx="41.427915"
     inkscape:cy="11.725916"
     inkscape:document-units="px"
     inkscape:current-layer="svg2"
     showgrid="false"
     units="px"
     inkscape:window-width="961"
     inkscape:window-height="601"
     inkscape:window-x="336"
     inkscape:window-y="51"
     inkscape:window-maximized="0"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0"
     inkscape:showpageshadow="false"
     showborder="true"
     borderlayer="false" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <text
     xml:space="preserve"
     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:13.75000191px;line-height:94.99999881%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#00007c;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     x="23.658821"
     y="16.700916"
     id="text4409"
     sodipodi:linespacing="94.999999%"><tspan
       sodipodi:role="line"
       x="23.658821"
       y="16.700916"
       id="tspan4413"
       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16.25000381px;line-height:94.99999881%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#00007c;fill-opacity:1"><tspan
         rotate="0 0 0 0 0 0 0 0 0 0"
         id="tspan4465"
         style="font-style:italic;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16.25000381px;line-height:94.99999881%;font-family:sans-serif;-inkscape-font-specification:'sans-serif Bold Italic';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#00007c;fill-opacity:1">Text that</tspan></tspan><tspan
       sodipodi:role="line"
       x="23.658821"
       y="32.13842"
       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16.25000381px;line-height:94.99999881%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#00007c;fill-opacity:1"
       dx="0 0 0 0 0 0 0 0 0 0 10"
       dy="0 0 0 0 0 0 0 0 0 0 0"
       id="tspan4473"><tspan
         id="tspan4475"
         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:16.25000381px;line-height:94.99999881%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#00007c;fill-opacity:1">gets moved</tspan></tspan></text>
  <text
     xml:space="preserve"
     style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:13.75000191px;line-height:70.99999785%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#0050a0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     x="133.1541"
     y="7.5629053"
     id="text4409-4"
     sodipodi:linespacing="70.999998%"
     transform="scale(0.99999351,1.0000065)"><tspan
       sodipodi:role="line"
       x="133.1541"
       y="7.5629053"
       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.25000095px;line-height:0%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:center;letter-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#0050a0;fill-opacity:1"
       id="tspan4473-1">t</tspan><tspan
       sodipodi:role="line"
       x="133.1541"
       y="11.79909"
       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.25000095px;line-height:85.00000238%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:center;letter-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#0050a0;fill-opacity:1"
       id="tspan4231">e</tspan><tspan
       sodipodi:role="line"
       x="133.1541"
       y="16.114841"
       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.25000095px;line-height:64.99999762%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:center;letter-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#0050a0;fill-opacity:1"
       id="tspan4233">s</tspan><tspan
       sodipodi:role="line"
       x="133.1541"
       y="21.423279"
       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.25000095px;line-height:89.99999762%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:center;letter-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#0050a0;fill-opacity:1"
       id="tspan4235">t</tspan><tspan
       sodipodi:role="line"
       x="133.1541"
       y="26.799091"
       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.25000095px;line-height:85.00000238%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:center;letter-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#0050a0;fill-opacity:1"
       id="tspan4237">i</tspan><tspan
       sodipodi:role="line"
       x="133.1541"
       y="31.114843"
       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.25000095px;line-height:64.99999762%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:center;letter-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#0050a0;fill-opacity:1"
       id="tspan4239">n</tspan><tspan
       sodipodi:role="line"
       x="133.1541"
       y="35.476368"
       style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:6.25000095px;line-height:70.99999785%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Bold';text-align:center;letter-spacing:0px;writing-mode:lr-tb;text-anchor:middle;fill:#0050a0;fill-opacity:1"
       rotate="0 0"
       dy="0 0"
       dx="0 10.000066"
       id="tspan4241">g</tspan></text>
  <path
     style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
     d="m 129.69402,1.1636744e-6 0,39.9999998363256"
     id="path4340"
     inkscape:connector-curvature="0"
     sodipodi:nodetypes="cc" />
</svg>

User @rhashimoto's useful answer explains how it is a font problem, not a browser or Inkscape problem. The text font name was set to sans-serif which specifies a group of fonts instead of a specific font which allowed Inkscape to chose a different font to Google Chrome when displaying, causing the text dimensions to be different. Both setting the font name to "Arial" and converting the text to a path solved the problem.

Answer 1

Your SVG text elements contain a font-family attribute with value sans-serif. This value does not specify a particular font, only that the font selected should not contain serifs. Inkscape and Chrome are using different sans-serif fonts, and these fonts produce text of different widths.

It appears that Inkscape tries to use DejaVu Sans if present as its sans-serif font. On Chrome, go to chrome://settings/fonts to see the sans-serif font - on my machine it is Helvetica.

Since the text layout is important to you, you should assign a specific font to your text objects. For example, you could change your text elements in Inkscape to explicitly have a font-family of 'DejaVu Sans' (you can also try it in Chrome Developer Tools). Then the resulting SVG should use the same font in Chrome as long as Chrome supports that font on your target platforms.

That last caveat means that you should not expect any arbitrary esoteric font to reproduce properly across all browsers and machines. You may want to read the "Fonts In SVG" section of http://nimbupani.com/about-fonts-in-svg.html.

You also have the option of converting the text to a path. Note, however, that this loses the textual content so it can't be copied to the clipboard, read by a screen reader, etc.