The Challenge

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.

TheĀ Solution

Add additional JQuery javascript to find all SVG’s in a page to assign a class as identifier for the plugin to load the SVG inline instead of just a normal image link.

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.

The Details

I love the SVG Support plugin by Benbodhi and all the functionality it offers. I mainly use Divi child themes for my WordPress site designs. The benefit of SVG Support is that I now can incorporate SVG via the library but when using the divi-builder I can’t add the required class in many instances, e.g., when adding a Logo Image URL or a Header Image URL in a fullwidth header module. So basically I was left with only getting full benefit of the plugin when adding a SVG in the content section of the module. As a result SVG’s containing javascript animation inside the svg document is loaded and processed as a static image. Initially I build a custom fullwidth header module for Divi to allow adding classes to the logo and header images but, due to Divi 3’s restrictions, the custom module is not usable when using the visual builder in the front end. Using this method would mean that would I would basically have to

  1. build a custom module of almost all the Divi modules that allow including images, which would be a very tedious and lengthy excercise, and
  2. My non-developer clients and myself, would lose the benefits of using the visual builder.

At this point, despite my limited knowledge of php and javascript, I decided to “tinker” with the SVG Support plugin to see if I could find an alternative method to overcome the challenges.

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> 

instead of

<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.

The Solution

Added functionality:

  • Added option whether to use expanded or minified Javascript file in advanced settings.
  • 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.

Conclusion

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.

Links

 

Project on Github

The SVG-Support plugin on WordPress.