Every part so far has been about handling pixel images well. But some pictures never needed to be pixels: icons, logos, diagrams and charts. Keep those as vectors and most of the problems from the earlier parts simply stop existing.
How SVG differs from an image file
An SVG is not an array of pixels but a set of drawing instructions — draw a line from here to there, fill this circle with that colour — written as text. Three properties follow from that difference.
The second property matters most in practice. When a brand colour changes, pixel icons must all be exported again; an SVG follows a single line of CSS. Dark mode is the same story — no second set of light and dark artwork to keep in step.
Where it fits, and where it does not
The boundary is clear. Never use it for photographs. Describing a photograph as vectors would take thousands of shapes and the file grows rather than shrinks. Be careful, too, with highly detailed illustrations containing very many shapes — the browser has to draw every one of them, so a small file can still be expensive to render.
Upload it, or put it in the markup?
There are two ways to use an SVG: reference it as a file, like any image, or place it inline in the markup. Only the second lets CSS recolour it — an SVG loaded as a file is sealed off from outside styles.
One caution belongs here. WordPress declines SVG uploads by default for a reason: an SVG is a document format that can carry script, so opening uploads without validation lets anyone with editing rights put a dangerous file on the server by accident. If you do need uploads, pair them with sanitising and grant the capability only to the roles that require it.
The safest and easiest arrangement in practice is the designer producing the SVG and a developer reviewing it into the theme as an asset. That suits brand icon sets particularly well, since they change rarely.
The security reasoning is covered in the security archive, and tidying icon assets into a safe pipeline sits within our optimization program.
Next part
Images are in order. The next part covers the element most likely to make a page heavy — the embedded video, and everything it loads before anyone has pressed play.