[Next.js] SVG 컴포넌트 사용 시 모바일에서 나오지 않는 이슈 해결

Redonearth·2022년 5월 17일
0
post-thumbnail

Next.js 프로젝트에서 @svgr/webpack를 사용해서 *.svg 파일을 컴포넌트처럼 import 해서 사용 중이었다.

데스크탑 크롬 브라우저에서 잘 되는 것을 보고 한창 개발을 진행하던 중, 아이폰으로 테스트하기 위해 접속해보았더니...
아니 글쎄, SVG 아이콘이 뜨지 않는 게 아닌가!! 😱

@svgr/webpack 설정을 꼼꼼히 씹고 맛보고 즐... 기진 못했고 아무튼
별에 별 짓을 다 해보았지만,
(next.config.js의 webpack 설정도 바꿔보고, config.module.rules.pushunshift로도 바꿔보고, .svgrrc 파일도 만들어보고...)
여전히 원인은 미궁...

방금 해결했는데, 정말 어처구니가 없었다.

원인

나의 경우는 디자이너가 그려준 SVG 이미지를 Adobe Illustrator에서 SVG 코드를 통해 추출했다.

그 코드는 이러한 형태였다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 183.15 148.15">
  <g id="fa5306e0-2884-4b0a-9d4c-aa2f9b7ff8fe">
    <g id="afa1c823-8b74-436c-bb59-094354fbe2f7">
      <path
        d="M143.47,75.08a1.69,1.69,0,0,0-2.18,2.58c36.63,31,38.55,60.29,38.45,67.12H106.51V130a2.64,2.64,0,0,0,0-.28c-1.8-10.52-6.17-17.61-13-21.09-11.59-5.93-25.83.91-26.43,1.2a1.67,1.67,0,0,0-.28.18c-5.18,4-10.58,5.44-16,4.42C38.17,112,29,97.12,28.93,97a39.81,39.81,0,0,1-2.48-5.21c.16.22.32.44.49.64a3.34,3.34,0,0,0,2.56,1.29,5.91,5.91,0,0,0,2.48-1c2.47-1.39,5-3.42,5.52-6.38a2.19,2.19,0,0,0-.54-2,2.09,2.09,0,0,0-2.05-.55,24.92,24.92,0,0,1-4.21,1.28l-.09,0a3.05,3.05,0,0,1-.52,0c-.35,0-.69,0-1,0l-.26,0-.42-.07a3.9,3.9,0,0,1-.46-.12c-.1,0-.76-.28-.23,0a2.34,2.34,0,0,0-1.62-.22,2.37,2.37,0,0,0-.78.42,4.92,4.92,0,0,1,.36-1.33,3.46,3.46,0,0,1,2.15-2c12.88-2.21,20.28-5.37,22-9.4a4.21,4.21,0,0,0,0-3.57c-6-22.48,17.5-30.77,18.53-31.12a1.69,1.69,0,0,0-1.07-3.2c-.28.1-27.73,9.68-20.66,35.38a.88.88,0,0,0,.19.45,1.17,1.17,0,0,1-.16.86c-.68,1.31-3.93,4.63-19.54,7.29a6.88,6.88,0,0,0-4.51,3.84C20.89,86.05,22,91.56,26,98.72c.4.66,10,16.31,24.11,19,6.39,1.2,12.63-.46,18.57-4.94,1.44-.66,13.77-6,23.29-1.16,5.78,3,9.53,9.18,11.15,18.51v16.36a1.69,1.69,0,0,0,1.69,1.69h76.52a1.7,1.7,0,0,0,1.68-1.49C183.19,145.25,186.61,111.65,143.47,75.08Z" />
      <path
        d="M87.71,75.1a22,22,0,0,0,12.45,13.18,2.13,2.13,0,0,0,2.6-1.47,2.16,2.16,0,0,0-1.48-2.59A17.5,17.5,0,0,1,91.4,72.74c-1.75-6.63.39-13.53,2.19-19.91,1.86-6.63,3.63-13.66,2-20.53-1.41-5.81-5.44-11.15-11.41-12.73a12.81,12.81,0,0,0-9.63,1.09,11.79,11.79,0,0,0-5.63,8,2.16,2.16,0,0,0,1.47,2.59A2.13,2.13,0,0,0,73,29.8a7.78,7.78,0,0,1,4-5.66,8.87,8.87,0,0,1,7-.22c5,1.75,7.59,7.28,8,12.23C93,49.36,83.2,61.84,87.71,75.1Z" />
      <path
        d="M117.17,80.57a2.16,2.16,0,0,0-2.11-2.11,15.45,15.45,0,0,1-12-8c-2.33-4.53-1.62-10.48.29-15.05,1-2.32,2.44-4.36,3.33-6.74a28.17,28.17,0,0,0,1.55-7,33.42,33.42,0,0,0-1.54-13.9,27.74,27.74,0,0,0-3.19-6.71,15.9,15.9,0,0,0-2.35-2.88,23.85,23.85,0,0,0-3-1.89c-2.26-1.52-4.37,2.13-2.13,3.64a18.4,18.4,0,0,1,2.42,1.44,10.76,10.76,0,0,1,1.75,2.26,23.61,23.61,0,0,1,2.58,5.53,29.49,29.49,0,0,1,1.17,13.45,22.25,22.25,0,0,1-2,6.56,43.13,43.13,0,0,0-3.37,7.3C96.92,61.89,96.82,68,99.62,73c3.15,5.69,9.11,9,15.44,9.68A2.12,2.12,0,0,0,117.17,80.57Z" />
      <path
        d="M125.43,76A2.16,2.16,0,0,0,128,74.48a2.13,2.13,0,0,0-1.47-2.59,20.9,20.9,0,0,1-6.1-2.14A15.11,15.11,0,0,1,115.6,66c-1.21-1.63-1.07-4.06-.74-6a52.09,52.09,0,0,1,1.89-6.7,63.93,63.93,0,0,0,1.74-6.8,42.87,42.87,0,0,0,1.11-7.8,37.57,37.57,0,0,0-.69-6.68,47.55,47.55,0,0,0-1.28-5.89,29.39,29.39,0,0,0-7.4-12.66c-1.92-1.92-4.9,1.06-3,3a25.12,25.12,0,0,1,6.32,10.8,37.45,37.45,0,0,1,1.77,12.46c-.33,5-1.83,9.86-3.34,14.58-1.35,4.23-2.77,9.79,0,13.78A18,18,0,0,0,118,73.21,23.9,23.9,0,0,0,125.43,76Z" />
      <path
        d="M139,71.25a2.19,2.19,0,0,0,2.6-1.48,2.12,2.12,0,0,0-1.48-2.59,19.18,19.18,0,0,1-11-5.17c-1.39-1.45-1.46-3.56-1.34-5.46a31.85,31.85,0,0,1,1.33-6.39,45.93,45.93,0,0,0,1.54-7,32.49,32.49,0,0,0,0-7.31,47.23,47.23,0,0,0-3.07-12.95A40.76,40.76,0,0,0,120,11c-1.81-2-4.79,1-3,3A38.62,38.62,0,0,1,126.45,37a27.35,27.35,0,0,1-.3,7.45c-.44,2.22-1.13,4.38-1.69,6.58-1.13,4.41-1.92,9.83,1.29,13.57a19,19,0,0,0,6,4.36A24.36,24.36,0,0,0,139,71.25Z" />
      <path
        d="M59.25,65.4h-.33l-.28-.07-.46-.15a13.38,13.38,0,0,1-2.28-1.42,2.13,2.13,0,0,0-2.89.75,2.18,2.18,0,0,0,.76,2.89c2,1.45,4.5,2.82,7,2a8.91,8.91,0,0,0,3.1-2c.88-.82,1.74-1.65,2.61-2.48a2.11,2.11,0,1,0-3-3l-2.25,2.14a5.94,5.94,0,0,1-1,.88c.46-.27-.15.1-.24.15l-.27.18a1.49,1.49,0,0,1-.58.16C59.47,65.39,59.49,65.38,59.25,65.4Z" />
      <path
        d="M30.17,51.39A1.66,1.66,0,0,0,31.29,51a1.69,1.69,0,0,0,.14-2.38l-7-7.87.25-.19,2.29-2,7,7.87a1.7,1.7,0,0,0,2.38.14,1.68,1.68,0,0,0,.14-2.38l-7-7.87,2.63-2.34,7,7.87a1.68,1.68,0,0,0,1.26.56,1.68,1.68,0,0,0,1.26-2.8l-7-7.87,2.63-2.34,7,7.87a1.68,1.68,0,0,0,1.26.56A1.68,1.68,0,0,0,46.77,35l-7-7.87,2.63-2.34,7,7.87a1.69,1.69,0,0,0,2.52-2.24l-7-7.87,2.64-2.34,7,7.87a1.7,1.7,0,0,0,2.38.14,1.68,1.68,0,0,0,.14-2.38l-7-7.87,2.83-2.52,7,7.87a1.68,1.68,0,0,0,1.26.56A1.68,1.68,0,0,0,62.43,21L55.26,13a8.33,8.33,0,0,0-.67-10.18,8.33,8.33,0,0,0-11.74-.69l-29.24,26a8.38,8.38,0,0,0-2.59,8L1.37,44.64A4.09,4.09,0,0,0,1,50.4a4,4,0,0,0,3.05,1.37,4.08,4.08,0,0,0,2.71-1l9.65-8.58a8.51,8.51,0,0,0,4.92.13,1.24,1.24,0,0,0,.17.23l7.38,8.3A1.65,1.65,0,0,0,30.17,51.39ZM16.88,38.69a1.7,1.7,0,0,0-1.89.24L4.55,48.22a.72.72,0,0,1-1-.06.7.7,0,0,1,.06-1h0l10.44-9.28A1.68,1.68,0,0,0,14.51,36a5,5,0,0,1,1.34-5.43l29.24-26a4.93,4.93,0,0,1,3.27-1.24h.31a4.94,4.94,0,0,1,3,8.63L22.43,38A5,5,0,0,1,16.88,38.69Z" />
    </g>
  </g>
</svg>

이것을 SVGOMG(https://jakearchibald.github.io/svgomg/)를 통해 최적화를 해주었다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 183.15 148.15">
  <path
    d="M143.47 75.08a1.69 1.69 0 0 0-2.18 2.58c36.63 31 38.55 60.29 38.45 67.12h-73.23V130a2.64 2.64 0 0 0 0-.28c-1.8-10.52-6.17-17.61-13-21.09-11.59-5.93-25.83.91-26.43 1.2a1.67 1.67 0 0 0-.28.18c-5.18 4-10.58 5.44-16 4.42C38.17 112 29 97.12 28.93 97a39.81 39.81 0 0 1-2.48-5.21c.16.22.32.44.49.64a3.34 3.34 0 0 0 2.56 1.29 5.91 5.91 0 0 0 2.48-1c2.47-1.39 5-3.42 5.52-6.38a2.19 2.19 0 0 0-.54-2 2.09 2.09 0 0 0-2.05-.55 24.92 24.92 0 0 1-4.21 1.28h-.09a3.05 3.05 0 0 1-.52 0h-1.26l-.42-.07a3.9 3.9 0 0 1-.46-.12c-.1 0-.76-.28-.23 0a2.34 2.34 0 0 0-1.62-.22 2.37 2.37 0 0 0-.78.42 4.92 4.92 0 0 1 .36-1.33 3.46 3.46 0 0 1 2.15-2c12.88-2.21 20.28-5.37 22-9.4a4.21 4.21 0 0 0 0-3.57c-6-22.48 17.5-30.77 18.53-31.12a1.69 1.69 0 0 0-1.07-3.2c-.28.1-27.73 9.68-20.66 35.38a.88.88 0 0 0 .19.45 1.17 1.17 0 0 1-.16.86c-.68 1.31-3.93 4.63-19.54 7.29a6.88 6.88 0 0 0-4.51 3.84C20.89 86.05 22 91.56 26 98.72c.4.66 10 16.31 24.11 19 6.39 1.2 12.63-.46 18.57-4.94 1.44-.66 13.77-6 23.29-1.16 5.78 3 9.53 9.18 11.15 18.51v16.36a1.69 1.69 0 0 0 1.69 1.69h76.52a1.7 1.7 0 0 0 1.68-1.49c.18-1.44 3.6-35.04-39.54-71.61Z" />
  <path
    d="M87.71 75.1a22 22 0 0 0 12.45 13.18 2.13 2.13 0 0 0 2.6-1.47 2.16 2.16 0 0 0-1.48-2.59 17.5 17.5 0 0 1-9.88-11.48c-1.75-6.63.39-13.53 2.19-19.91 1.86-6.63 3.63-13.66 2-20.53-1.41-5.81-5.44-11.15-11.41-12.73a12.81 12.81 0 0 0-9.63 1.09 11.79 11.79 0 0 0-5.63 8 2.16 2.16 0 0 0 1.47 2.59A2.13 2.13 0 0 0 73 29.8a7.78 7.78 0 0 1 4-5.66 8.87 8.87 0 0 1 7-.22c5 1.75 7.59 7.28 8 12.23 1 13.21-8.8 25.69-4.29 38.95Z" />
  <path
    d="M117.17 80.57a2.16 2.16 0 0 0-2.11-2.11 15.45 15.45 0 0 1-12-8c-2.33-4.53-1.62-10.48.29-15.05 1-2.32 2.44-4.36 3.33-6.74a28.17 28.17 0 0 0 1.55-7 33.42 33.42 0 0 0-1.54-13.9 27.74 27.74 0 0 0-3.19-6.71 15.9 15.9 0 0 0-2.35-2.88 23.85 23.85 0 0 0-3-1.89c-2.26-1.52-4.37 2.13-2.13 3.64a18.4 18.4 0 0 1 2.42 1.44 10.76 10.76 0 0 1 1.75 2.26 23.61 23.61 0 0 1 2.58 5.53 29.49 29.49 0 0 1 1.17 13.45 22.25 22.25 0 0 1-2 6.56 43.13 43.13 0 0 0-3.37 7.3C96.92 61.89 96.82 68 99.62 73c3.15 5.69 9.11 9 15.44 9.68a2.12 2.12 0 0 0 2.11-2.11Z" />
  <path
    d="M125.43 76a2.16 2.16 0 0 0 2.57-1.52 2.13 2.13 0 0 0-1.47-2.59 20.9 20.9 0 0 1-6.1-2.14A15.11 15.11 0 0 1 115.6 66c-1.21-1.63-1.07-4.06-.74-6a52.09 52.09 0 0 1 1.89-6.7 63.93 63.93 0 0 0 1.74-6.8 42.87 42.87 0 0 0 1.11-7.8 37.57 37.57 0 0 0-.69-6.68 47.55 47.55 0 0 0-1.28-5.89 29.39 29.39 0 0 0-7.4-12.66c-1.92-1.92-4.9 1.06-3 3a25.12 25.12 0 0 1 6.32 10.8 37.45 37.45 0 0 1 1.77 12.46c-.33 5-1.83 9.86-3.34 14.58-1.35 4.23-2.77 9.79 0 13.78a18 18 0 0 0 6.02 5.12 23.9 23.9 0 0 0 7.43 2.79Z" />
  <path
    d="M139 71.25a2.19 2.19 0 0 0 2.6-1.48 2.12 2.12 0 0 0-1.48-2.59 19.18 19.18 0 0 1-11-5.17c-1.39-1.45-1.46-3.56-1.34-5.46a31.85 31.85 0 0 1 1.33-6.39 45.93 45.93 0 0 0 1.54-7 32.49 32.49 0 0 0 0-7.31 47.23 47.23 0 0 0-3.07-12.95A40.76 40.76 0 0 0 120 11c-1.81-2-4.79 1-3 3a38.62 38.62 0 0 1 9.45 23 27.35 27.35 0 0 1-.3 7.45c-.44 2.22-1.13 4.38-1.69 6.58-1.13 4.41-1.92 9.83 1.29 13.57a19 19 0 0 0 6 4.36 24.36 24.36 0 0 0 7.25 2.29ZM59.25 65.4h-.33l-.28-.07-.46-.15a13.38 13.38 0 0 1-2.28-1.42 2.13 2.13 0 0 0-2.89.75 2.18 2.18 0 0 0 .76 2.89c2 1.45 4.5 2.82 7 2a8.91 8.91 0 0 0 3.1-2c.88-.82 1.74-1.65 2.61-2.48a2.11 2.11 0 1 0-3-3l-2.25 2.14a5.94 5.94 0 0 1-1 .88c.46-.27-.15.1-.24.15l-.27.18a1.49 1.49 0 0 1-.58.16c.33-.04.35-.05.11-.03ZM30.17 51.39a1.66 1.66 0 0 0 1.12-.39 1.69 1.69 0 0 0 .14-2.38l-7-7.87.25-.19 2.29-2 7 7.87a1.7 1.7 0 0 0 2.38.14 1.68 1.68 0 0 0 .14-2.38l-7-7.87 2.63-2.34 7 7.87a1.68 1.68 0 0 0 1.26.56 1.68 1.68 0 0 0 1.26-2.8l-7-7.87 2.63-2.34 7 7.87a1.68 1.68 0 0 0 1.26.56A1.68 1.68 0 0 0 46.77 35l-7-7.87 2.63-2.34 7 7.87a1.69 1.69 0 0 0 2.52-2.24l-7-7.87 2.64-2.34 7 7.87a1.7 1.7 0 0 0 2.38.14 1.68 1.68 0 0 0 .14-2.38l-7-7.87 2.83-2.52 7 7.87a1.68 1.68 0 0 0 1.26.56A1.68 1.68 0 0 0 62.43 21l-7.17-8a8.33 8.33 0 0 0-.67-10.18 8.33 8.33 0 0 0-11.74-.69l-29.24 26a8.38 8.38 0 0 0-2.59 8l-9.65 8.51A4.09 4.09 0 0 0 1 50.4a4 4 0 0 0 3.05 1.37 4.08 4.08 0 0 0 2.71-1l9.65-8.58a8.51 8.51 0 0 0 4.92.13 1.24 1.24 0 0 0 .17.23l7.38 8.3a1.65 1.65 0 0 0 1.29.54Zm-13.29-12.7a1.7 1.7 0 0 0-1.89.24L4.55 48.22a.72.72 0 0 1-1-.06.7.7 0 0 1 .06-1l10.44-9.28a1.68 1.68 0 0 0 .46-1.88 5 5 0 0 1 1.34-5.43l29.24-26a4.93 4.93 0 0 1 3.27-1.24h.31a4.94 4.94 0 0 1 3 8.63L22.43 38a5 5 0 0 1-5.55.69Z" />
</svg>

React 컴포넌트처럼 사용하기 위해 /public/svg 경로에 .svg 파일을 만들어주고, import 해서 사용했다.
대강 이런 식이다.

import Shedding from '@public/svg/problems/Shedding.svg';

...

const Step1: NextPage = () => {
  return (
    <div>
      <Shedding />
    </div>
  )
}

export default Step1;

언급한 대로, 데스크톱 크롬 브라우저에서는 정상적으로 나오지만, 모바일 브라우저, 게다가 추가로 발견한 사실로는 데스크톱 사파리 브라우저에서도 아이콘이 나타나지 않는 것을 발견했다. 😦

해결 방법

어이없게도, 너무 간단했다.

그저 svg 태그에 width, height 속성과 값을 추가하면 되는 것이었다.

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 183.15 148.15">
  <path
    d="M143.47 75.08a1.69 1.69 0 0 0-2.18 2.58c36.63 31 38.55 60.29 38.45 67.12h-73.23V130a2.64 2.64 0 0 0 0-.28c-1.8-10.52-6.17-17.61-13-21.09-11.59-5.93-25.83.91-26.43 1.2a1.67 1.67 0 0 0-.28.18c-5.18 4-10.58 5.44-16 4.42C38.17 112 29 97.12 28.93 97a39.81 39.81 0 0 1-2.48-5.21c.16.22.32.44.49.64a3.34 3.34 0 0 0 2.56 1.29 5.91 5.91 0 0 0 2.48-1c2.47-1.39 5-3.42 5.52-6.38a2.19 2.19 0 0 0-.54-2 2.09 2.09 0 0 0-2.05-.55 24.92 24.92 0 0 1-4.21 1.28h-.09a3.05 3.05 0 0 1-.52 0h-1.26l-.42-.07a3.9 3.9 0 0 1-.46-.12c-.1 0-.76-.28-.23 0a2.34 2.34 0 0 0-1.62-.22 2.37 2.37 0 0 0-.78.42 4.92 4.92 0 0 1 .36-1.33 3.46 3.46 0 0 1 2.15-2c12.88-2.21 20.28-5.37 22-9.4a4.21 4.21 0 0 0 0-3.57c-6-22.48 17.5-30.77 18.53-31.12a1.69 1.69 0 0 0-1.07-3.2c-.28.1-27.73 9.68-20.66 35.38a.88.88 0 0 0 .19.45 1.17 1.17 0 0 1-.16.86c-.68 1.31-3.93 4.63-19.54 7.29a6.88 6.88 0 0 0-4.51 3.84C20.89 86.05 22 91.56 26 98.72c.4.66 10 16.31 24.11 19 6.39 1.2 12.63-.46 18.57-4.94 1.44-.66 13.77-6 23.29-1.16 5.78 3 9.53 9.18 11.15 18.51v16.36a1.69 1.69 0 0 0 1.69 1.69h76.52a1.7 1.7 0 0 0 1.68-1.49c.18-1.44 3.6-35.04-39.54-71.61Z" />
  <path
    d="M87.71 75.1a22 22 0 0 0 12.45 13.18 2.13 2.13 0 0 0 2.6-1.47 2.16 2.16 0 0 0-1.48-2.59 17.5 17.5 0 0 1-9.88-11.48c-1.75-6.63.39-13.53 2.19-19.91 1.86-6.63 3.63-13.66 2-20.53-1.41-5.81-5.44-11.15-11.41-12.73a12.81 12.81 0 0 0-9.63 1.09 11.79 11.79 0 0 0-5.63 8 2.16 2.16 0 0 0 1.47 2.59A2.13 2.13 0 0 0 73 29.8a7.78 7.78 0 0 1 4-5.66 8.87 8.87 0 0 1 7-.22c5 1.75 7.59 7.28 8 12.23 1 13.21-8.8 25.69-4.29 38.95Z" />
  <path
    d="M117.17 80.57a2.16 2.16 0 0 0-2.11-2.11 15.45 15.45 0 0 1-12-8c-2.33-4.53-1.62-10.48.29-15.05 1-2.32 2.44-4.36 3.33-6.74a28.17 28.17 0 0 0 1.55-7 33.42 33.42 0 0 0-1.54-13.9 27.74 27.74 0 0 0-3.19-6.71 15.9 15.9 0 0 0-2.35-2.88 23.85 23.85 0 0 0-3-1.89c-2.26-1.52-4.37 2.13-2.13 3.64a18.4 18.4 0 0 1 2.42 1.44 10.76 10.76 0 0 1 1.75 2.26 23.61 23.61 0 0 1 2.58 5.53 29.49 29.49 0 0 1 1.17 13.45 22.25 22.25 0 0 1-2 6.56 43.13 43.13 0 0 0-3.37 7.3C96.92 61.89 96.82 68 99.62 73c3.15 5.69 9.11 9 15.44 9.68a2.12 2.12 0 0 0 2.11-2.11Z" />
  <path
    d="M125.43 76a2.16 2.16 0 0 0 2.57-1.52 2.13 2.13 0 0 0-1.47-2.59 20.9 20.9 0 0 1-6.1-2.14A15.11 15.11 0 0 1 115.6 66c-1.21-1.63-1.07-4.06-.74-6a52.09 52.09 0 0 1 1.89-6.7 63.93 63.93 0 0 0 1.74-6.8 42.87 42.87 0 0 0 1.11-7.8 37.57 37.57 0 0 0-.69-6.68 47.55 47.55 0 0 0-1.28-5.89 29.39 29.39 0 0 0-7.4-12.66c-1.92-1.92-4.9 1.06-3 3a25.12 25.12 0 0 1 6.32 10.8 37.45 37.45 0 0 1 1.77 12.46c-.33 5-1.83 9.86-3.34 14.58-1.35 4.23-2.77 9.79 0 13.78a18 18 0 0 0 6.02 5.12 23.9 23.9 0 0 0 7.43 2.79Z" />
  <path
    d="M139 71.25a2.19 2.19 0 0 0 2.6-1.48 2.12 2.12 0 0 0-1.48-2.59 19.18 19.18 0 0 1-11-5.17c-1.39-1.45-1.46-3.56-1.34-5.46a31.85 31.85 0 0 1 1.33-6.39 45.93 45.93 0 0 0 1.54-7 32.49 32.49 0 0 0 0-7.31 47.23 47.23 0 0 0-3.07-12.95A40.76 40.76 0 0 0 120 11c-1.81-2-4.79 1-3 3a38.62 38.62 0 0 1 9.45 23 27.35 27.35 0 0 1-.3 7.45c-.44 2.22-1.13 4.38-1.69 6.58-1.13 4.41-1.92 9.83 1.29 13.57a19 19 0 0 0 6 4.36 24.36 24.36 0 0 0 7.25 2.29ZM59.25 65.4h-.33l-.28-.07-.46-.15a13.38 13.38 0 0 1-2.28-1.42 2.13 2.13 0 0 0-2.89.75 2.18 2.18 0 0 0 .76 2.89c2 1.45 4.5 2.82 7 2a8.91 8.91 0 0 0 3.1-2c.88-.82 1.74-1.65 2.61-2.48a2.11 2.11 0 1 0-3-3l-2.25 2.14a5.94 5.94 0 0 1-1 .88c.46-.27-.15.1-.24.15l-.27.18a1.49 1.49 0 0 1-.58.16c.33-.04.35-.05.11-.03ZM30.17 51.39a1.66 1.66 0 0 0 1.12-.39 1.69 1.69 0 0 0 .14-2.38l-7-7.87.25-.19 2.29-2 7 7.87a1.7 1.7 0 0 0 2.38.14 1.68 1.68 0 0 0 .14-2.38l-7-7.87 2.63-2.34 7 7.87a1.68 1.68 0 0 0 1.26.56 1.68 1.68 0 0 0 1.26-2.8l-7-7.87 2.63-2.34 7 7.87a1.68 1.68 0 0 0 1.26.56A1.68 1.68 0 0 0 46.77 35l-7-7.87 2.63-2.34 7 7.87a1.69 1.69 0 0 0 2.52-2.24l-7-7.87 2.64-2.34 7 7.87a1.7 1.7 0 0 0 2.38.14 1.68 1.68 0 0 0 .14-2.38l-7-7.87 2.83-2.52 7 7.87a1.68 1.68 0 0 0 1.26.56A1.68 1.68 0 0 0 62.43 21l-7.17-8a8.33 8.33 0 0 0-.67-10.18 8.33 8.33 0 0 0-11.74-.69l-29.24 26a8.38 8.38 0 0 0-2.59 8l-9.65 8.51A4.09 4.09 0 0 0 1 50.4a4 4 0 0 0 3.05 1.37 4.08 4.08 0 0 0 2.71-1l9.65-8.58a8.51 8.51 0 0 0 4.92.13 1.24 1.24 0 0 0 .17.23l7.38 8.3a1.65 1.65 0 0 0 1.29.54Zm-13.29-12.7a1.7 1.7 0 0 0-1.89.24L4.55 48.22a.72.72 0 0 1-1-.06.7.7 0 0 1 .06-1l10.44-9.28a1.68 1.68 0 0 0 .46-1.88 5 5 0 0 1 1.34-5.43l29.24-26a4.93 4.93 0 0 1 3.27-1.24h.31a4.94 4.94 0 0 1 3 8.63L22.43 38a5 5 0 0 1-5.55.69Z" />
</svg>

처음에는 SVGOMG에서 최적화를 할 때 width, height가 날아간 줄 알았는데, 처음부터 없었다.
Adobe Illustrator에서 svg 코드를 추출할 때부터 없었던 것이다.

정확한 원인은 모르겠지만 svg 태그에서는 width, height 값이 필수이며, 브라우저마다 해석하는 방식이 달라서 생기는 문제인 것 같았다.

덕분에 3일을 열심히 삽질했다. (물론 많이 배웠다.)
임시방편보다는 기본적인 것을 살피는 것이 가장 중요하다는 사실을 다시 깨닳았다.

profile
안녕하세요. React와 Vue를 좋아하는 프론트엔드 개발자입니다.

0개의 댓글