SVGモバイルロゴのスケールが正しくありません

モバイルロゴにSVGを使用すると、正しくスケーリングされません。

一時的にPNGに切り替えることはできます(そしてそうします)が、できれば避けたいです!

CSSの調整で修正できると思われますが、これを試みているのは私だけではないはずです。

「いいね!」 2

SVGロゴを使用しており、スケーリングの問題はありません。問題が理解できていないのでしょうか。小さすぎるということでしょうか。

設定で推奨されている3:1のアスペクト比に注意するだけでよいでしょう。

SVG画像には、ロゴの周りに過剰な透明度がありますか?

3:1より大きいアスペクト比を要求しています。同じ比率のPNGファイルは正常に動作するため、この問題はSVGの処理に特に関連しています。

SVGとしては、ベクトルであり、このコンテキストではサイズという概念は実際にはありません。同じファイルがサイトのロゴとして問題なくレンダリングされます。

私のスクリーンショットの画像は、本番サイトで問題を発見した後のテストです。同等のテキストを作成し、アウトラインに変換し、オブジェクトをエクスポートしました。ファイルに問題があれば、サイトのロゴでも観察されるはずです。パディングはゼロです。

これを詳しく見ると、あなたのサイトはSVGロゴを、おそらくテーマを通じて、異なる方法で処理しています。

一方、このサイトはデフォルトのいずれかで実行されており、次のようになっています。

あなたのロゴはInkscapeで生成されたようで、寸法はファイル内にハードコーディングされています。これはすべてのSVGジェネレーターに典型的なものではありません。

Screenshot 2023-02-28 at 3.38.25 AM

デスクトップビューで機能するのであれば、モバイルロゴにも同様の処理が必要です。

「いいね!」 3

@piffyさんのフォーラムとロゴについて話していますか?トピックにこの情報が見つからなかったので、少し混乱しています :thinking:

「テストSVGロゴ」を提供していただけますか?確認したいです。

「いいね!」 1

はい、彼らのサイトを参照していたので、参考に比較しました。

メタでは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>

「いいね!」 2

ありがとうございます!

問題を再現できました。

デスクトップ:

モバイル:

ロゴのサイズは以下によって設定されます。

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

そして、SVGコードにサイズがハードコーディングされていない場合は、 apparently 0 に設定されます。たとえば、Discourse のロゴから幅と高さの値 ทั้งสอง を削除したところ、次のようになりました。

この場合、デスクトップで機能する理由がわかりません。

「いいね!」 2

問題の特定を試みたところ、原因がわかったと思います。

SVGは、デフォルトでコンテンツに応じて成長しないフレックスボックスの子要素 \u003ca class=\"title\"\u003e の中にあります。SVGファイルに寸法が設定されていない場合、成長する「理由」がないため、デフォルトの幅は0pxになります。

ロゴのコンテナが成長できるようにすると、問題が解決します。

.d-header .title:not(.title--minimized) {
    overflow: hidden;
    flex-grow: 1; // 追加
}

「いいね!」 4

詳細な内訳をありがとうございます!確かにInkscapeを使用しました。サイトをセーフモードにしてもCSSは同じなので、テーマやプラグインからのものではないと思います。

いずれにせよ、CSSは少し紛らわしいようで、SVGの寸法が原因のようです。寸法を削除することでも同様の問題を再現できました。

もう少しテストしてみますが、良い解決策のようです…解決してくれてありがとう。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 によって決定されます。それがないと、見えなくなります!)。

別の可能な修正は、モバイルロゴの max-heightheight に更新することです。これは、デスクトップでのロゴの扱い方と一貫性があります。

明日には修正を適用する予定ですが、それまでの間、SVG にディメンションを追加するのは簡単な修正です。正確なディメンションである必要さえありません… width="1000" を追加するだけで、他に何もせずにスペースに合わせて成長し、CSS によって最大サイズが制限されます。

「いいね!」 2

トリッキーなのは、ディメンションレスSVGを生成していたアプリがIllustratorであることです。今はPNGを使用しましたが、すぐに修正されます。誰かにベクトルをテキストエディタに投げて編集するように言うなんて想像もできません :exploding_head: はは

「いいね!」 3

はい、SVGのポイントは寸法を持たないことだと思いますが、以前の画像タグにはなかった少し複雑な問題が生じています!

SVGオプションモーダルでレスポンシブボックスのチェックを外すと、Illustratorから寸法付きでエクスポートできます(これはファイル → エクスポート → 名前を付けてエクスポートから行います):

(エクスポートモーダルで回避できる別の問題… SVG画像をマークアップとしてページに直接埋め込んでいる場合、スタイルがインラインに切り替わるようにすると役立ちます。そうしないと、異なるSVGのスタイルが衝突する可能性があります。それらは同じIllustratorのクラス名を使用する可能性が高いためです)

「いいね!」 3

デスクトップでは問題ないのにモバイルでは問題がある理由を説明せずに、間違っていると伝えてみます :frowning:

「いいね!」 2

これを解決し、デスクトップ/モバイルのロゴCSSをより一貫性のあるものにする修正をここにマージしました。

「いいね!」 3

素晴らしい、@awesomerobotさんありがとうございます

「いいね!」 4

このトピックは2日後に自動的に閉じられました。返信はもう許可されていません。