Sebelumnya di blog kami, kami mengangkat topik pembuatan antarmuka web berkualitas tinggi, khususnya di salah satu topik sebelumnya kami membahas masalah penggunaan animasi yang benar. Pada materi hari ini kita akan berbicara tentang teknologi SVG, prinsip kerja dengan teknologi ini, kelebihan dan kekurangannya. Selain itu, kami bertanya kepada desainer dalam negeri apakah mereka menggunakan SVG, dan jika tidak, mengapa tidak.

Secara singkat: apa itu SVG

Kelebihan dan tantangan menggunakan SVG

Ciptakan bukan hanya cantik, tapi sungguh desain yang bagus Tidak mungkin membuat halaman web tanpa memahami bagaimana halaman ini akan dimuat, ditampilkan di browser, beradaptasi dengan ukuran area pandang, dan berubah ketika konten diubah. Berdasarkan hal ini, kita dapat mengatakan bahwa seorang desainer web adalah spesialisasi teknis (mungkin inti dari pekerjaan ini lebih baik disampaikan dengan istilah "insinyur web"), yang sebagian besar menyiratkan penggunaan logika dan pengetahuan, dan hanya sebagian kecil. bagiannya adalah kreativitas seni. Dengan kata lain, seorang desainer web yang buruk adalah seseorang yang tidak tahu cara membuat tata letak sama sekali.

Setelah memahami siapa sebenarnya desainer modern, kita dapat melanjutkan ke pembahasan manfaat yang dapat diperoleh para profesional dari penggunaan teknologi SVG. Singkatnya, penggunaannya membantu meningkatkan kecepatan dan kualitas pekerjaan: perancang harus melakukan lebih sedikit tindakan sendiri, sehingga mengurangi waktu yang dihabiskan pada berbagai tahap pembuatan proyek.

Mari kita lihat lebih dekat daftar keunggulan SVG:

SVG mudah dimodifikasi(baik di editor grafis maupun di halaman itu sendiri menggunakan CSS). Mengubah lokasi, bentuk, ukuran, proporsi, warna, isi, dan semua properti lain dari bagian penyusun gambar lebih mudah dibandingkan dengan kasus grafis raster. Saat bekerja dengan raster, Anda harus menyimpan "sumber" dalam format berlapis, membuat semua perubahan di dalamnya, dan mengekspornya. Dengan SVG biasanya tidak diperlukan “sumber”.

Untuk layar dengan kerapatan piksel tinggi, satu gambar sudah cukup. Dalam hal grafik raster saat ini(musim semi 2015) Anda memerlukan setidaknya tiga (!) versi gambar: ukuran tata letak 100%, 200%, dan 300%. Dalam hal menggunakan SVG, satu versi sudah cukup - seperti versi lainnya format vektor, piksel yang diperlukan untuk menampilkan gambar “muncul” tepat sebelum ditampilkan, berdasarkan ukuran piksel yang diperlukan.

SVG dimuat dengan cepat. Ya, ya, karena, seperti yang kami ketahui di atas, desainer juga harus memikirkan kecepatan memuat halaman, karena semakin lama waktu berlalu dari mengirim permintaan hingga menampilkan halaman, semakin rendah konversi proyek. Pertama, file SVG umumnya memiliki ukuran file yang lebih kecil dibandingkan versi rasternya (pengecualian mencakup gambar berukuran piksel kecil dan gambar vektor kompleks dengan banyak bentuk). Kedua, Anda dapat menambahkan beberapa versi gambar ke satu file SVG dan menampilkannya dalam kondisi tertentu (mengurangi jumlah permintaan ke server). Ketiga, di SVG Anda dapat menggunakan "kloning" - tentukan bentuk (gradien, tekstur) satu kali dan gunakan berulang kali, mengacu pada aslinya. Namun ada kelemahannya: rendering SVG di browser sedikit lebih lambat daripada menampilkan gambar raster, tetapi untuk melihat perbedaan ini, Anda perlu membandingkan gambar yang besar dan kompleks.

SVG mudah dibuat responsif. Jika logo situs perlu ditampilkan dalam versi yang disederhanakan pada area pandang yang sempit, SVG memungkinkan Anda mencapainya hanya dalam satu permintaan ke server.

SVG bisa bersifat interaktif. Mungkin ada tautan, skrip di dalam gambar, bagian interaktif dapat bereaksi terhadap hover dan tindakan pengguna lainnya, Anda dapat menambahkan animasi.

Perangkat lunak yang didistribusikan secara bebas. Anda tidak perlu menggunakan SVG untuk bekerja Adobe Ilustrator(sebagai standar dalam dunia grafik vektor), Inkscape yang didistribusikan secara cukup bebas. Ada sejumlah alat lainnya.

Terlepas dari kelebihan format SVG, tidak semua desainer menggunakannya dalam proyek mereka. Kami bertanya kepada pakar terkenal Rusia di bidang desain dan desain antarmuka tentang alasan situasi ini:

Yuri Vetrov, Kepala Departemen Teknik dan Desain di Mail.Ru

Jawaban sederhananya adalah bahwa seorang desainer tidak cukup hanya mempelajari cara menyiapkan SVG; pengembang juga perlu dapat menggunakannya dalam produk, dan ini tidak mudah; . Kedua, proses bekerja dengan vektor itu sendiri perlu dioptimalkan agar SVG dapat diekspor dengan nyaman dari yang sudah ada editor grafis. Itu. Tidak ada prasangka, hanya saja proses kerja perlu direstrukturisasi secara signifikan, dan hal ini tidak memberikan manfaat yang nyata bagi bisnis. Itu. Ini adalah tugas infrastruktur yang selalu mendapat prioritas lebih rendah. Setiap orang, tentu saja, akan beralih ke sana seiring waktu, tetapi masalahnya kira-kira sama dengan yang dijelaskan di atas.

Denis Kortunov, Direktur UX di Acronis

Pertanyaan ini sebenarnya bukan untuk desainer, tetapi untuk ahli teknologi web atau pengembang front-end. Saat ini, banyak desainer yang awalnya mendesain dalam vektor, dan tidak ada masalah dalam menampilkan grafik sebagai SVG. Masalah utamanya adalah kompatibilitas dengan browser yang berbeda. Gambar-gambar seperti itu seringkali tidak ditampilkan dan diperlukan banyak “menari dengan rebana”. Alternatif umum untuk SVG adalah dengan menggunakan font. Ini adalah peretasan yang memungkinkan Anda menggunakan gambar vektor di web.

Secara umum, di jaringan modern ada masalah - kita memerlukan format tampilan yang sederhana dan universal gambar vektor di halaman. Ada kemungkinan SVG akan segera menjadi standar. Saya sangat menantikan ini.

Dmitry Zimin, manajer proyek Kinokhod

Mengenai “mengapa mereka tidak menggunakan SVG”, saya hanya dapat berbicara untuk proyek kami. Kami memiliki kekhasan: sebagian besar kontennya berupa foto (poster, potongan gambar film, video pratinjau).

Antarmuka di aplikasi seluler Kami ingin mengubahnya menjadi vektor, karena memotong gambar dalam tiga resolusi (x.png, @2x.png, @3x.png) membosankan dan rawan kesalahan. Namun sejauh ini kami belum sempat melakukannya.

Artyom Geller, kepala pengembang situs Kremlin.ru

Kami secara aktif menggunakan SVG dalam proyek kami, tetapi teknologi ini juga menggunakannya batasan tertentu. Bagi kami, hal tersebut tentu saja diimbangi dengan manfaat yang diberikan SVG - kami tidak memerlukan animasi yang rumit pada elemennya, dan kami tidak perlu terlalu sering melukis apa pun di dalamnya.

Pada saat yang sama, kami mengganti elemen dalam SVG dengan PNG jika versi browser tertentu tidak ramah dengan format ini.

Nikita Mikheenkov, Direktur Pengembangan, Nimax Design

Tampaknya bagi kami bahwa permasalahan di sini sama sekali bukan mengenai para desainer, namun tentang seluruh tim yang membuat proyek tersebut. Kekuatan kebiasaan menarik kita kembali ke grafik raster - ini lebih sederhana dan lebih familiar. Kami terus-menerus bekerja dengan SVG dalam proyek kami dan terutama suka membuat segala jenis animasi dan benda terbang.

Berikut adalah beberapa contoh dengan grafis vektor.

SVG adalah format gambar untuk grafik vektor. Secara harfiah, ini tidak lain adalah skalabel. grafis vektor. Artinya, inilah yang Anda kerjakan di Adobe Illustrator. Menggunakan SVG dalam pengembangan web cukup mudah, namun ada beberapa fitur yang patut dipertimbangkan.

Untuk apa SVG digunakan?

• Ukuran file kecil yang dapat dikompres dengan baik
• Menskalakan ke ukuran apa pun tanpa kehilangan kualitas
• Tampak hebat di layar retina
• Kontrol desain penuh dalam interaktivitas dan filter

Mari kita menggambar sesuatu untuk itu pekerjaan yang akan datang di Adobe Ilustrator. Mari kita ambil burung Kiwi:

​

Harap dicatat bahwa kanvas dipangkas tepat di sepanjang tepi gambar. Kanvas SVG dibuat sangat identik dengan PNG atau JPG. Anda dapat menyimpan file langsung dari Adobe Illustrator sebagai file SVG.

​

Setelah Anda menyimpan file, kotak dialog lain akan muncul dengan opsi SVG. Sejujurnya, saya tidak tahu banyak tentang semua pengaturan yang disajikan di jendela ini. Ada spesifikasi untuk profil SVG, jadi jika tertarik bisa membacanya. Menurut saya SVG 1.1 berfungsi dengan baik.

​

Hal kerennya di sini adalah Anda dapat mengeklik OK dan menyimpan file, atau mengeklik tombol “Kode SVG…” dan editor teks akan terbuka dengan kode SVG.

​

Kedua metode ini bisa bermanfaat.

Menggunakan SVG sebagai tag img

Di Illustrator kanvas kita ternyata berukuran 612px ✕ 502px.

Seberapa besar gambar di halaman itu terserah Anda. Anda dapat mengubah ukuran gambar dengan menentukan properti lebar dan tinggi, dengan cara yang persis sama seperti PNG atau JPG. Berikut ini contohnya:

Lihat Pena ini!

Cara membuat SVG lintas browser

Saat menggunakan SVG dengan cara ini, Anda perlu mengingat: dukungan yang berbeda browser. Pada dasarnya, SVG berfungsi di mana saja kecuali IE8 dan yang lebih lama, serta Android 2.3 dan yang lebih lama.

Jika Anda perlu menggunakan SVG, tetapi juga memerlukan dukungan dari browser di atas, ada beberapa opsi untuk mengatasi masalah tersebut. Saya telah menggunakan beberapa teknik di berbagai proyek untuk mengatasi masalah ini.

Salah satu cara untuk memeriksa dukungan SVG adalah Modernizr, yang dengannya Anda mengubah jalur src:

If (!Modernizr.svg) ( $(".logo img").attr("src", "images/logo.png"); )

David Bushell datang dengan cara yang sangat mudah cara alternatif tapi itu berisi javascript di markup:

Layanan SVGeezy juga dapat membantu. Saat kami melanjutkan artikel ini, kami akan melihat banyak hal berbeda metode cadangan untuk dukungan SVG.

Menggunakan SVG sebagai gambar latar belakang

Dengan analogi dengan tag gambar, SVG dapat digunakan sebagai gambar latar belakang:

Perhatikan bahwa kita menyetel ukuran latar belakang agar sama persis dengan ukuran elemen. Hal ini harus dilakukan karena jika tidak kita akan melihat yang kecil bagian atas gambar asli. Angka-angka ini memperhitungkan proporsi asli gambar. Anda juga dapat menggunakan ukuran latar belakang sebagai nilai kata kunci, misalnya mengandung, sehingga gambar menempati seluruh elemen sepenuhnya.

Menggunakan SVG sebagai gambar latar meninggalkan bekas pada dukungan browser, namun secara umum semuanya sama seperti saat menggunakan tag img.

Modernizr dapat lebih membantu kita di sini dengan cara yang efisien daripada dalam kasus img. Intinya jika Anda mengganti gambar background dengan format yang didukung, maka hanya satu yang akan dieksekusi permintaan HTTP bukannya dua, seperti halnya dengan img. Modernizr menambahkan nama kelas “no-svg” ke dalamnya tanda HTML jika browser tidak memiliki dukungan SVG:

Header utama ( latar belakang: url(logo.svg) tanpa pengulangan kiri atas;

ukuran latar belakang: berisi;

) .no-svg .main-header ( gambar latar: url(logo.png); )

Jika Anda mengalami kesulitan dalam menggunakan dua cara di atas untuk menggunakan SVG, berikut adalah cara lainnya untuk menata grafik vektor. Menggunakan SVG "sebaris". Disebutkan di atas bahwa saat menyimpan gambar dalam format SVG, menggunakan editor Illustrator Anda bisa mendapatkan kode SVG yang benar (Anda juga dapat membuka file menggunakan

editor teks dan salin kode ini). Anda dapat menyalin kode ini ke dalam HTML Anda dan SVG akan merender sama persis seperti menggunakan img. Ini bisa berguna karena gambar gambar disertakan bersama dengan kode dalam dokumen dan tidak memerlukan permintaan HTTP. Dengan kata lain, manfaatnya sama seperti saat menggunakan

Ada juga opsi untuk memasukkan SVG di sisi server:

Pengoptimalan SVG

Adobe Illustrator tidak melakukan tindakan optimasi secara default pada gambar SVG yang dihasilkan. Ini menyediakan DOCTYPE dan catatan, dan semuanya hanya sampah. SVG secara default cukup ringan, tapi mengapa tidak membuatnya lebih kecil lagi? Peter Collingridge menyediakan alat daring untuk mengoptimalkan Pengoptimal SVG. Dengan menggunakan layanan ini Anda dapat mengunggah berkas lama dan dapatkan yang baru yang dioptimalkan.

Jika Anda ingin lebih keras - tidak masalah, berikut adalah alat untuk mengoptimalkan SVG menggunakan alat Node JS javascript sisi server https://github.com/svg/svgo

gaya SVG

Lihat bagaimana SVG mirip dengan HTML? Itu karena mereka berdua data XML. Dalam desain kami ada dua elemen yang menjadi dasar, yaitu elips dan jalur. Kita dapat dengan mudah menentukan kelas untuk mereka melalui kode HTML.

Sekarang kita dapat mengontrol elemen-elemen ini menggunakan SVG CSS khusus. CSS ini tidak harus langsung ditanamkan ke dalam SVG, ia dapat ditempatkan dimana saja. Harap dicatat bahwa elemen SVG memiliki serangkaian gaya khusus yang dibuat khusus untuk bekerja dengan grafik vektor. Misalnya yang digunakan bukan warna background biasa, melainkan fill. Meskipun beberapa gaya biasa juga berfungsi, misalnya: arahkan kursor.

Kiwi ( isi: #94d31b; ) .kiwi:hover ( isi: #ace63c; )

SVG memiliki filter yang menyenangkan. Misalnya kabur:

Anda kemudian dapat menerapkan ini di css jika diperlukan:

Tanah: arahkan kursor ( filter: url(#pictureFilter); )

Inilah yang terjadi:

Lihat Pena ini!

Dukungan untuk SVG “sebaris” di browser

Daftar browser yang mendukung modus ini Tampilan SVG dapat dilihat di sini http://caniuse.com/#feat=svg-html5. Sekali lagi, tidak ada dukungan di IE8 dan Android 2.3.

Salah satu opsi mundur untuk ini Tipe SVG:

Lalu kita gunakan Modernizr lagi:

Logo-fallback ( display: none; /* Pastikan ukurannya sama dengan yang digunakan SVG */ ) .no-svg .logo-fallback ( background-image: url(logo.png); )

Menggunakan SVG sebagai objek

Jika Anda tidak suka menggunakan SVG “inline” (perlu diingat bahwa ada kelemahan pada opsi ini, seperti kurangnya caching), Anda dapat mengikat SVG ke suatu objek dan kemudian mengubahnya menggunakan css:

Untuk dukungan lintas browser kami menggunakan Modernizr:

Tanpa-svg .logo ( lebar: 200 piksel; tinggi: 164 piksel; gambar latar: url(kiwi.png); )

Opsi ini berfungsi baik dengan caching dan memiliki dukungan browser terbanyak dari semua opsi di atas. Tapi untuk bertindak bersama menggunakan CSS untuk objek seperti itu, Anda harus menulis gaya langsung ke file SVG.

Penggunaan URI Data adalah cara untuk mengurangi bobot SVG. Mobilefish.com menyediakan alat optimasi online untuk tujuan ini. Cukup pastekan isi file SVG Anda dan isi formnya, lalu hasilnya akan ditampilkan pada kolom teks yang bisa disalin. Ini terlihat seperti ini:

​

Anda dapat menggunakan kode ini di mana saja! Misalnya:

Logo ( latar belakang: url(data:gambar/svg+xml;base64,); )

Dan omong-omong, jika Anda memiliki gaya sebaris di SVG sebelum base64, itu akan berfungsi jika Anda menggunakannya sebagai objek!

Dukungan Scalable Vector Graphics (SVG) berfungsi dengan baik di semua aspek browser modern, format gambar muncul dalam konteks yang mengejutkan di banyak halaman web berbeda. Namun meski sudah menjadi standar selama hampir dua dekade, SVG tetap menjadi format yang agak baru bagi beberapa desainer dan pengembang, membuat mereka bingung tentang cara menggunakannya di situs web. Berikut beberapa alasan mengapa Anda harus menggunakan SVG:

Ukuran file kecil

Dirancang dengan baik, SVG pada umumnya jauh lebih kecil dibandingkan PNG yang setara, yang berarti halaman yang menggunakannya dimuat lebih cepat bagi pengguna.

Skalabilitas

Karena SVG dibangun dari rumus matematika, bukan piksel tetap grafis raster Gambar SVG dapat diperbesar dan diperkecil tanpa kehilangan kualitas, menjadikannya ideal untuk situs web modern dan responsif.

Berinteraksi dengan DOM

SVG terkadang disebut sebagai "gambar markup": setiap elemen dalam gambar SVG berinteraksi dengan DOM, artinya CSS dan JavaScript dapat memanipulasi bagian dokumen SVG. Tidak seperti grafik raster, setiap bentuk individual di SVG dapat memiliki ID atau kelasnya sendiri.

Mudah untuk dimodifikasi dan diadaptasi

Kualitas komponen SVG berarti dokumen SVG yang dibuat dengan baik dapat dengan mudah dimodifikasi di editor teks apa pun tanpa memerlukannya program khusus, diperlukan untuk gambar raster. Dan karena SVG berinteraksi dengan DOM, elemennya dapat dimodifikasi menggunakan CSS. Format SVG sempurna untuk menampilkan:

logo

• ilustrasi dan gambar

Alat untuk bekerja dengan SVG

Meskipun Anda dapat membuat dokumen SVG menggunakan editor teks apa pun, program ilustrasi vektor seperti Adobe Illustrator atau Inkscape biasanya pilihan terbaik(walaupun perlu diperhatikan bahwa aplikasi lain, termasuk program 3D seperti Blender dan aplikasi server, dapat mengekspor SVG).

Apa pun yang Anda gunakan, Anda harus menyadari bahwa membuat SVG dari aplikasi terkadang masih menyisakan banyak hal yang tidak diinginkan: dokumen yang dihasilkan sering kali diberi kode berlebihan dan terkadang diformat dengan buruk. File .svg dapat dibuat lebih kecil, lebih ringkas, dengan memprosesnya menggunakan pengoptimal seperti SVGOMG. Terkadang meneruskan document.svg yang salah melalui validator W3C dapat membantu Anda mengidentifikasi masalah.

Integrasi SVG

Ada tiga cara utama SVG dapat digunakan langsung di halaman web:

Karena SVG didasarkan pada XML, maka dapat langsung diintegrasikan ke dalam kode di halaman Anda. Kode SVG mengurangi latensi dan waktu pemuatan keseluruhan halaman Anda.


Menyukai gambar raster, berkas SVG Anda dapat merujuk ke tag atau melalui CSS sebagai gambar latar belakang. Hal ini sering terjadi cara terbaik kecuali SVG memerlukan perhatian CSS dan JavaScript individual.


Dimasukkan sebagai