Use SVG Logo & Icons instead of PNG on WordPress websiteUpdated On June 18, 2020 June 18, 2020 -Written By
Is your PNG or JPEG logo too big in file size and look blurry? It is time to switch to SVG format for logo and icons on your WordPress websites. Not only these will load faster, but they will also look super crisp on all devices.
Benefits of using SVG logo & icons
SVG (Scalable Vector Graphics) offer a lot of advantages and hence becoming a new normal when it comes to logos and icons on websites.
- They are very small in size when compared to JPEG or PNG version. For example, 12KB PNG logo would be just around 4KB in SVG format.
- They remain crisp and clear with no pixelation on all devices even on high-resolution screen of mobile phones.
- Most modern browsers like Google Chrome, Firefox support the SVG format.
SVGs won’t upload on WordPress
By default, if you try to upload an SVG format image – it won’t load and you will get an error. SVG contains XML markup language which can be exploited and result in a few security issues. Hence, SVG uploads are by default blocked on WordPress websites.
Steps to use SVGs on WordPress websites
Want to get started with using SVGs on WordPress websites? Well, this is way easier than what you would have thought.
- Install the Safe SVG plugin on your WordPress website.
- After activating this plugin, you can upload SVG logo or icons like you normally upload images on WordPress website.
If you want more control like which user should be allowed or disallowed for SVG uploads, then the pro version of this plugin should come handy. There is another plugin called SVG Support with similar functionality.
Bonus: Generate SVG logo images
If you have a logo in vector format, you can easily generate SVG version format using Adobe Illustrator, Adobe Photoshop, or any other graphic design software.
For icons, there are a lot of free and premium resources to download SVG Icons for various types, shapes – ready for your specific requirements.
Thanks for so rich content. It will help me a lot. The website with SVGs you’ve shared is awesome. We will be revising our website soon. One of the factors of slow loading is some of png images we must have. I will try to replace them by svg files.