Saya melakukan sedikit riset tentang SVG dan ternyata viewbox bukan elemen yang dapat diekspor melalui Illustrator. Elemen viewbox hanya kompatibel dengan program tertentu yang memilih untuk menggunakan elemen ini atau memanipulasinya. Sayangnya, Illustrator bukan salah satu dari mereka.
Jika Anda menyimpan SVG dari Illustrator tanpa "Preserve Illustrator Editing Capabilities" Anda dapat membalikkan prosesnya. Perubahan apa pun yang Anda buat dalam data file SVG akan tercermin di Illustrator tetapi melalui reposisi dan pengubahan ukuran baik Artboard dan Layers untuk membuat pseudo-viewbox.
Untuk saat ini yang dapat Anda lakukan adalah mendesain pekerjaan di Illustrator dan semua kode tambahan untuk offset dan pemosisian kotak tampilan dalam data file. Anda dapat membuat pseudo-viewbox hanya dengan mengubah posisi Lebar Artboards + Tinggi / X + Y dan kemudian mengubah objek Ukuran dan atribut Posisi juga. Tetapi tidak akan pernah ada atribut kotak pandang sejati kecuali mereka merilis pembaruan ke Illustrator dengan fitur kotak tampilan yang dapat diedit.
Beberapa bacaan tentang Format SVG di Illustrator: Adobe Illustrator Simpan dalam Format SVG
Saya telah mengalami masalah ini beberapa kali, dan satu-satunya hal yang pernah berhasil bagi saya untuk secara andal menyetel ulang kotak pandang SVG menjadi tepat 0, 0 ketika mengekspor dari Illustrator adalah membuat dokumen kosong baru dan menyalin dan menempelkan karya seni ke dalamnya .
Sudut kiri atas artboard default yang tidak tersentuh ini akan diekspor sebagai titik 0, 0 dari kotak tampilan. Gunakan panduan cerdas (
cmd-u
) ataualign
jendela yang diatur keAlign to Artboard
jika Anda membutuhkan karya seni Anda untuk memulai tepat 0, 0.Anda dapat dengan aman mengubah ukuran artboard dari sudut kanan bawah, tetapi hal-hal mulai beres jika Anda memindahkan sudut kiri atas. Memindahkan sudut kiri atas artboards atau mengimpor file SVG ke AI tampaknya menyebabkan semacam pemutusan internal yang aneh antara penguasa, artboards, dan semacam titik asal viewbox rahasia tak terlihat yang hanya diketahui oleh Illustrator.
AFAICT, seperti kebanyakan hal yang berkaitan dengan web atau teknologi yang sedang berkembang, pendekatan Adobe terhadap SVG adalah dengan melemparkan sesuatu secara kasar sehingga mereka dapat menyombongkannya dalam siaran pers, kemudian membiarkannya bermasalah, belum selesai dan tidak dicintai, pura-pura tidak ada dan terus berlanjut seperti itu tahun 1998.
sumber
viewbox
yang diubah saat mengekspor ke SVG. Anda sepenuhnya benar dalam membuat dokumen baru dan menyalin semua karya seni. Jawaban Anda harus ditandai sebagai +1 yang benar.Preserve Illustrator Editing Capabilities
pertama kali saya menyimpan kalau-kalau saya perlu melakukan lebih banyak penyesuaian dan kemudian setelah saya pikir semuanya cukup baik, saya menyimpannya tanpa itu (peningkatan ukuran file cukup signifikan sehingga Anda akan ingin melakukan ini)Saya tahu ini sangat terlambat untuk topik ini, tetapi saya memiliki masalah yang sama dan melakukan hal berikut.
Semoga ini bisa membantu orang lain.
sumber
width="<W>" height="<H>"
di editor teks favorit Anda ke tag SVG juga membantu (di mana<W>
dan<H>
akan menjadi angka desimal).Saya memiliki masalah yang sangat mirip bahwa AI saya membuat SVG tidak terpusat dan diperluas ke jendela browser penuh, karena AI terus mengubah ukuran artboard dan lupa tentang pemusatan.
Satu-satunya cara untuk memperbaikinya adalah memiliki langkah pemrosesan manual akhir di Inkscape.
Terakhir, Anda harus menyimpan SVG lagi, tetapi gunakan format "Dioptimalkan SVG" di dialog Simpan Sebagai. Akan ada dialog untuk opsi SVG dan Anda harus mengaktifkan "Enable viewboxing".
Karena semua SVG saya adalah ikon dengan ukuran yang sama, langkah pemrosesan ini hanya memakan waktu 1 menit karena saya selalu memiliki kanvas dan ukuran objek yang sama. Tapi ya, ini memalukan bahwa langkah ini diperlukan sama sekali dan harus diperbaiki dalam AI.
sumber
Saya sudah menemukan ini. Akhirnya! Ada cara sederhana untuk melakukan ini. Seperti itu:
Masalahnya adalah ketika Anda mengekspor gambar dari Illustrator (seperti banyak dilakukan) artboard tidak termasuk dalam SVG yang diekspor. Jalan tidak memiliki dasar untuk perhitungan mereka.
Dalam kasus saya, ketinggian maksimum untuk gambar saya adalah
100px
dan saya perlu mendasarkan gaya CSS untuk gambar-gambar ini berdasarkan lebar dan tinggi. Dalam CSS saya menggunakanvw
unit, atau hanya tua100%
jika SVG ingin mengisi ruang blok. Ini bersisik dengan baik. Dengan begitu Anda tidak perlu repot mengatur lebar dan tinggi dalam CSS untuk memastikan tampilannya dengan benar.Saya memeriksa setiap logo dan mengatur ketinggian ke
100px
dan membiarkan lebar otomatis dihitung berdasarkan aspek rasio. Saya kemudian memasukkan artboard ke logo untuk menghilangkan ruang yang tidak digunakan.Saya memilih persegi panjang dan membalikkan isian dan sapuan serta memastikan ukurannya sama persis dengan artboard. Tempatkan benda kosong ini di belakang. Sekarang ketika Anda mengekspor jalur akan memiliki basis untuk mengerjakan perhitungan.
Untuk melakukan ini dalam kode itu muncul Anda dapat membungkus jalan di
rect
dan mengatur lebar dan tinggi, dan kemudian Anda dapat mengaturviewBox
ke yang sama (menjaga rasio aspek yang sama). Seperti yang ditunjukkan pada contoh di atas. Saya belum benar-benar menguji ini tetapi saya akan menguji dan memperbarui.sumber
Saya dapat memperbaikinya dengan menggunakan Inkscape . Sepertinya Illustrator memiliki dukungan yang buruk untuk file SVG.
sumber