Error: Invalid value for attribute height="15rem" (Safari 브라우저)

 

Safari 브라우저에서 svg의  width와 height에 rem을 사용할때 발생되는 Error 이다.

다른 브라우저에서는 Error가 안보이지만 Safari 브라우저에서만 해당 Error가 보인다.

Error가 발생해도 동작은 잘 되지만 그래도 Error니까 해결해보자.

원인은 rem 사용 때문이다.

이전에는 크롬에서도 rem 사용시 문제가 되었던것같은데 이제는 문제가 없고 Safari 브라우저에서만 해당 오류가 발생하는것같았다.

Safari 브라우저에서 해당 Error를 없애기 위해서는 svg width와 height에는 number, px ,percentage만 사용하라고 한다.

그러면 rem을 사용한 반응형으로 어떻게 만들지? 라는 생각부터 든다.

해결법은 간단하다.

const ArrowBackIcon = ({ width = 24, height = 24, color }: IconProps) => {

return (

<SVGContainer width={width} height={height}>

<ArrowBack width={'100%'} height={'100%'} fill={color} />

</SVGContainer>

);

};

export default ArrowBackIcon;

ArrowBack은 svg 아이콘이고 svg 파일에 width와 height는 current가 작성되어있는 상태이다.

SVGContainer는 div 태그이며 svg width와 height 크기를 rem으로 해당 태그에 할당한다.

이렇게 할당하면 원하는 사이즈대로 반응형으로 svg를 표현할 수 있다.

Safari 브라우저 콘솔에서도 Error가 사라진것을 확인할 수 있다.