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