SVG skalieren
-
Hallo ich habe eine Grafik im .svg Format die ich in meiner html datei einbinden möchte
wenn ich im object tag aber width und height setze wird mein bild beschnitten und nicht skaliert...
nach etwas googlen bin ich auf mysteriöse <svg> tags gestoßen und weitere seltsasme sachen...kann mir einer ein msuterbeispiel geben, wie man svg skaliert unter der annahme das die datei test.svg heißt, und am ende auf 400*400 px runterskaliert wird?
-
hmm würde es vielleicht helfen wenn ich das svg in ein div packe und es dann darin 100% bekommt oder wird da auch beschnitten?
kanns grad nicht testen
-
Wie bindest du es denn zurzeit ein? mit einem IMG tag?
probier es mal wie folgt einzubinden:
<object data="grafik.svg" type="image/svg+xml" width="100%" height="100%"></object>
Und gib in deinem SVG tag der Datei mal eine ViewBox mit der Größe, falls nicht vorhanden:
viewBox="0 0 w h" (w = weite, h = höhe)als Beispiel:
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox="0 0 730 680">P.S. alles ohne Gewähr und Test...
-
Ach, geht das nicht mit
<img>
-
afaik geht es schon mit <img>, aber ich glaube dann wird es anders interpretiert (je nach browser?) und liefert vielleicht nicht das gewünschte Ergebnis.
Ich weiss nicht mehr so genau, wie ein SVG aufgebaut ist, aber sobald dynamische Werte (z.b. Systemzeit, Variablen, etc...) enthalten sind, sollte es vom Browser als Objekt behandelt werden.
"Bilder" im <img> tag sind statisch und ich denke mal, ein SVG wird in dem Fall auch statisch behandelt (Keine dynamische Animation möglich).Hier kann man sich ja mal einlesen: http://svg.tutorial.aptico.de/start3.php?knr=2&kname=Darstellung von SVG-Grafiken&uknr=2.1&ukname=SVG-Grafiken in Webdokumenten
P.S. Meine Begegnungen mit SVG liegen schon >4 Jahre zurück... da bin ich wohl nicht mehr auf dem neuesten Stand.