Um SVG-Graphiken in HTML einzubinden, verwendet man das object Element.
<object data="heart.svg" type="image/svg+xml" width="200"></object>
Das Attribut type gibt den MIME-Type an, data den Pfad zur SVG-Datei und über width lässt sich die Breite der Graphik anzeigen. Nein, falsch. Erzeugt man mit Inkscape eine Graphik und möchte sie einbinden, so bleibt sie statisch in der Breite. Erstellt man eine 50px-breite Graphik und stellt man width=”100″, so wird eine 50px-breite Graphik angezeigt. Die SVG-Graphik skaliert nicht. Der Grund ist eine Konfiguration in der SVG-Datei. Es ist im root-Element width und height auf jeweils 100% zu setzen und ein Attribut viewBox hinzuzufügen, das die Koordinaten der 4 Eckpunkte bezeichnet (min-x min-y width height).
11,12c11,13 < width="50" < height="50" --- < width="100%" < height="100%" < viewBox="0 0 50 50"
Das ganze lässt sich noch im Paket svg_scale nachvollziehen. Öffnet einfach die Dateien index.html und scalable.html um den Unterschied zu sehen.
Recent Comments