모바일 SVG 로고가 올바르게 확장되지 않음

[Stephen]

mobile_logo에 SVG를 사용하면 크기가 잘못 조정됩니다:

일단 PNG로 교체할 수 있습니다(그렇게 할 예정입니다)만, 그렇게 하고 싶지는 않습니다!

CSS 조정으로 해결될 수도 있을 것 같지만, 저 혼자 이런 문제를 겪고 있는 것은 아닐 텐데 말이죠.

[piffy]

저는 SVG 로고를 사용하는데, 크기 조정 관련 문제는 없었습니다. 혹시 제가 문제를 제대로 이해하지 못하고 있는 건가요? 로고가 너무 작은 건가요?

설정에서 권장하는 3:1 비율을 참고해 두겠습니다.

혹시 SVG 이미지에 로고를 감싸는 과도한 투명 패딩이 있나요?

[Stephen]

세로 길이 비율이 3:1보다 커야 한다고 요구합니다. 같은 비율의 PNG 파일은 정상적으로 작동하므로, 이 문제는 SVG 처리와 직접적으로 관련이 있습니다.

SVG는 벡터 형식이며, 이 컨텍스트에서는 실제 크기의 개념이 없습니다. 같은 파일은 사이트 로고로 정상적으로 렌더링됩니다.

스크린샷의 이미지는 프로덕션 사이트에서 문제를 발견한 후 수행한 테스트입니다. 유사한 텍스트 줄을 만들고, 윤곽선으로 변환한 후 대상을 내보냈습니다. 파일에 문제가 있었다면 사이트 로고에서도 동일한 문제가 관찰되었을 것입니다. 패딩은 전혀 없습니다:

이를 자세히 살펴보면, 해당 사이트는 테마를 통해 SVG 로고를 다르게 처리하는 것 같습니다:

반면 이 사이트는 기본 테마 중 하나를 사용 중이며, 다음과 같은 모습입니다:

로고가 Inkscape로 생성되었고, 파일 내부에 치수가 하드코딩되어 있는 것으로 보입니다. 모든 SVG 생성기가 이러한 방식을 따르는 것은 아닙니다:

vs

데스크톱 뷰에서 작동한다면, 모바일 로고에도 유사한 처리가 필요할 것입니다.

[Canapin (Coin-coin le Canapin)]

@Stephen

당신의 사이트

@Stephen

로고가 Inkscape로 생성되었고, 파일 내에 크기가 하드코딩되어 있는 것으로 보입니다.

@piffy님의 포럼과 로고를 말씀하시는 건가요? 해당 토픽에서 이 정보가 제공되는 것을 찾지 못해서 조금 혼란스럽습니다

확인해 볼 수 있도록 "테스트 SVG 로고"를 제공해 주시겠어요?

[Stephen]

@Canapin

@piffy의 포럼과 로고를 말하는 건가요? 해당 주제에서 이 정보를 찾을 수 없어서 조금 혼란스럽습니다

네 - 상대방이 자신의 사이트를 언급했기 때문에 참고용으로 비교했습니다.

메타에는 SVG 게시가 허용되지 않습니다. 소스는 다음과 같습니다:

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62.88 11.02">
  <defs>
    <style>
      .cls-1 {
        fill: #fff;
      }
    </style>
  </defs>
  <path class="cls-1" d="m1.93,1.04v1.67h1.51v.8h-1.51v3.13c0,.72.2,1.13.79,1.13.28,0,.48-.04.61-.07l.05.79c-.2.08-.53.14-.94.14-.49,0-.89-.16-1.14-.44-.3-.31-.41-.83-.41-1.51v-3.17h-.9v-.8h.9v-1.39l1.03-.28Z"/>
  <path class="cls-1" d="m5.15,5.8c.02,1.43.94,2.01,1.99,2.01.76,0,1.21-.13,1.61-.3l.18.76c-.37.17-1.01.36-1.93.36-1.79,0-2.85-1.18-2.85-2.93s1.03-3.13,2.72-3.13c1.9,0,2.4,1.67,2.4,2.73,0,.22-.02.38-.04.49h-4.08Zm3.09-.76c.01-.67-.28-1.71-1.46-1.71-1.07,0-1.54.98-1.62,1.71h3.08Z"/>
  <path class="cls-1" d="m10.43,7.44c.31.2.86.42,1.39.42.77,0,1.13-.38,1.13-.86,0-.5-.3-.78-1.08-1.07-1.04-.37-1.54-.95-1.54-1.64,0-.94.76-1.7,2-1.7.59,0,1.1.17,1.43.36l-.26.77c-.23-.14-.65-.34-1.19-.34-.62,0-.97.36-.97.79,0,.48.35.7,1.1.98,1.01.38,1.52.89,1.52,1.75,0,1.02-.79,1.74-2.17,1.74-.64,0-1.22-.16-1.63-.4l.26-.8Z"/>
  <path class="cls-1" d="m16.6,1.04v1.67h1.51v.8h-1.51v3.13c0,.72.2,1.13.79,1.13.28,0,.48-.04.61-.07l.05.79c-.2.08-.53.14-.94.14-.49,0-.89-.16-1.14-.44-.3-.31-.41-.83-.41-1.51v-3.17h-.9v-.8h.9v-1.39l1.03-.28Z"/>
  <path class="cls-1" d="m21.7,7.44c.31.2.86.42,1.39.42.77,0,1.13-.38,1.13-.86,0-.5-.3-.78-1.08-1.07-1.04-.37-1.54-.95-1.54-1.64,0-.94.76-1.7,2-1.7.59,0,1.1.17,1.43.36l-.26.77c-.23-.14-.65-.34-1.19-.34-.62,0-.97.36-.97.79,0,.48.35.7,1.1.98,1.01.38,1.52.89,1.52,1.75,0,1.02-.79,1.74-2.17,1.74-.64,0-1.22-.16-1.63-.4l.26-.8Z"/>
  <path class="cls-1" d="m27,2.71l1.14,3.26c.19.53.35,1.01.47,1.49h.04c.13-.48.3-.96.49-1.49l1.13-3.26h1.1l-2.28,5.8h-1.01l-2.21-5.8h1.13Z"/>
  <path class="cls-1" d="m37.24,2.71c-.02.42-.05.89-.05,1.6v3.37c0,1.33-.26,2.15-.83,2.65-.56.53-1.38.7-2.11.7s-1.46-.17-1.93-.48l.26-.8c.38.24.98.46,1.7.46,1.08,0,1.87-.56,1.87-2.03v-.65h-.02c-.32.54-.95.97-1.85.97-1.44,0-2.47-1.22-2.47-2.83,0-1.97,1.28-3.08,2.61-3.08,1.01,0,1.56.53,1.81,1.01h.02l.05-.88h.92Zm-1.09,2.29c0-.18-.01-.34-.06-.48-.19-.61-.71-1.12-1.48-1.12-1.01,0-1.73.85-1.73,2.19,0,1.14.58,2.09,1.72,2.09.65,0,1.24-.41,1.46-1.08.06-.18.08-.38.08-.56v-1.04Z"/>
  <path class="cls-1" d="m41.5,0h1.06v8.52h-1.06V0Z"/>
  <path class="cls-1" d="m49.58,5.56c0,2.15-1.49,3.08-2.89,3.08-1.57,0-2.78-1.15-2.78-2.99,0-1.94,1.27-3.08,2.88-3.08s2.79,1.21,2.79,2.99Zm-4.61.06c0,1.27.73,2.23,1.76,2.23s1.76-.95,1.76-2.25c0-.98-.49-2.23-1.74-2.23s-1.79,1.15-1.79,2.25Z"/>
  <path class="cls-1" d="m55.92,2.71c-.02.42-.05.89-.05,1.6v3.37c0,1.33-.26,2.15-.83,2.65-.56.53-1.38.7-2.11.7s-1.46-.17-1.93-.48l.26-.8c.38.24.98.46,1.7.46,1.08,0,1.87-.56,1.87-2.03v-.65h-.02c-.32.54-.95.97-1.85.97-1.44,0-2.47-1.22-2.47-2.83,0-1.97,1.28-3.08,2.61-3.08,1.01,0,1.56.53,1.81,1.01h.02l.05-.88h.92Zm-1.09,2.29c0-.18-.01-.34-.06-.48-.19-.61-.71-1.12-1.48-1.12-1.01,0-1.73.85-1.73,2.19,0,1.14.58,2.09,1.72,2.09.65,0,1.24-.41,1.46-1.08.06-.18.08-.38.08-.56v-1.04Z"/>
  <path class="cls-1" d="m62.88,5.56c0,2.15-1.49,3.08-2.89,3.08-1.57,0-2.78-1.15-2.78-2.99,0-1.94,1.27-3.08,2.88-3.08s2.79,1.21,2.79,2.99Zm-4.61.06c0,1.27.73,2.23,1.76,2.23s1.76-.95,1.76-2.25c0-.98-.49-2.23-1.74-2.23s-1.79,1.15-1.79,2.25Z"/>
</svg>

[Canapin (Coin-coin le Canapin)]

감사합니다!

해당 문제를 재현할 수 있습니다.

데스크톱:

모바일:

로고의 크기는 다음 코드에 의해 설정됩니다.

.d-header .title {
    min-width: 36px;
}

아마도 SVG 코드에 크기가 하드코딩되어 있지 않으면 0으로 설정되는 것 같습니다. 예를 들어, Discourse 로고에서 width와 height 값을 제거했을 때 다음과 같은 결과가 나타났습니다:

하지만 이 경우 데스크톱에서는 왜 정상적으로 동작하는지 이해가 되지 않습니다.

[Canapin (Coin-coin le Canapin)]

문제를 정확히 파악하려고 노력했고, 원인을 찾은 것 같습니다.

SVG는 기본적으로 콘텐츠에 따라 크기가 커지지 않는 플렉스박스 자식 요소인 <a class="title"> 안에 있습니다. SVG 파일에 설정된 치수가 없으면, 크기를 늘릴 "이유"를 찾지 못하므로 기본 폭이 0px이 됩니다.

로고 컨테이너가 커지도록 허용하면 문제가 해결됩니다:

.d-header .title:not(.title--minimized) {
    overflow: hidden;
    flex-grow: 1; // 추가됨
}

[piffy]

자세한 분석을 감사합니다! 실제로 저는 Inkscape를 사용했습니다. 제 사이트를 안전 모드(Safe Mode)로 전환해도 동일한 CSS가 표시되므로, 테마나 플러그인에서 비롯된 문제라고 생각하지 않습니다:

어쨌든, CSS는 다소 기만적인 요소(red herring)인 것 같고, 실제 원인은 SVG의 치수(dimension)인 것 같습니다. 치수를 제거하면 말씀하신 문제를 재현할 수도 있었습니다.

[awesomerobot (Kris)]

조금 더 테스트해볼 생각이지만, 좋은 해결책인 것 같습니다… 해결해 주셔서 감사합니다. flex-grow에 대한 제 주요 우려는 테마에서 때때로 추가되는 형제 요소인 헤더 요소들과 어떻게 상호작용할지였는데, 기본적으로는 잘 작동하는 것 같습니다!

이 문제는 데스크톱에서는 높이가 지정되어 있기 때문에 발생하지 않습니다.

.d-header #site-logo {
  height: 2.667em;
}

모바일에서는 로고가 사용 가능한 공간보다 클 것이라고 가정하고, 공간에 맞도록 제한합니다:

.d-header #site-logo {
  max-height: 2.4em;
  max-width: 100%;
}

즉, 데스크톱에서는 차원이 없는 SVG에 CSS를 통해 차원이 부여되고, 모바일에서는 로고가 자체 크기를 결정하도록 두며(먼저 도달하는 max-height 또는 max-width로 제한됨), 차원이 없고 더 크게 확장하라는 지시도 없다면 .title의 min-width에 의해 매우 작게 유지됩니다(그 min-width가 없으면 아예 보이지 않습니다!).

또 다른 가능한 해결책은 모바일 로고의 max-height를 height로 업데이트하는 것입니다. 그러면 데스크톱에서 로고가 처리되는 방식과 일관성이 생깁니다.

내일 이 문제를 수정할 수 있는 패치를 넣을 것 같지만, 그 사이에 SVG에 차원을 추가하는 것이 쉬운 해결책입니다. 정확한 차원이 아니어도 됩니다… width="1000"만 추가하면 공간에 맞게 확장되고 CSS에 의해 최대 크기가 제한됩니다.

[Stephen]

어려운 점은 차원 없는 SVG를 생성하던 앱이 바로 Illustrator라는 거예요. 지금은 일단 PNG를 사용했고, 곧 수정될 예정이에요. 벡터 파일을 텍스트 편집기에 넣어 수정하라고 알려주는 건 상상도 할 수 없어요 하하

[awesomerobot (Kris)]

네, SVG의 핵심이 차원을 가져서는 안 된다는 것인 것 같습니다. 하지만 이로 인해 이전에는 이미지 태그에서 발생하지 않던 약간의 복잡성이 생겼습니다!

SVG 옵션 모달(파일 → 내보내기 → 내보내기 형식으로 내보내기에서 접근)에서 반응형 상자를 해제하면 Illustrator에서 차원을 포함하여 내보낼 수 있습니다:

(내보내기 모달에서 피할 수 있는 또 다른 문제가 있습니다… SVG 이미지를 마크업으로 페이지에 직접 임베드하는 경우, 스타일링을 인라인으로 전환하는 것도 도움이 될 수 있습니다. 그렇지 않으면 다른 SVG들이 동일한 Illustrator 클래스 이름을 사용할 가능성이 높기 때문에 스타일이 충돌할 수 있습니다)

[Stephen]

그들이 잘못하고 있다고 말해볼 수는 있지만, 그래도 데스크톱에서는 괜찮은데 모바일에서는 왜 안 되는지에 대한 답이 되진 않을 것 같아요

[awesomerobot (Kris)]

이 문제를 해결하는 수정 사항을 방금 병합했으며, 일반적으로 데스크톱/모바일 로고 CSS를 더 일관되게 만들었습니다.

UX: ensure header logo has dimensions, style clean-up (#20512)

[Stephen]

정말 좋습니다, @awesomerobot 감사합니다