SVG not supported?



  • Hello

    Is SVG format not supported by Media Cloud?
    I can't get my SVG logo working.
    Any other file I upload to media library, get's the proper new media URL pointing to my CDN as in cdn.mydomain.com/path_to_file

    But for svg images, it's not picking up the CDN. Instead, it uses the local URL mydomain.com/path_to_file
    When I check my S3 bucket at Wasabi, the file is there so it does get uploaded to Wasabi, but the URL rewrite is not happening.
    And, the cloud icon is also not showing up in media library, but again only for the SVG images.

    I have been looking for hours what could be the case, but I'm clueless. It looks and feels like it does not accept SVG image format.

    In settings I have enabled all toggle to enable everything for upload, also documents, etc... no filter on the MIME type so it really is available for everything possible.

    Anything else I'm missing or need to check? Or is this a known thing/bug?

    screenshot-codeagency.be-2019.10.21-22_11_41.jpg



  • @codeagency

    We use SVGs on the mediacloud.press site. If you look at the landing page, almost all of the icons are SVGs being served from our CDN.

    To upload SVGs though, you need to make sure that WordPress thinks SVG is a displayable image, which it doesn't by do by default. We use the press-bits/media-library-svg-display library (https://github.com/press-bits/media-library-svg-display) to get it working.

    The other thing we do, is include this in our functions.php:

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

    That actually allows it to be uploaded.

    And then the next bit is how it's being displayed. We use ACF for everything, so those SVGs are image fields on an ACF field group so everything just works.

    If you are inserting it into a post, not sure if Media Cloud will replace that URL when it filters the post content.



  • Thanks for the feedback.

    The part about uploading SVG's is all covered and working. I can upload them files, they show in the media lib wiht thumbnail, etc... no problems at all with that.

    We use Elementor Pro and one of the recent updates like a month ago, have covered also everything to allow SVG's everywhere because they now support the latest FontAwesome 5.x SVG library, hence the reason why they have that in place now.
    So again, that part is not giving troubles.

    My sole problem is that MC plugin is NOT doing it's thing with SVG only.
    SVG images are showing perfectly fine in my pages, posts, ... but not in theme header as logo (OceanWP theme and native header, so NOT an Elementor header!).
    Except when MC is disabled, then the SVG logo shows correctly in header.

    I'm not getting it why it's acting up so strange, but I can narrow it down to MC plugin.
    As soon as I disable it, everything turns back to normal again and 100% working.

    Also, I don't get why the CDN URL is NOT rewriting for SVG files, but fine for all the rest?
    That is (I think) the main reason why the SVG logo is not showing. All other images do perfectly fine and show my CDN URL in backend in media library.
    It's really like filtering down to SVG files only and ignores to rewrite the CDN URL for those only.

    I have ran the tests several times, everything passes, green checks, ... BUT when I check the wasabi folder, the delete of the media file is not working. I have the option enabled if I delete from local, it also delete from remote.
    While the tests show everything OK, this function is still not working. (just a side note).
    Perhaps something specific WASABI?

    Any other idea or point to check? I always loved using MC plugin and I don't want to remove it just because of SVG problem.
    I do my best to use as much SVG as possible as it's one of best performance tricks possible.



  • @codeagency

    Is the SVG an actual image tag in the html, or is it defined as a background-image via CSS?

    Elementor is buggy af, but for the header, how is the SVG being included? Is it in the code of theme ala wp_get_attachment_src() or similar?

    We use SVG on all of our client sites, without issue, but we don't use page builders or third party themes. Can you send me a URL of a page I can check out?



  • @jong I have sent you a PM/chat message with details


Log in to reply