Make WordPress Core

#56863 closed defect (bug) (maybelater)

Adjust SVG image thumbnail size on media listing page

Reported by: sumitsingh's profile sumitsingh Owned by:
Milestone: Priority: normal
Severity: normal Version: 6.0.3
Component: Media Keywords: has-screenshots close
Focuses: ui, css, administration Cc:

Description (last modified by costdev)

Hi ,

when i am allowing to upload SVG image then image is not showing on media listing page.

You can see mentioned SS and solution code with added width: 60px; in class

table.media .column-title .media-icon img {
    max-width: 60px;
    height: auto;
    vertical-align: top;
    width: 60px; // Proposed solution
}

Attachments (3)

Media-Library-‹-wpextended-—-WordPress.png (146.5 KB) - added by sumitsingh 18 months ago.
SVG issue on Media listing
Media-Library-‹-wpextended-—-WordPress (1).png (149.4 KB) - added by sumitsingh 18 months ago.
Adter added width 60px issue fixed
Screenshot-from-2022-10-20-14-07-40.png (312.9 KB) - added by sumitsingh 18 months ago.
check image width attribute things. why coming 1px width & height on svg image?

Download all attachments as: .zip

Change History (17)

@sumitsingh
18 months ago

SVG issue on Media listing

#1 @costdev
18 months ago

  • Description modified (diff)

@sumitsingh
18 months ago

Adter added width 60px issue fixed

#2 @costdev
18 months ago

  • Keywords reporter-feedback added

@sumitsingh when i am allowing to upload SVG image

Can you confirm how you're doing this so that reproduction steps are accurate? Thanks!

#3 @sumitsingh
18 months ago

Hi @costdev,

lot's of plugin available, but i have used https://wordpress.org/plugins/wpextended/ plugin and enbale "SVG File Upload" Module.

I am sharing Steps here.

1) Install plugin - https://wordpress.org/plugins/wpextended/
2) Go to WP Extended menu and enbale "SVG File Upload" Module.
3) Go to media page and upload SVG image
4) issue happning with list view. look like this(abc.com/wp-admin/upload.php?mode=list)

I hope helpful above things

Thank you

Last edited 18 months ago by sumitsingh (previous) (diff)

#4 @kebbet
18 months ago

  • Resolution set to invalid
  • Status changed from new to closed

This should be handled by the provider of the feature IMHO, in the example that is ”WP Extended”.

So suggestion: close as wontfix.

#5 @sumitsingh
18 months ago

  • Resolution invalid deleted
  • Status changed from closed to reopened

Hi @kebbet ,

Even issue when i am doing with filter.

<?php
// Allow SVG
add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) {

  global $wp_version;
  if ( $wp_version !== '4.7.1' ) {
     return $data;
  }

  $filetype = wp_check_filetype( $filename, $mimes );

  return [
      'ext'             => $filetype['ext'],
      'type'            => $filetype['type'],
      'proper_filename' => $data['proper_filename']
  ];

}, 10, 4 );

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

#6 @kebbet
18 months ago

When allowing SVG's, then also add CSS in your theme/plugin that targets your modifications.

#7 @sumitsingh
18 months ago

Hey @kebbet ,

i am agree with you. but we need to check image width attribute things. why coming 1px width & height on svg image?

You can see mentioned SS.

@sumitsingh
18 months ago

check image width attribute things. why coming 1px width & height on svg image?

#8 @costdev
18 months ago

  • Keywords reporter-feedback removed

Thanks for the instructions @sumitsingh and for clarifying that this also occurs even without a plugin and just filters.

For a couple of references to this in the tutorial space:

  • See the fix_svg() callback here.
  • See this article, and in particular: "Before WordPress 4.0, you also make them display properly in the Media grid. But that’s broken now. If anyone knows how to fix, let me know!"

#9 @kebbet
18 months ago

Duplicate of #24251 ?

wp_getimagesize uses native PHP getimagesize and that does not support SVG's. Thats why 1px I guess.

#10 @sumitsingh
18 months ago

Hey @costdev ,

Thank you for above references tutorial

We can do with below css.

table.media .column-title .media-icon img[src$=".svg"] { 
   width: 60px !important; 
}

#11 @costdev
18 months ago

@kebbet wp_getimagesize uses native PHP getimagesize and that does not support SVG's. Thats why 1px I guess.

Nice catch!

Getting the right size for SVGs may involve parsing XML and for proportional SVGs, this could get messy quite quickly. Fixing the display via CSS is only part of the issue, as the image width and height attributes would need to be fixed too.

After reading about it previously working in WordPress < 4.0, I checked WordPress 3.9, and got the same result: width="1" height="1".

Since they didn't work in 3.9, and SVG uploads aren't natively supported by Core, I don't think we should be adding code to partially facilitate them. Extenders have already found a way to make this work. It's not a fix in Core, but rather part of what's required to provide SVG support.

IMO, if we were going to support SVG uploads in Core at all, I'd prefer to go all-in and support them entirely.

@kebbet Duplicate of #24251 ?

For the above reasons, I agree that it's appropriate to consider this at least a partial duplicate of the above ticket and to continue discussion there.

@sumitsingh Do you agree?

P.S. After searching "svg" on the Plugins > Add New screen, I installed the first plugin result and it had the CSS fix already in the plugin. 😉

Last edited 18 months ago by costdev (previous) (diff)

#12 @sumitsingh
18 months ago

Hi @costdev,

Yes that's fine. We can continue the discussion as you wish, here or there where is best for our community :)

Thank you.

Last edited 18 months ago by sumitsingh (previous) (diff)

#13 @sabernhardt
18 months ago

  • Component changed from General to Media
  • Keywords close added
  • Summary changed from Issue on media page to Adjust SVG image thumbnail size on media listing page

Instead of closing as a duplicate, would 'maybe later' make more sense? Then this could be reopened as a next step when #24251 is ready.

#14 @JeffPaul
18 months ago

  • Milestone Awaiting Review deleted
  • Resolution set to maybelater
  • Status changed from reopened to closed

Sounds good, closing as maybelater.

Note: See TracTickets for help on using tickets.