Edward Edward - 4 months ago 16
HTML Question

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

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):

Image described on above line, http://i.stack.imgur.com/lay4B.png

The image viewed in the Google Chrome 51 browser:
Image described on above line, http://i.stack.imgur.com/hyVPZ.png

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

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.