Scalable vector graphics and WordPress is a slightly complicated story. We all know that using visuals on your website is important. Images are everywhere. Be it to make your content more engaging and shareable, as portfolio images, or maybe just your site logo.
Thankfully, WordPress supports many image formats for that purpose, including JPG, PNG, and GIF. However, one it doesn’t support without some coercion is scalable vector graphics (SVG). Yet, they are an image format that is growing rapidly in popularity.
In this article, we want to talk about scalable vector graphics in WordPress. We will tell you what SVG are, why it is a good idea to use them and why WordPress doesn’t support them from the get-go. After that, we will go over how to make this file type work with the platform after all.
Sounds good? Then let’s get going.
What Are SVG and Why Use Them?
Scalable vector graphics are not actually an image format. Instead, they represent a markup language to create two-dimensional vector images. It’s an open standard that has been around since 1999 and become more popular with the advent of mobile design in recent years.
However, at the time of this writing, it’s only employed by 4.3% of all websites. Yet, this number is likely to keep rising for several reasons.
Benefits of Scalable Vector Graphics
In contrast to JPGs, GIFs, and other image formats, SVG files offer some marked benefits:
- Scalable — As the name suggests, SVG images can be scaled. Shrink or increase them in size and the quality stays the same (including on retina screens). In contrast to that, rasterized images look blurry as soon as you display them larger than the actual image size. Of course, scalability makes SVG particularly suitable for responsive design.
- Smaller file size — Since the files are made up of scalable vectors, not pixels, they are usually much smaller because less information needs to be saved. That, in turn, will make your website faster.
- Supported by all browsers — All major browsers and mobile browsers know how to deal with SVG. That means the majority of visitors will have no problem displaying them. If you still wish to support the edge cases, can do so by providing a fallback image.
- Recognized by Google — In case you are worried that using SVG will hurt your SEO (after all, using images is part of on-page optimization), don’t be. Google indexes scalable vector graphics the same way as other images and will include them in its image search.
- Can be animated — Using CSS you can add animations to vector graphics. This can make for some interesting applications. We will not cover this here, but you can read this article for more.
So, as you can see, there are good points to using scalable vector graphics on your WordPress site. However, are there also arguments that speak against it?
Drawbacks of SVG
Of course, not all is great about this image format and they also pose some challenges:
- Hard to create — As we will see below, without a background in graphic design, you might have a hard time creating SVG files by yourself.
- Not suitable for complex images — The SVG format is perfect for logos and icons, however, not for complex pictures like photographs. When SVG get too complex, they tend to become even larger in size than their pixel counterparts.
- Security concerns — This is the main reason why scalable vector graphics are not supported by WordPress out of the box. There is actually a long-standing discussion in the Make WordPress channel about it. Since SVG are XML-based, they open for malware injection, which is also why support for SVG needs to be activated safely. More on that below.
- Not supported by social networks — Since Twitter, Facebook and other social networks don’t support SVG, they are not quite suitable for featured images and the like. If you do want to use them that way, you would have to upload a dedicated pixel version via Yoast SEO or a similar plugin. It’s up to you to decide whether that’s worth the hassle.
Since scalable vector graphics offer both benefits and challenges, many websites use a hybrid approach. That means they use SVG for logos, background patterns, icons and other simple things and pixel-based images for more complex ones like blog post thumbnails.
How to Create Scalable Vector Graphics for Your WordPress Website
As mentioned in the last section, one of the problems with SVG is their creation. In contrast to other images, they are more complicated to produce.
For example, anyone can use a camera to create images for their own site. Plus, in times of Instagram and ubiquitous image editing apps, doing basic touch up is also within the grasp of most people.
However, to create scalable vector graphics, need to know your way around more complex software such as Adobe Illustrator or Inkscape (which is free and open source, btw). There are also web-based solutions like Vectr and SVG-edit (the latter is made by Google).
Of course, it’s doable, however, unless you are a graphic designer with experience in this area, creating your own SVG logos and icons will involve a steep learning curve. For that reason, it might not be a bad idea to work with a professional.
Yet, there are also some alternatives out there. For example, if you already have a logo in a pixel version, you can use tools like Vector Magic to convert it to vectors. There is also Patternico which lets you create downloadable SVG background patterns easily.
Plus, don’t forget these large collections of free vector icons you can use for your website:
That way, don’t need to create SVG yourself but can still use the image format on your site. How exactly do you do that? Let’s talk about that next.
How to Safely Use SVG in WordPress
As already mentioned, WordPress does not support SVG out of the box. Yet don’t despair, we have several ways of changing that — manually and via plugin.
However, as the title of this section suggests we are looking for the safest way to use SVG in WordPress. You remember that they can contain malicious code?
Since we don’t want to help anyone hack our website, we need a way to sanitize uploaded SVG. That means cleaning the file code to eliminate injections, code conflicts, and errors.
Let’s go over how to do that now, we will start with the plugin route.
Method 1: Enable SVG Support in WordPress via Plugin
One of the simplest ways to enable SVG support is using a plugin. We have several we can choose from, including SVG Support, which is the most popular, and Scalable Vector Graphics (SVG).
However, we will go with Safe SVG. It’s the only one on the roster that explicitly sanitizes SVG files during upload. It also enables the image format for WordPress and adds support for it to the media library.
Setup is easy. Just install and activate the same way you would any other plugin. Once done, that’s it. No additional settings necessary.
The plugin also comes with a Pro version. It contains important options like the ability to limit the upload of SVG to administrator accounts. This makes a lot of sense, especially for sites with large editorial team with differing technical knowledge.
However, in my opinion, the premium version is quite pricey. SVG Support also lets you limit uploads by user group out of the box. So, if this is a crucial setting for you, you might be better of using that plugin.
Method 2: Enable SVG Support in WordPress Manually
The second way to set up support for scalable vector graphics is via functions.php. Unfortunately, doing it this way is less safe than using the plugin mentioned at the top as it does not include file cleaning and allows SVG upload indiscriminately.
If you still want to go this route, find the functions.php file in your active theme’s folder. Download it, edit and add the following code:
function enable_svg_upload( $upload_mimes ) {
$upload_mimes['svg'] = 'image/svg+xml';
$upload_mimes['svgz'] = 'image/svg+xml';
return $upload_mimes;
}
add_filter( 'upload_mimes', 'enable_svg_upload', 10, 1 );
Now save your changes and re-upload the file. Done. As mentioned, not the safest option but I wanted to include it here for completion’s sake.
Test SVG Support
Finally, it’s time to check whether everything is working correctly. Whether you used a plugin or the manual way, you should now be able to upload SVG files.
To test this, get a free SVG icon or something similar from one of the sources stated above. Then, log into your site and go to Media. Here, try uploading your new SVG file. If all went well, it should look similar to this here:
Congratulations! Well done.
Scalable Vector Graphics in WordPress – The Summary
SVG are an interesting web design resource with many benefits. They are small in size, scalable, well supported by browsers and search engines and ready for animation. Yet, this file type is not without drawbacks, most prominently potential security risks.
In this article, we have learned ways to create your own SVG files. We have also gone over ways to safely use them in WordPress and enable their upload. As a consequence, you can already use this file type on your website, even if WordPress doesn’t support them natively.
That leaves the question, will SVG support ever make it into core? Until there is a way to deal with the security issues, it doesn’t look likely. However, with the rise in popularity of scalable vector graphics in web design, the community will have to find a solution sooner or later. Until then, you have tutorials like this to make it work.
How do you handle SVG files on your WordPress site? Any additional tips? Let us know in the comments section below!
2 Comments