WebGee DocsDocs
WordPress

Use SVG images in WordPress

WordPress blocks SVG uploads by default for good reason. How to enable them safely with Safe SVG, and why not to use a plugin that simply allows the type.

WordPress refuses SVG uploads out of the box. The Safe SVG plugin enables them with sanitisation. Applies to all WordPress sites.

SVGs are worth having for logos, icons and simple illustrations: they scale to any size without blurring, and are usually far smaller than an equivalent PNG.

Why WordPress blocks them

An SVG is not really an image — it is an XML document, and XML can contain JavaScript. An SVG uploaded to your media library and served from your domain can run script in your visitors' browsers under your own origin.

That is why the answer is a sanitising plugin rather than one that just adds image/svg+xml to the allowed types.

Plugins that "allow SVG uploads" without sanitising them turn your media library into a route for stored cross-site scripting. Any contributor who can upload a file can run script on your site. Use Safe SVG, which strips scripts and event handlers on upload.

Install Safe SVG

  1. Log in to WordPress as an administrator, or as a user who can install plugins.
  2. Go to PluginsAdd New.
  3. Search for Safe SVG.
  4. Select Install Now, then Activate.

There is no configuration. SVG uploads work immediately through the media library.

After enabling

  • Restrict who can upload. Sanitisation reduces the risk but does not remove the value of limiting uploads to trusted roles.
  • Set explicit dimensions. SVGs have no intrinsic pixel size, so a theme that does not set width and height may render them enormous or collapsed.
  • Do not use SVG for photographs. Vector formats describe shapes; a photograph embedded in an SVG is larger than the JPEG it came from.

On this page