10 Aturan Emas untuk SVG Responsif

Banyak keunggulan SVG - termasuk gambar vektor yang tak terbatas, ukuran file kecil dan integrasi langsung dengan DOM - membuatnya cocok untuk Desain Web Responsif . Meskipun spesifikasi SVG menjadi tua satu dekade, itu adalah dukungan yang relatif baru-baru ini di banyak browser dan alat berarti masih ada sejumlah trik, celah, dan gotcha yang menangkap desainer dan pengembang web yang berpengalaman.

Di sini, saya telah merangkum yang paling penting dari ini sebagai 10 aturan emas.

01. Siapkan alat Anda dengan benar

Sama seperti pengrajin mempertajam alatnya sebelum memulai pekerjaan, siapa pun yang bekerja dengan SVG harus menetapkan aplikasi mereka untuk menghasilkan format vektor dengan metode yang paling efisien dan dioptimalkan. Ada sejumlah pengaturan untuk diimplementasikan.

Pertama, kecuali ada alasan kuat untuk melakukan sebaliknya, tetapkan pengukuran menjadi 'piksel' di alat vektor Anda. Meskipun tidak masalah untuk SVG (yang akan mengukur Kotak Lihat dan elemen dengan senang hati di hampir semua sistem pengukuran) masuk akal untuk mengembangkan gambar SVG menggunakan unit CSS umum, daripada default cetak inci; dan itu juga membuatnya lebih mudah untuk ditambahkan @media pertanyaan dan intervensi lain nanti.

Jangan membuat area kanvas lebih besar dari yang dibutuhkan. Seperti gambar bitmap, 'ruang kosong' di SVG tidak akan digunakan, dan sebaiknya diganti dengan margin CSS. Perhatikan bahwa banyak alat vektor, seperti sketsa, akan secara otomatis 'memotong' area kanvas ke elemen yang dipilih.

Pada saat yang sama, jangan memotong area kanvas ke tepi elemen yang tepat. Antialiasing masih akan diterapkan pada SVG, dan memotongnya terlalu dekat juga dapat memotong antialiasing. Sebaliknya, biarkan setidaknya 2px jelas di mana pun tepi kanvas mendekati suatu elemen.

Responsif dan kinerja terkait erat, jadi atur presisi desimal menjadi tidak lebih dari dua poin. SVG tidak berpikir dalam bilangan bulat, sehingga titik vektor dapat memiliki nilai 1,45882721px. Presisi ekstrem ini sepenuhnya tidak perlu, dan hanya menambah kode bloat dan ukuran file, jadi lebih baik memotongnya pada saat ini.

Demikian pula, gambar bentuk vektor menggunakan sesedikit mungkin poin. Banyak desainer baru menganggap lebih banyak poin lebih baik, ketika sebaliknya sebenarnya benar: beberapa poin, ditempatkan dengan baik, memberikan kontrol yang lebih besar atas suatu elemen, sementara juga mengurangi ukuran file.

Jika Anda diberi file vektor yang tidak mengikuti aturan ini, jangan khawatir - kebanyakan vektor seni Aplikasi memiliki opsi 'Sederhana' yang dapat Anda gunakan untuk mengurangi jumlah titik dalam suatu elemen tanpa mengubah bentuknya. Atau, untuk pekerjaan terperinci Saya sarankan plugin seperti vektor grafis cerdik.

02. Hapus atribut tinggi dan lebar

Sebagian besar aplikasi menambah banyak kode eksklusif dan tidak perlu dalam ekspor SVG mereka. Satu-satunya kode yang diperlukan pada awal sebagian besar file SVG adalah sebagai berikut:

 & lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 500 500" & gt;
& lt;! - Kode SVG di sini - & gt;
& lt; / svg & gt; 

Untuk tujuan kami, aspek yang paling penting adalah penghapusan lebar dan tinggi Atribut yang sebagian besar aplikasi termasuk secara otomatis. Ini membuat SVG sepenuhnya responsif di browser modern.

Jika Anda memproses banyak SVG, atau terburu-buru, Anda tidak perlu menyelesaikan langkah ini. Sebagai gantinya, Anda dapat mengikuti saran yang ditata di aturan emas ketiga ...

03. Optimalkan dan minify output SVG

Alat apa pun yang Anda gunakan untuk membuat konten SVG Anda, masih bermanfaat memproses outputnya melalui alat Svgomg. , yang akan memangkas kode secara nyata. Biasanya, Anda dapat menghemat sekitar 20 hingga 80 persen dalam ukuran file. Kode yang sama dapat diintegrasikan secara lokal sebagai tugas tegukan atau gerutangan .

04. Ubah kode untuk IE

Aturan 2 menyebutkan bahwa SVG yang dioptimalkan dengan benar sepenuhnya responsif di browser modern. Itu benar jika kita menghitung Microsoft Edge sebagai browser modern. Untuk IE 9-11, kami memiliki beberapa masalah untuk diatasi. Jika kita menggunakan SVG sebagai gambar:

 & lt; img src = "countdown.svg alt =" hitung mundur "& gt; 

Kami dapat memaksa IE9-11 untuk menampilkan gambar dengan benar menggunakan pemilih atribut CSS:

 img [src $ = ". Svg"] {lebar: 100%;} 

Gambar SVG bekerja dengan baik dalam produksi umum, tetapi memiliki interaktivitas terbatas: Sebagian besar browser akan mengabaikan interaktivitas dan animasi di dalam SVG yang ditempatkan pada halaman sebagai . Selain itu, gambar SVG adalah permintaan HTTP tambahan untuk browser.

Untuk alasan ini dan lainnya, SVG semakin banyak digunakan sebaris. Dalam hal itu, kode SVG membutuhkan sedikit lebih banyak perawatan untuk IE:

 & lt; body & gt;
...
& lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 525 365" preserveaspecpectratio = "xmidymin slice" & gt; 

Selain preserveaspectratio. Atribut, yaitu perlu sedikit lebih banyak panduan untuk melestarikan penskalaan gambar yang benar: ambil lebar SVG ( 365. Dalam hal ini), membaginya dengan ketinggian ( 525. ) dan kalikan hasilnya 100 persen. Ini akan menjadi Padding-Bottom. Nilai untuk SVG, 'menopang' itu cukup terbuka di IE untuk menampilkan SVG dalam rasio aspek yang benar:

 & lt; body & gt;
...
& lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 525 365"
preserveaspectratio = "irisan xmidymin"
Gaya = "lebar: 100%; padding-bottom: 69.52%; tinggi: 1px; overflow: terlihat" & gt; 

Perhatikan bahwa, untuk menjaga hal-hal ringkas dan jelas, sampel kode dalam sisa artikel ini tidak termasuk perubahan ini. Amelia Bellamy-Royds telah menulis Artikel yang sangat baik tentang scaling svg .

05. Pertimbangkan SVG untuk teks pahlawan

Saat ini tidak ada standar CSS untuk ukuran teks ke wadahnya. Dimungkinkan untuk skala teks menggunakan unit VW, tetapi itu hampir selalu membutuhkan setidaknya dua intervensi permintaan media untuk 'menjepit' teks pada batas viewport tertentu. Namun, teks SVG akan mengubah ukuran ke wadah secara otomatis:

 & lt; header & gt;
& lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 285 80" & gt;
& lt; text x = "0" y = "66" & gt; kauai & lt; / text & gt;
& lt; / svg & gt;
& lt; / header & gt; 

CSS:

 Header SVG Teks {
Font-weight: 900; Ukuran font: 90px; Isi: Biru;
} 

Menjaga SVG Inline menjaga aksesibilitas dan nilai SEO, dan memungkinkan teks untuk ditata dengan menggunakan font yang sudah tertanam di halaman. Lihat sini untuk informasi lebih lanjut.

06. Tinggalkan lebar dan tinggi di tempat untuk ikon progresif

Satu pengecualian untuk aturan 2 adalah ikon dan logo kecil, yang harus mempertahankannya lebar dan tinggi Atribut jika Anda ingin mereka meningkat secara progresif:

 & lt; a href = "http://codepen.io" & gt;
    & lt; svg role = "img" aria-label = "codepen" width = "50" tinggi = "50" & gt;
        & lt; judul & gt; codepen & lt; / judul & gt;
        & lt; gunakan xlink: href = "# codepen" / & gt;
    & lt; / svg & gt;
& lt; / a & gt;
...
& lt; svg style = "Display: None;" & gt;
    & lt; simbol id = "codepen" viewbox = "0 0 50 50" & gt;
        & lt; path d = "..." / & gt;
    & lt; / simbol & gt;
& lt; / svg & gt; 

Anda dapat melihat contoh teknik ini beraksi sini .

Jika kita hanya mengukur ikon SVG dengan CSS, dan lembar gaya situs tidak memuat, ikon akan muncul pada ukuran default elemen yang diganti: 300px x 150px. Dengan menjaga ketinggian dan lebar sebagai atribut, kita dapat mengukurnya ke ukuran sentuhan yang masuk akal secara default, dan menggunakan CSS kami untuk meningkatkan cara mereka disajikan.

07. Gunakan efek vektor untuk menjaga garis rambut tipis

Secara default, SVG skala segalanya dengan viewport, termasuk ketebalan stroke. Biasanya ini berfungsi dengan baik, tetapi dalam beberapa kasus - diagram dan stroke diterapkan sebagai efek pada bagian luar teks khususnya - Anda mungkin ingin menjaga ketebalan yang sama, tidak peduli berapa ukuran gambar. Ini adalah domain yang sedikit diketahui efek vektor. Properti, yang dapat diterapkan sebagai atribut presentasi atau dalam CSS:

 path {
    Isi: #fff; Stroke: # 111;
    Stroke-lebar: 2;
    efek vektor: non-skala-stroke;
} 

Melihat contoh lengkap dari teknik ini .

08. Ingat Bitmaps.

Banyak pengembang asumsikan SVG hanya dapat menggunakan vektor, tetapi JPEG dan PNG juga dapat diterapkan pada gambar SVG. Dan selama Anda mengikuti aturan saya sejauh ini, gambar-gambar itu akan responsif ketika Anda menambahkan bitmap melalui menandai:

 & lt; gambar lebar = "1024" tinggi = "768" xlink: href = "lake-louise.jpg" x = "1300" y = "150" peran = "gambar" title = "crowsnest pass" & gt; & lt; / image & gt; 

09. Pertimbangkan solusi adaptif

Membuat segalanya 'Squish' hanya satu bagian dari desain responsif. Tentang apa RWD, dalam arti yang lebih besar dari desain adaptif, menyajikan konten yang sesuai pada semua ukuran viewport.

Ini dapat dicapai dengan berbagai cara. ResponTivelogos.co.uk menyediakan serangkaian contoh yang menggunakan sprite SVG, tetapi saya lebih suka mengintegrasikan permintaan media ke SVG untuk membuat apa yang saya sebut 'modul branding'. Pendekatan ini memungkinkan saya untuk menambah, menghapus, dan memodifikasi visibilitas komponen. Baca lebih lanjut tentang modul branding adaptif di artikel saya .

Teknik yang sama ini dapat digunakan untuk diagram, ilustrasi, peta, dan lainnya. Dalam modul paling sederhana, CSS itu sendiri dapat ditulis di dalam SVG, membuatnya dapat digunakan di mana-mana, seperti yang diuraikan dalam aturan sebelumnya.

10. Mengintegrasikan kueri media ke SVG

Banyak orang tidak tahu bahwa kueri media CSS dapat ditulis di dalam SVG itu sendiri:

 & lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "14 82 272 139" & gt;
& lt; defs & gt;
& lt; gaya & gt;
svg g {transisi: 1s; }
@Media semua dan (lebar maksimal: 90REM) {
#Grink, #coke {opacity: 0; }
}
& lt; / style & gt;
& lt; / defs & gt;
& lt; g id = "coca-cola" & gt;
& lt; path d = "M109.6 ... & gt; 

Penting untuk dicatat bahwa kueri media hanya dapat 'melihat' elemen yang ada di dalam: yaitu, setiap pengukuran berkaitan dengan elemen itu sendiri, bukan halaman. Salah satu downside potensi dari pendekatan ini adalah bahwa area kanvas dari SVG akan selalu tetap sama, relatif terhadap elemen-elemen di dalamnya.

Ini dapat menghasilkan elemen yang sangat kecil pada ukuran viewport kecil, dibingkai di dalam area kanvas yang relatif besar. Ada beberapa solusi untuk ini, termasuk mengubah ukuran kotak tampilan dan meningkatkan elemen untuk mengkompensasi .

Kesimpulan

Skalabilitas tak terbatas SVG adalah aset terbesarnya, tetapi fitur yang masih agak kurang terlayani oleh browser dan editor grafis vektor. Dengan mengintegrasikan pedoman ini ke dalam alur kerja produksi Anda dan berkomunikasi dengan orang lain di tim Anda, Anda dapat membuat SVG responsif dengan lancar untuk web, menjadikannya bagian dari aset yang Anda gunakan dalam pengembangan setiap hari.

Artikel ini awalnya muncul di Net Magazine. masalah 283; Beli di sini !

Artikel terkait:

• 12 Alat pengujian kode harus
• Pertajam keterampilan sketsa Anda
• Animasi SVG SuperCharge dengan GSAP