Search code examples
javascriptreactjssafari

Safari: Invalid value for <svg> attribute width/height "rem"

I am changing the size of a SVG based on antd breakpoints and I get the following errors.

I pass props to a SVG element:

const { lg } = useBreakpoint();
const height= lg ? "8rem" : xs ? "3rem" : "5rem";
const width= lg ? "20rem" : "15rem";

<SVG title={tooltip} height={height} width={width} fill={color} />

Why do I get these errors on Safari ? Chrome and Firefox are ok.

Solution

  • SVG's kind of have 2 sizes, the viewbox size, and it's render size (style).

    The viewbox size is usually pixels, but other units can also be used like cm / inches etc, I've a feeling the rem size for the viewbox doesn't make much sense and is the reason Safari might be complaining.

    So if you don't supply a viewbox an SVG will use it's width & height to calculate the viewbox size.

    Normally you don't dynamically change an SVG viewbox size, so I believe what your after is changing the render size of the SVG, so all you need to do here is supply a viewbox and then width/height will effect it's render size and not the SVG size.

    Below is an example, both SVG's are 100x100 pixels, but the render size for the red one is 4 rem, and the green one is 7 rem.

    <svg viewbox="0 0 100 100" width="4rem">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

<svg viewbox="0 0 100 100" width="7rem">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="green" />
</svg>

    Put simply the width attribute of an SVG has 2 meanings, depending on if you supply a viewbox or not.