CODEWITHSUNDEEP
google-chromefirefoxsvgmicrosoft-edge
abalter
abalter

Reputation: 10383

SVG text layout rendering differently in Chrome, Firefox, Edge

Even after removing all use of alignment-baseline and dominant-baseline as pointed out here, I'm still seeing my stuff render differently in each browser.

In Firefox, the entire bottom of my image is cut off.

Is this really the state of affairs in 2017? Is SVG a standard or not?

Yes, there are close to 15 different posts on SVG rendering differently in browsers. But none of them applied in this case or had solutions that worked.

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="100%" height="165"
   viewBox="0 0 100% 100%"
   >

  <defs>
    <style type="text/css">
      @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
      @import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
    </style>
  </defs>

  <g transform="translate(19,140)">
    <svg width="100vw" height="1.7rem">
      <rect x="0" y="0" width="100vw" height="25" class="bottom" stroke-width="0"/>
      <text x="1vw" y="65%" class="services" font-family="Roboto Condensed" fill="white">
        <tspan class="service">residential</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">commercial</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">buyer</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">seller</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">warranty</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">expert-witness</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">sewer</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">radon</tspan>
      </text>

    </svg>
  </g>

  <g transform="translate(265,140)">
    <line x1="0" x2="500" y1="0" y2="0" style="stroke: green"></line>
    <text dx="70px" dy="0"
      text-anchor="start"
      font-size="38px"
      font-family="Roboto Slab"
      font-weight="bold"
      transform="rotate(-90)"
      class="logo">the</text>
    <text dx="0" dy="0"
      text-anchor="start"
      font-size="78px"
      font-family="Roboto Slab"
      font-weight="bold"
      class="logo">
        <tspan class="name" x="5" dx="0" dy="-73px">Logo</tspan>
        <tspan class="name" x="-70" dx="0" dy="65px">Design Text</tspan>
        <tspan class="name" x="0" dx="380" dy="-2" font-size="24px">llc</tspan>
    </text>
  </g>
</svg>

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   version="1.1"
   width="100%" height="185"
   >

  <defs>
    <style type="text/css">
      @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
      @import url('https://fonts.googleapis.com/css?family=Roboto+Slab');
    </style>
  </defs>

  <g transform="translate(19,140)">
    <svg width="100%" height="25">
      <rect x="0" y="0" width="100%" height="25" class="bottom" stroke-width="0"/>
      <text x="10" y="65%" class="services" font-family="Roboto Condensed" fill="white">
        <tspan class="service">residential</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">commercial</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">buyer</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">seller</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">warranty</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">expert-witness</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">sewer</tspan>
        <tspan class="separator" dx="5px">&#9632;</tspan>
        <tspan class="service" dx="5px">radon</tspan>
      </text>

    </svg>
  </g>

  <g transform="translate(265,140)">
    <line x1="0" x2="500" y1="0" y2="0" style="stroke: green"></line>
    <text dx="70" dy="0"
      text-anchor="start"
      font-size="38px"
      font-family="Roboto Slab"
      font-weight="bold"
      transform="rotate(-90)"
      class="logo">the</text>
    <text dx="0" dy="0"
      text-anchor="start"
      font-size="78px"
      font-family="Roboto Slab"
      font-weight="bold"
      class="logo">
        <tspan class="name" x="5" dx="0" dy="-73">Logo</tspan>
        <tspan class="name" x="-70" dx="0" dy="65">Design Text</tspan>
        <tspan class="name" x="0" dx="380px" dy="-2" font-size="24px">llc</tspan>
    </text>
  </g>
</svg>

Upvotes: 2

Views: 3394

Answers (1)

Robert Longson
Robert Longson

Reputation: 123985

Firefox supports the SVG 1.1 standard for units

length ::= number ("em" | "ex" | "px" | "in" | "cm" | "mm" | "pt" | "pc" | "%")?

You're using rem and vw units which are not yet supported because they are defined in SVG 2 which all UAs implement only in part so far.

Also units in the viewBox attribute are invalid in any version of the SVG standard so

viewBox="0 0 100% 100%"

needs to change to be just four numbers.

The Firefox Web Console shows you all of these problems:

Unexpected value 0 0 100% 100% parsing viewBox attribute.
Unexpected value 100vw parsing width attribute.
Unexpected value 1.7rem parsing height attribute.
Unexpected value 100vw parsing width attribute.
Unexpected value 1vw parsing x attribute.

I imagine other UAs have similar debugging tools.

Upvotes: 7

Related Questions