1

I'm wondering how I can dynamically generate a JPG fallback image from an SVG. Can image transforms be modified to handle this?

2
  • 2
    I don't believe so, because technically speaking SVG's aren't 'images' in the true sense of the word. A reasonable workaround would be to add a 'JPG fallback' asset field to your assets, so when an SVG is uploaded you can select the file you want to fallback to from there. – Jamie Wade Jan 9 '15 at 9:34
  • @JamieWade Unfortunately that solution won't work in my case. Based on a little more research ImageMagick is able to do the operation server side, but that isn't the library Craft uses. I wonder if there is a way for Craft to plug into a different image processor? – kepano Jan 9 '15 at 16:57
4

No, Craft will not be able to generate JPGs from SVGs out of the box (I tested it), but it should be relatively easy to write a plugin handling it.

As GD doesn't support SVG, ImageMagick support is a must. Craft actually does use ImageMagick, if its installed on your server – so your first step would be to check for ImageMagick support. An easy way to do that, is to use Craft's ImagesService.

From there, the actual PHP code generating the JPG should be relatively straight-forward – check this Stack Overflow thread for a concise example (not tested the mentioned code myself).

Note: Be advised that Craft actually implements all of its image manipulation through the Imagine library – I'm pretty sure Imagine would handle the generation, but if you need to work with ImageMagick directly you could do

$factory = new \Imagine\Imagick\Imagine();
$svg = $factory->open( $path );
$imagick = $svg->getImagick();

Finally, when it comes to implementing the JPG generation you have a few options – for example you could create a Twig filter:

<img src="{{ image | svgFallback }}" />

You could also implement it as a template variable method:

<img src="{{ craft.yourPluginName.getSvgFallback( image ) }}" />

...or you could even hook into AssetsService events if you needed to generate the fallback automatically.

Updated answer: The original question asks if "image transforms can be modified to handle this". The short answer is no – ideally there would be a beforeTransformApplied hook or something like that, but as of 2.3 there isn't (see this thread for reference). My opinion is that your best bet is creating a variable method or Twig filter, as outlined above.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.