[트러블 슈팅] SVG 속성 오류 해결하기 - <svg> Height 속성에서 Expected length, "auto" 오류를 수정하는 방법

발생한 오류 🔥

 

SVG의 `height` 속성을 `auto`로 설정했을 때 발생한 오류였습니다.

 

해결 과정 🔎

HTML, CSS에선 `height`에 `auto`를 사용해 콘텐츠의 높이를 유동적으로 설정할 수 있지만, SVG의 `height` 속성은 `length`값 (예시: `px`,`%`)으로 지정해야 합니다.

 

따라서 `auto`는 SVG 표준에서 요구하는 유효한 `length`값이 아니어서 오류가 발생했습니다.

 

해결 방법 ✨

수정 후

<svg width="50" height="100%" viewBox="0 0 63 25" fill="none" xmlns="http://www.w3.org/2000/svg">
  <!-- SVG 내용 -->
</svg>

 

이 문제를 해결하기 위해 `height`속성을 `auto`에서 `100%`로 변경했습니다.

 

 

회고 🧐

SVG 속성값을 지정할 때 표준을 준수하고 HTML과 CSS의 차이를 고려해 적절한 속성값을 사용하는 것이 좋을 것 같습니다!

---

출처 🏷️

https://github.com/boopathi/react-svg-loader/issues/194