WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 5 months ago

#37632 new defect (bug)

Incorrect Image Previews for SVG

Reported by: simonrcodrington Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Media Keywords:
Focuses: Cc:

Description

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

Attachments (4)

svg_upload_bug2.jpg (38.3 KB) - added by simonrcodrington 3 years ago.
SVG upload bug when viewed on the 'List' layout in the media uploader
svg_upload_bug2.2.jpg (38.3 KB) - added by simonrcodrington 3 years ago.
SVG image when displayed in the grid style. Looks fine
svg_upload_bug3.jpg (42.6 KB) - added by simonrcodrington 3 years ago.
SVG buig fix. Adding CSS to style SVG in the list view
svg_upload_bug1.jpg (42.2 KB) - added by simonrcodrington 3 years ago.
SVG bug in the list view media control

Download all attachments as: .zip

Change History (10)

@simonrcodrington
3 years ago

SVG upload bug when viewed on the 'List' layout in the media uploader

@simonrcodrington
3 years ago

SVG image when displayed in the grid style. Looks fine

@simonrcodrington
3 years ago

SVG buig fix. Adding CSS to style SVG in the list view

@simonrcodrington
3 years ago

SVG bug in the list view media control

#1 @simonrcodrington
3 years ago

Hey again guys.

Looking through other parts of WP, it seems SVG widths have the same issue. For example when selecting an SVG element as a 'featured image' on posts / pages. The preview will also be 1px wide and be invisible to the user.

I've added the following style and it now works in the featured image section.

#postimagediv .inside img[src*='.svg'] {
    width: 100%;
    height: auto;
}

There might be other places where similar styling needs to be added to ensure SVG's work.

#3 @swissspidy
3 years ago

Als previously: #26256.

#4 @simonrcodrington
3 years ago

Hey guys, thanks for the fast response.

Reading up on those links it seems that SVG's are still not officially supported by WP and as such the support is provided 'as is', meaning if I want this adjusted so it works nicely I should just add it to a plugin / my themes?

Is that correct?

Also, reading through those other threads, it seems the reason SVG's aren't supported is because of potential security concerns? Is this still the main issue? (As whenever I've used them I use them for images / icons etc)

Basically, all I want to do is make the file upload / image preview step a little nicer for clients who want to use SVG icons. Right now it's a bit tedious as you get image previews inconsistently, e.g when uploading several SVG's you get a tiny preview as they successfully upload, but on the media manager when trying to select one as a featured image the default icon is used.

Cheers

#5 @Presskopp
3 years ago

SVG files should not be treated as images - especially when coming to uploads.

from:
https://html5sec.org/#svg

Note: See TracTickets for help on using tickets.