Reply To: SVG's don't abide by the preview size

• andyunleash

• August 8, 2014 at 6:46 pm

Obviously a long time since this was posted but I’ve had the same problem quite a lot, especially when it comes to icons for elements and making them editable by the client and using SVG.

I decided to have a crack at a solution. It’s not pretty but it works after the first time the SVG has been uploaded/chosen.

Stick in your functions.php;

	function unleash_enqueue_scripts( $hook ) {

	    if( !in_array( $hook, array( 'post.php', 'post-new.php' ) ) )
	        return;

	    wp_enqueue_script(
	        'resizeSvg',                         // Handle
	        '/path/to/theme/js/resizeSVG.js',  // Path to file
	        array( 'jquery' )                             
	    );
	}
	add_action( 'admin_enqueue_scripts', 'unleash_enqueue_scripts', 2000 );

Then create a file in your JS folder called resizeSVG.js and add in the following;

jQuery(document).ready(function() {
    jQuery('.acf-image-image').each(function(){ 
        if(jQuery(this).attr('src').indexOf('.svg') > 0) { 
            jQuery(this).css('width', '128px'); 
        }
    });
});

This basically resizes any acf-image that has .svg in it down to 128px, obviously you can change that as needed.