SVG: How to Use Scalable Vector Graphics in WordPress

This article will show you all you need to upload and use SVGs (Scalable Vector Graphics) in WordPress successfully. Best of all, you don't need to buy any plugins! You can get it all done for free.

The current issue with uploading SVGs in WordPress

Suppose you attempt to upload a Scalable Vector Graphic file to your media library; WordPress will display the following error message:

Sorry, this file type is not permitted for security reasons.

The error message above pops up because WordPress does not support SVGs by default — due to the potential harm unsafe uploads may cause.

Luckily for us, Benbodhi developed a free plugin that currently helps thousands of people safely use SVG images in WordPress.

Below are the steps to help you also get started with using SVGs in your WordPress website.

Step 1

Go to the “Plugins” page.

Step 2

Click the “Add New” button.

Step 3

Search for “SVG Support”.

Step 4

Install and activate the SVG Support plugin by “Benbodhi”.

Step 5

Head over to your Media Library and click the “Add New” button on the Media Library Page.

Step 6

Click the “Select Files” button to upload the SVG file you wish to use.

And that’s it! You’ve successfully uploaded an SVG file!

You are now able to use your upload throughout your website like any other image. However, there are some essential things you need to take note of while using SVGs in WordPress.

Important note on using SVG files in WordPress

Below are helpful notes to guide you on avoiding some common pitfalls people face while using Scalable Vector Graphics on a WordPress site.

Note 1: Only allow trusted users to upload SVG files

It is best to permit only users you trust to upload SVGs to your site, as hackers can use such file types to trigger brute force or cross-site scripting attacks.

Fortunately, the SVG Support plugin you’ve just installed makes it easy to restrict upload permissions.

How to restrict upload permission with the SVG support plugin

Below are the steps needed to ensure only trusted users can upload SVG files on your website.

Step 1

Under the Settings Tap, Click on “SVG Support”.

Step 2

On the SVG Support Settings and Usage page, under the Settings section, check the box next to "Restrict to Administrators?"

Step 3

Save your changes.

That’s it!

Once you’ve ticked the “Restrict to Administrators” checkbox, only your site’s admin members will have the ability to upload Scalable Vector Graphic files.

Note 2: You rarely need to enable the plugin’s Advanced Mode

Based on the plugin’s guidelines, the advance option is not always needed.

The only time you may need to activate the advanced mode is if you want to:

• Embed a Scalable Vector Graphic file’s code.
• Use CSS to style SVGs.
• Use CSS or JavaScript to animate SVG graphics.
• Add multiple URLs inside a single SVG.
• Use unconventional shapes as links.
• Support inline SVG featured image.
• Forcefully render all SVGs inline.

However, if you only need to use your uploads as images, you do not need to activate the advanced mode.

Note 3: SVG works best for vector images.

SVG (Scalable Vector Graphics) is an XML (Extensible Markup Language)-based vector graphic format used to describe two-dimensional vector images.

As such, to get the best out of your uploads, ensure your SVGs are pure vector images — not raster images.

In other words, suppose you saved a raster image as a Scalable Vector Graphic and upload it to your WordPress site. The upload will be successful. However, you may encounter such issues as:

• The disappearance of your image on the live site.
• The pixelation of your image.
• Slow site — as the browser might need more time to render the raster-converted SVG image.

Therefore, to avoid unforeseen issues with uploads, ensure your graphics are pure vector graphics. Do not save raster images as SVGs.

Note 4: Vectorize your text graphics before saving them as SVG files

Suppose your image contains some text. In such a case, it is best to first vectorize the text before saving the graphics as an SVG file. Otherwise, your text's font on the live site may differ from the one you initially used in your image.

Why SVG texts sometimes display incorrectly on a website

An SVG image's text sometimes displays differently on a browser because a Scalable Vector Graphics file is a text-based file. Therefore, the browser will read any text in your SVG as actual text with specific font types.

Consequently, if the browser a user uses to view your website does not have the font you used, that browser will render the image’s text with a default font.

As such, the font will get changed, from the one you initially used, to the browser’s default.

Therefore, it is best to vectorize your graphic's text before saving it as an SVG file to prevent such erroneous occurrences.

How to vectorize text

You can use apps like Adobe Illustrator, Affinity Designer, or Inkscape to easily vectorize your text. Let's see how below.

How to vectorize text in Adobe Illustrator

Here’s how to vectorize your text with Adobe Illustrator:

1. Select the text you wish to vectorize.
2. In the menu bar at the top of the screen, click the “Type” tab.
3. Halfway down the Type menu, click the “Create Outlines” option.

How to vectorize text in Affinity Designer

Here’s how to vectorize your text with Affinity Designer:

1. Select the text you wish to vectorize.
2. In the menu bar at the top of the screen, click the “Layer” tab.
3. Towards the bottom of the Layer menu, click the “Convert to Curves” option.

How to vectorize text in Inkscape

Here’s how to vectorize your text with Inkscape:

1. Select the text you wish to vectorize.
2. In the menu bar at the top of the screen, click the “Path” tab.
3. At the top end of the Path menu, click the “Object to Path” option.

Wrapping up

Irrespective of WordPress’s security reasons for not permitting SVG uploads, the SVG Support plugin by Benbodhi provides a safe and easy way to use Scalable Vector Graphics in WordPress.

Whenever you use the plugin, remember to keep your website safe from malicious attacks by activating the plugin’s option to restrict SVG uploads to Administrators only.

Additionally, always vectorize your text graphics before saving them as SVG files. Such measures will help prevent unexpected alterations of your image's fonts by a user's browser.

And there we have it: a safe way to use Scalable Vector Graphics in WordPress successfully.

Thanks for reading, and have fun building great sites with SVGs!