Mengubah ukuran SVG dalam html?

157

Jadi, saya memiliki file SVG dalam HTML, dan salah satu hal yang saya dengar tentang format adalah tidak mendapatkan semua pixelated ketika Anda memperbesarnya.

Saya tahu dengan jpeg atau apa pun yang saya dapat menyimpannya sebagai ikon 50 per 50, kemudian benar-benar menampilkannya sebagai (agak pixelated) 100 oleh 100 thumbnail (atau 10 dengan 10), dengan secara manual mengatur tinggi dan lebar di image_src menandai.

Namun, file SVG tampaknya digunakan dengan objek / embed tag, dan mengubah tinggi atau lebar MEREKA hanya menghasilkan lebih banyak ruang yang dialokasikan untuk gambar.

Apakah ada cara untuk menentukan bahwa Anda ingin gambar SVG ditampilkan lebih kecil atau lebih besar daripada yang sebenarnya disimpan dalam sistem file?

html svg Jenny
sumber

178

Buka .svgfile Anda dengan editor teks (hanya XML), dan cari sesuatu seperti ini di atas:

<svg ... width="50px" height="50px"...

Hapus atribut width dan height; standarnya adalah 100%, jadi itu harus meregang ke apa pun wadah memungkinkannya.

Amadan
sumber

75

Ya itu benar, tetapi Anda juga perlu menambahkan atribut 'viewBox' (mis. ViewBox = "0 0 50 50" dalam contoh 50x50px Anda), jika tidak, konten mungkin tidak menskala dengan baik (akan tergantung pada dimensi wadah). Scour akan melakukan ini untuk Anda secara otomatis, codedread.com/scour .

Erik Dahlström

Hore! Itu membantu! Saya sudah memiliki hal-hal di 100% dalam file, ternyata, tetapi kotak tampilan kuncinya! Terima kasih semuanya!

Jenny

26

Jika tidak jelas bagi orang lain, 'viewBox' peka huruf besar-kecil. Juga, dua koordinat pertama adalah sudut kiri atas jika Anda memotong gambar, dan dua koordinat kedua adalah lebar dan tinggi sebelum penskalaan.

Big McLargeHuge

1

Perhatikan bahwa <div style = "width: 50px; height: 50px"> <svg viewBox = "0 0 1000 1000"> ... </svg> </div> dan <svg viewBox = "0 0 1000 1000" style = "width: 50px; height: 50px"> ... </svg> akan berfungsi.

melebar

48

Coba ini:

Setel kotak tampilan yang hilang dan isi nilai tinggi dan lebar atribut atur tinggi dan tinggi di tag svg
Kemudian skala gambar hanya dengan mengatur tinggi dan lebar ke nilai persen yang diinginkan . Semoga berhasil.
Tetapkan rasio aspek tetap dengan preserveAspectRatio="X200Y200 meet(misalnya 200px), tetapi tidak perlu

misalnya

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="10%" 
   height="10%"
   preserveAspectRatio="x200Y200 meet"
   viewBox="0 0 350 350"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="namesvg.svg">

Lorenz Lo Sauer
sumber

24

Anda dapat mengubah ukurannya dengan menampilkan svg di tag gambar dan tag ukuran gambar yaitu

<img width="200px" src="lion.svg"></img>

Tanveer
sumber

1

Masalah yang saya pikir dengan menggunakan <img> adalah Anda kehilangan kemampuan failover dari tag <object> (yang mungkin relevan untuk pengguna IE pada versi 8 dan di bawah).

Nathan Crause

10

Mengubah lebar wadah juga memperbaikinya daripada mengubah lebar dan tinggi file sumber.

.SvgImage img{ width:80%; }

Ini memperbaiki masalah saya tentang mengubah ukuran svg. Anda dapat memberikan% berdasarkan kebutuhan Anda.

neuro_tarun
sumber

8

Saya telah menemukan yang terbaik untuk menambahkan viewBoxdan preserveAspectRatioatribut ke SVGs saya. Kotak view harus menggambarkan lebar dan tinggi penuh SVG dalam bentuk 0 0 w h:

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"></svg>

duhaime
sumber

2

Ini adalah pilihan terbaik dengan jujur. Bekerja seperti pesona.

Justin

6

Gunakan kode berikut:

<g transform="scale(0.1)">
...
</g>

Chris P.
sumber

4

Berikut adalah contoh cara menggunakan batas svg.getBox(): https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

Pada akhirnya Anda mendapatkan angka yang dapat Anda pasang ke svg untuk mengatur kotak tampilan dengan benar. Kemudian gunakan css pada div induk dan Anda selesai.

 // get all SVG objects in the DOM
 var svgs = document.getElementsByTagName("svg");
 var svg = svgs[0],
    box = svg.getBBox(), // <- get the visual boundary required to view all children
    viewBox = [box.x, box.y, box.width, box.height].join(" ");

    // set viewable area based on value above
    svg.setAttribute("viewBox", viewBox);

Lawrence Whiteside
sumber

1

Saya memiliki file SVG dalam HTML [....] APAKAH ada cara untuk menentukan bahwa Anda ingin gambar SVG ditampilkan lebih kecil atau lebih besar daripada yang sebenarnya disimpan dalam sistem file?

Grafik SVG, seperti karya kreatif lainnya, dilindungi oleh undang-undang hak cipta di sebagian besar negara. Bergantung pada yurisdiksi, lisensi karya atau apakah Anda pemegang hak cipta atau tidak, Anda mungkin tidak dapat memodifikasi SVG tanpa melanggar undang-undang hak cipta , percaya atau tidak.

Tetapi hukum adalah topik yang rumit dan terkadang Anda hanya ingin menyelesaikannya. Karenanya, Anda dapat menyesuaikan skala gambar tanpa memodifikasi karya itu sendiri menggunakan imgtag dengan widthatribut dalam HTML Anda.

Menggunakan permintaan HTTP eksternal untuk menentukan ukuran:

<img width="96" src="/path/to/image.svg">

Menentukan ukuran dalam markup menggunakan Data URI :

<img width="96" src="data:image/svg+xml,...">

SVG dapat Dioptimalkan untuk URI Data untuk membuat gambar Favicon SVG yang cocok untuk berbagai ukuran:

<link rel="icon" sizes="any" href="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23000'/%3E%3C/svg%3E">

Josh Habdas
sumber

Mengubah ukuran SVG dalam html?

Jawaban: