20 Alat SVG berguna untuk Grafik yang Lebih Baik
SVG semakin popular dalam reka bentuk web pada hari ini dan anda boleh menggunakan alat seperti Illustrator atau Inkscape untuk membuat grafik SVG. Tetapi apabila ia datang kepada reka bentuk web, kita harus selalu mengoptimumkan untuk hasil yang lebih ringan.
Di sini 20 alat yang boleh anda gunakan untuk bekerja dengan SVG dengan cepat dan cekap. Kami mempunyai kebanyakan alat dalam talian, yang boleh membantu dalam pengoptimuman, penukaran, membuat corak, dan banyak lagi.
Sistem Penyelaras SVG Interaktif
Apabila anda bekerja dengan SVG, anda tidak boleh meninggalkan koordinatnya. Ini adalah alat interaktif yang hebat oleh Sara Souiden, untuk membantu anda belajar bagaimana koordinat SVG berfungsi. Menggunakan viewbox dan memeliharaAspectRatio pada SVG, dipandu garis oren dan ungu dan seorang penguasa yang berguna, anda boleh bermain sambil belajar bagaimana fungsi koordinat SVG.
b64
b64 adalah alat yang mudah untuk mengoptimumkan imej kemudian menjadikannya dalam format base64. Anda boleh menggugurkan imej SVG anda (format lain seperti kerja JPG dan PNG juga) kemudian ambil CSS dengan background-image base64 sebagai hasilnya.
SVGO
SVG yang dieksport mungkin mengandungi maklumat yang tidak perlu yang boleh dikeluarkan tanpa menjejaskan hasil rendering. Jika anda mahu keluarkan metadata editor, komen atau elemen tersembunyi, anda boleh menggunakan SVGO.
Anda boleh intall SVGO melalui npm, $ [sudo] npm install -g svgo atau gunakan versi GUI yang menawarkan seret dan lepaskan untuk mengoptimumkan pengoptimuman SVG anda.
SVG OMG
SVG OMG bertukar baris perintah SVGO (alat sebelumnya) menjadi a Versi GUI yang lebih intuitif dan mudah digunakan. Hanya toggle the buttons untuk mengaktifkan atau menyahaktifkan setiap ciri. Pada akhirnya, anda boleh meraih hasilnya sebagai fail imej dan kod.
SVG Sekarang
Apabila anda bekerja pada Illustrator, SVG yang dieksport mengandungi beberapa maklumat yang tidak perlu. Dengan alat ini, anda akan dapatkan versi optimum SVG yang dieksport anda betul dari ruang kerja Illustrator anda. Alat ini menambah panel dengan beberapa pilihan untuk mengoptimumkan SVG. Anda boleh mendapatkan SVG Now dari halaman Pengaya Cloud Creative.
SVG ke penukar PNG
Ingin mengeksport fail SVG ke borang PNG? Tanpa membuka aplikasi seperti Illustrator untuk berbuat demikian? Gunakan alat SVG ini ke alat Penukar PNG untuk mendapatkan output imej dalam format PNG dan juga data UG PN64 Base64 jika anda memerlukannya.
Sarkas SVG
Jika anda fikir animasi loader sejuk, kini anda boleh membuatnya dengan mudah dengan menggunakan SVG dengan Sarkas SVG. Alat ini membolehkan anda untuk buat pemuat sendiri, pemutar, atau apa-apa yang serupa menggunakan animasi bergelung. Tetapkan 'Pelakon', kedudukan, saiz, warna dan lain-lain dari panel, kemudian eksport untuk mendapatkan keputusan.
SVG Sprite
SVG Sprite adalah modul Node.js, yang mengoptimumkan sekumpulan fail SVG, dan membakar mereka ke dalam jenis sprite SVG termasuk sprite CSS tradisional untuk latar belakang dan / atau imej latar depan, susunan SVG dan banyak lagi.
Quasi
Dengan quasi anda boleh menjana imej Quasicrystal seperti yang anda lihat di bawah. Penjana ini eksperimen, tetapi hasilnya pasti sejuk. Anda boleh bermain-main dengan mengubah nilai pilihan, kemudian muat turun hasilnya dengan butang 'Simpan SVG'.
Corak Plain
Mewujudkan corak dengan SVG tidak pernah lebih mudah atau lebih menyeronokkan. Muat naik imej anda, skala bawah atau ubah jarak, putar dan catatkan sehingga anda mendapat corak cantik. Anda boleh pratonton keputusan sebelum memuat turunnya.
Trianglify Generator
Buat corak geometri SVG yang cantik dengan Trianglify Generator. Anda boleh menetapkan warna rawak / varian, saiz butiran, dan pilih palet warna untuk berfungsi dengan. Alat ini adalah versi GUI dari Trianglify.
Kecerunan SVG
Anda tahu anda boleh membuat kecerunan dengan CSS tetapi adakah anda tahu bahawa anda boleh melakukan perkara yang sama dengan SVG? Cara paling mudah untuk menjana kecerunan pada SVG adalah dengan menggunakan alat ini. Hanya masukkan permulaan dan hentikan warna maka anda akan mendapat kod untuk hasil yang dihasilkan. Ralat pada CSS juga termasuk.
JPA Eksport ke SVG
Jika anda menggunakan Photoshop sebagai editor imej untuk kerja anda, kadang-kadang anda mungkin perlu menukar reka bentuk anda di ruang kerja Photoshop ke SVG, yang merupakan format yang tidak disokong dalam Photoshop. Muat turun Skrip ke alat ini, kemudian salin ke Adobe Photoshop / pratetap / skrip folder.
Namakan nama lapisan vektor dengan ekstensi SVG (cth. Layer1 menjadi layer1.svg), dan anda sekarang boleh menjalankan skrip dari Fail> Skrip> PS ke SVG.
Penapis SVG
Adakah anda tahu bahawa dengan SVG anda dapat menambah kesan seperti dengan warna, ketepuan, kabur, overlay warna linear, dan banyak lagi kepada imej? Berikut adalah alat yang menggambarkan kesan ini, kemudian memberi anda coretan untuk memudahkannya membenamkan kesannya ke dalam projek anda.
SVG Morpheous
SVG Morpheous adalah perpustakaan JavaScript yang membolehkan anda morph ikon SVG dari satu bentuk ke bentuk yang lain. Anda boleh menetapkan kesan pelonggaran, tempoh peralihan animasi, dan juga arah putaran.
Penjana jalur klip
SVG membolehkan anda mengklik klip imej dengan Bentuk. Ini agak mudah jika bentuk itu berupa persegi atau bulatan. Tapi apa jika bentuknya adalah satu dengan banyak mata atau bentuk poligonal? Di situlah anda memerlukan alat Penjana Path Clip ini.
Chartist.js
Chartist.js adalah perpustakaan untuk membuat carta responsif yang sangat disesuaikan. Ia menggunakan SVG untuk memaparkan carta, yang juga boleh dinyanyikan menggunakan SMIL. Dengan perpustakaan ini, anda dapat membuat carta garisan, carta pai, carta bar dan lain-lain carta, dan juga menambah animasi kepada mereka.
Penjana stroke SVG
Ini adalah alat yang mudah untuk menjana garis putus-putus menggunakan SVG stroke-dasharray. Mula-mula memilih satu jenis dash dari senarai, kemudian menyesuaikannya dari segi lebar, ketinggian, putaran atau warna. Selepas itu, anda boleh merebut kod HTML dan CSS untuk menggunakan baris dash ini dalam projek anda.
Kaedah Draw: SVG Editor Mudah
Kaedah Draw adalah editor SVG berasaskan web, dengan antara muka intuitif yang dilengkapi dengan alat pada kedua-dua belah kanvas. Anda boleh menggambar garis, bentuk, teks input atau menggunakan bentuk terbina dalam, kemudian edit sifat objek yang ditarik. Eksport imej dalam format SVG (juga masuk dalam format base64 SVG) atau simpan terus dalam PNG.
Eksport Flash ke SVG animasi
Walaupun ia tidak begitu popular lagi, ada kemungkinan bahawa sesetengah daripada anda mempunyai masa yang sukar untuk melepaskan Flash. Jika ya, anda boleh giliran animasi flash anda ke SVG untuk memastikan ia berfungsi dengan baik dengan teknologi yang lebih baru. Alat ini membentuk sambungan kepada aplikasi Flash, dan boleh berfungsi pada CS5, CS6 dan CC.
Anda boleh mengeksport ke SVG ketika datang ke Bentuk, Simbol Bitmaps, Tweens Motion Klasik, Tweens Bentuk (untuk yang lain, ada kejayaan yang dapat dipercayai).
