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.

I just want to quickly note the reason why SVG files are not natively supported by WordPress is that they are actually XML-based files that can contain JavaScripts. That means that an SVG file could cause harm if the SVG file contains malicious scripts.

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.
  • Using PHP text or even JavaScript. This method can be useful if you, for example, have a beautiful gift card SVG. In this case, I would not use it as an SVG file like described above, but instead, copy the SVG code and insert it into Oxygen Builder code block. Then, you can replace any text or even image element (as long as the path has not been expanded in your SVG editors such as Adobe Illustrator, Sketch, or Figma).

Conclusion

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.

twitterfacebooklinkedin