WordPress natively doesn’t support the use of scalable vector graphics (SVG). This can be enabled by either adding a bit of code to your theme or by installing a plugin, the most popular one in the WordPress plugin repository being SVG Support by Benbodhi. The shortcoming is that the plugin lacked the ability to convert SVG image links created in visual builder, i.e. Divi, Beaver Builder, etc., to inline SVG images in Divi honouring the embeded animation.
In the video clip at 04:46 you will notice that when using the fullwidth header, containing an animated SVG in the content box, the header image and the logo image, despite all 3 SVG’s being displayed successfully, only the one in the content box runs its embedded animation. Activating the Power Override option in the advanced settings section of the modified plugin overcomes this with additional jQuery looking for any SVG inside an image tag that doesn’t contain the class for inline SVGs, then adds the class allowing the rest of the jQuery script, from the original author, to convert a linked SVG to an inline SVG. The video clip at 6:53 shows after activating the power override option, the header and logo image is now also animated because they’re deliverd as inline SVGs and not just a standard image link.
- build a custom module of almost all the Divi modules that allow including images, which would be a very tedious and lengthy excercise, and
- My non-developer clients and myself, would lose the benefits of using the visual builder.
SVG Support issues encountered
1. Changing Class Name
In advanced mode when set to automatically add the class it’s done via the “bodhi_svgs_auto_insert_class” located in ‘attribute-control.php’, thus when a new post/page is created containing svg’s the standard html attributes inside the image tag is stripped and the default class “style-svg” or the custom class from the plugin settings, e.g. “my-class”, is added. The caveat with this method is that if at any point the class gets changed, in the SVG Support advanced settings, posts or pages created previously still have the previous class and is now ignored, thus not converted into inline svg’s, as the plugin looks for images with the newly defined class.
2. Featured Image
When adding a featured image to post/pages the class does gets added to the image, however in the front end the image still gets rendered as an image and not an inline svg, e.g.
<a href="http://domain.com/2017/07/20/hello-world/" class="entry-featured-image-url"> <img src="sample.svg" class="style-svg" /> </a>
<a href="http://domain.com/2017/07/20/hello-world/" class="entry-featured-image-url"> <svg>..</svg> </a>
3. Divi Specific Issues
Using Divi or Divi child themes or using the Divi Builder Plugin to create content in most cases doesn’t allow for the CSS class the plugin requires to the image.
- Added power override option in advanced settings which assigns svg class to all images containing a svg via jQuery.
- Added online tool links for SVG compression and SVG animation.
What’s the benefit?
You can now use SVG images, even those with internal animation, throughout your Divi build site without having to use or purchase specialised modules.
Being satisfied with the result and wanting to share back to the open source community, I suggested my modifications to the original author whom integrated it in his following release (version 2.3.11) and accredited me for contributing.