SVG Compatibility?

aedesign · February 9, 2016, 8:46am

http://wendywood.flywheelsites.com/contact/

Noticing that my svg files are not showing on desktops unless I use the text editor module. When viewing on my iPhone 5, they show up just fine in several instances: photo & call out modules + text editor.

I’m using svg 1.1 and the settings listed here: http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/

Icons are showing on FF & Safari but not the latest Chrome. And not all of the icons on showing on Firefox either.

Screenshots:
http://goo.gl/e297fj Chrome
http://goo.gl/UCGM4w Firefox
http://goo.gl/a4YPqV Safari
http://goo.gl/UxYVcj iPhone 5

Any insight would be so helpful Thank you!!! I’ll provide access info separately.

aedesign · February 9, 2016, 8:48am

[Content Hidden]

bencarlo · February 9, 2016, 9:56am

Hey Aedesign,

I tried creating a new page on your site, added one of your SVG images using the native WP editor, and it seems the same problem is happening. Chances are, the problem is with WP in general. Can you try deactivating all plugins and see if the same problem is happening on the native WP editor?

Ben

aedesign · February 9, 2016, 11:27am

All plugins are deactivated and I can not get the svg files to show up in BB modules. However the text editor does work. See the Safeway logo here: http://wendywood.flywheelsites.com/clients/. The second column also has the Safeway logo within the photo module and it only show on my iPhone and Safari

Danny · February 9, 2016, 2:05pm

Hi Aedesign,

How are you even able to upload SVG files to your site, as I was of the understanding that WordPress doesn’t support the option to upload .svg files for security reasons?

Have you added the MIME type via a custom function?

Thanks,
Danny

aedesign · February 9, 2016, 2:46pm

Yes, uploading is just fine. Did you see the links sent over previously with screenshots of the svg files in different browsers? In addition, here is my website: http://www.aedesignco.com/expertise/ This page uses all svg files and looks fine on desktop, but missing on mobile.

I’m not sure how to do this: “MIME type via a custom function”.

Danny · February 9, 2016, 4:25pm

Hi Aedesign,

When you say they upload just fine, have you added any custom code to support the upload of .svg? As out-the-box, WordPress doesn’t support the option to allow uploads of .svg due for security reasons. If you can upload an .svg, apparently it may not display.

I think your issue could be related to this. Therefore, I recommend you either install a plugin that provides support for .svg files or read this article.

Then see if this resolves your issue.

Thanks,
Danny

aedesign · February 11, 2016, 8:17am

I actually had that script in there already.

So the conclusion as it seems is this: there is no issue succsessfully uploading svg files to the media library or using the svg via the text editor using this script. However, trying to use svgs with any of the Beaver Builder modules is unsuccessful.

bencarlo · February 11, 2016, 8:31am

Hey Aedesign,

Can you try using the same SVG images on the native WP editor, i.e., on a page without using the BB page builder? I’m thinking the problem is with WP in general and not something specific to BB.

Ben

aedesign · February 11, 2016, 9:40am

Its not an issue with WP. That works even when using the text editor module: http://wendywood.flywheelsites.com/clients/. Its when trying to use svgs in any of the Beaver Builder modules. I’ve already granted access to the site if you wanted to look around. Its in a private message reply from previous.

Danny · February 11, 2016, 2:36pm

[Content Hidden]

aedesign · February 11, 2016, 2:42pm

It seems that we are at the same resolution that I concluded previously. Its just not possible to use svg using Beaver Builder advanced modules. I have successfully added them without any additional mark up simply by inserting an image from the media library using the text editor. Please confirm. Thanks!

Danny · February 11, 2016, 3:18pm

Hi Aedesign,

No without that markup, I am not able to view one of your svg files using the add media option via the native WP editor. I have recorded myself on your site adding an svg from you library and when I view the page, it doesn’t display.

https://cloudup.com/cOfP-761rtL

Therefore, can you tell me what you’re doing differently, please?

Thanks,
Danny

aedesign · February 11, 2016, 3:34pm

I always scale my images down using CSS anyways. So I had added a class called “icons” to the rows where my svg files lived. Then, using the BB text editor module, added the svg via the insert from media library. And of course set the css to:

.icons img {
width: 150px;
}

Can you confirm that you see 4 icons here: http://wendywood.flywheelsites.com/
4 here: http://wendywood.flywheelsites.com/services/
6 here: http://wendywood.flywheelsites.com/approach/
4 here: http://wendywood.flywheelsites.com/contact/

Thank you!

Danny · February 11, 2016, 4:53pm

Hi Aedesign,

Just checked all four links in Chrome, Safari and FireFox and icons are appear on three browsers.

Thanks,
Danny

aedesign · February 12, 2016, 12:46pm

FINAL CONCLUSION (for other Beavers)…

.svg does not work with Beaver Builder modules Add some code to your config and then you can upload them to your library successfully. Use the text editor to add your svg and makes sure to resize it with CSS for it to show on all browsers.

Danny · February 12, 2016, 12:50pm

Hi Aedesign,

Thanks for sharing, but your post above isn’t entirely accurate. This isn’t an issue with our BB modules. I demonstrated that this issue also occurs in the WordPress editor for a page or post.

Out-the-box, WordPress does not allow the upload of .svg files for security purposes. If you do manage to get one uploaded, it is likely not going to display. To add support you either need to install a plugin that provides this functionality or use filter in your child themes functions.php file.

Once you have completed the above, you will then need to include some custom styling to target .svg files giving them a width and height. Upon completing these steps, there is no problem with .svg displaying in either the WordPress editor or our BB modules.

Thanks,
Danny

aedesign · February 12, 2016, 1:52pm

Sorry for all the back and forth on this. I did add the following filter in the functions.php file, added custom styling in my CSS and was able to get the svg to load perfectly using the text editor but never one of the BB modules. Can you provide a sample of this functioning somewhere or let me know what step I am missing to get all of this to work with BB?

functions.php code:

//add_filter('upload_mimes', 'cc_mime_types');

function wpcontent_svg_mime_type( $mimes = array() ) {
  $mimes['svg']  = 'image/svg+xml';
  $mimes['svgz'] = 'image/svg+xml';
  return $mimes;
}
add_filter( 'upload_mimes', 'wpcontent_svg_mime_type' );

My CSS (perhaps this is the problem??)

.icons img {
width: 150px;
}

Are you saying that I need to target svg specifically with CSS. If so, do you have a sample. What I am targetting above is a svg file. Thanks again! Really appreciate your time.

Danny · February 12, 2016, 2:14pm

Hi Aedesign,

I added similar code to yours via my child themes functions.php file. I then added the following CSS to target .svg files. I added the code in a previous response as well. You must have missed it

img[src$=".svg"] {
  width: 100% !important;
  height: auto !important;
}

I then add one of your svg to a Photo module and the svg displays as intended.

Cloudup

So the issue was that you were sizing your svg using the icon CSS you added, but this wasn’t being applied to a module when you tried your svg there.

Thanks,
Danny