Cegah Pergeseran Tata Letak Logo SVG dengan Ruang

Logo SVG dapat tetap tajam tetapi mendorong isi di dekatnya ketika muncul. Untuk SVG eksternal yang dimuat melalui elemen gambar HTML, berikan informasi ukuran yang cukup agar browser dapat menyediakan kotaknya sebelum ukuran intrinsik berkas tersedia. Atribut width dan height yang sesuai merupakan titik awal berguna; CSS kemudian dapat membuat kotak itu responsif.

Ini memperbaiki masalah tata letak halaman. Ini tidak mengubah jalur logo atau menghilangkan ruang kosong dalam kanvasnya. Pertahankan vektor asli yang layak. Jika satu-satunya sumber adalah PNG atau JPG, pulihkan gambar yang dapat diedit secara terpisah, lalu tentukan tempat SVG kiriman dalam halaman dengan sengaja.

Bedakan gambar dari kotak yang disediakan

Ada tiga ukuran terkait yang perlu diperiksa:

viewBox="0 0 300 100" menjelaskan persegi panjang sumber 3:1. Untuk berkas eksternal, informasi itu berada di dalam resource yang harus diambil halaman. Ini berbeda dari menempatkan rasio yang cocok dalam HTML sekitarnya sebelum resource tersedia.

Referensi elemen gambar MDN menyarankan penggunaan atribut width dan height sekaligus untuk menyediakan ruang sebelum gambar dimuat. Panduan pergeseran tata letak Google juga mengidentifikasi ukuran gambar yang tidak ditentukan sebagai penyebab umum pergerakan dan menjelaskan penyediaan ruang melalui ukuran atau rasio CSS.

Jika masalah Anda adalah cara gambar menyesuaikan diri dengan viewport yang sudah ditentukan, gunakan panduan penyesuaian rasio aspek SVG terpisah. Menyediakan kotak dan menyesuaikan gambar di dalamnya merupakan pemeriksaan berbeda.

Mulai dengan atribut width dan height yang sesuai

Untuk tanda 3:1, implementasi sederhana dapat seperti ini:

<img
  class="brand-logo"
  src="/assets/brand-logo.svg"
  width="300"
  height="100"
  alt="Example brand"
>

.brand-logo {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
}

Atribut menyediakan rasio yang dimaksud. CSS mengatur lebar tampilan dan memungkinkan pengecilan proporsional saat wadah menyempit. Keduanya tidak mengharuskan logo menempati 300 piksel layar fisik pada setiap perangkat.

Gunakan ukuran kanvas gambar sebenarnya, termasuk ruang kosong yang disengaja. Jangan memasukkan batas bentuk huruf terlihat jika SVG kiriman memiliki persegi panjang sumber lebih lebar. Ketidakcocokan itu membuat ruang awal yang disediakan berbeda dari resource setelah dimuat.

Nilai yang cocok penting karena rasio alami gambar dapat mengambil alih setelah tersedia. Rasio awal yang salah masih dapat menghasilkan koreksi ukuran belakangan. Periksa kembali markup dan berkas kiriman setelah mengganti logo, jangan menganggap mempertahankan nama berkas juga mempertahankan geometrinya.

Gunakan rasio CSS ketika tata letak menentukan slot

Rasio CSS berguna ketika komponen menentukan bentuk kotak tertentu. Untuk gambar proporsional 3:1:

.brand-logo {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 3 / 1;
}

Referensi aspect-ratio MDN menjelaskan bahwa properti ini berpartisipasi dalam pengukuran otomatis. Sedikitnya satu dimensi harus tetap otomatis agar rasio pilihan memengaruhi perhitungan itu. Menetapkan lebar tetap dan tinggi tetap sekaligus membuat ukuran eksplisit tersebut menjadi hal pertama yang perlu diperiksa.

Pilih perilaku yang dimaksud ketika rasio sumber berbeda. Slot berbentuk permanen mungkin memerlukan pembungkus sendiri dan aturan penyesuaian gambar yang disengaja. Logo proporsional biasanya harus memakai rasio sumber yang benar. Hindari memaksa logo persegi ke geometri 3:1 wordmark sebelumnya hanya untuk mempertahankan CSS lama.

Bentuk auto 3 / 1 memiliki arti lain: bentuk itu dapat menyediakan rasio sementara untuk replaced element, lalu menggunakan rasio alaminya ketika tersedia. Ini berguna ketika rasio sementara dan akhir sesuai; bukan jaminan bahwa ukuran yang bertentangan tidak akan pernah menggerakkan apa pun.

Yang ditunjukkan contoh browser terkontrol kami

Kami membuat SVG asli 300 × 100 yang memuat tanda F, titik, dan panah. Tiga elemen gambar HTML awalnya tidak memiliki URL sumber. Tombol kemudian menetapkan SVG lokal sama pada ketiganya setelah tata letak pertama. Ini membuat keadaan sebelum dan sesudah dapat diamati tanpa berpura-pura mengukur jaringan lambat.

Ketiganya menggunakan lebar CSS 300px dan tinggi otomatis. Satu tidak memiliki rasio yang disediakan, satu memiliki width="300" height="100", dan satu memiliki aspect-ratio: 3 / 1.

Koordinat atas teks berubah dari 358.1875 menjadi 458.1875 pada kasus tanpa ruang yang disediakan. Nilainya tetap 458.1875 pada kedua kasus dengan ruang tersedia. Setiap gambar yang dimuat melaporkan ukuran alami 300 × 100, dan lebar serta tinggi tampilannya juga tetap 300 × 100.

Ini pengukuran posisi elemen sebenarnya dari satu halaman terkontrol dalam satu browser. Percobaan menggunakan penetapan URL manual. Percobaan ini tidak merekam jejak pembatasan jaringan, skor Core Web Vitals, atau perilaku lintas browser. Khususnya, pergerakan 100px merupakan jarak, bukan skor CLS.

Periksa komponen kiriman, bukan hanya berkasnya

Gunakan penempatan logo sebenarnya saat memverifikasi koreksi:

1. Pastikan sumber. Buka SVG kiriman dan periksa rasio kanvasnya. Simpan master tanpa perubahan untuk perbandingan.
2. Periksa ukuran awal. Pastikan HTML atau CSS menyediakan kotak yang dimaksud sebelum ukuran gambar tersedia.
3. Bandingkan posisi elemen. Amati judul atau item navigasi di dekatnya, bukan hanya ketajaman logo.
4. Periksa setelah dimuat. Verifikasi lebar, tinggi, dan proporsi akhir terhadap ruang yang disediakan.
5. Coba wadah sempit dan lebar. Pastikan aturan responsif mengecilkan tanda secara proporsional dan menjaga kontrol sekitar tetap dapat digunakan.

Untuk pemeriksaan pemuatan browser, muat ulang halaman sebenarnya dengan cache dinonaktifkan dan pengaturan jaringan yang sesuai dalam developer tools. Itu memeriksa kondisi berbeda dari contoh berbasis tombol kami. Jika halaman menggunakan gambar lazy-loaded, gulir juga melalui penempatan itu.

Jika pergerakan tetap ada, identifikasi apa yang berubah saat itu. Pergantian font, banner yang disisipkan, baris navigasi yang mengembang, atau gambar lain dapat memindahkan logo meskipun kotaknya sendiri stabil. Panduan web.dev membedakan ukuran gambar dari penyebab pergeseran tata letak lainnya; menyediakan ruang satu logo bukan audit performa situs yang lengkap.

Pisahkan masalah SVG lain di sekitarnya

Kotak gambar yang tidak berubah dengan pita kecil di bawahnya dapat merupakan masalah baris teks inline. Periksa display dan perataan vertikal secara terpisah dari ukuran gambar yang disediakan. Memindahkan elemen di dalam baris teks dan mengalokasikan ruang bagi gambar yang belum tersedia menangani saat berbeda dalam tata letak.

SVG yang tetap di tempat tetapi memperlihatkan margin kosong lebar memerlukan pemeriksaan kanvas atau penyesuaian. Memotong sumber untuk menghapus margin itu mengubah rasionya, jadi perbarui ruang yang disediakan halaman setelahnya. Penjelasan SVG inline dan gambar juga membantu mengenali apakah Anda menata elemen dokumen atau gambar eksternal.

Jika tanda asli hanya tersedia sebagai piksel, gunakan vektorisasi logo PerfectVector untuk menyiapkan kandidat bentuk yang dapat diedit. Bandingkan siluet dan bukaan dengan sumber sebelum memilih kanvas kiriman; kartu penilaian mutu penjiplakan membahas pemeriksaan geometri itu. Vektorisasi tidak mengatur ukuran HTML, rasio CSS, atau perilaku pemuatan situs.

Tanya jawab

Apakah viewBox SVG saja mencegah pergeseran tata letak? Untuk gambar eksternal, viewBox berada di dalam resource yang diambil. Berikan informasi ukuran yang sesuai pada tata letak HTML agar dapat menyediakan ruang sebelum ukuran intrinsik gambar tersedia, lalu verifikasi komponen akhir.

Bisakah logo SVG responsif tetap memakai atribut width dan height? Bisa. Atribut yang sesuai dapat menyediakan rasio yang dimaksud sementara CSS mengendalikan lebar tampilan dan mempertahankan tinggi otomatis. Pastikan berkas kiriman dan aturan responsif mempertahankan proporsi itu.

Apakah SVG tajam menjamin skor CLS yang baik? Tidak. Ketajaman menjelaskan rendering gambar. CLS berkaitan dengan ketidakstabilan tata letak di seluruh halaman, yang juga dapat melibatkan font, isi yang disisipkan, dan media lain. Jarak pergerakan dari contoh terkontrol bukan skor CLS.

Sumber

1. web.dev — Mengoptimalkan Cumulative Layout Shift — Ukuran gambar yang tidak ditentukan, penyediaan ruang, penyebab pergerakan lain, dan perbedaan antara pergerakan dan metrik CLS.
2. MDN — Elemen gambar HTML — Atribut width dan height, ukuran alami gambar, dan tata letak gambar.
3. MDN — aspect-ratio — Pengukuran otomatis dan perbedaan antara rasio tertentu dan bentuk auto ditambah rasio.

Hanya memiliki logo raster? Siapkan SVG yang dapat diedit dengan PerfectVector, verifikasi kontur dan kanvas, lalu sediakan ruang yang sesuai pada halaman yang akan menampilkannya.