Skrip SVG untuk perubahan warna acak. Menata SVG dengan CSS: Fitur dan Batasan
SVG adalah format grafik vektor. Namanya secara harfiah berarti “dapat diskalakan grafis vektor"(Grafik Vektor yang Dapat Diskalakan). Sederhananya, ini adalah tempat Anda bekerja Adobe Ilustrator. SVG dapat dengan mudah digunakan di web, namun ada banyak hal yang harus dipahami terlebih dahulu.
Mengapa Anda membutuhkan SVG?
- Ukuran file kecil, kompresi luar biasa;
- Menskalakan ke ukuran berapa pun, tanpa kehilangan kualitas (kecuali untuk ukuran yang sangat kecil);
- Terlihat bagus di retina;
- Berbagai kemungkinan disediakan oleh filter dan interaktivitas.
Mari buat gambar SVG yang akan kita kerjakan selanjutnya
Buat desain khusus di Adobe Illustrator. Di sini, misalnya, adalah burung kiwi berbentuk oval.
Harap dicatat bahwa gambar terpotong tajam di sekitar tepi gambar. Kanvas di SVG memainkan peran yang tidak kalah pentingnya dengan di PNG atau JPG.
Adobe Illustrator dapat menyimpan sebagai SVG.
Saat menyimpan, kotak dialog lain dengan pengaturan akan muncul. Sejujurnya, saya tidak tahu banyak tentang mereka. Ada tutorial lengkap tentang Profil SVG. Saya cukup senang dengan SVG 1.1.
Perlu dicatat di sini bahwa Anda memiliki pilihan untuk mengklik OK dan menyimpan file, atau mengklik tombol “Kode SVG…”, yang akan membuka jendela TextEdit (setidaknya di Mac) dengan kode SVG.
Kedua opsi tersebut dapat bermanfaat.
Di Ilustrator wilayah kerja tadinya 612 piksel ✕ 502 piksel.
Ini adalah dimensi yang dimiliki gambar pada halaman jika tidak ditentukan secara spesifik. Dimensinya dapat diubah dengan mengatur atribut lebar atau tinggi ke img , seperti PNG atau JPG. Berikut ini contohnya:
Dukungan peramban
Salah satu opsi: periksa dukungan melalui Modernizr dan ganti src untuk gambar tersebut:
if (!Modernizr.svg) ( $(".logo img" ).attr("src" , "images/logo.png" ); )David Bushell memiliki alternatif yang sangat sederhana jika Anda tidak keberatan dengan JavaScript di markup Anda:
"ini.onerror=null; this.src="gambar.png"">
Untuk metode penyisipan SVG ini, Anda dapat menggunakan teknik degradasi berikut:
<svg> ... svg> <div kelas="kembali" >div>Dan sekali lagi kami menggunakan Modernizr:
.logo-fallback ( tampilan : tidak ada; /* Pastikan ukurannya sesuai dengan ukuran SVG */) .no-svg .logo-fallback ( gambar latar : url (logo.png); )Menambahkan SVG ke halaman menggunakan tag
Jika karena alasan tertentu Anda tidak menyukai opsi untuk memasukkan SVG langsung ke dalam dokumen (masih memiliki beberapa kelemahan, misalnya, caching hampir tidak mungkin), Anda dapat menghubungkan file SVG menggunakan
<tipe objek ="gambar/svg+xml" data ="kiwi.svg" kelas ="logo" > Logo Kiwi objek >Jika hal ini tidak didukung, mari terapkan degradasi menggunakan kelas yang ditambahkan Modernizr:
.no-svg .logo ( lebar : 200 piksel ; tinggi : 164 piksel ; gambar latar : url (kiwi.png); )Pendekatan ini tidak menyebabkan masalah caching dan didukung oleh browser lebih baik daripada yang lain. Namun jika Anda menggunakan berkas eksternal dengan gaya atau
Menggunakan Kelas Pseudo
Penggunaan kelas semu seperti:hover dimungkinkan di SVG, bahkan dalam kombinasi dengan properti transisi CSS3.
Dengan menerapkan contoh ini, elemen hover yang membawa kelas contoh akan menyebabkan warna berubah dari merah menjadi biru. Agar ini berfungsi dengan baik, pastikan SVG tidak dimasukkan sebagai Img. Lebih baik pilih Sematkan atau Iframe:
Menggunakan Img akan membantu tampilan SVG dengan benar. Tetapi, efek melayang dan transisi akan diabaikan. Selain transisi, kita dapat menggunakan transformasi, sehingga memungkinkan elemen untuk diskalakan atau diputar.
Saat menggunakan CSS3, jangan lupa menambahkan awalan vendor untuk menjaganya kuantitas maksimum browser modern. Meskipun Chrome dan Firefox tidak memiliki masalah dalam merender dengan sempurna, Internet Explorer akan menolak menampilkan kreasi Anda bahkan dalam versi terbaru, meskipun ia mampu menampilkan properti CSS3 tersebut saat digunakan dalam HTML.
Kueri media dan SVG
Jika Anda ingin mengkustomisasi SVG Anda sehingga dapat mengubah ukuran, cukup gunakan media queries langsung di dalamnya:
Contoh ini memastikan bahwa elemen contoh kelas tidak akan ditampilkan segera setelah lebar terlihat turun di bawah 800 piksel. Sadarilah bahwa bukan lebar dokumen yang menentukan hal ini, namun lebar elemen yang membawa SVG Anda.
Dalam contoh ini, elemen kelas contoh tidak akan ditampilkan karena lebar yang ditentukan hanya 500 piksel. Kueri media di SVG juga berguna untuk mengoptimalkan grafik untuk pencetakan.