20 Alat SVG yang Berguna untuk Grafik yang Lebih Baik
SVG mendapatkan popularitas dalam desain web akhir-akhir ini dan Anda dapat menggunakan alat seperti Illustrator atau Inkscape untuk membuat grafik SVG. Tetapi ketika datang ke desain web, kita harus selalu mengoptimalkan untuk hasil yang lebih ringan.
Di sini 20 alat yang dapat Anda gunakan untuk bekerja dengan SVG dengan cepat dan efisien. Kami memiliki sebagian besar alat online, yang dapat membantu dalam optimasi, konversi, membuat pola, dan banyak lagi.
Sistem Koordinasi SVG Interaktif
Ketika Anda bekerja dengan SVG Anda tidak dapat meninggalkan koordinatnya. Ini adalah alat interaktif hebat oleh Sara Souiden, untuk membantu Anda pelajari cara kerja koordinat SVG. Menggunakan viewBox dan preserveAspectRatio pada SVG, dipandu oleh garis oranye dan ungu dan penggaris yang berguna, Anda dapat bermain sambil mempelajari bagaimana fungsi koordinat SVG.
b64
b64 adalah alat sederhana untuk mengoptimalkan gambar kemudian mengubahnya menjadi format base64. Anda dapat menjatuhkan gambar SVG Anda (format lain seperti JPG dan PNG juga) lalu ambil CSS dengan gambar latar base64 sebagai hasilnya.
SVGO
SVG yang diekspor mungkin mengandung informasi yang tidak perlu yang dapat dihapus tanpa mempengaruhi hasil rendering. Jika Anda menghendaki hapus metadata editor, komentar, atau elemen tersembunyi, Anda bisa menggunakan SVGO.
Anda dapat menginstal SVGO melalui npm, $ [sudo] npm install -g svgo atau gunakan versi GUI yang menawarkan seret dan lepas untuk memproses pengoptimalan SVG Anda.
SVG OMG
SVG OMG mengubah baris perintah SVGO (alat sebelumnya) menjadi a Versi GUI yang lebih intuitif dan mudah digunakan. Hanya beralih tombol untuk mengaktifkan atau menonaktifkan setiap fitur. Pada akhirnya Anda dapat mengambil hasilnya sebagai file gambar dan kode juga.
SVG Sekarang
Ketika Anda bekerja pada Illustrator, SVG yang diekspor berisi beberapa informasi yang tidak perlu. Dengan alat ini, Anda akan dapatkan versi optimal dari SVG yang diekspor langsung dari ruang kerja Illustrator Anda. Alat ini menambahkan panel dengan beberapa opsi untuk mengoptimalkan SVG. Anda bisa mendapatkan SVG Now dari halaman Creative Cloud Add-ons.
Konverter SVG ke PNG
Ingin ekspor file SVG ke formulir PNG? Tanpa membuka aplikasi seperti Illustrator untuk melakukannya? Gunakan alat Konverter SVG ke PNG ini untuk mendapatkan output gambar dalam format PNG dan juga URI data PNG Base64 jika Anda memerlukannya.
Sirkus SVG
Jika Anda menganggap animasi loader keren, sekarang Anda dapat membuatnya dengan mudah dengan memanfaatkan SVG Sirkus SVG. Alat memungkinkan Anda untuk melakukannya buat pemuat sendiri, pemintal, atau yang serupa menggunakan animasi lingkaran. Atur 'Aktor', posisi, ukuran, warna, dan lainnya dari panel, lalu ekspor untuk mendapatkan hasilnya.
SVG Sprite
SVG Sprite adalah modul Node.js, yang mengoptimalkan banyak file SVG, dan membuat mereka menjadi tipe sprite SVG termasuk sprite CSS tradisional untuk latar belakang dan / atau gambar latar depan, tumpukan SVG dan banyak lagi.
Sok
Dengan kuasi kamu bisa menghasilkan gambar Quasicrystal seperti apa yang kamu lihat di bawah ini. Generator ini eksperimental, tetapi hasilnya pasti keren. Anda dapat bermain-main dengan mengubah nilai opsi, lalu mengunduh hasilnya dengan tombol 'Simpan SVG'.
Pola polos
Membuat pola dengan SVG tidak pernah lebih mudah atau lebih menyenangkan. Unggah gambar Anda, turunkan atau ubah spasi, putar, dan warnai ulang hingga Anda mendapatkan pola yang indah. Anda dapat melihat pratinjau hasilnya sebelum mengunduhnya.
Generator Trianglify
Buat pola geometris SVG yang indah dengan Generator Trianglify. Anda dapat mengatur keacakan / varian warna, ukuran granularity, dan memilih palet warna untuk digunakan. Alat ini adalah versi GUI dari Trianglify.
Gradien SVG
Anda tahu Anda dapat membuat gradien dengan CSS tetapi apakah Anda tahu bahwa Anda dapat melakukan hal yang sama dengan SVG? Cara termudah untuk melakukannya menghasilkan gradien pada SVG adalah dengan menggunakan alat ini. Cukup masukkan mulai dan berhenti warna maka Anda akan mendapatkan kode untuk hasil yang dihasilkan. Fallback pada CSS juga disertakan.
Ekspor PSD ke SVG
Jika Anda menggunakan Photoshop sebagai editor gambar untuk pekerjaan Anda, kadang-kadang Anda mungkin perlu ubah desain Anda di ruang kerja Photoshop menjadi SVG, yang merupakan format yang tidak didukung di Photoshop. Unduh Script ke alat ini, lalu salin ke Adobe Photoshop / preset / skrip map.
Ganti nama nama layer vektor dengan ekstensi SVG (mis. Layer1 menjadi layer1.svg), dan kini Anda dapat menjalankan skrip dari File> Script> PS ke SVG.
Filter SVG
Tahukah Anda bahwa dengan SVG Anda dapat menambahkan efek seperti rona, saturasi, blur, overlay warna linier, dan banyak lainnya ke gambar? Ini alatnya memvisualisasikan efek ini, lalu memberi Anda cuplikan untuk membuatnya mudah embed efeknya ke dalam proyek Anda.
SVG Morpheous
SVG Morpheous adalah perpustakaan JavaScript yang memungkinkan Anda mengubah ikon SVG dari satu bentuk ke bentuk lainnya. Anda dapat mengatur efek pelonggaran, durasi animasi transisi, dan juga arah rotasi.
Generator jalur klip
SVG memungkinkan Anda mengklik klip gambar dengan Shape. Ini cukup mudah jika bentuknya berupa persegi atau lingkaran. Tapi apa jika bentuknya satu dengan banyak titik atau merupakan bentuk poligonal? Di situlah Anda memerlukan alat Generator Jalur Klip ini.
Chartist.js
Chartist.js adalah perpustakaan untuk buat bagan responsif yang sangat dapat disesuaikan. Ini menggunakan SVG untuk menampilkan grafik, yang juga dapat dianimasikan menggunakan SMIL. Dengan perpustakaan ini, Anda dapat membuat diagram garis, diagram lingkaran, diagram batang, dan jenis grafik lainnya, dan bahkan menambahkan animasi ke dalamnya.
SVG stroke dash generator
Ini adalah alat sederhana untuk menghasilkan garis putus-putus memanfaatkan SVG stroke-dasharray. Pertama-tama pilih satu jenis tanda hubung dari daftar, lalu sesuaikan dalam hal lebar, tinggi, rotasi atau warna. Setelah itu Anda dapat mengambil kode HTML dan CSS untuk menerapkan garis putus-putus ini di proyek Anda.
Metode Menggambar: Editor SVG Sederhana
Metode Draw adalah editor SVG berbasis web, dengan antarmuka intuitif yang dilengkapi dengan alat di kedua sisi kanvas. Anda bisa menggambar garis, bentuk, memasukkan teks atau menggunakan bentuk bawaan, lalu mengedit properti dari objek yang digambar. Ekspor gambar dalam format SVG (juga hadir dalam format SVG base64) atau simpan langsung dalam PNG.
Ekspor Flash ke SVG animasi
Meskipun tidak terlalu populer lagi, ada kemungkinan sebagian dari Anda kesulitan melepaskan Flash. Jika demikian, Anda bisa ubah animasi flash Anda menjadi SVG agar tetap kompatibel dengan teknologi yang lebih baru. Alat ini membentuk ekstensi untuk aplikasi Flash, dan dapat bekerja pada CS5, CS6 dan CC.
Anda dapat mengekspor ke SVG ketika datang ke Shapes, Bitmaps Symbols, Classic Motion Tweens, Shape tweens (untuk yang lain, ada keberhasilan yang bisa diperdebatkan).
