Präsentationsattribute vs. Inline-Stile

Das ist ein Unterschied, den man kennen sollte. Sie sehen ziemlich ähnlich aus. Sie können einige der gleichen Dinge tun. Aber das eine ist sehr einfach zu überschreiben und das andere nicht.

Inline-Stile sind wahrscheinlich etwas vertrauter

<div style="width: 300px; height: 300px;">
  Inline styles on an HTML element.
</div>

SVG kann das auch

<svg style="width: 300px;">
 Inline styles on an SVG element.
</svg>

Aber SVG hat auch dieses Konzept von Präsentationsattributen, was bedeutet, dass wir das tun könnten

<svg width="300px" height="300px">
  Presentational attributes on an SVG element.
</svg>

Der Unterschied?

Präsentationsattribute sind in CSS sehr einfach zu überschreiben

Jedes CSS reicht aus.

/* These styles will override the presentational attributes */
svg {
  width: 250px;
  height: 250px;
}

Inline-Stile können nur durch !important-Regeln in CSS überschrieben werden

Der einzige Weg, einen Inline-Stil zu überschreiben, ist die Verwendung von !important-Regeln

svg {
  width: 250px !important;
  height: 250px !important;
}

Eine grobe Skizze, um den Punkt zu verdeutlichen

Das kommt tatsächlich vor, wie ich finde, in der täglichen Entwicklung. Zum Beispiel fragt Illustrator, wie Sie exportierte SVG-Dateien gestalten möchten

Es ist auch sinnvoll, Präsentationsattribute hinzuzufügen, insbesondere Größenattribute, zu SVG, um FOUSVG zu vermeiden.