Incorrect Image Previews for SVG

[simonrcodrington]

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?

[simonrcodrington]

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

[simonrcodrington]

SVG image when displayed in the grid style. Looks fine

[simonrcodrington]

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

[simonrcodrington]

SVG bug in the list view media control

[simonrcodrington]

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.

[SergeyBiryukov]

Previously: #24251, #31258, #36599.

[swissspidy]

Als previously: #26256.

[simonrcodrington]

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

[Presskopp]

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

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

[ocean90]

Related: #37549 and ​https://plugins.trac.wordpress.org/browser/scalable-vector-graphics-svg/trunk/scalable-vector-graphics.php?rev=1465348