Softonic

Ubah Ukuran SVG

Langkah 1 / 2
Berikutnya

SVG adalah format vektor, jadi tidak bergantung pada resolusi dan tetap tajam pada ukuran berapa pun. “Mengubah ukuran” sebuah SVG tidak me-raster-kannya dan tidak mengubah gambarnya: alat ini hanya menetapkan width dan height baru dalam piksel pada elemen akar <svg>, yaitu ukuran tampilannya yang dideklarasikan. viewBox, jalur (path), dan setiap koordinat dibiarkan persis seperti adanya, sehingga gambar mempertahankan proporsinya dan tidak kehilangan kualitas. Tempel markup Anda, tetapkan lebar dan tinggi, pratinjau hasilnya, lalu salin atau unduh.

Cara mengubah ukuran SVG

  1. 1

    Tempel SVG

    Tempel markup `<svg>...</svg>` lengkap ke dalam kotak teks.

  2. 2

    Tetapkan lebar dan tinggi

    Masukkan lebar dan tinggi baru dalam piksel.

  3. 3

    Pratinjau langsung

    Alat ini menulis ulang `width` dan `height` pada `<svg>` akar (atau menambahkannya bila tidak ada) dan menampilkan hasilnya seketika.

  4. 4

    Salin atau unduh

    Salin markup yang diperbarui ke papan klip atau simpan sebagai berkas `.svg`.

Ukuran tampilan versus viewBox

Sebuah SVG memiliki ukuran tampilan (width/height) dan sistem koordinatnya sendiri (viewBox).

<svg width="200" height="200" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" />
</svg>

SVG ini berukuran 200 x 200 piksel di layar, sementara koordinat internalnya berjalan dari 0 hingga 100. Lingkaran dengan r="40" mengisi sekitar 80% viewBox, jadi ia dirender selebar kira-kira 160 px. Alat ini hanya mengubah width dan height, yaitu ukuran tampilan yang dideklarasikan. Ia tidak menyentuh viewBox maupun koordinat, dan justru itulah sebabnya gambar mempertahankan proporsinya dan tetap tajam: Anda menyuruh peramban menggambar gambar yang sama pada ukuran berbeda, bukan menggambar ulang.

Mengapa sebuah SVG bisa terlihat sama setelah Anda mengubah ukurannya

Jika SVG dipasang dengan sesuatu seperti <img src="ikon.svg" width="500"> atau diberi ukuran lewat CSS, halaman di sekitarnya yang mengendalikan ukuran tampilan dan menimpa width/height di dalam berkas. Dalam kasus itu, ubah ukuran di tempat SVG digunakan (pada <img>, di CSS, atau di kontainer), bukan hanya di dalam markup.

Garis dan teks tetap tajam

Karena tidak ada yang di-raster-kan, teks tetap berupa teks vektor sungguhan dan garis tetap mulus pada ukuran berapa pun. Ketebalan garis didefinisikan dalam sistem koordinat, jadi menskala bersama gambar. Jika Anda ingin sebuah garis mempertahankan ketebalan visual yang sama tanpa peduli ukurannya, tambahkan vector-effect="non-scaling-stroke" pada elemen itu di sumber Anda sebelum mengubah ukuran.

Jaga markup tetap bersih

SVG yang diekspor dari Figma, Illustrator, atau Sketch sering membawa muatan tambahan: ruang nama editor (sodipodi:, inkscape:), metadata tersembunyi, dan <defs> yang tak terpakai. Alat ini membiarkan markup Anda apa adanya kecuali ukurannya. Untuk membuang muatan itu, lewatkan berkas melalui pengoptimal seperti SVGO sebelum atau sesudah mengubah ukuran.

Pertanyaan yang Sering Diajukan

Tidak. Ini hanya menetapkan width dan height pada <svg> akar. viewBox, jalur, dan setiap koordinat dibiarkan tak tersentuh, sehingga ilustrasi mempertahankan proporsi persisnya.

Biasanya halaman yang mengendalikan ukuran: sebuah lebar pada <img>, aturan CSS, atau kontainer sedang menimpa dimensi milik berkas itu sendiri. Ubah ukuran di tempat SVG digunakan, bukan hanya di dalam markup.

Ya. SVG adalah format vektor, jadi tidak ada yang di-raster-kan dan teks maupun garis tetap tajam pada ukuran berapa pun. Jika berkas sumber sudah mengubah teks menjadi jalur, ia menskala seperti bentuk lain mana pun, dan tetap tajam.

Ya. Hanya width dan height yang diubah; <animate>, <script>, penangan peristiwa, dan CSS di dalam SVG dibiarkan tak tersentuh.

Markup dikirim ke server kami untuk merender pratinjau yang telah diubah ukurannya dan tidak disimpan setelah permintaan selesai. Ia tidak disimpan atau dibagikan.

Alat Terkait

Pemilih Warna Material Design

Jelajahi palet warna Material Design. Salin nuansa mana pun (dari 50 hingga A700) dalam format HEX, RGB, atau HSL dengan sekali sentuh.

Pembuat Undangan

Buat undangan pernikahan, ulang tahun, akikah, atau acara kantor. Sesuaikan tulisan dan warna, lihat pratinjau langsung, lalu unduh PNG siap cetak ukuran 5R.

Generator Kertas Bergaris

Buat kertas bergaris siap cetak secara gratis. Pilih garis college, lebar, atau sempit, atur jarak antargaris dalam mm, ukuran kertas, dan garis margin, lalu cetak atau unduh SVG.

Inversi Warna Gambar

Balikkan setiap saluran RGB dalam sebuah gambar untuk menghasilkan gambar negatif, berguna untuk pengeditan kreatif dan melihat hasil pemindaian film.

Konverter ARW ke JPG

Konversi foto RAW Sony ARW ke JPG. Dapatkan JPEG yang mudah dibagikan dan kompatibel secara universal dari file RAW kamera Anda tanpa membuka Lightroom.

Pembuat Bendera

Rancang bendera 3:2 kustom sederhana di browser dengan enam tata letak, warna, teks, dan simbol. Unduh SVG atau PNG, atau buka dialog cetak browser.

Alat ini tersedia dalam bahasa lain