Oh, sweet programming, my interest is to make you sweeter for all.
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.
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.
Go to the “Plugins” page.
Click the “Add New” button.
Search for “SVG Support”.
Install and activate the SVG Support plugin by “Benbodhi”.
Head over to your Media Library and click the “Add New” button on the Media Library Page.
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.
Below are helpful notes to guide you on avoiding some common pitfalls people face while using Scalable Vector Graphics on a WordPress site.
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.
Below are the steps needed to ensure only trusted users can upload SVG files on your website.
Under the Settings Tap, Click on “SVG Support”.
On the SVG Support Settings and Usage page, under the Settings section, check the box next to "Restrict to Administrators?"
Save your changes.
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.
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:
However, if you only need to use your uploads as images, you do not need to activate the advanced mode.
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:
Therefore, to avoid unforeseen issues with uploads, ensure your graphics are pure vector graphics. Do not save raster images as SVGs.
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.
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.
You can use apps like Adobe Illustrator, Affinity Designer, or Inkscape to easily vectorize your text. Let's see how below.
Here’s how to vectorize your text with Adobe Illustrator:
Here’s how to vectorize your text with Affinity Designer:
Here’s how to vectorize your text with Inkscape:
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!
Create your free account to unlock your custom reading experience.