SVG Images not showing

[AdventDeo]

Hi there, I just started building https://avt.5ab.myftpupload.com/

I wanted to use SVG files for custom icons. I had to add this to my functions.php to be able to upload it:

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

After successfully adding the SVG file, I tried adding it via builder. I don’t know why, it won’t detect the file.

Please help.

[nabeel]

Hi Amadeo,

Thank you for reaching out to us. For security reasons WordPress restricts uploading the svg images, instead of your custom code, I’d recommend you to use a third party plugin that adds svg support in WordPress. Here’s a tutorial that you can follow to enable the svg support https://www.wpbeginner.com/wp-tutorials/how-to-add-svg-in-wordpress/

After the plugin installation and once you upload the svg image in the media library, add an Image element in the Content Builder, select your uploaded svg image from the media library and then make sure to set the Base Width in the Image element’s settings (see screenshot)

Please note that we do not provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script.

Let us know how this goes!

[AdventDeo]

Hi, thank you for the response. So it worked fine now but I guess it turned the svg into an img? I want to do CSS styling to the svg’s fill. The plugin SVG Support forum has someone asking the same question: https://wordpress.org/support/topic/advanced-mode-change-svg-color/

And the answer was inline SVG is not rendered by the theme. Is this the same case as it is in PRO?

[tristup]

Hi Amadeo,

SVG is actually a tag, which is a pure XML and can’t be assigned to another tag. I would suggest you copy the URL from the Media and use it as an Image src in Text or Raw Content element as shown in the screenshot.

I would also suggest you go through the following links on how you can use the SVG.

Using SVG | CSS-Tricks

A Primer to Front-end SVG Hacking – David Bushell – Freelance Web Design (UK)

Hope it helps.
Thanks