Come ridimensiono un SVG ostinato incorporato con il tag <object>?

114

Ho alcuni file SVG che specificano widthe heightcosì viewboxcome questo:

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

ma come visualizzarli nel browser con una dimensione che decido? Li voglio più piccoli e ho provato:

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

ma poi ottengo barre di scorrimento visibili.

Funziona se cambio i file SVG in set widthe heightin 100%invece, ma voglio decidere la dimensione nell'HTML indipendentemente dalle dimensioni utilizzate nel file SVG. È possibile ?

html  svg 
— Zitrax
fonte
Sono confuso, l'ultima frase si legge come la soluzione che stai cercando? Imposta larghezza / altezza SVG su 100% / 100% lascia che sia l'HTML a definire l'area in cui disegnarlo?
— segna il
3
Il problema è che non ho trovato alcun modo per cambiarlo nella libreria che uso per generare i file svg. E avrebbe senso per me se potessi sovrascriverlo da html. Quindi fondamentalmente mi chiedo se esiste un'altra soluzione oltre a modificare i file svg.
— Zitrax

Risposte:

161

È possibile aggiungere gli attributi "preservAspectRatio" e "viewBox" al <svg>tag per eseguire questa operazione.

Apri il file .svg in un editor e trova il <svg>tag. in quel tag, aggiungi i seguenti attributi:

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

Sostituisci {width} e {height} con alcuni valori predefiniti per viewBox. Ho usato i valori degli attributi "larghezza" e "altezza" del tag SVG e sembrava funzionare.

Salva l'SVG e ora dovrebbe ridimensionarsi come previsto.

Ho trovato queste informazioni qui:

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

— Jim Keller
fonte
2
#protip tutto ciò di cui hai bisogno per aggiungerlo in questa riservaAspectRatio = "xMinYMin meet"
— samccone
4
@samccone: Sembra che preserveAspectRatio="xMinYMin meet"non fosse abbastanza per me. Avevo anche bisogno di fornire un viewBoxcome menzionato nella risposta. Pietà!
— Frerich Raabe
1
Puoi anche farlo preserveAspectRatio="none"se vuoi estendere lo svg in modi arbitrari.
— Matt Crinklaw-Vogt
5
Non cadere per lo stesso problema che ho fatto io: "viewbox"! = "ViewBox" :)
— Dr.Ü
Inoltre, ho dovuto impostare gli attributi di larghezza e altezza effettivi 100%come indicato in questa risposta .
— ComFreek
35

Nessuna delle risposte fornite qui ha funzionato per me quando l'ho chiesto nel 2009. Dato che ora ho avuto di nuovo lo stesso problema, ho notato che l'uso del <img>tag e della larghezza insieme a un svg funziona bene.

<img width="400" src="image.svg">
— Zitrax
fonte
6
Questo è molto più semplice delle altre opzioni! Nel caso qualcuno sia curioso, ecco una tabella di quali browser possono gestire SVG nei tag <img> .
— dimo414
5
Questo potrebbe essere il percorso migliore se non ci sono collegamenti ipertestuali in SVG, altrimenti img è insufficiente e si deve comunque usare un'alternativa come embed.
— sdupton
12
Quando si utilizza <img>si perde tutta l'interattività con link, javascript, ecc.
— gilly3
5
Minore: l'elemento img dovrebbe essere chiuso automaticamente, ad es <img width="400" src="image.svg"/>.
— Jan Aagaard
4
@JanAagaard: non è necessario chiudere il tag img tranne che in XHTML.
— Peter V. Mørch
9

Puoi accedere allo svg incorporato utilizzando JavaScript:

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

Poiché il tuo svg ha già un viewBox, Firefox dovrebbe ridimensionare la larghezza di 576 pixel nel viewBox alla larghezza di 400 pixel nel tuo documento. Altri svg potrebbero trarre vantaggio da un nuovo viewBox derivato dalla larghezza e dall'altezza annunciate (spesso sono gli stessi numeri). Altri browser potrebbero trarre vantaggio da diverse modifiche svg.

— joeforker
fonte
1
Questo mi ha dato:Security error: attempted to read protected variable
— Zitrax
1
Il file svg è ospitato nello stesso dominio della tua pagina web?
— joeforker
1
Non era (da localhost a esterno) quindi probabilmente è così, tuttavia ho finito per usare la mia risposta di seguito perché era più semplice.
— 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" />

Questa configurazione ha funzionato per me.

— H Titan
fonte
In realtà funziona abbastanza bene! La cosa veramente importante è definire effettivamente viewBox="0 0 640 80". Apparentemente se questo non è definito, non puoi davvero ridimensionarlo o lasciare che CSS lo riduca per te usando ad esempio width: 100%ecc.
— Igor
8

Ho riscontrato un problema in cui iOS su un iPad non ridimensionava correttamente le immagini SVG in un file <object> tag.

Lo stile CSS aumenterebbe o diminuirà la dimensione del <object>contenitore, ma l'immagine al suo interno non verrebbe modificata (su iPad, iOS 7).

Le immagini SVG sono state esportate da Adobe Illustrator e la soluzione si è rivelata sostituire la larghezza e l'altezza in questo:

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

con:

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

Avevo bisogno di usare il <object>tag perché il <img>tag attualmente non supporta l'incorporamento di immagini bitmap in SVG.

— Andrew Swift
fonte
Questa è la risposta corretta soprattutto se hai SVG inline e non usi il tag <img! Perfetto!
— Greg Ellis
5

  1. Imposta la casella di visualizzazione mancante e inserisci i valori di altezza e larghezza degli attributi di altezza e altezza impostati nel tag svg

  2. Quindi ridimensionare l'immagine semplicemente impostando l'altezza e la larghezza sui valori percentuali desiderati . In bocca al lupo.

  3. Puoi impostare un rapporto di aspetto fisso con keepAspectRatio = "x200Y200 meet, ma non è necessario

per esempio

 <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
fonte
3

Basta usare CSS per far ridimensionare il browser in SVG! In questo modo: <object style="width:30%"> vedi http://www.vlado-do.de/svg_test/ per maggiori dettagli. L'ho anche provato localmente con un SVG che ha la larghezza e l'altezza indicate in "pt". Funziona bene in Firefox.

— Vlado
fonte
1

Vediamo. Ho dovuto rinfrescare la memoria su SVG, non l'ho usato molto in questi anni.

Da quello che ho trovato oggi, sembra che se specifichi la dimensione degli oggetti senza unità, hanno una dimensione fissa (in pixel, credo). Apparentemente, quindi, non c'è modo di ridimensionarli quando ridimensionate l'SVG (cambia solo la dimensione della vista / tela).

A meno che, come sottolineato, non specifichi la dimensione dell'SVG in percentuale O specifichi un viewBox (es. ViewBox = "0 0 600 500").

Ora, se non hai modo di cambiare l'SVG esportato, sei sfortunato, temo. Che libreria usi?

— PhiLho
fonte
Il backend svg in matplotlib. Ho provato funzioni come set_figwidth (val) ma non sembra funzionare, ma non ho molta familiarità con questa libreria quindi potrei guardare le funzioni sbagliate.
— Zitrax
1

Ecco una soluzione PHP che utilizza QueryPath basata sulla risposta di Jim Keller.

Una volta caricato QueryPath, passa lo script svg alla funzione.

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
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.