SVG's Not Rendering for Image Field Type

[kp-emagine]

Version

• Carbon Fields: v3.2.1
• WordPress: 5.6
• PHP: 7.4

Expected Behavior

SVG's should render in image preview for the field.

Actual Behavior

The image does not render.

Container definition

Theme Options container, with the following field defined:
Field::make( 'image', 'kpfw_logo_image', __( 'Logo Image' ) )
                    -> set_value_type( 'url' )

Steps to Reproduce the Problem

1. Click 'Select Image' and browse to either an existing SVG file, or upload a new one Screenshot: https://prnt.sc/wnhssr
2. Select the image, then click 'Use Image' Screenshot: https://prnt.sc/wnht59
3. Doc icon shows with the name of the file. Hit the Save button on your theme options page, and it disappears Screenshot Before Save: https://prnt.sc/wnhtu6 Screenshot After Save: https://prnt.sc/wnhuqb

Comments

The value of the field url is indeed saved. I can see it by inspecting the element and viewing the hidden field value for it.

Please also do note that I am allowing SVG uploads for my site, with:

// add the new mime type to the allowed uploadables
        add_filter( 'upload_mimes', function( $_mimes ) {

            // add svg as a mime type
            $_mimes['svg'] = 'image/svg+xml';
            $_mimes['svgz'] = 'image/svg+xml';

            // return the full array
            return $_mimes;
        } );

        // check and allow the file type
        add_filter( 'wp_check_filetype_and_ext', function( $data, $file, $filename, $mimes ) {

            // check the filetype
            $filetype = wp_check_filetype( $filename, $mimes );

            // return the proper setup for the file
            return [
                'ext'             => $filetype['ext'],
                'type'            => $filetype['type'],
                'proper_filename' => $data['proper_filename']
            ];

        }, 10, 4 );

[aaronware]

@kp-emagine I haven't tried to duplicate this, but it may just be a styling issue? Where the SVG doesn't have a defined canvas size and it's basically becoming a 0px width height element. So it could be solved with some CSS?

[kp-emagine]

@kp-emagine I haven't tried to duplicate this, but it may just be a styling issue? Where the SVG doesn't have a defined canvas size and it's basically becoming a 0px width height element. So it could be solved with some CSS?

Appreciate the checkin... i'm not seeing any canvas, img, or other tag suggesting that the SVG is getting outputted to the page. The only indication I am seeing is, the value of the hidden input field contains the correct path to the SVG.

Now that I think more on it, maybe what I can do is a check for the file type on this field, and write up some jquery to inject the display of it.

[aaronware]

@kp-emagine thanks for the clarification. Yep you could definitely hook in using jQuery/vanilla javascript as needed but it should be able to pull in the actual SVG, I wonder if it's because there isn't actually a preview being output because it's not really a thumbnail. This could be a good first issue and take a look at how one of the popular use svg plugins are handling filtering the post_thumbnail within the admin, as I think that's potentially the missing part of the filtering you are doing. Though it could be something added to carbon fields as well

[kp-emagine]

@kp-emagine thanks for the clarification. Yep you could definitely hook in using jQuery/vanilla javascript as needed but it should be able to pull in the actual SVG, I wonder if it's because there isn't actually a preview being output because it's not really a thumbnail. This could be a good first issue and take a look at how one of the popular use svg plugins are handling filtering the post_thumbnail within the admin, as I think that's potentially the missing part of the filtering you are doing. Though it could be something added to carbon fields as well

:) Thought that as well... however, the code to get the thumb to render in the media library is already in place. Since it's just JS and CSS pulled in with admin script/style enqueue's it should be already available.

I'll keep you posted how I make out with the JS pull-to-render :)

[kp-emagine]

This should do the trick, just in case there's more than 1 SVG in a field, it will loop them so we've got a valid remover ;)

jQuery( document ).ready( function( $ ) {

    // get the SVG field
    var _svg = jQuery( 'input[value*=".svg"]' );

    // since we may have more than 1, run a loop
    _svg.each( function( _idx ) {

        // get the elements value
        var _val = jQuery( this ).val( );

        // the filename
        var _filename = _val.split( '/' ).pop( );

        // build a container
        var _container = `<div class="cf-file__content" data-id="` + _filename + _idx + `">
            <div class="cf-file__preview">
                <img src="` + _val + `" class="cf-file__image" />
                <button onclick="rmv_Image('` + _filename + _idx + `');return false;" type="button" class="cf-file__remove dashicons-before dashicons-no-alt"></button>
            </div>
            <span class="cf-file__name" title="` + _filename + `">` + _filename + `</span>
        </div>`;

        // inject it right after the field
        jQuery( this ).after( _container );        

    } );

} );

function rmv_Image( _which ) {

    // remove the element
    jQuery( '[data-id="' + _which + '"]' ).remove( );

}

[jorostoyanov]

Hi Guys,

I am testing with v3.2.3 and the Safe SVG plugin (https://wordpress.org/plugins/safe-svg) without any issues.

Can you try this scenario and let me know the result?

[jorostoyanov]

Closing due to inactivity.

Open another ticket if the issue persists :-)

[korn806]

For SVGs to render properly in the CF preview you need to add SVG MIME Types to functions.php:

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

and to .htaccess (after the line, #End WordPress)

# Add SVG Mime Types
AddType image/svg+xml svg
AddType image/svg+xml svgz 

See https://stackoverflow.com/questions/19769294/wordpress-svg