svgfirefoxmicrosoft-edgechromium

Why is the text of this svg displayed at different widths in Edge and Firefox?

I have this simple svg image:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   width="340"
   height="275"
   viewBox="0 0 256 206"
   version="1.1"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
    <rect x="0" y="113" width="256" height="22" style="fill:#a9e780" />
    <text x="15" y="127" style="font-size:8px;font-family:'Verdana'">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</text>
</svg>

The width of the text is different in this two browsers:

Microsoft Edge:
image of the above code in MS Edge, everything ok

Firefox:
image of the above code in Firefox, text is too wide

Why is there such a big difference in the text width? Does anyone know a solution for this? Converting the texts into paths is not an option, as the images will then be very large.

I tried to find the crucial and responsible code part in the svg, I have simplified the code. However, it does not seem to be due to the existing code.

Solution

  • TL;DR: pixel-perfect cross-browser text rendering is impossible

    Unfortunately, you're facing multiple problems:

    1. there's no way to get a 100% consistent text/font rendering across all browsers or operating systems because there are plenty of different rendering engines as well as drawing modes or even global user defined settings for sub-pixel rendering
    2. So called "Web-safe" fonts like Verdana are most likely not available on Android devices
    3. SVG doesn't auto embed any font files – when used in an <img> element you may see a replacement
    4. Verdana is highly optimized for readability on low-resolution displays – a generic "sans-serif" replacement will most likely render with a significant width difference

    Workaround: don't rely on system fonts

    1. if you're using the SVG as an inlined element in a HTML you can load a custom font by adding a global CSS @font-face rule (or a link or @importfor something like google fonts).
      As explained by kazcfz this rendering default GDI rendering in Firefox only applies to well-known system fonts like Verdana, Arial etc. As per Robert Longson's comment next versions will probably change this default.
    2. if your SVG should also work as a selfcontained image resource you need to embed the font as a base64 encoded dataURL – However, this also increases the overall file size significantly. For simple elements like logos I highly recommend a text-to-path conversion as it may still be more compact in file size than embedding a font resource.

    body {
  font-family: "Open Sans";
}

img,
svg {
  display: block;
  outline: 1px solid #ccc;
  margin-bottom: 1em;
}

.resize {
  resize: both;
  overflow: auto;
  outline: 1px solid #ccc;
  padding: 0.3em;
}

textarea {
  display: block;
  width: 100%;
}
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400&display=swap">

<div class="resize">
  <h3>100% – please resize</h3>
  <svg width="100%" viewBox="0 0 256 20">
    <line x1="233" y1="0" x2="233" y2="100%" stroke="red" vector-effect="non-scaling-stroke" />
    <text x="10" y="66%" style="font-size:8px;font-family:'Verdana'">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</text>
  </svg>


  <h3>680px</h3>
  <svg width="680" viewBox="0 0 256 20">
    <line x1="233" y1="0" x2="233" y2="100%" stroke="red" vector-effect="non-scaling-stroke" />
    <text x="10" y="66%" style="font-size:8px;font-family:'Verdana'">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</text>
  </svg>

  <h3>340px – original size</h3>
  <svg width="340" viewBox="0 0 256 20">
    <line x1="233" y1="0" x2="233" y2="100%" stroke="red" vector-effect="non-scaling-stroke" />
    <text x="10" y="66%" style="font-size:8px;font-family:'Verdana'">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</text>
  </svg>

  <h3>Open Sans</h3>
  <svg width="340" viewBox="0 0 256 20">
    <line x1="216" y1="0" x2="216" y2="100%" stroke="green" vector-effect="non-scaling-stroke" />
    <line x1="233" y1="0" x2="233" y2="100%" stroke="red" vector-effect="non-scaling-stroke" />
    <text x="10" y="66%" style="font-size:8px;font-family:'Open Sans'">
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</text>
  </svg>

  <h3>Self contained image</h3>
  <img width="340" src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='340' viewBox='0 0 256 20'><style> @font-face { font-family: 'CustomFont'; font-style: normal; font-weight: 400; font-stretch: normal; font-display: swap; src: url('data:font/woff2;base64,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') format('woff2'); } </style><line x1='216' y1='0' x2='216' y2='100%' stroke='green' vector-effect='non-scaling-stroke'/><line x1='233' y1='0' x2='233' y2='100%' stroke='red' vector-effect='non-scaling-stroke'/><text x='10' y='66%' style='font-size:8px;font-family:&quot;CustomFont&quot;'> Lorem ipsum dolor sit amet, consetetur sadipscing elitr,</text></svg>"
    alt="">


</div>

    Hinting

    Simplified: Hinting instructions (specified in the font) can give the renderer hints how to ideally rasterize text. Especially vertical and horizontal stems stay more stressed/crisper when adjusting stem positions to the pixel grid. This trick will obviously cause changes in width.
    As mentioned: although hinting instructions are defined in the font each rendering engine or mode will render slightly results – some may completely ignore hinting, others will choose only a subtle stem emphasis.

    hinting

    Top: chromium rendering – subtle hinting; Bottom: Firefox – stronger hinting applied

    See also: