[wp-trac] [WordPress Trac] #37632: Incorrect Image Previews for SVG

[WordPress Trac]

#37632: Incorrect Image Previews for SVG
------------------------------+-----------------------------
 Reporter:  simonrcodrington  |      Owner:
     Type:  defect (bug)      |     Status:  new
 Priority:  normal            |  Milestone:  Awaiting Review
Component:  Media             |    Version:  trunk
 Severity:  normal            |   Keywords:
  Focuses:                    |
------------------------------+-----------------------------
 Hi guys,

 When using the `upload_mimes` filter to add new mime types for the media
 uploader, it handles SVG uploads strangely.

 Here is my code to add SVG support

 {{{#!php
 <?php
 function add_file_types_to_uploads($file_types){

         $new_filetypes = array();
         $new_filetypes['svg'] = 'image/svg+xml';
         $file_types = array_merge($file_types, $new_filetypes );

         return $file_types;
 }
 add_filter('upload_mimes', 'add_file_types_to_uploads');
 }}}



 This works fine and lets me upload SVG images. However when they are
 uploaded they don't render correctly. When using the new 'grid' layout,
 the image preview is just the default image which is fine, however when
 using the older 'list' layout, the image isn't displayed.

 The image itself when inspected is 1px wide by 1px tall. This is set by
 the following CSS inside of WP styles


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

 '''Solution'''

 One way around this could be adding a secondary style that just targets
 SVG elements, setting their width and height in CSS. This will work in all
 modern browsers to make the previews viewable (as shown in my attached
 images)


 {{{
 .table.media .column-title .media-icon img[src*='.svg']{
 width: 100%;
 height: auto;
 }
 }}}

 The height and width attributes on the sample image are set to 1 so it
 could be that when the media uploader loads the image and see it doesn't
 have a natural height / width (because it's an SVG) it defaults to those
 values. I'm not sure why those values are needed as restyling by CSS
 should be fine?

--
Ticket URL: <https://core.trac.wordpress.org/ticket/37632>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform