Nilai SVG dan viewBox

14

Saya hanya ingin tahu apakah ada yang tahu bagaimana viewBoxnilai (yaitu viewBox="a b c d") ditentukan.

Saya mencoba memahami fungsi SVG Inkscape, jadi apa yang saya lakukan adalah membuat dokumen di Inkscape yang 100pxx 100px, menggambar garis dari sisi kiri viewport (yaitu 0nilai horizontal) ke sisi kanan (yaitu 100nilai horizontal) .

Namun anehnya, ketika saya menyimpan dokumen ini sebagai file Plain SVG, dan kemudian membuka file dalam editor teks, viewBoxnilai-nilai yang ditetapkan viewBox="0 0 26.458333 26.458334"bukan, katakanlah viewBox="0 0 100 100",.

Adakah yang tahu bagaimana nilai-nilai ini ( 0 0 26.458333 26.458334) ditentukan, dan mengapa tampaknya tidak ada hubungan antara mereka dan dimensi viewport?

PS Saya tahu Anda bisa mengedit viewBoxproperti secara manual dalam opsi dokumen, tapi saya masih penasaran mengapa Inkscape menetapkannya ke nilai funky.

inkscape svg xml orang tua
sumber

Jawaban:

18

Inkscape menggunakan mm sebagai unit tampilan atau unit pengguna default untuk dokumen Anda. Unit pengguna digunakan untuk menyimpan nilai dalam file SVG.

<svg width="100" height="100" viewBox="0 0 26.458333 26.458333">

Tag ini menjelaskan ukuran gambar 100px x 100px. Atribut viewBox mendefinisikan yang 100px x 100pxsetara dengan 26.458333 x 26.458333 user units.

Faktor skala SVG adalah 1px / 0.2645 user-unit, yang dapat digunakan oleh renderer SVG untuk mengkonversi semua nilai yang disimpan dalam unit pengguna ke dimensi gambar dunia nyata .

Dalam hal ini Inkscape ingin menyimpan nilai-nilai di mm, jadi itu harus tahu bagaimana pxhubungannya mm. The Spesifikasi CSS menjelaskan bahwa unit panjang mutlak diperbaiki dalam hubungan satu sama lain:96px = 1in

Ini berarti 100px = 1.041666667in = 2.645833333cm = 26.45833333mm

Jadi dari situlah 26.45833333datangnya.

Jika Anda ingin Inkscape menyimpan semua nilai pxAnda, Anda dapat mengubah unit Tampilan default atau unit pengguna ke pxdalam properti dokumen (File> Properti Dokumen> Tab: Halaman> Umum> Unit Tampilan)

  1. Default, mm:

Properti dokumen mm

  1. Diubah: px:

Properti dokumen px

Mengekspor dokumen yang sama akan menghasilkan tag SVG berikut:

<svg width="100" height="100" viewBox="0 0 100 100">

Sekarang faktor skala SVG adalah 1px / 1 user-unit.

Jika Anda ingin tahu lebih banyak tentang subjek ini, ada penjelasan yang lebih rinci di Inkscape Wiki

Catatan:

  • Inkscape v0.92 menggunakan relasi 96px/in, Inkscape v0.91 dan sebelumnya menggunakan nilai90px/in
FWrnr
sumber
Wow. Sangat menarik. Jadi ada sajak dan alasan untuk itu. Terima kasih banyak telah berbagi pengetahuan Anda!
oldboy
Saya akan mengingat teknik pembersihan yang Anda gunakan. Saya biasanya meletakkan kotak merah di sekitar bagian penting dari screenshot, Anda adalah begitu jauh lebih baik.
aaaaaa