For some reason, we keeping getting better and better WordPress updates from WordPress, but they still haven’t added SCG Functionality. This article assumes you understand what SVG images are and you’re simply trying to get them to work for themes. In general, this tutorial will walk through some plugin steps that will help you add SVG files. In detail, this article will show you how to do it specifically to the Foundry Theme, a very popular WordPress theme.
Here are the steps:
Install the SCV Support Plugin
Here’s the link: https://wordpress.org/plugins/svg-support/
This plugin will let you add svg files to media. Sure, you could update this in functions, but there’s more to it than that. Install this plugin. Do it.
Add the css class “sytle-svg” to all <img> elements that are svg files
Nice and easy right? Once added, they’ll show up. Here’s their example:
<img class="style-svg" alt="alt-text" src="image-source.svg" />
Update the template file in Foundry
Here are the steps for that:
- Determine what template file you’re using for your header.
- You can find out what that path is by heading to the theme folder and going to the \inc folder. It will probably be something like \inc\content-nav-bar.php
- If you can’t figure out which template file you are using, you can use the Plugin called “What the File” that will tell you all files associated with your page. It’s amazing.
- Update it by adding class=”style-svg” to the header <img> element.
- Update the css to make sure the height and width of the file is applying correctly. For my theme, the image height was set to “auto” and it was being translated as 0px, which meant no image. So, I gave the header logo another customer class called “svg-header-logo-dims” and made the height what I wanted. You may have to do this as well.
Here’s a pic of What the File:
Neat eh? Good Luck! And let me know how it turns out for you guys. SVGs are the FUTURE and should be used.