왜 모바일 로고가 이상한가요?

image
비율은 3:1입니다. 그런데 1:1로 표시됩니다. SVG 파일입니다.
image

로고 요소의 스타일은 여기서와 동일합니다.

수정: 어떤 구성 요소도 없이 동일한 상태입니다.

수정#2: SVG의 viewBox 때문에 발생하는 문제입니다. SVG를 Discourse와 호환되게 만드는 방법은 무엇인가요?

svg의 viewBox를 편집해 보는 건 어떨까요? 스크린샷을 보면 로고가 3:1 비율인데도 viewBox가 1:1인 것 같아 보입니다.

viewbox의 너비와 높이의 비율은 3:1입니다. 데스크톱에서는 문제없이 표시됩니다.

여러 가지를 시도해 보았는데, viewbox 때문에 문제가 발생하는 것 같습니다… 대신 해당 값을 height/width로 이동하고 viewbox를 제거하면 데스크톱과 모바일에서 동일하게 동작합니다.

즉, SVG 파일을 텍스트 편집기로 열어 두 번째 줄을:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 751.98 200">

다음과 같이 변경하면 됩니다:

<svg xmlns="http://www.w3.org/2000/svg" width="751.98" height="200">

모바일에서 왜 다른지 조사해 봐야겠습니다…

img의 max-height를 height로 지정하면 문제가 없어요. 하지만 값이 생성되는 것 같아서, 이게 해결책이라고 생각하지 않아요 :smiley:

폭과 높이는 절대값을 지정하는 것 같습니다. 반면 뷰박스(viewBox)는 더 "상대값"에 가깝네요.
알겠습니다. 정말 감사합니다 :smiley: