Home Forums Bug Reports SVG's don't abide by the preview size Reply To: SVG's don't abide by the preview size

  • 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' ) ) )
    	        '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() {
            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.