Using SVG graphics in WordPress

Scalable, crisp vector art for websites

Dec. 8 2018 Update:

• WordPress 5.0 doesn’t require a plugin just to import SVG graphics into the media library.
• When inserted via the Customizer interface (e.g., for a header image), SVG graphics no longer cause errors or dead-ends at the cropping stage.
• After inserting an SVG image, it might not be visible to the naked eye until it is given an explicit size either via an on-screen control or in CSS, etc.

Web designers and developers know that — for most line art and logotypes — SVG is the format of choice. It’s infinitely scalable and makes crisp-edged graphics sing on high-def displays. (And we aren’t even discussing the animation possibilities… yet!)

WordPress hasn’t always accepted SVG uploads into its media library without some help. But that did not mean WordPress wouldn’t serve SVG graphics in its content.

You may→ download the WordPress logo in SVG ←here.

SVG & graphics quality

Skip to the next section if you already know the advantages of Scalable Vector Graphics (SVG) and don’t need this brief refresher.

SVG & security

Note: As always, refer to your trusted developer and any IT resources for the specifics as they apply to your circumstances.

Some security notes are worth noting. SVG code can be stuffed with other code, like Javascript, intended to do things unrelated to the graphic, potentially malicious things. Any potential maliciousness is supposed to be limited in part by how proper web browsers are constructed — if you’re using the <img> tag to place the SVG image, it should be considered safer.

The simple solution appears to be:

• (a) never let unauthorized users upload SVG files to your web server or have write access to files already on the server; and
• (b) do not embed in your website any SVG file that is hosted on another, potentially untrusted, server.
• (c) If you must host SVG resources from untrusted parties, store them on a separate server and a different domain from your website where they will be displayed.

Note: A good discussion of SVG and security is presented here.

SVG’s differences in WordPress

Modern WordPress systems are likely to accept SVG as easily as PNG or JPG (or PDF, DOC, et al.), with some differences:

• A big one is that there are no meaningful dimensions to an SVG image. Its detailed info in the Media Library includes a date and file size, but no width or height, which are normally displayed in pixel units. (That would be like asking, “How big is a circle?”)
• When inserting an SVG image into a post, the controls for alignment and the link-to image work as they do for any graphic, but the drop-down to choose what size to insert only shows one (the default) size instead of a thumbnail, medium, and large. That default size does not restrict the size at which you can display an SVG graphic.
• WordPress doesn’t (currently) properly wrap an SVG graphic in its [ caption ] tag even when a caption is present in its Media Library entry. You can, however, add a caption shortcode manually. To begin, just copy a valid caption shortcode from another image. For the large demo of SVG quality, above, we copied…
  [ caption id="attachment_5957" align="alignnone" width="620" ]

  …and the closing tag, inserting new caption text. But that id value refers to the other, specific image. Use the Media Library’s “edit” options for the SVG image you want, in order to get the image’s own attachment ID. That is shown in editing page’s URL — in our example, the desired SVG’s editing page address ended in…
  /wp-admin/post.php?post=5958&action=edit

  …Use that “post=5958” number to replace the one in the shortcode you copied in the previous step. For our example, again, the new shortcode became…
  [ caption id="attachment_5958" align="alignnone" width="620" ]

  …and the graphic displays normally, with caption, subject to any sizing that is needed (which might also affect the width value in this shortcode).

SVG and the Media Library

For websites still running on WordPress versions earlier than 5.0, if your normal workflow relies on the Media Library for inserting images, as most WordPress sites do, you may want to improve its handling of SVG images.

Use a plugin like SVG Support by Benbodhi. Just install and activate it — the usual WordPress controls for uploading media will recognize your .svg files just like other permissible file types. With the plugin activated, the Media Library can display previews of the vector graphics. Concerned about that security advisory? You can de-activate the SVG Support plugin after you’ve uploaded your files but, if you prefer to leave it active, it offers a setting to permit only admin users to upload SVG.

The following two images are PNG (bitmapped), including the thumbnail-sized SVG graphics. In actual WordPress use, the previews truly are SVG, including any SVG animation, for a true — if small — preview.

Don’t care about the Media Library?

You can use SFTP/FTP/SSH to upload your SVG files to a directory where WordPress can read them. Make a note of the paths, relative to the root directory of your website, and enter those manually wherever the images are needed.

In this approach, any security concerns might be addressed, at least in part, by protecting write and execute access to the directory where you place the SVG files. Someone familiar with your web server and related security issues should manage this setup. Of course, site editors and administrators will not have access to such images through the Media Library, and WordPress will not be able to manage or manipulate them under most normal circumstances.

Other Considerations

• No native, default size — that’s part of being infinitely scalable — so the developer must specify the desired dimensions in some way. Don’t rely on the server to detect the dimensions of an SVG image! And to avoid possible penalties in AMP for mobile devices, don’t include inline style declarations for size or anything else. Use CSS instead, such as by assigning your SVG images one or more classes or unique IDs. Some solutions place the SVG in a container DIV whose dimensions are under CSS control: we specify the size of that container in CSS and then specify a percentage size (often 100%) of the SVG that you display in it.

• They’re typically lightweight, but some vector graphics make large file sizes. Extreme complexity, advanced shaders and renderers, inline effects and animations might cause bloat. Some applications that generate SVG code include swaths of redundant code that might be safely deleted by skilled hands.

• Some WordPress themes include a cropping step when inserting an image, such as for the site’s logo. But such cropping typically cannot be applied to SVG images. If the theme doesn’t include a “Skip cropping” option, sometimes the best option is to insert the logo via PHP function or by modifying one of the child* theme’s template files, such as the header.php file.

• Browser compatibility: since we began their near-routine use in 2017, our projects have not encountered any significant browsers that don’t support SVG. Testing is always warranted for applications that require users to employ a specific browser, but we — and an increasing number of authoritative websites visited by millions — are using SVG without qualms in this regard.

• Some plugins, social networks, social-graph utilities, and other third-party services that scrape images from your website might not support SVG. Consider providing equivalent PNG or JPG images that can substitute seamlessly: displaying the vector graphics to human visitors and providing the bitmap equivalents to others appropriately.

*WordPress developers use child themes so, when a theme’s original developer issues an update, it doesn’t overwrite any customizations the end-developer has implemented.