Presentation Attributes vs Inline Styles

This is a distinction worth knowing about. They look pretty similar. They can do some of the same things. But, one is very easy to override and the other is not.

Inline styles are likely a bit more familiar:

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

SVG can do that too:

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

But SVG has this concept of presentational attributes as well, meaning we could do this:

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

The difference?

Presentational attributes are very easy to override in CSS

Any CSS at all will do.

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

Inline styles can only be override by !important styles in CSS

The only way to override an inline style is by using !important rules:

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

A crude diagram to drive the point home

This does actually come up, I find, in day-to-day development. For example, Illustrator asks how you want to style exported SVG:

It also makes good sense to add presentational attributes, especially sizing ones, to SVG to avoid FOUSVG.