LocalToolsKumpulan alat browser offline

Kategori: Alat pengembang

Editor viewBox SVG

Ide kami sendiriAlatnya tidak ada?

Baca dan tulis ulang viewBox sebuah SVG secara manual

Tempel markup SVG, muat viewBox-nya saat ini (atau lebar dan tingginya jika tidak ada), lalu sesuaikan min-x, min-y, lebar, dan tinggi untuk memotong, memberi ruang, atau memindahkan titik acuan gambar, kemudian salin SVG yang sudah ditulis ulang.

Pratinjau SVG
Keluaran
<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <rect width="120" height="120" rx="16" fill="#0f766e" />
  <circle cx="60" cy="60" r="34" fill="#f4d35e" />
</svg>

Tidak ada yang diunggah. Markup-nya diurai dan ditulis ulang hanya di halaman ini.

Semua yang ada di halaman ini diproses di peramban Anda. Tidak ada yang diunggah.

Apa fungsi alat ini

Atribut viewBox adalah yang memetakan sistem koordinat internal sebuah SVG ke ruang tempatnya dirender, jadi mengubahnya adalah cara memotong sebagian ikon, menambah ruang di sekelilingnya, atau menggeser titik asalnya tanpa menyentuh satu path pun. Mengedit empat angka secara manual di editor teks itu merepotkan dan mudah salah; alat ini mengurai SVG yang Anda tempel, mengisi otomatis keempat kolom viewBox dari yang ditemukannya, dan menulis ulang markup secara langsung saat Anda mengubahnya, lengkap dengan pratinjau agar Anda bisa melihat hasil pemotongannya sebelum menyalin.

Cara memakainya

  1. Tempel markup SVG yang berisi tag <svg>.
  2. Klik "Muat viewBox saat ini" untuk mengisi otomatis keempat kolom, atau ketik sendiri min-x, min-y, lebar, dan tinggi.
  3. Periksa pratinjaunya, lalu salin markup SVG yang sudah ditulis ulang.

Privasi

Alat ini berjalan sepenuhnya di peramban Anda. Masukan Anda tidak pernah diunggah, disimpan, atau dibagikan — menutup tab akan menghapusnya.

Pertanyaan yang sering diajukan

Apakah SVG saya diunggah ke suatu tempat?
Tidak. Markup-nya diurai dan ditulis ulang dengan pencocokan string sederhana di tab peramban Anda; tidak ada yang dikirim ke server.
Apa yang terjadi pada atribut width dan height?
Keduanya dibiarkan persis apa adanya. Mengubah viewBox mengubah skala apa yang digambar di dalam viewport yang sudah ada, sama seperti cara peramban menerapkannya, bukan mengubah ukuran elemennya sendiri.
Kenapa pratinjaunya kadang tampak kosong?
Lebar atau tinggi nol, atau viewBox yang tidak tumpang tindih dengan gambarnya, memotongnya sampai tidak tersisa apa pun. Perlebar kotaknya atau periksa nilai min-x/min-y.

Kembali ke semua alat