Ändern der Größe von SVG in HTML?

Ich habe also eine SVG-Datei in HTML, und eines der Dinge, die ich über das Format gehört habe, ist, dass es nicht vergrößert wird, wenn Sie es vergrößern.

Ich weiß, dass mit einem JPEG oder was auch immer ich es als 50 x 50-Symbol speichern könnte, und es dann tatsächlich als (ziemlich pixeliges) 100 x 100-Miniaturbild (oder 10 x 10) anzeigen kann, indem ich Höhe und Breite in image_src manuell einstelle Etikett.

SVG-Dateien scheinen jedoch mit Objekt- / Einbettungs-Tags verwendet zu werden, und das Ändern der Höhe oder Breite von THOSE führt nur dazu, dass mehr Platz für das Bild zugewiesen wird.

Gibt es eine Möglichkeit anzugeben, dass ein SVG-Bild kleiner oder größer angezeigt werden soll, als es tatsächlich im Dateisystem gespeichert ist?

Öffnen Sie Ihre .svgDatei mit einem Texteditor (es ist nur XML) und suchen Sie oben nach etwas Ähnlichem:

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

Breiten- und Höhenattribute löschen; Die Standardeinstellungen sind 100%, daher sollte sie sich auf das erstrecken, was der Container zulässt.

Probiere diese:

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. Stellen Sie ein festes Seitenverhältnis mit preserveAspectRatio="X200Y200 meet(z. B. 200px) ein, 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">

Sie können die Größe ändern, indem Sie svg in Bild-Tag und Größe Bild-Tag anzeigen, dh

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

Durch Ändern der Breite des Containers wird dies ebenfalls behoben, anstatt die Breite und Höhe der Quelldatei zu ändern.

.SvgImage img{ width:80%; }

Dies behebt mein Problem mit der Größenänderung von SVG. Sie können jeden Prozentsatz basierend auf Ihrer Anforderung geben.

Ich habe es am besten gefunden hinzuzufügen viewBoxund preserveAspectRatioAttribute zu meinem SVGs. Das Ansichtsfeld sollte die gesamte Breite und Höhe der SVG in folgender Form beschreiben 0 0 w h:

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

Verwenden Sie den folgenden Code:

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

Hier ist ein Beispiel für das Erhalten der Grenzen mit svg.getBox(): https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

Am Ende erhalten Sie Nummern, die Sie in das SVG einstecken können, um die Viewbox richtig einzustellen. Verwenden Sie dann ein beliebiges CSS für das übergeordnete Div und Sie sind fertig.

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

Ich habe eine SVG-Datei in HTML [....] Gibt es eine Möglichkeit anzugeben, dass ein SVG-Bild kleiner oder größer angezeigt werden soll, als es tatsächlich im Dateisystem gespeichert ist?

SVG-Grafiken sind wie andere kreative Werke in den meisten Ländern urheberrechtlich geschützt. Abhängig von der Gerichtsbarkeit, der Lizenz des Werks oder davon, ob Sie Inhaber des Urheberrechts sind oder nicht, können Sie die SVG möglicherweise nicht ändern, ohne das Urheberrecht zu verletzen , glauben oder nicht.

Aber Gesetze sind knifflige Themen und manchmal möchte man einfach nur Scheiße machen. Daher können Sie den Maßstab der Grafik anpassen, ohne die Arbeit selbst mithilfe des imgTags mit zu ändernwidth Attribut in Ihrem HTML-Code zu ändern.

Verwenden einer externen HTTP-Anforderung zum Festlegen der Größe:

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

Festlegen der Größe im Markup mithilfe eines Daten-URI :

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

SVGs können für Daten-URIs optimiert werden , um SVG-Favicon- Bilder zu erstellen , die für jede Größe geeignet sind:

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