Support SVG's and PNG/JPG in your Rails Dragonfly workflow

I was struggling to find a solution to easily provide thumb pngs, as well as display svgs inline with the img tag with the ruby gem Dragonfly.

For example something simple like this:

= image_tag user.image.thumb('100x100#').url

But that breaks when showing SVG files, as it looks like it strips out a bunch of important info from the file.

To set the dimensions of the svg correctly. You can add an additional gem, gem ‘dragonfly_svg’ and you’ll also need to add that as a plugin to your dragonfly.rb file.

require 'dragonfly'

# Configure
Dragonfly.app.configure do
  plugin :imagemagick
  plugin :svg

   ...

To render the SVG correctly you’d write this:

= image_tag user.image.set_dimensions(100,100).url

So, in order to support both seamlessly. I built a custom Dragonfly processor.

Then you can setup a custom processor, that checks the mime type of the image, and processes it either way.

  processor :custom_thumb do |content, *args|
    if content.mime_type == 'image/svg+xml'
      dimensions = args.first.split('x')
      content.process!(:set_dimensions, dimensions[0].to_i, dimensions[1].to_i)
    else
      content.process!(:thumb, *args)
    end
  end

Then, throughout the code, you can easily refer to the custom_thumb processor:

= image_tag user.image.custom_thumb('100x100#').url