How to upload SVG logo to WordPress website
Using SVG files instead of regular images can be a great way to reduce file size and get much sharper visuals for your designs.
We use SVG files wherever we possibly can, as we know that it will scale perfectly on all devices, and it will look particularly crisp on a retina display.
The most obvious use of SVG is for your logo since you want it to be particularly sharp and eye-catching.
Unfortunately, SVG files aren’t supported natively by WordPress, so in order to upload it to the media library, you’ll have to install a third-party plug-in that will allow you to upload the SVG files.
Lucky for us, there are a few different plug-ins that will allow you to upload the SVG files.
Enable SVGs with Safe SVG plugin
In order to upload SVG files to your WordPress media library, you could install the plug-in called Safe SVG, which we know is compatible with Oxygen Builder.
Once you have installed the plug-in, you’ll be able to upload SVG files like any other media files into the media library. When you have uploaded the SVG, you can use it like any other image in either Oxygen Builder or the normal WordPress content editor.
Protip: You can actually style SVGs using CSS since SVGs based on markup language just like HTML. You’ll be able to target the inner elements such as a pair or a polygon using either fill or stroke CSS properties. Read more here.
Animate your SVG
Something else to look into is that you can animate SVGs, and you can make SVG sprites that’ll load even faster if you use a lot of SVGs. There are two ways to achieve this:
- Manually animate SVG files with CSS. However, this will require some coding knowledge.
- Use tools such as Snap.svg to craft and animate your SVGs. With their library of animations, you can bring your SVG to life in no time. Obvious go for non-coders.
Despite the fact that WordPress doesn’t support SVG files out of the box, you can easily add this feature to it with a simple plugin. The power of SVGs lies in their scalability, small file size, and animation potential. They simply stay crisp and clean on every screen.