[에러로그]파이어폭스에서 리액트 SVG 리사이징하기

오른쪽처럼 리사이징이 적용되어야하는데 파이어폭스는 왼쪽처럼 svg이미지가 깨진다

파이어폭스에서만 적용이 되지 않는 svg 아이콘 사이즈

---

개인적으로 파이어폭스를 애용하는 중인데, 유독 다른 브라우저에서는 모두 아이콘이 정상적으로(크롬, 사파리, 엣지)작동하는 것에 비해 파이어폭스에서는 적용되지 않는 것이 보였다.

블링크나 웹킷 엔진 기반에서는 사이즈가 제대로 반영이 되지만 게코 엔진(발음이 이상하지만 gecko engine이다)과 다른 것이 무엇일까 생각하면서 한참을 github 이슈나 구글링을 통해서 찾아본 결과 크게 다른 이슈될만한 버그리포트나 티켓들을 찾아볼 수 없었다.

그래서 직접 개발자도구로 해당하는 Attribute를 타겟팅해서 태그를 직접 비교해봤다.

놀랍게도 아주 미묘한 차이를 발견할 수 있었는데 다른 브라우저에서는 스타일 태그의 width와 height에 자동으로 px(단위, 픽셀)이 붙어있는 반면에 파이어폭스에서는 그냥 그대로 숫자만 출력되어 있던 사실이다.

개발자도구로 px을 붙여서 수정해주니 원하는 사이즈로 리사이징됐다.

리액트 svg props 전달하기 수정

---

icon={
      <Svg
        width={16}
        height={16}
        color='rgba(31, 31, 32, 0.6)'
        name={'view_icon'}
      />
}

아마도 다른 브라우저들은 유연하게 숫자만 props로 전달해주면 뷰를 그리면서 자동으로 픽셀을 붙여서 치환해주는 모양이지만 파이어폭스는 딱딱하게 있는 그대로를 받아들이는 것 같다.

사실 단위가 px만 있는 것도 아니고 em이나 퍼센트 등 다양하게 표시할 수 있기 때문에 모든 숫자를 px로 임의로 치환해서 처리한다는 것이 그렇게 파이어폭스에 비해서 확실히 좋은 방법이다. 라고는 콕집어서 말 할 수 없을 것 같다.(파이어폭스 이용자라서 옹호하는 것만은 아니다)

사이즈를 명시해주자

---

icon={
  <Svg
    width={'16px'}
    height={'16px'}
    color='rgba(31, 31, 32, 0.6)'
    name={'view_icon'}
  />
}

이렇게 props를 전달할 때 확실히 단위까지 명시해주면 파이어폭스에서도 제대로 리사이징이 적용되어서 출력된다.

너무 브라우저에 모든 것을 맡기지 말고 웹 표준성을 위해서라도 반드시 단위까지 적어두는 것이 올바른 방법인 것 같다.