Ubah atribut viewbox di svg yang diekspor oleh ilustrator

Saya memiliki file SVG dengan viewBox = "- 155.7 -99 510 510". Saya percaya ini mengimbangi jalur di pratinjau Mac OS X dengan -155,7 -99. ketika saya membuka SVG di Illustrator, path tidak diimbangi sama sekali. bagaimana cara mengekspor svg ini sedemikian rupa sehingga:

1. viewBox = "0 0 510 510"
2. dan semua jalur telah ditambahkan set -155,7 -99

Saya telah mencoba mengubah posisi artboard tetapi asal-usul viewbox tidak pernah 0,0.

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) atau alignjendela yang diatur ke Align to Artboardjika 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.

Saya tahu ini sangat terlambat untuk topik ini, tetapi saya memiliki masalah yang sama dan melakukan hal berikut.

1. Buka SVG dalam editor teks dan ubah atribut viewBox menjadi 0 0 xy
2. Simpan dan buka kembali di Illustrator
3. Karya seni sekarang akan diposisikan di luar artboard - pindahkan kembali ke 0 0
4. Simpan dan pratinjau, semuanya harus berfungsi dengan baik.

Semoga ini bisa membantu orang lain.

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.

• buka SVG di Inkscape
• mengubah ukuran kanvas di bawah File -> Document Properties
• mengubah ukuran & memindahkan karya seni Anda dengan memilihnya dan memasukkan w, h di suntingan bilah alat

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.

Saya sudah menemukan ini. Akhirnya! Ada cara sederhana untuk melakukan ini. Seperti itu:

<svg id="xbox" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60.7"><title>xbox</title><rect width="200" height="60.68" style="fill:none"/><path d="M195.2,49.2l-11.8-16-11.5,16h-4.8L181.2,30,168.4,12.8h4.8l10.2,14,10.5-14h4.8L185.9,30,200,49.2Zm-90.7,0L90.4,30l12.8-17.2H98.4l-10.5,14-10.3-14H72.8L85.6,30l-14,19.2h4.8l11.5-16,11.8,16Z" style="fill:#0f7c10"/><path d="M131,31.3l-2.2-1.6a8.2,8.2,0,0,0,4.4-7c0-2.6-.9-9.9-12.1-9.9H106.4V28.4h-4.8l-2.9,3.5h7.7V49.2h14.7c8.3,0,13.1-4.2,13.1-10.9a8.6,8.6,0,0,0-3.2-7m-20.5-15h10.6c3.2,0,8,1,8,6.1s-2.9,6-8,6H110.5Zm10.6,29.1H110.5V31.9h10.6c4.1,0,8.9,1.3,8.9,6.4s-5.4,7.1-8.9,7.1m32.3-33.6c-10.3,0-17.3,7.7-17.3,19.2s7,18.8,17.3,18.8,17.5-7.6,17.5-18.8-7.3-19.2-17.5-19.2m0,34.2c-7.7,0-13.1-6.1-13.1-15s5.4-15.3,13.1-15.3S166.8,22,166.8,31s-5.5,15-13.4,15M8.9,8.6h0A31,31,0,0,0,0,30.4,32.5,32.5,0,0,0,6.1,48.9h.3C4.2,41.5,16,24.3,22,16.9h0C11.8,6.4,8.9,8.9,8.9,8.6m42.9,0h0a31,31,0,0,1,8.9,21.8,32.5,32.5,0,0,1-6.1,18.5h-.3c2.2-7-9.6-24.3-15.6-31.6h0C48.9,7,51.8,9.6,51.8,9.3M30.4,0A29.9,29.9,0,0,1,46.3,4.5h0c0,.3,0,.3-.3.3C40.3,3.5,31.3,8.3,30.4,8.9h0C28.1,7.7,19.8,3.2,14.7,4.8a.3.3,0,0,1-.3-.3h0A30,30,0,0,1,30.4,0m0,24.3h0c9.2,7,24.9,24.3,20.1,29.1h0a31.5,31.5,0,0,1-40.3,0h0C5.8,48.6,21.1,31.3,30.4,24.3h0" style="fill:#0f7c10"/></svg>

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 100pxdan saya perlu mendasarkan gaya CSS untuk gambar-gambar ini berdasarkan lebar dan tinggi. Dalam CSS saya menggunakan vwunit, atau hanya tua 100%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 100pxdan 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 rectdan mengatur lebar dan tinggi, dan kemudian Anda dapat mengatur viewBoxke 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.

Saya dapat memperbaikinya dengan menggunakan Inkscape . Sepertinya Illustrator memiliki dukungan yang buruk untuk file SVG.

1. Buka file svg di Inkscape CTRL + O
2. Kemudian buat file baru CTRL + N
3. CTRL + SHIFT + D Properti Dokumen dan sesuaikan ukuran artboard.
4. Pilih dan salin svg di file yang baru dibuat.
5. Sekarang sesuaikan aset dengan mengubah nilai posisi dan ukuran. Seperti pengaturan posisi sebagai Asal dan lebar dan tinggi sebagai ukuran dokumen.
6. Simpan File baru.