Issue with custom SVG in Social and Button Elemets

[referee]

Hi,

I am having the following issue. If I use Social or Button Element and set the Graphic Type to Image, then choose an SVG icon from the WP Media Library, it doesn’t appear. I tried to play with width and height but that didn’t help. That applies to both primary and secondary graphic images.

[christian]

Hey @referee,

I tried uploading an SVG to my site using latest Pro version and the SVG works. This means that it’s possible that the issue is with your SVG. Try downloading SVGs from free sites like this https://www.svgrepo.com/svg/532549/map-pin

[referee]

Hey @christian,

But my result is different. Should I paste my admin credentials in Secure Note here? I had to use .PNG instead for now.

[christian]

Hey @referee,

There might be plugins or custom codes preventing svgs from showing up in your site. Please copy your site to a staging server and provide us with staging logins and we’ll investigate.

Thanks.

[referee]

@christian,

On that site .SVG is currently allowed by the following code snippet:

/**
 * Allow SVG uploads for administrator users.
 *
 * @param array $upload_mimes Allowed mime types.
 *
 * @return mixed
 */
add_filter(
	'upload_mimes',
	function ( $upload_mimes ) {
		// By default, only administrator users are allowed to add SVGs.
		// To enable more user types edit or comment the lines below but beware of
		// the security risks if you allow any user to upload SVG files.
		if ( ! current_user_can( 'administrator' ) ) {
			return $upload_mimes;
		}

		$upload_mimes['svg']  = 'image/svg+xml';
		$upload_mimes['svgz'] = 'image/svg+xml';

		return $upload_mimes;
	}
);

/**
 * Add SVG files mime check.
 *
 * @param array        $wp_check_filetype_and_ext Values for the extension, mime type, and corrected filename.
 * @param string       $file Full path to the file.
 * @param string       $filename The name of the file (may differ from $file due to $file being in a tmp directory).
 * @param string[]     $mimes Array of mime types keyed by their file extension regex.
 * @param string|false $real_mime The actual mime type or false if the type cannot be determined.
 */
add_filter(
	'wp_check_filetype_and_ext',
	function ( $wp_check_filetype_and_ext, $file, $filename, $mimes, $real_mime ) {

		if ( ! $wp_check_filetype_and_ext['type'] ) {

			$check_filetype  = wp_check_filetype( $filename, $mimes );
			$ext             = $check_filetype['ext'];
			$type            = $check_filetype['type'];
			$proper_filename = $filename;

			if ( $type && 0 === strpos( $type, 'image/' ) && 'svg' !== $ext ) {
				$ext  = false;
				$type = false;
			}

			$wp_check_filetype_and_ext = compact( 'ext', 'type', 'proper_filename' );
		}

		return $wp_check_filetype_and_ext;

	},
	10,
	5
);

If it is not in line with your approach for reflecting .SVG in the elements mentioned, please let me know. But in all other cases I had no problems with the use of .SVG on the site. They work as they should.

If it looks good to you, I will think about how to arrange the staging environment. Currently it is not set.

[christian]

Please try removing the code and use Safe SVG plugin to upload SVGs to your Media. Pro has a buit-in code that allows SVG upload but depending on the server setup, sometimes, the Safe SVG is needed.

[referee]

Hey @christian,

That worked out well, thanks.

[christian]

Glad to hear that.