6 Kegagalan Umum SVG (dan Cara Memperbaikinya)

Seseorang baru-baru ini bertanya kepada saya bagaimana saya mendekati debugging inline SVG. Karena itu adalah bagian dari DOM, kami dapat memeriksa SVG sebaris apa pun di browser DevTools apa pun. Dan karena itu, kami memiliki kemampuan untuk memperluas dan mengungkap potensi masalah atau peluang apa pun untuk mengoptimalkan SVG.

Namun terkadang, kami bahkan tidak dapat melihat SVG kami sama sekali. Dalam kasus tersebut, ada enam hal khusus yang saya cari saat melakukan debug.

1. Itu viewBox nilai-nilai

Grafik viewBox adalah titik kebingungan umum saat bekerja dengan SVG. Secara teknis tidak apa-apa menggunakan SVG sebaris tanpanya, tetapi kita akan kehilangan salah satu keuntungannya yang paling signifikan: penskalaan dengan penampung. Pada saat yang sama, itu dapat bekerja melawan kita ketika tidak dikonfigurasi dengan benar, menghasilkan kliping yang tidak diinginkan.

Unsur-unsurnya ada saat dipotong — mereka hanya berada di bagian sistem koordinat yang tidak kita lihat. Jika kami membuka file di beberapa program pengeditan grafik, mungkin terlihat seperti ini:

Cara termudah untuk memperbaikinya? Menambahkan overflow="visible" ke SVG, apakah itu di stylesheet kami, sebaris di style atribut atau langsung sebagai atribut presentasi SVG. Tetapi jika kita juga menerapkan a background-color ke SVG atau jika kita memiliki elemen lain di sekitarnya, hal-hal mungkin terlihat sedikit salah. Dalam hal ini, opsi terbaik adalah mengedit viewBox untuk menunjukkan bagian dari sistem koordinat yang disembunyikan:

Ada beberapa hal tambahan tentang viewBox yang layak dibahas saat kita membahas topik ini:

Bagaimana viewBox bekerja?

SVG adalah kanvas tanpa batas, tetapi kita dapat mengontrol apa yang kita lihat dan bagaimana kita melihatnya melalui viewport dan viewBox.

Grafik area pandang adalah bingkai jendela di kanvas tak terbatas. Dimensinya ditentukan oleh width dan height atribut, atau dalam CSS dengan yang sesuai width dan height properti. Kami dapat menentukan satuan panjang apa pun yang kami inginkan, tetapi jika kami memberikan angka tanpa satuan, standarnya adalah piksel.

Grafik viewBox ditentukan oleh empat nilai. Dua yang pertama adalah titik awal di pojok kiri atas (x dan y nilai, angka negatif diperbolehkan). Saya mengedit ini untuk membingkai ulang gambar. Dua yang terakhir adalah lebar dan tinggi sistem koordinat di dalam area pandang — ini adalah tempat kita dapat mengedit skala kisi (yang akan kita bahas di bagian zooming).

Inilah markup sederhana yang menunjukkan SVG viewBox dan width dan height atribut keduanya diatur pada <svg>:

<svg viewBox="0 0 700 700" width="700" height="700"> <!-- etc. -->
</svg>

Membingkai ulang

Jadi ini:

<svg viewBox="0 0 700 700">

…peta untuk ini:

<svg viewBox="start-x-axis start-y-axis width height">

Area pandang yang kita lihat dimulai dari mana 0 pada sumbu x dan 0 pada pertemuan sumbu y.

Dengan mengubah ini:

<svg viewBox="0 0 700 700">

…untuk ini:

<svg viewBox="300 200 700 700">

…lebar dan tingginya tetap sama (700 unit masing-masing), tetapi awal dari sistem koordinat sekarang berada di 300 titik pada sumbu x dan 200 pada sumbu y.

Dalam video berikut saya menambahkan warna merah <circle> ke SVG dengan pusatnya di 300 titik pada sumbu x dan 200 pada sumbu y. Perhatikan bagaimana mengubah viewBox koordinat ke nilai yang sama juga mengubah penempatan lingkaran ke sudut kiri atas bingkai sementara ukuran SVG yang dirender tetap sama (700×700). Yang saya lakukan hanyalah "membingkai ulang" hal-hal dengan viewBox.

zooming

Kita dapat mengubah dua nilai terakhir di dalam viewBox untuk memperbesar atau memperkecil gambar. Semakin besar nilainya, semakin banyak unit SVG yang ditambahkan agar sesuai dengan viewport, menghasilkan gambar yang lebih kecil. Jika kita ingin mempertahankan rasio 1:1, kita viewBox width dan height harus sesuai dengan nilai viewport width dan height kami.

Mari kita lihat apa yang terjadi di Illustrator saat kita mengubah parameter ini. Artboard adalah viewport yang diwakili oleh persegi 700px putih. Segala sesuatu yang lain di luar area itu adalah kanvas SVG kami yang tak terbatas dan terpotong secara default.

Gambar 1 di bawah ini menunjukkan titik biru di 900 sepanjang sumbu x dan 900 sepanjang sumbu y. Jika saya mengubah dua yang terakhir viewBox nilai dari 700 untuk 900 seperti ini:

<svg viewBox="300 200 900 900" width="700" height="700">

…maka titik biru hampir sepenuhnya kembali terlihat, seperti yang terlihat pada Gambar 2 di bawah ini. Gambar kita diperkecil karena kita meningkatkan nilai viewBox, tetapi dimensi lebar dan tinggi aktual SVG tetap sama, dan titik biru kembali mendekati area yang tidak dipotong.

Ada kotak merah muda sebagai bukti bagaimana skala kisi agar sesuai dengan viewport: unit menjadi lebih kecil, dan lebih banyak garis grid masuk ke dalam area viewport yang sama. Anda dapat bermain dengan nilai yang sama di Pena berikut untuk melihat cara kerjanya:

2. Tidak ada width dan height

Hal umum lainnya yang saya lihat saat men-debug SVG inline adalah apakah markup berisi file width or height atribut. Ini bukan masalah besar dalam banyak kasus kecuali SVG berada di dalam wadah dengan pemosisian absolut atau wadah fleksibel (karena Safari menghitung SVG width nilai dengan 0px alih-alih auto). Tidak termasuk width or height dalam kasus ini mencegah kita melihat gambar penuh, seperti yang bisa kita lihat membuka demo CodePen ini dan bandingkan di Chrome, Safari, dan Firefox (ketuk gambar untuk tampilan lebih besar).

Solusinya? Tambahkan lebar atau tinggi, baik sebagai atribut presentasi, sebaris di atribut gaya, atau di CSS. Hindari menggunakan ketinggian dengan sendirinya, terutama jika diatur ke 100% or auto. Solusi lain adalah untuk mengatur kanan dan nilai kiri.

Anda bisa bermain-main dengan Pena berikut dan menggabungkan pilihan yang berbeda.

3. Tidak disengaja fill dan stroke warna

Mungkin juga kita menerapkan warna pada <svg> tag, apakah itu gaya sebaris atau berasal dari CSS. Tidak apa-apa, tetapi mungkin ada nilai warna lain di seluruh markup atau gaya yang bertentangan dengan warna yang disetel di <svg>, menyebabkan bagian menjadi tidak terlihat.

Itu sebabnya saya cenderung mencari fill dan stroke atribut di markup SVG dan menghapusnya. Video berikut menunjukkan SVG yang saya tata dalam CSS dengan warna merah fill. Ada beberapa contoh di mana bagian SVG diisi dengan warna putih langsung di markup yang saya hapus untuk mengungkapkan bagian yang hilang.

4. ID yang hilang

Yang ini mungkin tampak sangat jelas, tetapi Anda akan terkejut betapa seringnya saya melihatnya muncul. Katakanlah kita membuat file SVG di Illustrator dan sangat rajin memberi nama layer kita sehingga Anda mendapatkan ID yang cocok di markup saat mengekspor file. Dan katakanlah kita berencana untuk menata SVG itu di CSS dengan mengaitkannya ke ID tersebut.

Itu cara yang bagus untuk melakukan sesuatu. Tetapi sering kali saya melihat file SVG yang sama diekspor untuk kedua kalinya ke lokasi yang sama dan ID-nya berbeda, biasanya saat menyalin/menempelkan vektor secara langsung. Mungkin layer baru ditambahkan, atau salah satu yang sudah ada diganti namanya atau semacamnya. Apa pun masalahnya, aturan CSS tidak lagi cocok dengan ID di markup SVG, menyebabkan SVG dirender secara berbeda dari yang Anda harapkan.

Dalam file SVG besar, kami mungkin kesulitan menemukan ID tersebut. Ini saat yang tepat untuk membuka DevTools, memeriksa bagian grafik yang tidak berfungsi, dan melihat apakah ID tersebut masih cocok.

Jadi, menurut saya ada baiknya membuka file SVG yang diekspor dalam editor kode dan membandingkannya dengan aslinya sebelum menukarnya. Aplikasi seperti Illustrator, Figma, dan Sketch memang cerdas, tetapi bukan berarti kami tidak bertanggung jawab untuk memeriksanya.

5. Checklist untuk clipping dan masking

Jika SVG tiba-tiba terpotong dan viewBox memeriksa baik-baik saja, saya biasanya melihat CSS untuk clip-path or mask properti yang mungkin mengganggu gambar. Sangat menggoda untuk terus melihat markup sebaris, tetapi perlu diingat bahwa gaya SVG mungkin terjadi di tempat lain.

Kliping dan masking CSS memungkinkan kita untuk "menyembunyikan" bagian dari suatu gambar atau elemen. Di SVG, <clipPath> adalah operasi vektor yang memotong bagian gambar tanpa hasil setengah jalan. Itu <mask> tag adalah operasi piksel yang memungkinkan transparansi, efek semi-transparansi, dan tepi kabur.

Ini adalah daftar periksa kecil untuk kasus debug yang melibatkan kliping dan masking:

• Pastikan jalur kliping (atau topeng) dan grafik saling tumpang tindih. Bagian yang tumpang tindih inilah yang ditampilkan.
• Jika Anda memiliki jalur kompleks yang tidak memotong grafik Anda, coba terapkan transformasi hingga cocok.
• Anda masih dapat memeriksa kode bagian dalam dengan DevTools meskipun <clipPath> or <mask> tidak dirender, jadi gunakan itu!
• Salin markup di dalamnya <clipPath> dan <mask> dan rekatkan sebelum menutup </svg> menandai. Kemudian tambahkan a fill ke bentuk tersebut dan periksa koordinat dan dimensi SVG. Jika Anda masih tidak melihat gambarnya, coba tambahkan overflow="hidden" ke <svg> menandai.
• Periksa bahwa unik ID digunakan untuk <clipPath> or <mask>, dan bahwa ID yang sama diterapkan pada bentuk atau grup bentuk yang dipotong atau disamarkan. ID yang tidak cocok akan merusak penampilan.
• Periksa kesalahan ketik di markup antara <clipPath> or <mask> tag.
• fill, stroke, opacity, atau beberapa gaya lain yang diterapkan pada elemen di dalamnya <clipPath> tidak berguna — satu-satunya bagian yang berguna adalah geometri wilayah isian dari elemen tersebut. Itu sebabnya jika Anda menggunakan a <polyline> itu akan berperilaku sebagai <polygon> dan jika Anda menggunakan a <line> Anda tidak akan melihat efek kliping apa pun.
• Jika Anda tidak melihat gambar Anda setelah menerapkan a <mask>, pastikan bahwa fill dari konten masking tidak sepenuhnya hitam. Luminance dari elemen masking menentukan opacity dari grafik akhir. Anda akan dapat melihat melalui bagian yang lebih terang, dan bagian yang lebih gelap akan menyembunyikan konten gambar Anda.

Anda dapat bermain dengan elemen bertopeng dan terpotong Pena ini.

6. Ruang nama

Tahukah Anda bahwa SVG adalah bahasa markup berbasis XML? Ya, benar! Namespace untuk SVG diatur di xmlns atribut:

<svg xmlns="http://www.w3.org/2000/svg"> <!-- etc. -->
</svg>

Ada banyak hal yang perlu diketahui tentang namespace dalam XML dan MDN memiliki primer yang bagus di dalamnya. Cukup untuk mengatakan, namespace menyediakan konteks ke browser, memberitahukannya bahwa markup khusus untuk SVG. Idenya adalah bahwa ruang nama membantu mencegah konflik ketika lebih dari satu jenis XML berada dalam file yang sama, seperti SVG dan XHTML. Ini adalah masalah yang jauh lebih jarang terjadi di browser modern tetapi dapat membantu menjelaskan masalah rendering SVG di browser lama atau browser seperti Gecko yang ketat saat mendefinisikan doctypes dan ruang nama.

Spesifikasi SVG 2 tidak memerlukan namespace saat menggunakan sintaks HTML. Tetapi itu penting jika dukungan untuk browser lawas adalah prioritas — plus, tidak ada salahnya untuk menambahkannya. Dengan begitu, ketika <html> elemen xmlns atribut didefinisikan, itu tidak akan bertentangan dalam kasus yang jarang terjadi.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <body> <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px"> <!-- etc. --> </svg> </body>
</html>

Ini juga berlaku saat menggunakan SVG sebaris di CSS, seperti menyetelnya sebagai gambar latar. Pada contoh berikut, ikon tanda centang muncul di input setelah validasi berhasil. Seperti inilah tampilan CSS-nya:

textarea:valid { background: white url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"> <circle cx="13" cy="13" r="13" fill="%23abedd8"/> <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/> </svg>') no-repeat 98% 5px;
}

Saat kami menghapus namespace di dalam SVG di properti latar belakang, gambar menghilang:

Awalan namespace umum lainnya adalah xlink:href. Kami sering menggunakannya saat mereferensikan bagian lain dari SVG seperti: pola, filter, animasi, atau gradien. Rekomendasinya adalah mulai menggantinya dengan href karena yang lain tidak digunakan lagi sejak SVG 2, tetapi mungkin ada masalah kompatibilitas dengan browser lama. Dalam hal ini, kita dapat menggunakan keduanya. Ingatlah untuk memasukkan namespace xmlns:xlink="http://www.w3.org/1999/xlink" jika masih menggunakan xlink:href.

Tingkatkan keterampilan SVG Anda!

Saya harap tips ini membantu menghemat banyak waktu jika Anda mendapati diri Anda memecahkan masalah SVG inline yang dirender dengan tidak benar. Ini hanya hal-hal yang saya cari. Mungkin Anda memiliki bendera merah berbeda yang Anda perhatikan - jika demikian, beri tahu saya di komentar!

Intinya adalah membayar untuk memiliki setidaknya pemahaman dasar tentang berbagai cara SVG dapat digunakan. Tantangan CodePen sering memasukkan SVG dan menawarkan praktik yang baik. Berikut beberapa sumber daya lainnya untuk naik level:

Ada beberapa orang yang saya sarankan untuk mengikuti kebaikan terkait SVG:

• Konten Bertenaga SEO & Distribusi PR. Dapatkan Amplifikasi Hari Ini.
• Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. Akses Di Sini.
• Sumber: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/