Mengubah ukuran SVG dalam html?

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?

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.

Coba ini:

1. Setel kotak tampilan yang hilang dan isi nilai tinggi dan lebar atribut atur tinggi dan tinggi di tag svg

2. Kemudian skala gambar hanya dengan mengatur tinggi dan lebar ke nilai persen yang diinginkan . Semoga berhasil.

3. 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">

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

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

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.

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>

Gunakan kode berikut:

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

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);

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">