Bagaimana cara menskalakan SVG keras kepala yang disematkan dengan tag <object>?

114

Saya memiliki beberapa file SVG yang menentukan widthdan heightjuga viewboxseperti ini:

<svg width="576pt" height="432pt" viewBox="0 0 576 432" > ...

tetapi bagaimana cara menampilkannya di browser dengan ukuran yang saya putuskan? Saya ingin mereka lebih kecil dan telah mencoba:

<object width="400" data="image.svg"></object>

tapi kemudian saya mendapatkan scrollbar yang terlihat.

Ia bekerja jika saya mengubah file SVG untuk set widthdan heightuntuk 100%sebaliknya, tapi saya ingin menentukan ukuran dalam HTML terlepas dari ukuran apa yang digunakan dalam file SVG. Apakah ini mungkin?

html svg Zitrax
sumber
Saya bingung, kalimat terakhir berbunyi seperti solusi yang Anda cari? Atur lebar / tinggi SVG menjadi 100% / 100% serahkan pada HTML untuk menentukan area untuk menggambarnya?
tandai
3
Masalahnya adalah saya tidak menemukan cara untuk mengubah ini di perpustakaan yang saya gunakan untuk menghasilkan file svg. Dan akan masuk akal bagi saya jika saya dapat menimpa ini dari html. Jadi pada dasarnya saya bertanya-tanya apakah ada solusi lain selain mengubah file svg.
Zitrax

Jawaban:

161

Anda dapat menambahkan atribut "preservAspectRatio" dan "viewBox" ke <svg>tag untuk melakukannya.

Buka file .svg di editor dan temukan <svg>tagnya. di tag tersebut, tambahkan atribut berikut:

preserveAspectRatio="xMinYMin meet"
viewBox="0 0 {width} {height}"

Ganti {width} dan {height} dengan beberapa default untuk viewBox. Saya menggunakan nilai dari atribut "width" dan "height" dari tag SVG dan tampaknya berhasil.

Simpan SVG dan sekarang harus berskala seperti yang diharapkan.

Saya menemukan informasi ini di sini:

https://blueprints.launchpad.net/inkscape/+spec/allow-browser-resizing

Jim Keller
sumber
2
#protip semua yang Anda butuhkan untuk menambahkannya ini preservAspectRatio = "pertemuan xMinYMin"
samccone
4
@samccone: Sepertinya preserveAspectRatio="xMinYMin meet"itu tidak cukup bagi saya. Saya juga perlu memberikan viewBoxseperti yang disebutkan dalam jawaban. Kasihan!
Frerich Raabe
1
Anda juga dapat melakukannya preserveAspectRatio="none"jika Anda ingin meregangkan svg dengan cara yang sewenang-wenang.
Matt Crinklaw-Vogt
5
Jangan terjebak pada masalah yang sama seperti yang saya alami: "viewbox"! = "ViewBox" :)
Dr.
Selain itu, saya harus menetapkan atribut lebar dan tinggi yang sebenarnya 100%seperti yang dinyatakan jawaban ini .
ComFreek
35

Tak satu pun dari jawaban yang diberikan di sini berhasil untuk saya ketika saya menanyakan hal ini pada tahun 2009. Karena saya sekarang memiliki masalah yang sama lagi, saya perhatikan bahwa menggunakan <img>tag dan lebar bersama dengan svg berfungsi dengan baik.

<img width="400" src="image.svg">
Zitrax
sumber
6
Ini jauh lebih sederhana daripada opsi lainnya! Jika ada yang penasaran, berikut adalah tabel browser yang dapat menangani SVG dalam tag <img> .
dimo414
5
Ini mungkin jalur terbaik jika tidak ada hyperlink di SVG, jika tidak, img tidak cukup, dan masih harus menggunakan alternatif seperti sematan.
sdupton
12
Bila Anda menggunakan, <img>Anda kehilangan semua interaktivitas dengan tautan, javascript, dll.
gilly3
5
Kecil: Elemen img harus ditutup sendiri, yaitu <img width="400" src="image.svg"/>.
Jan Aagaard
4
@JanAagaard: Tidak diperlukan untuk menutup tag img kecuali dalam XHTML.
Peter V. Mørch
9

Anda dapat menjangkau ke dalam svg yang disematkan menggunakan JavaScript:

var svg = document.getElementsByTagName('object')[0].\
  contentDocument.getElementsByTagName('svg')[0];
svg.removeAttribute('width');
svg.removeAttribute('height');

Karena svg Anda sudah memiliki viewBox, Firefox harus menskalakan lebar 576 piksel di viewBox dengan lebar 400 piksel di dokumen Anda. Svgs lain mungkin mendapat manfaat dari viewBox baru yang diturunkan dari lebar dan tinggi yang diiklankan (sering kali angka yang sama). Browser lain mungkin mendapat manfaat dari tweak svg yang berbeda.

joeforker
sumber
1
Ini memberi saya:Security error: attempted to read protected variable
Zitrax
1
Apakah svg dihosting di domain yang sama dengan halaman web Anda?
joeforker
1
Itu bukan (localhost ke eksternal) jadi itu mungkin saja, namun saya akhirnya menggunakan jawaban saya di bawah ini karena lebih sederhana.
Zitrax
9 
<body>

<div>
<object type="image/svg+xml" data="img/logo.svg">
   <img src="img/logo.svg" alt="Browser fail" />
</object>
</div>

img / logo.svg ...

<svg
   width="100%" 
   height="100%"
   viewBox="0 0 640 80"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1" />

Pengaturan ini berhasil untuk saya.

H Titan
sumber
Ini sebenarnya bekerja dengan cukup baik! Hal yang paling penting adalah mendefinisikan viewBox="0 0 640 80". Rupanya jika ini tidak ditentukan, Anda tidak dapat benar-benar menskalakannya atau membiarkan CSS menskalakannya untuk Anda dengan menggunakan misalnya width: 100%dll.
Igor
8

Saya mengalami masalah ketika iOS di iPad tidak dapat mengubah ukuran gambar SVG dengan benar dalam sebuah <object>tag.

Gaya CSS akan menambah atau mengurangi ukuran <object>penampung, tetapi gambar di dalamnya tidak akan diubah (di iPad, iOS 7).

Gambar SVG diekspor dari Adobe Illustrator, dan solusinya ternyata menggantikan lebar dan tinggi sebagai berikut:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="481.89px" height="294.843px" viewBox="0 0 481.89 294.843" 
enable-background="new 0 0 481.89 294.843"
xml:space="preserve">

dengan:

width="100%" height="100%"

Saya perlu menggunakan <object>tag karena saat ini <img>tag tidak mendukung penyematan gambar bitmap di SVG.

Andrew Swift
sumber
Ini adalah jawaban yang benar terutama jika Anda memiliki SVG inline dan tidak menggunakan tag <img! Sempurna!
Greg Ellis
5

  1. Atur viewbox yang hilang dan isi tinggi dan lebar nilai dari atribut height dan height di tag svg

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

  3. Anda dapat menyetel rasio aspek tetap dengan preservAspectRatio = "x200Y200 memenuhi, tetapi itu 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
3

Cukup gunakan CSS untuk membuat browser mengubah ukuran SVG! Seperti: <object style="width:30%"> Lihat http://www.vlado-do.de/svg_test/ untuk lebih jelasnya. Saya juga mencobanya secara lokal dengan SVG yang lebar dan tingginya diberikan dalam "pt". Ini bekerja dengan baik di Firefox.

Vlado
sumber
1

Biarkan melihat. Saya harus menyegarkan ingatan saya tentang SVG, saya belum banyak menggunakannya tahun ini.

Dari apa yang saya temukan hari ini, tampaknya jika Anda menentukan dimensi objek tanpa unit, mereka memiliki ukuran tetap (menurut saya dalam piksel). Jadi, tampaknya tidak ada cara untuk mengubah ukurannya saat Anda mengubah ukuran SVG (ini hanya mengubah ukuran viewport / kanvas).

Kecuali, seperti yang ditunjukkan, Anda menentukan ukuran SVG dalam persentase ATAU menentukan viewBox (mis. ViewBox = "0 0 600 500").

Sekarang, jika Anda tidak memiliki cara untuk mengubah SVG yang diekspor, Anda kurang beruntung, saya khawatir. Perpustakaan apa yang Anda gunakan?

PhiLho
sumber
Backend svg di matplotlib. Saya telah mencoba fungsi seperti set_figwidth (val) tetapi tampaknya tidak berhasil, tetapi saya tidak terlalu terbiasa dengan perpustakaan ini jadi saya mungkin melihat fungsi yang salah.
Zitrax
1

Berikut adalah solusi PHP menggunakan QueryPath berdasarkan jawaban Jim Keller.

Setelah QueryPath dimuat, teruskan skrip svg Anda ke fungsi tersebut.

function scaleableSVG($svg){
    $qp = qp($svg, 'svg');
    $width = $qp->attr('width');
    $height = $qp->attr('height');
    $qp->removeAttr('width')->removeAttr('height');                       
    $qp->attr('preserveAspectRatio', "xMinYMin meet");
    $qp->attr('viewBox', "0 0 $width $height");
    return $qp->html();
}
Dieter Gribnitz
sumber