5

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?

6

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 ); 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.