MoreOnlineTools
ESC

Aliran Kerja SVG

Lihat, optimumkan dan eksport fail SVG dalam 5 langkah

Aliran Kerja SVG

Bekerja dengan SVG melibatkan beberapa tugas berbeza: memeriksa kod mentah, mengeluarkan lebihan dari alat reka bentuk, mengeksport ke format raster, menyediakan imej pratonton dan membenam untuk web. Aliran kerja ini merangkumi semua itu mengikut urutan.

5 langkah ~20 min 5 alat
01

Periksa kod sumber SVG

Sebelum mengubah suai SVG, anda perlu memahami strukturnya — elemen apa yang ada, sama ada ia menggunakan ID atau kelas, dan metadata apa yang disertakan oleh alat eksport.

Pemapar Kod SVG
Tampalkan atau muat naik SVG anda untuk melihat sumber XML berformat dengan pratonton langsung secara berdampingan.
Buka Alat
02

Optimumkan dan kurangkan saiz fail

SVG yang dieksport dari Illustrator atau Figma mengandungi metadata yang tidak perlu, ulasan editor dan atribut berlebihan yang boleh menggandakan saiz fail.

Pengoptimum SVG
Muat naik SVG anda untuk membuang data yang tidak perlu secara automatik dan mendapatkan versi yang bersih dan diminimumkan.
Buka Alat
03

Eksport sebagai imej raster

Sesetengah konteks memerlukan PNG atau JPEG — klien e-mel, CMS tertentu dan platform media sosial tidak memaparkan SVG secara boleh dipercayai.

SVG ke Imej
Tukar SVG yang dioptimumkan kepada PNG atau JPEG pada resolusi pilihan anda untuk digunakan di mana imej raster diperlukan.
Buka Alat
04

Cantikkan untuk pembentangan atau dokumen

Tangkapan skrin biasa SVG pada latar belakang putih kelihatan tidak siap. Menambah latar belakang, padding dan bayang menjadikannya sedia untuk pembentangan.

Perindah Tangkapan Skrin
Muat naik imej yang dieksport, tambah latar belakang dan bingkai bergaya, kemudian muat turun versi yang telah diperbaiki.
Buka Alat
05

Enkod kepada Base64 untuk pembenaman sebaris

Membenamkan SVG sebagai URI data Base64 dalam CSS atau HTML menghapuskan permintaan HTTP, berguna untuk ikon kecil dalam konteks kritikal prestasi.

Imej ke Base64
Muat naik SVG atau PNG yang dieksport untuk mendapatkan rentetan URI data berkod Base64 yang sedia untuk dibenamkan.
Buka Alat

Tips Pro

  • Sentiasa periksa kod sumber SVG dahulu — alat pengoptimuman kadang-kadang boleh merosakkan SVG dengan struktur atau animasi yang luar biasa.
  • Eksport pada resolusi 2x atau 3x apabila menukar SVG kepada PNG untuk mengekalkannya tajam pada skrin ketumpatan tinggi.
  • Pengekodan Base64 meningkatkan saiz fail sebanyak kira-kira 33%, jadi hanya gunakannya untuk ikon kecil di mana menghapuskan permintaan HTTP berbaloi.

Soalan Lazim

Boleh berlaku. Semak output yang dioptimumkan dalam pemapar kod selepas pengoptimuman untuk mengesahkan atribut animasi dan hook JavaScript masih utuh.

Untuk penggunaan web, dua kali saiz paparan (contohnya 800px lebar untuk slot 400px) memberikan hasil yang tajam pada skrin retina.

Ya. Formatnya adalah: background-image: url("data:image/svg+xml;base64,..."). Alat Imej ke Base64 menjana rentetan URI data penuh.

Perbezaan pemaparan fon dan fon web yang hilang adalah punca yang paling biasa. Benamkan atau gariskan fon dalam SVG anda sebelum mengeksport untuk mengelakkan ini.

Keselamatan dan Privasi

Keselamatan data anda adalah keutamaan kami

Pemprosesan Tempatan

Semua pemprosesan berlaku dalam pelayar anda

Tiada Pemindahan Data

Data anda tidak dihantar ke pelayan kami

Tiada Penyimpanan Data

Tiada data disimpan atau dikongsi

Penyulitan SSL

Penyulitan SSL untuk sambungan selamat