Mulai dengan struktur dokumen
SVG adalah bahasa grafis vektor berbasis XML. Elemen svg dapat memuat bentuk, path, teks, kelompok, dan atribut yang menentukan tampilan pada bidang gambar. Contoh kecil di bawah menggunakan viewBox 40 × 40 dan sebuah lingkaran berpusat pada koordinat (20; 20) dengan jari-jari 12. viewBox menetapkan sistem koordinat; nilainya tidak berarti gambar harus tampil selebar 40 piksel CSS pada halaman. Karena SVG berbasis XML, susunan elemen bersarang dan tanda kutip pada atribut perlu diperiksa. Pemformat XML umum dapat membantu membaca strukturnya, sedangkan pemformat SVG secara khusus memeriksa keberadaan elemen akar svg. Pilih alat SVG ketika masukannya memang dimaksudkan sebagai gambar SVG.
Format untuk diperiksa, lalu minimalkan salinan
Alat format menambahkan indentasi dan pembagian baris sehingga Anda dapat memeriksa elemen lingkaran, isinya dan viewBox secara terpisah. Ini berguna saat mengedit atau meninjau. Minifier SVG bertujuan untuk bentuk serialisasi yang lebih kompak, yang mungkin berguna ketika mengirimkan file; ini bukan kompresor gambar yang mengoptimalkan jalur atau memilih gambar yang berbeda. Simpan sumber asli dan bandingkan hasil dalam renderer yang sebenarnya. Sebuah string yang lebih pendek tidak secara otomatis berarti rendering yang sama untuk setiap fitur SVG yang tidak biasa, terutama jika sebuah alat memiliki cakupan parser terbatas. Perlakukan pemformat atau minifier error sebagai permintaan untuk memeriksa masukan, bukan sebagai alasan untuk menebak struktur XML yang hilang.
- SVG XML dengan viewBox dan lingkaran
- format untuk memeriksa struktur
- minifikasi salinan → bandingkan rendering
Periksa arti yang terlihat dan tidak terlihat
Diagram dapat mencakup teks, label atau judul yang penting bagi pembaca dan teknologi bantu. Jangan hapus konten seperti itu hanya untuk menyimpan byte. SVG juga dapat mencakup gaya, tautan, animasi dan skrip, sehingga pemformatan tidak membersihkan berkas dari konten yang tidak tepercaya. Jika sumber berasal dari luar proyek Anda, gunakan tinjauan keamanan yang sesuai dan proses sanitasi sebelum memasukkan ke dalam halaman. Contoh lingkaran ini sengaja sederhana: ia menggambarkan struktur tanpa mengklaim bahwa setiap fitur SVG akan bertahan dari pemformat sisi browser kecil. Bandingkan gambar yang ditampilkan, dimensinya dan alternatif teks apapun setelah transformasi.
Verifikasi koordinat dan konteks penambahan
Jika SVG tampak terlalu kecil, terpotong, atau kosong, periksa viewBox terlebih dahulu. Keempat angka viewBox menentukan persegi panjang koordinat yang terlihat; elemen di luarnya dapat tersembunyi meskipun XML-nya valid. Lalu periksa lebar dan tinggi pada tempat SVG disematkan karena CSS dapat mengatur ukuran tampilannya. Isian dan garis tepi suatu bentuk juga memengaruhi apakah bentuk itu terlihat. Pemformatan tidak mengubah koordinat yang dimaksud. Bandingkan SVG yang dipadatkan dengan berkas asal di bawah gaya halaman yang sama. Untuk gambar yang penting, buka sebagai gambar tersendiri dan dalam konteks halaman tempat gambar itu benar-benar digunakan.
Gunakan alat sebagai aliran kerja yang terkontrol
Tempelkan SVG kecil yang mewakili ke dalam pemformat tertanam dan konfirmasikan bahwa hasil tetap dapat dibaca. Jika berkasnya adalah XML tetapi bukan SVG, pilih format XML sebagai gantinya. Setelah menilai SVG, salin isinya ke SVG minifier, simpan kedua versi dan bandingkan secara visual di browser pada beberapa ukuran. Periksa teks alternatif dan perilaku interaktif apapun jika fitur tersebut ada. Hanya kemudian mengganti aset yang ditempatkan. Alat ini memproses masukan dalam peramban Anda, tetapi menerbitkan kode embed dengan masukan yang sudah diisi akan mengungkapkan masukan tersebut dalam fragmen URL pemasangan; hindari menggunakan sumber materi pribadi dalam contoh publik. Format bersih adalah bantuan tinjauan, bukan pengganti untuk pengujian rendering.