Wie skaliere ich eine hartnäckige SVG, die mit dem <object> -Tag eingebettet ist?

114

Ich habe einige SVG-Dateien, die Folgendes angeben widthund heightauch viewboxmögen:

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

aber wie werden sie im Browser in einer von mir festgelegten Größe angezeigt? Ich möchte sie kleiner haben und habe versucht:

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

aber dann bekomme ich sichtbare Bildlaufleisten.

Es funktioniert , wenn ich die SVG - Dateien in Satz ändern widthund heightzu 100%statt, aber ich mag die Größe in der HTML entscheiden , unabhängig davon , welche Größen in der SVG - Datei verwendet werden. Ist das möglich ?

html svg Zitrax
quelle
Ich bin verwirrt, der letzte Satz liest sich wie die Lösung, nach der Sie suchen? Wenn Sie SVG width / height auf 100% / 100% setzen, bleibt es dem HTML überlassen, den Bereich zu definieren, in den es gezeichnet werden soll.
Markieren Sie den
3
Das Problem ist, dass ich in der Bibliothek, mit der ich die SVG-Dateien generiere, keine Möglichkeit gefunden habe, dies zu ändern. Und es würde für mich Sinn machen, wenn ich dies von HTML überschreiben könnte. Im Grunde frage ich mich, ob es eine andere Lösung gibt, als die SVG-Dateien zu ändern.
Zitrax

Antworten:

161

Sie können den Attributen "keepAspectRatio" und "viewBox" hinzufügen <svg> Tag die , um dies zu erreichen.

Öffnen Sie die SVG-Datei in einem Editor und suchen Sie das <svg>Tag. Fügen Sie in diesem Tag die folgenden Attribute hinzu:

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

Ersetzen Sie {width} und {height} durch einige Standardeinstellungen für die viewBox. Ich habe die Werte aus den Attributen "width" und "height" des SVG-Tags verwendet und es schien zu funktionieren.

Speichern Sie die SVG und sie sollte nun wie erwartet skaliert werden.

Ich habe diese Informationen hier gefunden:

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

Jim Keller
quelle
2
#protip alles, was Sie brauchen, um es hinzuzufügen dieseserveAspectRatio = "xMinYMin treffen"
Samccone
4
@samccone: Es scheint, dass preserveAspectRatio="xMinYMin meet"mir das einfach nicht genug war. Ich musste auch eine viewBoxwie in der Antwort erwähnt angeben. Das Mitleid!
Frerich Raabe
1
Sie können dies auch tun, preserveAspectRatio="none"wenn Sie das SVG auf beliebige Weise ausdehnen möchten.
Matt Crinklaw-Vogt
5
Fallen Sie nicht auf das gleiche Problem wie ich herein: "viewbox"! = "ViewBox" :)
Dr.Ü
Außerdem musste ich die tatsächlichen Breiten- und Höhenattribute 100%wie in dieser Antwort angegeben einstellen .
ComFreek
35

Keine der hier gegebenen Antworten funktionierte für mich, als ich dies 2009 fragte. Da ich jetzt wieder das gleiche Problem hatte, bemerkte ich, dass die Verwendung des <img>Tags und der Breite zusammen mit einem SVG gut funktioniert.

<img width="400" src="image.svg">
Zitrax
quelle
6
Dies ist so viel einfacher als die anderen Optionen! Falls jemand neugierig ist, finden Sie hier eine Tabelle, in der Browser SVGs in <img> -Tags verarbeiten können .
dimo414
5
Dies kann der beste Weg sein, wenn es in SVG keine Hyperlinks gibt, andernfalls ist img nicht ausreichend und man muss immer noch eine Alternative wie einbetten verwenden.
sdupton
12
Wenn Sie verwenden <img>, verlieren Sie jegliche Interaktivität mit Links, Javascript usw.
gilly3
5
Minor: Das img-Element sollte selbst geschlossen sein, dh <img width="400" src="image.svg"/>.
Jan Aagaard
4
@ JanAagaard: Es ist nicht erforderlich, das img-Tag zu schließen, außer in XHTML.
Peter V. Mørch
9

Sie können mit JavaScript in das eingebettete SVG zugreifen:

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

Da Ihr SVG bereits über eine ViewBox verfügt, sollte Firefox die Breite von 576 Pixel in der ViewBox auf die Breite von 400 Pixel in Ihrem Dokument skalieren. Andere SVGs profitieren möglicherweise von einer neuen ViewBox, die aus der angegebenen Breite und Höhe abgeleitet wird (dies sind häufig die gleichen Zahlen). Andere Browser profitieren möglicherweise von anderen SVG-Optimierungen.

Joeforker
quelle
1
Dies gab mir:Security error: attempted to read protected variable
Zitrax
1
Wird das SVG auf derselben Domain wie Ihre Webseite gehostet?
Joeforker
1
Es war nicht (localhost to external), also ist es wahrscheinlich so, aber ich habe meine Antwort unten verwendet, da es einfacher war.
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" />

Dieses Setup hat bei mir funktioniert.

H Titan
quelle
Das funktioniert eigentlich ganz gut! Das wirklich Wichtige ist, tatsächlich zu definieren viewBox="0 0 640 80". Wenn dies nicht definiert ist, können Sie es anscheinend nicht wirklich skalieren oder CSS für Sie skalieren lassen, indem Sie z width: 100%. B. usw. verwenden
Igor
8

Ich habe ein Problem festgestellt, bei dem iOS auf einem iPad die Größe von SVG-Bildern in a nicht korrekt ändert <object> Tag .

Der CSS-Stil würde die Größe des erhöhen oder verringern <object> Container , aber das darin enthaltene Bild würde nicht geändert (auf dem iPad, iOS 7).

Die SVG-Bilder wurden aus Adobe Illustrator exportiert, und es stellte sich heraus, dass die Lösung die Breite und Höhe in folgenden Fällen ersetzte:

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

mit:

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

Ich musste das <object>Tag verwenden, da das <img>Tag derzeit das Einbetten von Bitmap-Bildern in SVGs nicht unterstützt.

Andrew Swift
quelle
Dies ist die richtige Antwort, insbesondere wenn Sie Inline-SVG haben und kein <img-Tag verwenden! Perfekt!
Greg Ellis
5

  1. Stellen Sie das fehlende Ansichtsfeld ein und geben Sie die Werte für Höhe und Breite der festgelegten Attribute für Höhe und Höhe in das SVG-Tag ein

  2. Skalieren Sie das Bild dann einfach, indem Sie Höhe und Breite auf die gewünschten Prozentwerte einstellen . Viel Glück.

  3. Sie können ein festes Seitenverhältnis miterveAspectRatio = "x200Y200 meet" festlegen, dies ist jedoch nicht erforderlich

z.B

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

Verwenden Sie einfach CSS, damit der Browser die Größe des SVG ändert! Gefällt mir: Weitere Informationen finden <object style="width:30%"> Sie unter http://www.vlado-do.de/svg_test/ . Ich habe es gerade auch lokal mit einem SVG versucht, dessen Breite und Höhe in "pt" angegeben ist. Es funktioniert gut in Firefox.

Vlado
quelle
1

Mal sehen. Ich musste mein Gedächtnis auf SVG auffrischen, ich habe es in diesen Jahren nicht viel benutzt.

Nach dem, was ich heute gefunden habe, scheint es, dass wenn Sie die Dimension von Objekten ohne Einheiten angeben, diese eine feste Größe haben (in Pixel, denke ich). Anscheinend gibt es dann keine Möglichkeit, die Größe zu ändern, wenn Sie die Größe des SVG ändern (es ändert nur die Größe des Ansichtsfensters / der Zeichenfläche).

Es sei denn, Sie weisen darauf hin, dass Sie die Größe der SVG in Prozent angeben ODER eine viewBox angeben (z. B. viewBox = "0 0 600 500").

Wenn Sie die exportierte SVG-Datei nicht ändern können, haben Sie leider kein Glück. Welche Bibliothek benutzt du?

PhiLho
quelle
Das SVG-Backend in Matplotlib. Ich habe Funktionen wie set_figwidth (val) ausprobiert, aber es scheint nicht zu funktionieren, aber ich bin mit dieser Bibliothek nicht sehr vertraut, sodass ich möglicherweise die falschen Funktionen betrachte.
Zitrax
1

Hier ist eine PHP-Lösung mit QueryPath basierend auf Jim Kellers Antwort.

Sobald QueryPath geladen ist, übergeben Sie einfach Ihr SVG-Skript an die Funktion.

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
quelle