Applying filter to a SVG file does not work

[Torpedr]

Hi there. I have a serious problem resizing SVG files.. For example, I saved the same file as SVG and as PNG.

Code:

<img src="{{ '/uploads/file.png'|imagine_filter('thumbnail') }}" />
<img src="{{ '/uploads/file.svg'|imagine_filter('thumbnail') }}" />

Thumbnail shows only for the first image.

The error is: Unable to create image for path "uploads/file.svg" and filter "thumbnail". Message was "Unable to open image ~app/../web/uploads/file.svg" But the file exists in the filesystem!

Also, the generated path for this SVG file is incorrect: http://localhost:8000/media/cache/resolve/avatar_thumb/uploads/file.svg Why 'resolve'?

Instead of: http://localhost:8000/media/cache/avatar_thumb/uploads/file.svg

[deviprsd]

GD, gmagick driver don't yet support SVG, imagick does. Try changing the driver, other than that the bundle needs to probably support it too, maybe it does (haven't tried svg files yet)

[alexwilson]

SVGs should be supported, the underlying library supports these and includes them in its test suite.

At a glance this looks like an issue with configuration - Could you provide more information about how you have configured the bundle, and as @deviprsd21 has said the driver you are currently using?

[wuestkamp]

Hi,

I'm having the same issue with applying a filter using twig to a svg. I use the driver imagick.

My config and filter:

liip_imagine:
    driver: imagick
    cache: default
    resolvers:
       default:
          web_path:
            web_root: %kernel.root_dir%/../web
            cache_prefix: /media/cache
    filter_sets:
        cache: ~
        exhibitor_booth:
            filters:
                relative_resize: { widen: 450px }

The image doesn't load in Firefox, and in Chrome the whole page doesn't even load.

Using version 1.6.*

[deviprsd]

@kimwue This isn't much information to figure out why it isn't working for you.

[sujayjaju]

I am seeing the same issue. Using imagick module 3.1.2 and ImageMagick 6.7.7

How can I help debug?

[sujayjaju]

Found out that the generated cache file is encoded as a Jpeg but has a .svg extension. Does that help?

[msalsas]

Same issue here. I can't generate svg thumbnails.

Unable to create image for path "uploads/links/398/734262.svg" and filter "link_medium". Message was "An image could not be created from the given input"

[msalsas]

As I use a custom ImagineController I've solved it not applying the filter to svg images on filerAction:

$binary = $this->dataManager->find($filter, $path);
if ($binary->getFormat() === 'svg') {
    $filteredBinary = $binary;
} else {
    $filteredBinary = $this->filterManager->applyFilter($binary, $filter);
}

$this->cacheManager->store(
    $filteredBinary,
    $path,
    $filter,
    $resolver
);

[jeremyriverain]

I had a hard time to find a solution. It's a little bit hacky but it works. In fact I create a custom twig filter to return the original image uploaded if the file has an svg extension. And I apply the filter after the imagine_filter. Not very clean. Thx for letting me know if you find a better option.

<?php
// AppBundle\Twig\TwigExtension
namespace AppBundle\Twig;

class TwigExtension extends \Twig_Extension
{    
    public function getFilters(){
        return array(
            new \Twig_SimpleFilter('svg', array($this, 'svgFilter')),
        );
    }

    public function svgFilter($liipFilepath){
	$ext = pathinfo($liipFilepath, PATHINFO_EXTENSION);
        $ext === "svg" ? $response = "yourOriginalDirectoryForYourImages/".basename($liipFilepath) : $response = $liipFilepath;
	return $response;
    }
}

and in a template, just do:

# template.html.twig
<img src="{{asset("yourOriginalDirectoryForYourImages/image.svg")|imagine_filter('yourFilter')|svg}}"/>

[teohhanhui]

The problem is caused by Symfony's MIME type guesser ~~and extension guesser~~. See https://github.com/symfony/symfony/issues/15460#issuecomment-380138425

[teohhanhui]

Here is the workaround for Symfony: https://gist.github.com/teohhanhui/90bbc4a61888ad2e92a160d8459db300

And the workaround for LiipImagineBundle: https://gist.github.com/teohhanhui/cc0d1913d5d0ef3b4c20a51369732d71 (unless Symfony already guesses the correct MIME type for SVG, you need the above workaround too!)

Tested working with gmagick driver.

[thcolin]

Got same issue but on a .jpeg file, caused by gd driver, moved to imagick fixed issue

[michellesanver]

This seems to have been fixed in https://github.com/symfony/symfony/pull/29936 I have not confirmed, if anyone sees this and is still experiencing issues, please open a new issue and we can look at it with the latest data. Thanks! :)

[teohhanhui]

@michellesanver There were 2 issues. 1 of them (in Symfony) has been fixed. The other 1 is in LiipImagineBundle and has not been fixed.

[michellesanver]

Thanks, reopening this issue :)

[bobvandevijver]

This still happens with a relatively clean installation with gd driver on Symfony 5.0

[fliespl]

In my case svg filter with imagick fails with:

must specify image size `/tmp/magick-41957n0pSrtuIVsIM' @ error/mvg.c/ReadMVGImage/186

convert -version Version: ImageMagick 6.9.10-23 Q16 x86_64 20190101 https://imagemagick.org

SVG is properly listed as supported formats in phpinfo.

Probably connected: https://github.com/ImageMagick/ImageMagick/issues/3117

[vasilvestre]

Still happening with Sf 6.0 and PHP 8.1

[dbu]

can you debug whether it is a problem of the liip imagine bundle or of symfony or the imagemagick library?

[vasilvestre]

can you debug whether it is a problem of the liip imagine bundle or of symfony or the imagemagick library?

Maybe the stacktrace could help you, I'm not 100% sure of what happens.

Imagine\Exception\RuntimeException: An image could not be created from the given input
#14 /vendor/imagine/imagine/src/Gd/Imagine.php(213): Imagine\Gd\Imagine::doLoad
#13 /vendor/imagine/imagine/src/Gd/Imagine.php(122): Imagine\Gd\Imagine::load
#12 /vendor/liip/imagine-bundle/Imagine/Filter/FilterManager.php(96): Liip\ImagineBundle\Imagine\Filter\FilterManager::applyFilters
#11 /vendor/liip/imagine-bundle/Imagine/Filter/FilterManager.php(88): Liip\ImagineBundle\Imagine\Filter\FilterManager::apply
#10 /vendor/liip/imagine-bundle/Imagine/Filter/FilterManager.php(127): Liip\ImagineBundle\Imagine\Filter\FilterManager::applyFilter
#9 /vendor/liip/imagine-bundle/Service/FilterService.php(225): Liip\ImagineBundle\Service\FilterService::createFilteredBinary
#8 /vendor/liip/imagine-bundle/Service/FilterService.php(205): Liip\ImagineBundle\Service\FilterService::warmUpCacheFilterPathContainer
#7 /vendor/liip/imagine-bundle/Service/FilterService.php(123): Liip\ImagineBundle\Service\FilterService::getUrlOfFilteredImage
#6 /vendor/liip/imagine-bundle/Controller/ImagineController.php(95): Liip\ImagineBundle\Controller\ImagineController::Liip\ImagineBundle\Controller\{closure}
#5 /vendor/liip/imagine-bundle/Controller/ImagineController.php(162): Liip\ImagineBundle\Controller\ImagineController::createRedirectResponse
#4 /vendor/liip/imagine-bundle/Controller/ImagineController.php(90): Liip\ImagineBundle\Controller\ImagineController::filterAction
#3 /vendor/symfony/http-kernel/HttpKernel.php(163): Symfony\Component\HttpKernel\HttpKernel::handleRaw
#2 /vendor/symfony/http-kernel/HttpKernel.php(75): Symfony\Component\HttpKernel\HttpKernel::handle
#1 /vendor/symfony/http-kernel/Kernel.php(202): Symfony\Component\HttpKernel\Kernel::handle
#0 /public/index.php(25): null

[dbu]

looking at that stack trace, i am pretty sure hte problem is on imagine's side. the call we use does not pass a mime type along, so its imagine not discovering svg correctly, i would say. please report the problem at the imagine library - for them it might be useful to have the svg data to be able to reproduce the bug.

[ywjdlq]

if using imagick, try to install libmagickcore-6.q16-6-extra