Module Image Rasterizer

[adrian]

Module for admin and front-end resizing and rasterizing of vector SVG images

Requirements

IMPORTANT: This module requires Imagemagick and the pecl imagick extension. For anything but simple SVGs, you must make sure imagemagick was compiled with a relatively recent version of rsvg (I know that 2.32.1 works well and presumably anything more recent should also be fine).

If you don't manage your own server and the results are not good, check with your host. If everything is set up correctly, the rendered PNGs will be "perfect" representations of the SVGs. See this post below for just how much of a difference rsvg can make.

How to use

You must add SVG as an allowed file type for a multiple images field.

Check the module configuration for a variety of settings for both PNG and JPG output options.

In particular be aware of the Rasterized Images Field selector. If you choose "None" only the SVG will be stored in the images field. You can still access rasterized versions via the rasterize() method - see below for details.

NB: You need to be running a recent dev version (or 2.4 stable once available) of Processwire that supports field dependencies for the configuration settings to work as expected.

Once the module configuration settings are completed:

• Upload an SVG image and the module will create a rasterized version.
  
• You need to save the page to see the rasterized version which can then be accessed via the API like any other image.
  
• The module also adds a new method: rasterize() which can be called from your templates like:
  

• 
  
  
  

  
  
  $image->rasterize(200,0)->url

  
  
  
  
  
• 
  
  This method optionally resizes the vector version of the image and then rasterizes it so you can scale it infinitely and there will be no loss of quality. Make sure you point it to the svg version in your images field.
  
  
  

 

Modules Directory: http://modules.processwire.com/modules/image-rasterizer/

Github: https://github.com/adrianbj/ImageRasterizer

[Martijn Geerts]

What's next ? A module for creating charts ?

You're on a rampage, great!

[adrian]

Well, I do love highcharts

[Martijn Geerts]

Me to! But I have to find a way to make it easy for editors to provide data for the charts... let it marinate 

[renobird]

Perfect timing. As I was creating a handful of svg/png combos last week I was wondering if I could automate the process.

Now, here you are with this module. Well done!

A link to picturefill is in order, just in case anyone isn't familiar.

[adrian]

Thanks renobird - glad it was timely for you. I am contemplating adding a variety of conversion setting options and the ability to generate a PNG at a specific size via an API call that comes directly from the SVG so that quality would be maintained, rather than resizing the initially created PNG.

Something else I will be doing, although maybe not as part of the module will be an interface for management of SVG metadata for maintaining a library of vector illustrations.

If you have any other ideas, please let me know.

[jacmaes]

Adrian, thanks for this module. It's proving to be useful to convert SVGs to PNGs automatically for IE8 support. Do you still plan to update the module with the options you mentioned above?

If so, I have a couple of requests:

• The PNGs with Alpha transparencies are naturally quite big in terms of file size. ImageOptim on the Mac usually shaves off 40 to 50% of the generated PNG's original size without any visible loss of quality. Although I'm not sure if it's feasible, would you consider adding a compression option?
• It would be great to have an option to output JPGs as well as / or PNGs. 

[adrian]

Hi jacmaes,

Yes, I am intending on adding some more options. I will have a need for some of these features myself shortly anyway. I'll see what I can do about getting them added sooner than later and then releasing this officially.

Thanks for the nudge

[jacmaes]

Great! Thanks, adrian.

[adrian]

jacmaes,

Sorry for the delay on this, but I have finally pushed a new version to GitHub and also submitted it to the modules directory.

The modules configuration settings now allows you to specify a variety of image quality settings for JPG and PNG outputs, but please note that for this to function as expected you need PW 2.4 or a late 2.3 dev version that supports field dependencies.

Please test and let me know if you have any suggestions.

I'd also like to reiterate how important it is to have imagemagick compiled with rsvg - I was testing this for the first time on a server without it and the quality was not great.

Added new screenshots and details to the first post above too.

[jacmaes]

Hi Adrian, 

Thanks so much for implementing this. This new module version, however, produces poor PNG results compared to the previous one, which was flawless. You mention that Imagemagick has to be compiled with a recent version RSVG, but is this a new requirement? I asked my host to install Imagemagick and the pecl imagick extension, but I don't remember the RSVG requirement. Should I ask my host to reinstall Imagemagick then? What do you suggest?

[adrian]

Sorry to hear about the change in PNG results. What module config settings are you using? If none of those settings make a difference, perhaps you'd be willing to help me debug a little. Three changes you can try to see what works best:

1. Uncomment this line: //$im->setOption("png:color-type","6");
2. Change $im->setImageFormat("png"); to $im->setImageFormat("png32");
3. Change $im->setImageType($this->image_type); to $imagickImage->setImageType(imagick::IMGTYPE_TRUECOLORMATTE);

If you could let me know which one of those settings returns the quality back to the way it was, I'll sort things out.

As for rsvg - I mentioned it as a suggestion when I first posted this module, but when I was playing around with this on a server without it yesterday, I was getting poor results, no matter the settings (even the original version of this module). Also, some SVGs work OK without rsvg, but some don't - at least that is my experience. Do you know either way if you host has added rsvg to imagemagick? Maybe they did already?

[jacmaes]

I was using the default configuration: PNG, True Color Alpha Transparent, Image Depth: 8. I'm on PW version 2.3.14 if it makes any difference. 

I've tried the three options you mentioned, but all yielded the same results. (By the way, the third option should be "$im->setImageType(imagick::IMGTYPE_TRUECOLORMATTE)", right?). 

This is the bad boy I've used as a test SVG: http://upload.wikimedia.org/wikipedia/commons/f/fd/Ghostscript_Tiger.svg

It's admittedly a rather complex SVG. This is the PNG result (JPG output was pretty much identical, except for the lack of transparent background of course):

I've also tried a much simpler SVG from the Noun Project, but got an error immediately:

The same thing happens when I attempt to optimize my SVG with SVGO.

Finally, let me clarify that my initial tests with the previous version were with simple SVG icons, not complex multi-coloured SVGs. I'm going to ask my host about the version of RSVG installed on my VPS. 

Thanks for your concern and effort.

[adrian]

Thanks for help with this. I just uploaded the tiger using the default PNG settings in the new version of the module. I tested on two servers, one with rsvg and one without. See attached for the differences.

So I am guessing your server does not have rsvg installed. Unfortunately it does seem essential for reliable results. Hope you get can your host to recompile imagemagick with it.

Let me know if you think of any other things you'd like added to this module.

EDIT: I also tried the cow from the Noun Project and it actually looked perfect on both servers, with no errors. I am actually a little confused by that error message - it mentions MagickWand which is a different module than iMagick. Have you checked that the code for that svg looks correct and is not actually HTML or something - not sure how you downloaded from Noun. I used this file. Does the cow work with the old version of this module?

[jacmaes]

My host tells me I have "ii librsvg2-2 2.26.3-1 SAX-based renderer library for SVG files (runtime)" installed. Is this really RSVG?

[adrian]

Not exactly sure as I am not sure how it is installed and whether imagemagick was compiled to use it.

Also, I would question the version of librsvg. I am using 2.32.1 and it is currently up to 2.40.1 (https://download.gnome.org/sources/librsvg/). That version you have is almost 4 years old, so that might be the problem, but given that your output exactly matches my test on a server without rsvg at all, I would ask them to check imagemagick using this command:

convert -list format | grep SVG

That should return something like this:

     MSVG  SVG       rw+   ImageMagick's own SVG internal renderer
      SVG  SVG       rw+   Scalable Vector Graphics (RSVG 2.32.1)
     SVGZ  SVG       rw+   Compressed Scalable Vector Graphics (RSVG 2.32.1)

If not, then it's not set up correctly. Hope you can get them to help you out on this.

Might also be worth asking what version of imagemagick and imagick they are running while you're at it.

[jacmaes]

MSVG SVG rw+ ImageMagick's own SVG internal renderer
SVG SVG rw+ Scalable Vector Graphics (XML 2.7.3)
SVGZ SVG rw+ Compressed Scalable Vector Graphics (XML 2.7.3)

This is what is returned when running that command. It looks like ImageMagick was not compiled with RSVG then, right?

[adrian]

Yep, I just ran that command on my server without rsvg compiled in and that's exactly the same output I get.

Hopefully they are willing to fix it for you.

Let us know how you go.

[adrian]

Some major additions today!

Added the ability to specify the dimensions of the rasterized version that is added to the admin images field. See the tiger screenshot in the first post in this thread to see how the SVG which was scaled to 25 x 25px before uploading, resizes up to a 500 x 500px fully transparent PNG. You can go as large as you want with no loss in quality.

More importantly, I added a new method: rasterize() for the front-end which can be called from your templates with or without dimensions for resizing.

$image->rasterize(200,0)->url

This method optionally resizes the vector version of the image before it rasterizes it, so you can scale it infinitely and there will be no loss of quality. Make sure you point it to the svg version in your images field. These versions are stored using the filename.200x0.png format, so they will be automatically removed by PW if you delete the original image from the admin.

I think this will be really useful - you can now upload one SVG and use the rasterize method to generate whatever sizes you need throughout your site - I can see this being especially useful for icons/logos. Also for scaling drawings/illustrations/charts/maps for different screen dimensions (RWD techniques) without the usual artifacts that result from scaling these style of images.

New version available from the modules directory.

Please let me know how it works out for you!

[jacmaes]

Wow, adrian, this is just getting better and better. It makes it very easy now to use SVGs with automated PNG fallbacks for older browsers, which was my goal when I first encountered this module. It's also going to be useful with complex SVGs that tend to be heavy, which would make PNGs (or JPGs) more lightweight alternatives. 

My host is still installing the latest version of RSVG, which apparently requires updating quite a few dependencies. I'll let you know how it goes. Thanks again for you work and walking me through the debugging!

[jacmaes]

It took my host almost two weeks to complete the installation, but now I have RSVG 2.40.1 installed, and it's working like a charm! The poor tiger's face is no longer destroyed when converted to PNG, and finally looking exactly like it should. This is great.

Thanks again for your hard work and help, adrian. I see that you keep pushing updates (I'm on version 0.1.3).  

[adrian]

Wow, speedy service! It shouldn't be that complicated to get imagemagick compiled with rsvg. I have certainly had my issues with dependency conflicts over the years, but two weeks is a lot of debugging time

Anyway, great to hear you have it working now and the conversion results are good. I am really excited to have someone else using this. I wish there was an easier way to make these conversions, but unfortunately there is nothing simple. There are options that use batik (needs java) and some php classes that make use of running inkscape via the command line (relies on exec which is often disabled), so the imagemiagick / rsvg combo seems to be the best option and gives great results.

That latest version should have fixed a few dimension calculation issues from the previous version, but please let me know if you come across any issues or have any ideas for improved functionality.

[adrian]

Just wanted to note that this module won't work on recent dev versions of PW due to the inability to upload SVGs anymore. I have filed an issue here:

https://github.com/ryancramerdesign/ProcessWire/issues/597

[adrian]

Should be working again in the latest PW dev version:

https://github.com/ryancramerdesign/ProcessWire/commit/52ac6b7a647c212afbc07446847743d21b862164

Thanks Ryan!

[adrian]

Just committed a small, but I think quite useful option. You can now choose to replace the SVG thumbnail in the admin page edit view with a rasterized version - primarily for speed of display.

All the details about the image will still refer to the original SVG, and viewing the full sized version (in the lightbox) will still be the SVG.

The reason I added this is that on one site we have been uploading many very complex SVGs and using the rasterize() API method to display them on the site. We still want the originals to be in SVG though so that resizing results in no loss of quality, and also so we can offer the SVG as a downloadable version. The problem was that during page edit, the SVGs were taking too long to render in the browser.

Hope this helps others too.