Pengaturan optimal untuk mengekspor SVG untuk web dari Illustrator?

Saya ingin menggunakan logo SVG untuk situs web - untuk membuatnya tampak hebat pada desain responsif untuk semua perangkat.

Tetapi karena ada masalah , saya ingin mendukung sebanyak mungkin perangkat dan browser. Kecepatan beban juga merupakan pertimbangan penting. Bagaimana pengaturan ekspor di Adobe Illustrator cocok dengan semua ini?

Di Illustrator, ada beberapa opsi untuk ekspor SVG. Pertama, profil SVG mana yang terbaik?

Saya menganggap SVG Tiny memiliki ukuran file yang lebih rendah? Apakah banyak perangkat mendukung SVG Tiny? Apa perbedaan paling penting? (Tanpa harus membaca monster W3 ini .)

Kedua, saya berasumsi bahwa opsi terbaik untuk lokasi gambar adalah "tautan"? (Lihat keterangan setelah tanda seru.)

Atau, bagaimana dukungan browser untuk opsi "sematkan"?

Terima kasih!

PS Akan ada opsi alpha-PNG fallback, tapi saya ingin SVG didukung sebaik mungkin. (Kalau dipikir-pikir, opsi mundur - seperti JPG - mungkin akan menjadi yang terbaik dalam hal ini karena alpha-PNG sendiri membutuhkan solusi untuk IE yang lebih lama.)

Pembaruan: Ada juga lebih banyak opsi yang dapat dikonfigurasi. Saya tidak bekerja dengan teks, jadi satu-satunya yang relevan yang saya lihat adalah tempat desimal. Untuk logo, sesuatu yang akan ditampilkan sebagai maksimum 200x200px (jadi 400x400px pada tampilan Retina), apakah "3" pengaturan terbaik? Atau "2" untuk memperkecil ukuran file?

Profil SVG

• SVG 1.0: semua browser desktop dan seluler modern mendukung SVG 1.1, jadi jangan pernah memilih opsi ini.
• SVG 1.1: Anda hampir selalu menginginkan ini.
• SVG Tiny / Basic: ini adalah bagian dari SVG yang ditujukan untuk perangkat seluler. Hanya sedikit perangkat yang mendukung SVG Tiny dan bukan spesifikasi lengkap, jadi gunakan SVG 1.1.

Catatan: SVG Tiny tidak mengurangi ukuran file, itu hanya sebagian dari SVG yang memadai untuk perangkat daya pemrosesan yang rendah. Ini akan membuang gradien, opacity, font dan filter yang tertanam. Erik Dahlström mengatakan: Semua pemirsa penuh SVG 1.1 harus dapat menampilkan semua konten SVG 1.1 Tiny / Basic (sesuai spesifikasi), dan mungkin semua konten SVG 1.2 Tiny yang dihasilkan Illustrator juga.

Catatan font : jika Anda tidak memiliki teks di gambar Anda pengaturan ini tidak masalah.

• Adobe CEF: jangan pernah gunakan opsi ini dari Anda yang ingin menampilkannya di browser. Ini cara Adobe menyematkan font dalam file SVG, sejauh yang saya tahu ini hanya didukung oleh plugin viewer Adobe SVG.

• SVG: ini menyematkan font sebagai SVG, yang tidak didukung oleh Firefox, tetapi merupakan pilihan yang baik jika Anda bermaksud mendukung hanya perangkat seluler (yang biasanya menjalankan webkit).

• Buat garis besar: Anda akan ingin melakukan ini sebagian besar waktu , kecuali jika Anda memiliki banyak teks. Jika Anda memiliki banyak teks, Anda ingin menanamkan font dengan WOFF tetapi Anda harus melakukannya dengan tangan.

Berlangganan :

• Tidak ada: ini akan meniadakan pengaturan sebelumnya dan tidak akan menanamkan font apa pun, jika Anda tidak peduli bahwa font tersebut kembali ke font lain di komputer pengguna pilih ini.

• Hanya mesin terbang yang digunakan: Anda akan menginginkan ini sebagian besar waktu jika Anda memilih untuk menanamkan font. Ini hanya menyematkan karakter yang digunakan sehingga tidak mengembang ukuran file Anda.

• [sisa dari subsetting]: ini cukup jelas, Anda dapat memilih untuk menyertakan seluruh font atau himpunan bagian dari itu. Ini hanya berguna jika SVG Anda dinamis dan teks mungkin berubah berdasarkan input pengguna.

Gambar : ini hanya masalah jika Anda termasuk gambar bitmap

• Sematkan: ini biasanya yang Anda inginkan , ini mengkode gambar sebagai data uri sehingga Anda hanya mengunggah satu file alih-alih file svg dengan gambar bitmap pendampingnya.

• Tautan: gunakan ini hanya jika Anda memiliki beberapa file svg yang merujuk satu file bitmap (jadi itu tidak diunduh setiap kali ia membuat file svg).

Perhatikan bahwa gambar bitmap yang ditautkan tidak akan ditampilkan jika SVG ditampilkan melalui <img>tag, karena imgtidak memungkinkan memuat sumber daya eksternal. Selanjutnya: webkit memiliki bug yang tidak menampilkan gambar bitmap dalam file svg bahkan jika Anda menanamkannya. Singkatnya: gunakan <svg>tag biasa jika Anda ingin menyematkan atau menautkan gambar bitmap, jangan gunakan <img>.

Pertahankan Kemampuan Pengeditan Illustrator

Saya lebih suka menyimpan file .ai sebagai gambar sumber saya, dan menganggap file SVG sebagai Export for webfitur. Dengan begitu Anda fokus mengurangi ukuran file dan memiliki salinan asli dari file vektor Anda dengan semua kemampuan pengeditan. Jadi jangan pilih ini.

Tempat desimal

Standarnya 3adalah pengaturan waras dan Anda sebagian besar bisa melupakannya.

Namun, jika Anda memiliki jalur yang sangat rumit dengan banyak titik menurunkan pengaturan ini ke 1 atau bahkan 0 akan mengurangi ukuran file secara substansial. Tetapi Anda harus berhati-hati karena segmen bezier sangat sensitif terhadap pengaturan ini dan mereka mungkin tampak sedikit terdistorsi. Jadi, jika Anda menurunkan pengaturan ini selalu pastikan itu terlihat dapat diterima di browser.

Pengkodean

Penjelasan di balik pengkodean karakter agak teknis, dan hanya menyangkut file svg dengan teks. Pengkodean yang paling Anda butuhkan adalah UTF-8 , jangan ubah ini kecuali Anda tahu apa yang Anda lakukan.

Optimalkan untuk Adobe SVG Viewer

Adobe SVG Viewer adalah plugin browser dari waktu ketika browser tidak mendukung SVG secara asli. Saya tidak tahu apa fungsinya, tetapi tidak relevan, jangan periksa ini .

Sertakan mengiris data

Ini menambahkan metadata mengasapi ke file SVG Anda, kecuali jika Anda berencana membuka file SVG Anda nanti di Illustrator dan menemukan slice Anda (jika Anda memilikinya), jangan periksa ini

Sertakan XMP

Lebih banyak metadata tentang file, Anda dapat membaca di XMP di sini . jangan periksa ini

Keluarkan lebih sedikit <tspan>elemen

Ini akan berwarna abu-abu jika Anda tidak memiliki teks. SVG tidak mendukung tabel kerning, jadi, urutan karakter tertentu akan tampak terlalu spasi, yaitu AVA. Illustrator bekerja dengan menambahkan tspanelemen dan sedikit mengubah posisi karakter. Ini menambahkan sedikit mengasapi file jangan periksa ini kecuali Anda lebih peduli tentang ukuran file daripada tampilan teks .

Gunakan <textpath>elemen untuk teks di jalur

Ini akan berwarna abu-abu jika Anda tidak memiliki teks di jalur. Peramban cenderung sangat bervariasi dalam hal menempatkan teks di jalur, jadi Illustrator mencoba membantu dengan menerapkan rotasi dan posisi pada karakter alih-alih menyerahkan pekerjaan ke peramban. jangan periksa ini kecuali Anda lebih memperhatikan ukuran file daripada tampilan teks .

Secara umum, saya akan merekomendasikan Anda untuk melihat SVG secara umum, Anda akan menemukan bahwa itu mirip sekali dengan HTML dan memungkinkan Anda untuk mengubah hal-hal yang tidak dapat dilakukan dalam Illustrator.