SVG preserveAspectRatio: Sesuaikan Karya Tanpa Meregangkan

Gunakan preserveAspectRatio="xMidYMid meet" ketika seluruh viewBox SVG harus muat dalam area tampilannya tanpa meregang. Gunakan slice ketika area itu harus tertutup dan sebagian konten boleh melampaui tepinya. Gunakan none hanya ketika penskalaan horizontal dan vertikal yang tidak sama memang disengaja.

Perbedaan pentingnya adalah antara persegi panjang koordinat karya, yang ditentukan oleh viewBox, dan viewport tempat karya muncul. Penyesuaian mengubah cara satu dipetakan ke yang lain. Penyesuaian tidak menggambar ulang logo, menghapus kanvas sumber kosong, atau menghapus permanen path yang terpotong.

Pilih perilaku penyesuaian terlebih dahulu

Referensi preserveAspectRatio MDN mendokumentasikan nilai tersebut dan default xMidYMid meet. Untuk elemen svg, pemetaan ini memerlukan viewBox. Atribut peka huruf besar-kecil: pertahankan A dan R kapital.

Untuk logo, mulai dengan meet. Kehilangan huruf atau mengubah lingkaran menjadi oval biasanya lebih buruk daripada menyisakan ruang. Untuk latar ornamental, pemotongan yang disengaja mungkin dapat diterima. Tentukan itu sebelum memilih perataan.

Uji satu lambang dalam dua bentuk viewport

Contoh asli ini memakai lingkaran, persegi panjang, dan segitiga yang tidak berada di tengah. Lingkaran membuat peregangan terlihat; bagian yang tidak sama membuat perubahan perataan lebih mudah diperhatikan daripada pada lencana simetris.

Tempel ini ke file HTML dan buka di browser:

<svg width="300" height="100" viewBox="0 0 200 100"
     preserveAspectRatio="xMidYMid meet"
     xmlns="http://www.w3.org/2000/svg"
     role="img" aria-label="Circle, rectangle, and triangle emblem"
     style="background:#f4ead4; overflow:hidden">
  <circle cx="40" cy="50" r="25" fill="#147d78" />
  <path d="M85 20 H130 V80 H85Z" fill="#e5a340" />
  <path d="M145 70 L170 25 L190 70Z" fill="#183549" />
</svg>

ViewBox memiliki lebar 200 satuan dan tinggi 100 satuan. Rasionya 2:1. Viewport pertama adalah 300 kali 100 piksel CSS, rasio 3:1. Ubah hanya atribut untuk membandingkan xMidYMid slice dan none. Lalu ubah viewport menjadi width="100" height="300" dan ulangi.

Kami merender geometri ini di Chrome dengan alat pengujian kecil berbasis selector. Pembacaannya memakai matriks transformasi saat ini dari grup karya. Skala dan translasi yang dihasilkan cocok dengan nilai berikut; offset slice sekitar −25 piksel dibulatkan di sini.

Dalam viewport tinggi, meet menampilkan ketiga bentuk kecil. slice terpusat hanya memperlihatkan sebagian komposisi yang diperbesar, didominasi persegi panjang emas. none membuat lingkaran sempit dan tinggi. Ini adalah pemeriksaan contoh tersebut dalam Chrome, bukan janji tentang perilaku impor setiap editor grafis.

Aturan skala sederhana untuk contoh dengan titik asal nol ini. Bagi lebar viewport dengan lebar viewBox, lalu tinggi viewport dengan tinggi viewBox. meet memakai rasio lebih kecil untuk kedua sumbu; slice memakai yang lebih besar. none mempertahankan kedua rasio terpisah. Spesifikasi sistem koordinat SVG mendefinisikan pemetaan, termasuk perataan dan titik asal viewBox bukan nol.

Gunakan perataan untuk memilih lokasi ruang sisa

Kata kunci pertama mengendalikan perataan. xMin, xMid, dan xMax meratakan tepi kiri, tengah horizontal, atau tepi kanan viewBox. YMin, YMid, dan YMax melakukan padanannya secara vertikal. Nilai ini mengacu pada persegi panjang viewBox, yang mungkin berisi ruang kosong di sekitar path sebenarnya.

Untuk viewport pengujian tinggi:

• xMinYMin meet menempatkan viewBox yang disesuaikan di atas alih-alih menengahkan vertikal.
• xMinYMin slice menjaga sisi kiri viewBox sejajar sisi kiri viewport. Sisi kanan yang diperbesar melampaui viewport.
• xMidYMid slice membagi overflow horizontal ke kedua sisi.

Kami mengubah alat pengujian dari terpusat menjadi xMinYMin. Translasi meet dan slice sama-sama menjadi nol, sementara faktor skalanya tetap masing-masing 0.5 dan 3. Perataan memindahkan komposisi; tidak mengubah skala penyesuaian.

Perubahan perataan hanya terlihat pada sumbu dengan ruang sisa atau overflow. Dalam kasus meet lebar, viewBox sudah memenuhi tinggi, sehingga mengubah YMid menjadi YMin tidak memiliki ruang vertikal untuk bergerak.

Jadikan clipping pilihan eksplisit

slice memilih skala. Clipping menentukan apakah Anda dapat melihat bagian yang melampaui viewport. Contoh menetapkan overflow:hidden secara eksplisit agar pemotongan dapat diprediksi.

Dalam alat pengujian tinggi, mengubah overflow menjadi visible memperlihatkan lingkaran dan segitiga yang diperbesar di luar viewport slice. Geometrinya tidak hilang. Referensi overflow SVG MDN menjelaskan hubungan overflow dan pemotongan viewport, termasuk perbedaan gaya default antarkonteks SVG.

Jangan memperlakukan slice sebagai operasi pemangkasan path. Jika file penyerahan harus hanya berisi geometri yang dipertahankan, lakukan dan verifikasi operasi penyuntingan sebenarnya. Untuk jendela tampilan khusus yang bukan persegi panjang, clipPath mungkin alat yang sesuai.

Demikian pula, meet menjamin viewBox muat; tidak menjamin semua konten yang digambar muat. Stroke, filter, atau path di luar persegi panjang sumber itu masih dapat melampauinya. Periksa tepi terlihat alih-alih mempercayai atribut saja.

Perbaiki ruang kosong sumber sebelum mengutak-atik perataan

Anggap tanda kecil hanya menempati tengah viewBox yang sangat besar. meet menyesuaikan seluruh persegi panjang koordinat itu, termasuk margin kosongnya. Hasil dapat tampak terlalu kecil meskipun penskalaan benar.

Periksa kanvas atau artboard yang diekspor dalam editor. Jika Anda mengubah viewBox agar komposisi lebih rapat, sertakan stroke dan efek yang dimaksud serta periksa kembali setiap penempatan. Jangan otomatis menghapus setiap margin: sumber mungkin berisi ruang bebas yang disengaja di sekitar tanda merek.

Masalah ukuran fisik terpisah. SVG yang diimpor pada ukuran milimeter salah memerlukan alur ukuran SVG; mengubah perataan penyesuaian kemungkinan tidak memperbaiki asumsi satuannya.

Pisahkan SVG inline dan penyesuaian image

Untuk SVG inline, ubah atribut pada elemen svg terkait. CSS dapat mengatur ukuran kotak elemen itu, sementara preserveAspectRatio memetakan viewBox ke kotak tersebut.

Untuk SVG eksternal yang digunakan dalam elemen image HTML, CSS mengendalikan penyesuaian gambar pada elemen pengganti (replaced element):

<img class="brand-mark" src="emblem.svg" alt="Brand emblem">
<style>
  .brand-mark {
    width: 300px;
    height: 100px;
    object-fit: contain;
    object-position: center;
  }
</style>

Dokumentasi object-fit MDN menjelaskan cara konten elemen pengganti (replaced element) menyesuaikan diri dengan kotak CSS-nya. Itu adalah lapisan berbeda dari menyunting pemetaan internal dokumen SVG. object-fit: contain juga tidak dapat menghapus kanvas kosong yang sudah ada dalam sumber. Lihat SVG inline versus elemen image ketika memilih model penyematan.

Ada juga elemen image SVG, ditulis dengan kata lengkap alih-alih img HTML. preserveAspectRatio-nya mengendalikan cara gambar yang dirujuk menyesuaikan persegi panjang yang ditetapkan untuk elemen itu. Elemen ini merupakan pengecualian terhadap kebutuhan umum menyediakan viewBox pada elemen yang sama, sebagaimana dijelaskan referensi atribut MDN. Memisahkan tiga kasus ini menghindari upaya memperbaiki image HTML dengan menambahkan atribut khusus SVG.

Pertahankan proporsi sumber sebelum penempatan

Jika Anda hanya memiliki PNG atau JPG tanda khusus dan membutuhkan geometri vektor yang bisa diedit, PerfectVector dapat merekonstruksi sumber SVG sebelum Anda membuat tata letak. Periksa kontur, bukaan kecil, dan batas kanvas terlebih dahulu. Penyesuaian hasil mempertahankan geometri saat ini; tidak memperbaiki sumber yang terdistorsi atau menciptakan ulang detail yang tidak pernah direkonstruksi.

SVG bersih yang sudah ada dapat langsung melalui pemeriksaan penyesuaian. Untuk lambang sederhana di atas, geometri buatan tangan cukup. Ikhtisar vektorisasi gambar menjelaskan kapan merekonstruksi path dari gambar raster berguna.

Untuk tanda yang hanya raster, coba sumber Anda dalam PerfectVector, periksa SVG, lalu bandingkan penempatan lebar dan tinggi dengan meet sebelum mempertimbangkan pemotongan. Simpan master vektor asli agar keputusan tata letak tetap dapat dibatalkan.

FAQ

Mengapa SVG saya masih memiliki ruang kosong dengan meet? Viewport dan viewBox mungkin memiliki rasio aspek berbeda, menyisakan ruang setelah penskalaan seragam. ViewBox sumber juga mungkin berisi margin di sekitar path. Perataan memindahkan persegi panjang itu; tidak menghapus ruang kosong internalnya.

Apakah slice memotong karya secara permanen? Tidak. Nilai ini mengubah skala yang dipakai untuk menutupi viewport. Overflow dan clipping mengendalikan bagian yang terlihat. Geometri path asli tetap dalam dokumen kecuali Anda menyuntingnya secara terpisah.

Mengapa none mengubah lingkaran saya menjadi oval? Nilai ini mengizinkan faktor skala horizontal dan vertikal berbeda. Ketika rasio viewport serta viewBox berbeda, lingkaran dapat menjadi elips. Gunakan meet atau slice dengan kata kunci perataan untuk mempertahankan penskalaan seragam.

Sources

1. MDN preserveAspectRatio — Mendefinisikan nilai penyesuaian, perataan, default, dan pengecualian image SVG.
2. Spesifikasi sistem koordinat SVG — Mendefinisikan perhitungan skala dan translasi untuk viewport.
3. MDN SVG overflow — Menjelaskan cara overflow mengendalikan pemotongan viewport.
4. MDN object-fit — Mendokumentasikan penyesuaian konten gambar pada elemen pengganti dalam kotak CSS.