ubah ukuran SVG
☞ berjalan sepenuhnya di browser Anda — tidak ada yang diunggahLetakkan SVG Anda di sini
atau klik untuk memilih — hanya SVG
Pratinjau
ubah ukuran SVG
Beri SVG lebar dan tinggi yang baru — atau hapus keduanya sekalian agar ia menyesuaikan wadahnya. Gambarnya sendiri tidak pernah tersentuh.
atau klik untuk memilih — hanya SVG
Pratinjau
tidak ada yang digambar ulang
Gambar raster harus digambar ulang pada ukuran barunya, dan dalam prosesnya detail bisa hilang atau malah dikarang. SVG sebaliknya membawa instruksi menggambar, jadi mengubah ukuran hanyalah catatan tentang seberapa besar ia harus dirender. Setiap jalur, warna, dan gradien di dalam berkas tetap persis seperti semula.
Catatan itu adalah pasangan width dan height. viewBox di bawahnya mendefinisikan sistem koordinat internal dan dibiarkan apa adanya — dan itulah seluruh alasan kenapa bentuknya ikut membesar alih-alih terpotong.
tiga langkah
Pilih berkas .svg — berkasnya tetap di perangkat Anda.
Ketikkan lebar, pilih persentase, atau jadikan responsif.
Anda mendapat gambar yang sama pada ukuran yang Anda minta.
jawaban singkat
Tidak. Tidak ada yang bisa menjadi buram — berkasnya menjelaskan bentuk, bukan piksel, jadi ia digambar ulang pada ukuran berapa pun yang Anda berikan. Ini berlaku sama pada 25% maupun 400%.
Itu membuat SVG-nya responsif. Tanpa kedua atribut itu, browser bersandar pada viewBox untuk rasio aspeknya dan membiarkan elemennya memenuhi wadah, sehingga Anda bisa mengatur ukurannya dari CSS. Ini pilihan yang lazim untuk ikon di sebuah pustaka komponen.
Dalam kasus itu, viewBox ditambahkan untuk Anda. Tanpa viewBox, SVG memperlakukan koordinatnya sebagai piksel biasa, jadi mengubah lebarnya justru akan memotong gambar atau menambahkan ruang kosong alih-alih menskalakannya. viewBox yang ditambahkan sesuai dengan ukuran aslinya, jadi tidak ada yang bergeser.
Nyaris tidak — hanya dua angka yang berubah. Kalau Anda ingin berkas yang lebih kecil, lewatkan ke pengoptimal SVG, yang membuang metadata editor dan koordinat dengan desimal berlebih.
Tidak. Berkasnya diurai dan ditulis ulang di browser Anda.