Issue with wp_get_attachment_image() and SVG file type

Question

I'm trying to use SVG image with wp_get_attachment_image() but it is generating very weird output at the front end of the website.

To support SVG file type I've first added the following function in my theme's functions.php file

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

Then inside my theme file I'm trying to use the SVG images like this:

$image_id = 3679;
echo wp_get_attachment_image( $image_id, array( 57, 58 ), false, array( "class" => "icon" ) ); 

So, it is supposed to generate an html like this:

<img width="57" height="58" src="http://example.com/wp-content/uploads/2016/09/something.svg" class="icon">

But instead it is generating HTML like this:

<img width="1" height="1" src="http://example.com/wp-content/uploads/2016/09/something.svg" class="icon" alt="briefcase">

As you can see due to the width="1" and height="1", that image is not showing up. But what I don't understand is where this 1 value is coming from as I'm not passing that.

Does anyone know a fix for this issue?

Answer 1

WordPress has trouble with the width and height attributes for SVGs. The width and height attributes can be removed for SVGs using this code adapted from trac ticket #26256 .

/**
 * Removes the width and height attributes of <img> tags for SVG
 * 
 * Without this filter, the width and height are set to "1" since
 * WordPress core can't seem to figure out an SVG file's dimensions.
 * 
 * For SVG:s, returns an array with file url, width and height set 
 * to null, and false for 'is_intermediate'.
 * 
 * @wp-hook image_downsize
 * @param mixed $out Value to be filtered
 * @param int $id Attachment ID for image.
 * @return bool|array False if not in admin or not SVG. Array otherwise.
 */
function wpse240579_fix_svg_size_attributes( $out, $id ) {
    $image_url  = wp_get_attachment_url( $id );
    $file_ext   = pathinfo( $image_url, PATHINFO_EXTENSION );

    if ( is_admin() || 'svg' !== $file_ext ) {
        return false;
    }

    return array( $image_url, null, null, false );
}
add_filter( 'image_downsize', 'wpse240579_fix_svg_size_attributes', 10, 2 );