Saat membuat situs web, perancang web harus mempertimbangkan empat poin utama memikirkan tata letak dan desain visual web, teks, gambar, warna, dan font para karyawan.
Dari keempat poin ini, salah satu yang akan kami berikan paling penting dalam posting ini adalah gambar, karena kami akan berbicara tentang cara membuat file svg karena sangat penting untuk mempertimbangkan kualitas gambar yang Anda gunakan.
Perawatan dengan file SVG, telah meningkat oleh para profesional dan tidak begitu profesional dalam dunia desain.
Apa itu file SVG?
SVG adalah singkatan dalam bahasa Inggris untuk Scalabe Vector Graphics, dalam bahasa Spanyol, Scalable Vector Graphics. Ini tentang format terbuka dan bebas yang digunakan untuk membuat grafik 2D, dua dimensi.
Tidak seperti format gambar lainnya, seperti JPG atau PNG, SVG adalah format yang dapat diskalakan, tidak peduli seberapa besar Anda ingin memperbesar ukurannya, karena kualitas gambar akan tetap terjaga. Ini adalah salah satu format yang paling banyak digunakan di halaman web untuk menempatkan grafik atau gambar vektor.
Mengapa kita harus menggunakan SVG?
Dengan jenis format ini, gambar vektor akan mempertahankan kualitas tinggi, terlepas dari ukuran dan resolusinya. Sebaliknya, gambar yang terdiri dari bitmap, yang terdiri dari piksel, kehilangan kualitas jika ukurannya diubah. Format SVG ditentukan oleh ringan dan serbagunanya.
Hal lain yang mendukung penggunaan format ini adalah ukurannya yang kecil, yaitu berkat ini meningkatkan kecepatan memuat halaman di mana mereka berada. Gambar-gambar ini dibuat oleh browser, yang membantu mengurangi beban dan konsumsi di server.
Selain itu, mereka dapat buat gambar SVG animasi yang dapat digunakan untuk memberikan suasana kedekatan pada situs web kami dan menarik perhatian pemirsa yang mengunjunginya.
SVG adalah format terbuka, yaitu, mungkin mengalami peningkatan dan pembaruan. Selain itu, file SVG dapat diedit dengan program pengeditan vektor, misalnya Adobe Illustartor tanpa kehilangan kualitas tampilannya, dapat dilihat di perangkat apa pun. Ini juga memungkinkan kami untuk mencetaknya tanpa kehilangan kualitas.
Cara mudah membuat file SVG
Mungkin cara termudah untuk membuat file SVG, jika Anda sudah familiar dengan mereka, adalah melalui program desain grafis, seperti Illustrator, Corel Draw, antara lain.
Berfokus pada program Illustrator, ketika kita akan menggunakan format SVG, kita harus memperhitungkan apakah kita telah menggunakan gradien atau efek lain, seperti efek artistik, blur, kuas, piksel, dll. karena dirasterisasi saat disimpan dalam format file SVG. Disarankan untuk menggunakan efek filter SVG, untuk menambahkan efek agar tidak dapat diraster nanti.
Saran lain yang kami berikan kepada Anda adalah menggunakan simbol dan jalur sederhana dalam ilustrasi untuk kinerja yang lebih baik dari format tersebut. Hindari menggunakan kuas dengan banyak penelusuran karena ini menghasilkan beban data yang lebih tinggi.
Untuk membuat file SVG dalam program ini, Hal pertama yang harus kita buka adalah kanvas kosong tempat kita akan mengerjakan ide kita.
Setelah pekerjaan kita selesai, apa yang akan kita lakukan adalah pergi ke toolbar yang ditampilkan di atas program, dan kita akan memilih opsi file, simpan sebagai, dan layar pop-up akan muncul di mana ia memberitahu kita untuk memberi nama file kita dan menunjukkan format di mana kita ingin menyimpannya. Di bagian terakhir inilah kita harus menandai opsi SVG.
Saat memilih jenis SVG, sebuah kotak dialog muncul yang menunjukkan kepada kita berbagai opsi yang harus diperhitungkan.
Sebagai aturan umum, di bidang pertama yang muncul di tabel, profil SVG 1.1 muncul. Berikut ini memberi kita pilihan untuk memilih sumber, di mana mereka memberi kita default ke teks yang ditandai di SVG dan subset sebagai tidak ada. Dalam kasus kami, karya ini tidak memiliki font, jika ada, opsi subset harus diubah dari tidak ada ke semua piktogram.
Bagian berikut ini sangat penting, jika kita menunjukkan opsi embed, gambar komposisi akan dimasukkan ke dalam file, yang akan menyebabkannya bertambah berat jika kita menggunakan banyak gambar bitmap. Sebaliknya, jika kita menandai opsi untuk menautkan, kita harus berhati-hati dengan gambar jika kita akan menggunakannya di situs web, karena kita harus menyertakan file gambar kita, dan juga, yang sangat penting, menjaganya. jalur. Keuntungan dari opsi ini adalah bahwa berat file akan jauh lebih sedikit.
Di bagian opsi lanjutan, kami menemukan opsi untuk Kode SVG, opsi ini akan menunjukkan bagaimana file tersebut di dalam, yaitu, kode di balik pekerjaan kita. Opsi ini penting jika Anda ingin menambahkan file SVG Anda, misalnya ke WordPress pribadi Anda, Anda hanya perlu menyalin kode dan menambahkannya langsung ke editor HTML WordPress Anda.
Saran terakhir yang kami berikan kepada Anda adalah saat menyimpan dalam format SVG, perlu diingat bahwa jika Anda bekerja dengan artboard yang berbeda, hanya artboard aktif yang akan disimpan.
Jika kita ingin melangkah lebih jauh dan menerapkan efek SVG pada ilustrasi kita, Illustrator menawarkan serangkaian efek. Untuk melakukan ini, kita harus memilih objek atau grup. Untuk menerapkan efek kita harus memilih jendela efek, filter SVG dan menerapkannya.
Saat menerapkan filter SVG, program desain menunjukkan kepada kita jendela di mana Daftar filter yang dapat diterapkan muncul, setelah kami memilih satu, Illustrator menunjukkan kepada kami tampilannya, tetapi dalam versi raster.
Seperti yang telah Anda lihat, Format SVG telah menjadi sebuah revolusi. Berkat potensi dan kualitasnya yang ditawarkannya, membuat halaman web yang menurut kami jauh lebih menarik tanpa mengorbankan kinerja, selama mereka menggunakan format tersebut dengan benar. SVG telah menjadi penyatuan sempurna antara dunia desain dan pengembangan web.