Atasi Celah di Bawah SVG Inline dengan Tata Letak CSS

Celah sempit di bawah SVG dapat berasal dari baris HTML yang memuatnya. Gambar inline mengikuti tata letak teks, tempat baseline dan tinggi baris dapat menyisakan ruang di bawah kotaknya. Untuk gambar yang berdiri sendiri, coba display: block. Untuk gambar yang harus tetap berada di samping teks, pilih perataan inline-nya dengan sengaja.

Temukan celahnya terlebih dahulu. Ruang di luar kotak elemen SVG memerlukan pemeriksaan tata letak halaman. Ruang di dalam kotak itu mungkin berasal dari kanvas SVG atau aturan penyesuaiannya. Menjiplak ulang logo tidak memperbaiki masalah pertama. Panduan ini membantu membedakan keduanya dan memverifikasi koreksi CSS kecil yang bersifat lokal.

Temukan kotak yang memuat ruang tersebut

Berikan latar yang kontras pada SVG dan pembungkus langsungnya melalui developer tools browser. Periksa juga garis batas elemennya. Latar itu merupakan alat bantu diagnosis sementara; tidak perlu menjadi bagian gambar yang dikirim.

.logo-wrap {
  background: peachpuff;
}
 
.logo-wrap > svg {
  background: lightgreen;
}

Jika warna persik berlanjut di bawah kotak SVG hijau, periksa tata letak baris, padding, border, tinggi, dan elemen tetangga pembungkus. Jika hijau berlanjut di bawah gambar yang terlihat, periksa viewBox gambar, batas area berwarna, serta cara menyesuaikannya dengan viewport.

Keduanya dapat terjadi bersamaan. Memperbaiki kotak baris mungkin menghilangkan pita tipis, tetapi tetap menyisakan margin transparan lebih besar di dalam gambar. Panduan penyesuaian SVG menjelaskan interaksi persegi panjang sumber dan viewport tujuan. Jangan mempersempit viewBox sampai Anda mengetahui bahwa ruang yang tidak diinginkan berada di dalamnya.

Metode penyematan juga penting. <svg> inline merupakan bagian dari dokumen HTML; <img src="logo.svg"> memuat gambar eksternal. Batas pengaturan gaya keduanya berbeda, sebagaimana dijelaskan dalam panduan SVG inline dan gambar. Untuk diagnosis ini, periksa elemen yang ditempatkan di baris HTML, jangan menganggap setiap berkas SVG disematkan dengan cara sama.

Mengapa baseline dapat menyisakan ruang di bawah

Baris teks memerlukan ruang untuk huruf yang turun melewati baseline, seperti g dan p. Gambar inline dapat sejajar dengan baseline itu sementara baris yang memuatnya masih memanjang ke bawah. Karena itu, mengatur margin gambar menjadi nol mungkin tidak mengubah apa pun.

Aturan perhitungan line-height CSS menentukan kotak baris dari kotak yang berpartisipasi beserta perataannya. Font dan tinggi baris induk turut berpengaruh meskipun isi yang terlihat berupa gambar. Karena itu, ukuran pita yang tepat berasal dari gaya sekitarnya, bukan margin SVG tetap.

Jangan menyamakan baseline ini dengan baseline huruf yang digambar di dalam SVG. Mengubah dominant-baseline pada elemen teks SVG mengatur huruf di dalamnya. Itu tidak menentukan posisi seluruh gambar dalam baris HTML-nya.

Contoh terukur tanpa kanvas SVG kosong

Kami membuat halaman HTML asli yang memuat tiga salinan SVG sama. Setiap SVG memiliki viewBox 240 × 100 yang dipenuhi persegi panjang dari tepi ke tepi dan dirender pada 240 × 100 piksel CSS. Baris menggunakan Arial pada 40px dengan tinggi baris 48px. Hanya tampilan atau perataan SVG yang berubah.

Browser mengembalikan pengukuran elemen berikut:

Ini pengukuran halaman ini dalam satu browser, bukan jaminan celah 10.5px di setiap tata letak. Kami membandingkan koordinat bawah pembungkus dengan koordinat bawah SVG. Tinggi SVG tetap 100px dalam ketiga kasus, sehingga koreksi tidak mengecilkan atau memotong gambar.

Gunakan tampilan block untuk gambar tersendiri

Jika logo harus menempati barisnya sendiri, terapkan aturan tata letak pada gambar khusus itu:

.brand-mark {
  display: block;
  width: 240px;
  height: auto;
}

Referensi display MDN membedakan partisipasi block dan inline dalam tata letak alur. Menjadikan SVG sebagai block menghapus perannya sebagai item inline dalam baris teks sekitarnya. Itu tidak mengedit jalur sumber atau menghilangkan margin transparan gambar.

Periksa kembali pembungkus setelah menerapkan aturan. Jika masih memanjang di bawah gambar, cari tinggi eksplisit, padding, anak lain, pseudo-element, atau baris tambahan. Pemisah baris atau node teks setelah gambar block dapat menambahkan isinya sendiri. Elemen leluhur juga dapat menjadi penyebab ruang yang terlihat.

Pertahankan selector yang spesifik. Menerapkan svg { display: block; } ke seluruh situs dapat memindahkan ikon yang sengaja berada di dalam label atau kalimat. Pilih komponen yang memerlukan gambar tersendiri, lalu periksa penggunaan lainnya.

Pertahankan gambar pada baris teks sebagai inline dan pilih perataannya

Untuk ikon atau tanda kecil di samping kata, mempertahankannya sebagai inline mungkin merupakan tata letak yang dimaksud. vertical-align: bottom menyelaraskan tepi margin bawahnya dengan bagian bawah baris. vertical-align: middle menggunakan baseline dan x-height induk; ini bukan perintah untuk memusatkan setiap gambar secara geometris dalam setiap wadah. Lihat definisi vertical-align MDN.

.label-icon {
  width: 1em;
  height: 1em;
  vertical-align: middle;
}

Pilih di antara nilai itu dengan memeriksa label dan font sebenarnya. Ikon yang menyentuh bagian bawah baris dapat terlihat terlalu rendah di samping huruf kapital. Tanda yang diratakan dengan middle masih mungkin memerlukan penyesuaian optis karena gambar yang terlihat tersebar tidak merata dalam kotaknya sendiri.

Kasus rata bawah pada contoh kami hanya memuat gambar. Contoh itu membuktikan bahwa perataan tersebut menghilangkan pita dalam baris khusus itu. Itu tidak memastikan setiap baris campuran teks dan ikon akan memiliki tinggi atau tampilan sama.

Hindari menggunakan line-height: 0 pada wadah teks bersama sebagai perbaikan pertama. Itu mengubah tata letak teks sekaligus jarak gambar. Gejala langsung mungkin tersembunyi, tetapi komponen bergantung pada penggantian gaya berikutnya ketika seseorang menambahkan label. Pilih tampilan atau perataan yang dimaksud sebelum mengubah tipografi induk.

Verifikasi koreksi tanpa mengubah gambar

Lakukan satu perubahan setiap kali, lalu periksa:

1. Batas elemen: apakah celah yang terlihat sekarang berada di dalam atau di luar kotak SVG?
2. Ukuran: apakah SVG mempertahankan lebar, tinggi, dan proporsi yang dimaksud?
3. Tetangga: apakah label, tautan, dan ikon masih berada pada tempat semestinya?
4. Tata letak responsif: apakah komponen berperilaku benar pada ukuran sempit dan lebar?
5. Gaya terhitung: apakah deklarasi yang dimaksud berlaku, atau ada aturan lebih spesifik yang menimpanya?

Untuk pembungkus sederhana tanpa border atau padding, membandingkan koordinat bawahnya dengan koordinat bawah gambar merupakan pemeriksaan berguna. Pada komponen sebenarnya, perhitungkan padding yang disengaja dan isi lain sebelum menyebut selisihnya sebagai kesalahan.

Jika halaman memerlukan susunan berbeda pada layar kecil, verifikasi susunan itu juga. Koreksi yang bekerja untuk satu logo terpisah mungkin tidak cocok untuk baris navigasi dengan teks yang membungkus. Hapus warna latar sementara setelah batasnya jelas.

Kapan vektorisasi membantu alur ini

SVG yang sudah ada dan dapat diedit biasanya memerlukan koreksi CSS atau kanvas di sini. Pertahankan berkas itu dan diagnosis penempatannya sebelum merekonstruksinya.

Jika tanda itu sendiri hanya tersedia sebagai PNG atau JPG dan memerlukan kontur yang dapat diedit, gunakan PerfectVector untuk mengonversi gambar sumber menjadi gambar vektor, lalu periksa kontur, bukaan, dan kanvas sumber sebelum menempatkan hasil pada halaman. Kartu penilaian mutu penjiplakan membantu pemeriksaan geometri terpisah itu. Vektorisasi menyiapkan bentuk; CSS halaman tetap mengendalikan kotak baris HTML.

Tanya jawab

Mengapa margin: 0 tidak menghilangkan celah di bawah SVG saya? Ruang itu mungkin berasal dari baris teks yang memuatnya, bukan margin SVG. Periksa batas SVG dan pembungkus, lalu uji tampilan block untuk gambar tersendiri atau perataan vertikal yang sesuai untuk gambar inline.

Apakah display: block memotong ruang kosong dari SVG? Tidak. Itu mengubah partisipasi elemen dalam tata letak HTML. Ruang kosong di dalam viewBox tetap ada dan memerlukan pemeriksaan gambar atau penyesuaian terpisah.

Haruskah saya menggunakan vertical-align: bottom atau middle? Gunakan nilai yang sesuai dengan baris sebenarnya. Bottom menyelaraskan dengan bagian bawah baris; middle menggunakan baseline dan x-height induk. Periksa hasil dengan font akhir serta teks tetangganya, jangan menganggap salah satunya sebagai pemusatan universal.

Sumber

1. W3C — Line-height CSS dan perataan vertikal — Cara kotak yang berpartisipasi, perataan, dan tipografi induk memengaruhi tinggi baris.
2. MDN — display — Perbedaan partisipasi block dan inline dalam tata letak alur.
3. MDN — vertical-align — Perataan baseline, bottom, dan middle serta kotak tempat properti berlaku.

Memulai dari tanda yang hanya tersedia sebagai raster? Siapkan bentuk SVG yang dapat diedit, bandingkan kontur dan kanvasnya dengan sumber, lalu verifikasi penempatan SVG dalam komponen halaman sebenarnya.