How to add an SVG to WordPress without a plugin

By Matt Visiwig Sep 22, 2021

It’s not hard to add SVG graphics to WordPress posts, but the media library doesn’t allow SVG file uploads by default. The lack of support is due to security concerns, as harmful code can be hidden in SVG files. That’s why preventing your users from uploading SVGs is a best practice.

However, this also prevents trusted admins and authors from easily displaying SVG graphics on your website. While there are various plugins that turn on this desired functionality, there are other ways to display SVGs on your WordPress web pages.

Let’s take a look at the various methods to display SVG on WordPress.

Use SVG in the Custom HTML Gutenberg block

Gutenberg is the default editor for WordPress and there is no need to add 3rd-party blocks to display SVG graphics. Simply add a Custom HTML block to your post, then you can copy and paste your SVG code directly into the HTML block. It should work by default, but there are a few gotchas to avoid.

Gotcha 1: SVGs scale to fill the entire space
Without any special container or styling rules your SVG might be enormous, and take up the entire screen. To combat this, add a wrapper around the SVG. Example below.

<div class="svg-wrap">
   <svg> … </svg>
</div>
<style>
   .svg-wrap{
      max-width: 250px;
      margin: 0 auto; /* center the wrap */
   }
</style>

Gotcha 2: Duplicate classes can interfere with each other
Depending on where the SVG was created, sometimes classes are used in the SVG code. For instance, Adobe Illustrator will name classes progressively such as .st1, .st2, etc… and so in the case where you have two SVGs using the same class names, the styles will interfere with each other. For this reason it is better to avoid auto-generated classes where possible, instead inline styles.

<rect class="st1"> <!-- bad -->
<rect class="red-square"> <!-- better -->
<rect fill="#F00"> <!-- best -->

Use SVG with the classic editor plugin

I don’t consider this a plugin because it reverts the editor to how WordPress behaved prior to Gutenberg (WordPress 5). It’s active on over five million websites, so many of my readers’ websites already have it installed.

When editing a post in the classic editor you can switch from the “visual” editing mode to the “text” editing mode. The text editing mode allows HTML code, so you can paste your inline SVG right into the editor. Same gotchas apply from the above method.

Use CSS instead of SVG

Converting your SVG code to pure CSS opens up options because there are multiple ways to apply CSS to elements in WordPress. To pull off this method, we’ll need to achieve two things. We’ll need to find a place to host the CSS code and then add the class or specifier to the desired element.

Tip: You can use this tool to paste your SVG code and convert it to CSS.

Where you can place your CSS code 

• WP customizer (site-wide)
• Your theme’s stylesheet (site-wide)
• Page builders often allow CSS (page)
• Classic editor “Text” editing mode (page)

Adding a class to an element
If you can paste HTML code in the editor, you have an easy job of adding a class to a wrapper. You simply want to ensure that the wrapper has a reasonable width/height ratio, as the SVG is being displayed as a CSS background image:

<div class="your-class-name"> ... </div>

However, with Gutenberg blocks, there is a field to add custom CSS class names or an ID. This means if you place your CSS code via one of the methods above, then you can associate those styles with the block.

Popular plugins that enable SVG

While this article is about how to add SVGs while avoiding adding new plugins, there are popular plugins you may already be using that can help you. They can be placed into two categories: Page builders and ACF…

Page builders
There is no shortage of page builders on WordPress: Elementor, Brizy, Divi, Beaver Builder, WP Bakery, Visual Composer, Oxygen. The list goes on. They all have some element or widget to add HTML code. Then you will be able to paste the SVG code directly onto the page. 

Advanced Custom Fields (ACF)

ACF is a popular plugin for developers to create custom inputs in the WordPress backend. There are various field types, but for our purposes the “Text” and “Text Area” field types allow HTML. This means you could use it as a means to inline SVGs or in other words copy and paste the SVG code right into the ACF field.

Have a question, find me on Twitter!