SVG Inline vs img: Pilih Perilaku Artwork Anda

Gunakan SVG dalam elemen <img> ketika Anda ingin menampilkan grafis yang sudah selesai. Letakkan SVG secara inline ketika halaman perlu mengubah bentuk satu per satu dengan CSS atau JavaScript. Kedua pendekatan dapat menampilkan artwork vektor yang sama pada ukuran berbeda; meletakkannya inline tidak memperbaiki geometrinya.

Perbedaan ini penting ketika logo terlihat benar dalam tab browser tetapi mengabaikan aturan warna situs web Anda. File mungkin baik-baik saja. Aturan itu mungkin hanya tidak dapat menjangkau isinya. Di bawah, ilustrasi gunung yang sama muncul dalam kedua bentuk agar Anda dapat memeriksa perbedaannya sebelum mengubah pipeline aset.

Pilih perilaku yang Anda perlukan

SVG eksternal tetap merupakan file vektor ketika ditampilkan melalui <img>. Batasnya berada antara halaman dan elemen internal file. CSS halaman dapat mengubah ukuran, memutar, atau memudarkan elemen gambar, tetapi selector seperti .logo path tidak dapat menjangkau path di dalam sumber daya src-nya. Bentuk inline menjadi bagian pohon dokumen halaman. Panduan penyematan SVG MDN menjelaskan kedua pendekatan.

Jika Anda masih memeriksa isi file, mulai dengan apa itu file SVG. Ekstensi .svg saja tidak berarti setiap detail yang terlihat merupakan path. Untuk penyerahan ke toko online, ikuti panduan ikon SVG khusus Shopify setelah memverifikasi isi file.

Uji artwork yang sama dalam kedua bentuk

Untuk demonstrasi ini, kami membuat dua path gunung dan satu lingkaran matahari dengan tangan. Kami memuat artwork itu dari file terpisah dan menempelkan bentuk yang sama ke HTML. Ini adalah pengujian penyematan, bukan hasil konversi PerfectVector.

Dalam pengujian browser Chromium kami, kedua versi awalnya menempati 360 × 240 piksel CSS dan menampilkan matahari kuning amber. Kami kemudian mengaktifkan aturan halaman yang menargetkan .sun. Matahari inline berubah menjadi koral; matahari gambar eksternal tetap amber. Mengurangi kedua kotak menjadi 180 × 120 mengubah ukuran tampilan tanpa mengubah perbedaan tersebut.

1. Simpan file SVG terpisah

Buat artwork.svg dengan sumber lengkap ini. viewBox mendefinisikan ruang koordinat gambar. Lebar dan tinggi memberikan dimensi awal eksplisit.

<svg xmlns="http://www.w3.org/2000/svg"
     width="240" height="160" viewBox="0 0 240 160">
  <path d="M34 120 104 26 174 120Z" fill="#233b63" />
  <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
  <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
</svg>

2. Tambahkan gambar dan salinan inline

Simpan yang berikut sebagai index.html di samping artwork.svg, lalu buka di browser. Kedua grafis memiliki geometri dan atribut pewarnaan yang sama. Versi inline juga memiliki nama untuk teknologi bantu.

<!doctype html>
<html lang="en">
<meta charset="utf-8">
<title>SVG embedding test</title>
<style>
  .artwork {
    display: block;
    width: 360px;
    max-width: 100%;
    height: auto;
  }
  .theme .sun { fill: #d94862; }
</style>
<body class="theme">
  <h1>External image</h1>
  <img class="artwork" src="artwork.svg"
       width="240" height="160"
       alt="Mountain and sun illustration">
 
  <h2>Inline SVG</h2>
  <svg class="artwork" xmlns="http://www.w3.org/2000/svg"
       width="240" height="160" viewBox="0 0 240 160"
       role="img" aria-labelledby="mountain-title">
    <title id="mountain-title">Mountain and sun illustration</title>
    <path d="M34 120 104 26 174 120Z" fill="#233b63" />
    <circle class="sun" cx="183" cy="43" r="20" fill="#f59e0b" />
    <path d="M80 120 146 59 210 120Z" fill="#65a7a0" />
  </svg>
</body>
</html>

Tangkapan layar menggunakan tata letak perbandingan bergaya di sekitar bentuk yang sama ini. Contoh lebih kecil di atas menjaga perilaku tetap mudah direproduksi.

3. Ubah satu variabel setiap kali

Hapus class="theme" dari body dan muat ulang. Kedua matahari seharusnya sekarang amber. Pulihkan class, dan hanya matahari inline yang seharusnya berubah menjadi koral. Ubah .artwork dari width: 360px menjadi width: 180px; dengan ruang dalam kontainer, kedua grafis seharusnya menyusut menjadi 180 × 120.

Jika Anda ingin matahari gambar eksternal berubah permanen, edit fill-nya dalam artwork.svg. Jika Anda ingin matahari merespons keadaan halaman, pilih markup inline atau metode penyerahan lain yang disengaja. Panduan mengubah warna SVG kami membahas pengeditan file itu sendiri.

Nama .sun ditambahkan untuk contoh ini. File hasil konversi atau ekspor belum tentu berisi class yang berguna untuk setiap bagian bermakna. Periksa dan beri nama bentuk yang ingin Anda kendalikan alih-alih menganggap objek yang terlihat merupakan satu path yang dapat dipilih.

Tetapkan ukuran dan nama aksesibel secara eksplisit

Pertahankan viewBox ketika memindahkan artwork ke HTML. Tetapkan atribut lebar dan tinggi sebagai dasar yang masuk akal, lalu terapkan CSS responsif. Untuk ilustrasi 3:2 ini, width: 180px; height: auto mempertahankan proporsinya. Margin kosong besar di dalam viewBox tetap menjadi bagian area gambar pada kedua metode; mengubah penyematan tidak dapat menghapusnya.

Ketika kotak tata letak memiliki rasio berbeda, panduan penyesuaian preserveAspectRatio membandingkan penyesuaian seluruh artwork, pemotongan, dan distorsi.

Untuk gambar eksternal bermakna, tulis alt pada <img> HTML. Untuk gambar inline bermakna, contoh menggunakan role="img" dan aria-labelledby yang menunjuk ke <title>-nya. SVG inline tidak menggunakan atribut alt gambar HTML. Opsi penamaan ini didokumentasikan dalam panduan SVG dalam HTML MDN.

Jika Anda mengulang contoh inline, berikan nilai unik pada setiap ID title dan perbarui aria-labelledby yang cocok. Disiplin yang sama berlaku untuk ID yang digunakan gradien, mask, atau clipping path. Untuk artwork dekoratif di samping teks terlihat yang setara, gunakan alt kosong pada <img> atau sembunyikan SVG inline dari teknologi bantu dengan aria-hidden="true". Uji tautan atau tombol lengkap dalam konteks agar tujuannya tetap memiliki nama.

Untuk banyak ikon yang dapat digunakan ulang, sprite simbol SVG memperkenalkan pendekatan definisi dan instans yang terpisah. Tentukan apakah Anda membutuhkan penggunaan ulang tersebut sebelum menempelkan banyak salinan ke setiap halaman.

Perlakukan performa sebagai pengukuran

Markup inline menempatkan bentuk dalam dokumen alih-alih mengambil artwork itu sebagai sumber daya gambar terpisah. Markup ini juga menambah markup dokumen. File eksternal dapat digunakan ulang dari cache browser, bergantung pada URL, header respons, dan keadaan cache-nya. Panduan caching HTTP MDN menjelaskan kondisi tersebut.

Kedua fakta itu tidak membuktikan versi mana yang akan membuat halaman Anda lebih cepat. Bandingkan halaman sebenarnya pada kunjungan pertama dan kunjungan ulang, dengan jumlah salinan dan kompleksitas SVG yang nyata. Demonstrasi ini menguji akses pewarnaan dan ukuran; ini bukan benchmark kecepatan pemuatan.

Mode gambar eksternal juga memiliki batasan selain CSS. MDN mendokumentasikan bahwa SVG yang digunakan sebagai gambar menonaktifkan JavaScript dan membatasi sumber daya eksternal. Jangan memindahkan SVG yang tidak dikenal menjadi inline hanya untuk membuat fitur yang hilang berfungsi. Tinjau dan sanitasi markup yang tidak tepercaya sebelum memasukkannya ke halaman.

Ketika artwork awal Anda hanya berupa PNG

Vektorisasi dilakukan sebelum pilihan penyematan ini jika sumber tidak memiliki bentuk yang Anda perlukan. Untuk logo atau ilustrasi raster yang sesuai, konversikan PNG menjadi SVG dengan PerfectVector, periksa hasil terhadap sumber, dan simpan SVG yang diterima sebagai master artwork. Periksa siluet, lubang, dan wilayah warna kecil sebelum menambahkan class atau menyiapkan salinan web.

PerfectVector menyediakan artwork vektor. Anda tetap memilih bagian mana yang harus merespons CSS, menambahkan nama bermakna, dan menguji halaman akhir. Mengonversi gambar tidak otomatis menghasilkan komponen dengan nama class semantis. Jika SVG yang sudah ada berisi path yang dapat digunakan, kerjakan path tersebut alih-alih menelusuri salinan hasil rendering.

Periksa juga SVG yang berisi gambar raster tertanam. Menempelkan file semacam itu secara inline mengekspos elemen <image>-nya; tindakan itu tidak mengubah piksel di dalam elemen menjadi bentuk yang dapat diwarnai ulang secara terpisah. Untuk foto yang sebaiknya tetap fotografis, pertahankan format penyerahan raster yang sesuai.

Periksa halaman akhir

• Pastikan artwork mandiri terlihat benar sebelum menguji CSS halaman.
• Pilih <img> untuk tampilan yang sudah selesai, atau SVG inline untuk kontrol langsung atas elemennya.
• Verifikasi ukuran rendering dan proporsi pada tata letak tersempit yang didukung.
• Uji bentuk persis yang ingin Anda warnai ulang; jangan mengandalkan aturan path yang luas.
• Periksa nama gambar, ID duplikat, serta tautan atau tombol yang mengelilinginya.
• Ukur perilaku pemuatan jika memengaruhi keputusan; jangan menyimpulkan hasil kecepatan dari contoh ini.

FAQ

Apakah SVG menjadi bitmap ketika saya menggunakan tag img? Tidak. SVG yang dimuat melalui img masih dapat merender geometri vektor. Elemen gambar mencegah halaman host memilih bentuk internalnya secara langsung; elemen itu tidak mengonversi bentuk tersebut menjadi PNG.

Mengapa currentColor tidak mengikuti warna teks halaman saya? Gambar SVG eksternal memiliki konteks gayanya sendiri. Warna halaman tidak otomatis menjadi currentColor yang digunakan di dalam file itu. Gunakan SVG inline ketika pewarnaannya harus diwariskan dari halaman, dan tulis fill atau stroke yang relevan agar menggunakan currentColor.

Haruskah saya mengonversi SVG yang sudah ada sebelum meletakkannya inline? Tidak diperlukan konversi jika SVG sudah berisi bentuk vektor yang Anda inginkan. Tinjau markup-nya, pertahankan referensi yang diperlukan, tambahkan penamaan yang sesuai, dan uji dalam halaman. Konversi raster-ke-vektor hanya relevan ketika Anda perlu memulihkan bentuk dari sumber raster.

Sources

1. MDN — Menyertakan grafis vektor dalam HTML — Perilaku penyematan gambar eksternal dan inline.
2. MDN — Pengantar SVG dalam HTML — Markup inline, viewBox, dan penamaan aksesibel.
3. MDN — Caching HTTP — Penggunaan ulang cache bergantung pada kebijakan respons dan identitas sumber daya.
4. MDN — SVG sebagai gambar — Batasan skrip dan sumber daya dalam konteks gambar.

Pilih penyematan yang sesuai dengan tugas artwork, lalu uji dengan gaya halaman sebenarnya. Jika satu-satunya sumber Anda adalah PNG yang sesuai, pulihkan bentuk vektornya terlebih dahulu, periksa hasilnya, dan siapkan artwork yang diterima untuk penyematan tersebut.