Tips to use SVG image in WordPress
Scalable Vector Graphics (SVG) is a form of vector graphics. They constitute a display of XML codes that are used to create geometric vectors. So, why SVG? In comparison with JPGs, GIFs, PNGs, and other image formats, SVG have more advantages. First, SVG can be scaled - you can reduce or enlarge their sizes while still maintaining the quality of an image. Secondly, SVG take up less space because they are composed of vectors that need less information to be stored - an aspect that enables sites to load faster.
The other reason to use SVG is that they are compatible with all browsers and are Google friendly. Lastly, it is possible to animate SVG with CSS (Cascading Style Sheets), which makes for unique effects. But SVG do not come without challenges - this image format is not easy to create and is not ideal for complicated images. For logos and icons, SVG are perfect since they are less complex. However, they can increase in size than the corresponding pixel images as complexity increases.
The biggest challenge of using SVG is security. Since they are created on XML, SVG are vulnerable to malicious attacks. This is why WordPress does not support SVG without coercion. Despite these drawbacks, SVG' popularity has been growing fast because their benefits outweigh their disadvantages. This highlights the importance of being able to safely use SVG on WordPress without jeopardizing the security of your website.
But how then can you do this? Here are three tips on how to use SVG images in WordPress:
1. Enable SVG support in WordPress via plugin
Using plugins is one of the simplest ways to enable SVG support and the process of setting them up is not as complicated. Like any other plugin, you only need to download, install and activate the plugin. SVG Support, Scalable Vector Graphics (SVG) and Safe SVG plugins are among the most preferred SVG plugins. Although there are many other SVG plugins to choose from, avoid downloading the first free SVG plugin you come across.
This is because, on several occasions, security risks associated with integration of SVG files have been highlighted. For instance, a JavaScript with SVG embedding is reported to have made a skype call. The idea behind using plugins is to sanitize SVG to counter such risks. This is why it is advisable to use a safe SVG plugin as this is the only way to sanitize SVG files thoroughly during upload.
You can download Safe SVG for free from the WordPress repository. Alternatively, you can find it on your WordPress dashboard by searching the “Add New” plugins. With only a few clicks, your Safe SVG plugin will be up and running - no more settings are required. The plugin comes in both free and premium models.
The premium version comes with more options that are not available in the free mode. One such option is the restricted ability to upload SVG in a way that only admins have the privilege. This is important for sites that feature a multi-dimensional editing technique.
2. Enable SVG support in WordPress Manually
This involves modifying your site's functions.php file. Here, no installation of plugins is required. Enabling SVG support using this method does not include file cleaning. Instead, this method works by facilitating SVG upload without discrimination. As such, it is a less safe approach compared to the use of plugins. To make it safe, sanitize your code manually. Modifying your site's functions.php file may seem difficult in the beginning. But, it is as simple as installing plugins once you do it practically. An FTP Client software and the login credentials on your site server are the only things you need to do it.
To initiate this process, login with your credentials and go to the root folder. You will see several folders labeled wp-content, wp-admin, and wp-includes among others. Go to the wp-includes folder and locate the functions.php file. Right-click the file to view or edit - the file will open on a default text editor. Scroll to the bottom of the page and enter the code.
Save the changes that you have effected and close the editor. Go back to the FTP client and confirm the changes you have made. You can now test the SVG support to ensure it is working well. Log onto your website, go to Media then try and upload your SVG file. If the upload is successful, your SVG support has been enabled successfully. This test works the same way regardless of the method used to enable SVG support.
3. Use CSS to Animate SVG images
SVG animations are important when it comes to improving your website's user experience. However, animating them is a complicated process especially if you are not experienced in using CSS. Online tutorials can show you how CSS helps with animation of SVG. These tutorials break the animation process into simple steps that are easy to follow. In addition, consider reviewing examples of vector art and see how creative you can be.
Apart from CSS animations, there are other ways SVG graphics can be animated online. One of them is SMIL, a native SVG animation specification. Web Animations API and WebGL are the other two options. However, CSS is the most preferable of the other three ways because, with CSS animation, you avoid overloading your service with big libraries for icons and loaders.
Conclusion
There is a rising need to address safety concerns surrounding the use of SVG and WordPress. This is due to the significant rise in the popularity of SVG in web design. There are no indications of this happening soon, a solution has to be found. The three approaches discussed above can help you overcome the challenges associated with the use of SVG in WordPress. The use of plugins is the obvious choice for anyone who does not want to mess with codes. But there is also the option of changing the functions.php file for those who would rather not install extra plugins.
