SVG-Bilder, die in HTML5-Dokumenten verlinkt oder eingebunden sind, sind eine relativ junge Praxis (nach Web-Standards), aber ich glaube, es ist wichtig, dass sie schnell reift. Wie sollten moderne Browser einen Svg-Bildtyp definieren, der nur ihr Seitenverhältnis angibt (nach ihrem viewBox ) und wo das übergeordnete HTML-Dokument gerade (aber nicht beide) Breite oder Höhe hat?
Um das Thema sinnvoll einzugrenzen, bezieht sich diese Frage nur auf <!DOCTYPE html> HTML5-Dokumente.
Ich habe eine Testseite erstellt, die das in einigen verschiedenen HTML-Kontexten anzeigt, und nur Firefox verhält sich so, wie ich es würde erwarte (und ziehe es vor), folge dem einen von beiden, in allen getesteten Situationen. In früheren Tests hat Chrome das auch, aber nicht mehr. Oper ist sehr nah.
Eines der Dinge, die ich an SVG liebe, ist, dass Sie mit dem Format Bilder erstellen können, die in jeder beliebigen Dokumentgröße gerendert werden, solange Sie angeben, welche Teile des Bildes angezeigt werden sollen (und optional wie abgeschnitten werden soll). , und nicht angeben, wie groß es gezeichnet werden soll.
Dadurch können Sie ein hübsches Logo verwenden, um es nach Belieben in Ihrem Browser anzusehen und zu skalieren, indem Sie einfach die Größe ändern Browser-Fenster in der gewünschten Größe, und es zieht glücklich auf die neue Bounding-Box, ohne viel Aufhebens.
Dies wird erreicht, indem ein Attribut viewBox für das Element <svg> festgelegt wird, aber weder die Attribute width noch height , so dass das Seitenverhältnis mit dem (Standard) Svg Positionierungs- und Cropping-Strategie von preserveAspectRatio="xMidYMid meet" , was im Wesentlichen bedeutet, was background-position: 50% 50%; background-size: contain; für eine CSS3-Hintergrundbildspezifikation bedeuten würde.
Sie möchten Ссылка für das erforderliche Verhalten sehen Browser hier. Was CSS "intrinsisch" nennt, bezieht sich auf Informationen des Bildes.
Dieses Verhalten hat sich vor nicht allzu langer Zeit von einem schlechteren Standard geändert, so dass Browser wahrscheinlich weiterhin Probleme in diesem Bereich haben.
