How to display SVG as images with Active Storage

Question

I'm currently having issues with moving my project from Paperclip to ActiveStorage. More precisely I'm having issues with ActiveStorage and storing svg images.

I know that svg files are images, but they are not variable images. Because of that Active storage for some reason is creating download links and that is why svg files are not shown in browser.

Active storage is neglecting content_type for example (from my seeds):

job = Job.create(career.except(:icon, :og_image))
job.icon.attach(io: career[:icon], filename: 
File.basename(career[:icon].path), content_type: 'image/svg+xml' )
job.og_image.attach(io: career[:og_image], filename: 
File.basename(career[:og_image].path), content_type: 'image/png' )

Active storage falls to 'application/octet-stream' although 'iamge/svg+xml' is valid image type. I have removed all validations from my models and I have miniMagick gem added to my gemfile. With png and jpg files it is working perfectly.

My question is, what am I doing wrong? And does ActiveStorage even have support for svg files?

Visko Plenković · Accepted Answer · 2018-12-14 09:16:50Z

22

Add this code to your config/application.rb:

# Hack for allowing SVG files. While this hack is here, we should **not**
# allow arbitrary SVG uploads. https://github.com/rails/rails/issues/34665

ActiveStorage::Engine.config
.active_storage
.content_types_to_serve_as_binary
.delete('image/svg+xml')

You can delete comments of course :). Hope it helps.

answered Dec 14, 2018 at 9:16

Visko Plenković

3772 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

F4-Z4 Over a year ago

Less hacky way would be to use regular environment config (e.g., in config/application.rb or one of the specific environment configs) like this: config.active_storage.content_types_to_serve_as_binary -= ['image/svg+xml’]. ActiveStorage::Engine is a private API so using config might be more futuru-proof.

Visko Plenković Over a year ago

I think that should also work. Is it working because I am not on a project that I was working on so I can not check if it is working.

F4-Z4 Over a year ago

We have it in production with Rails 5.2.3. We had the same issue, we used your answer as hint, but we didn’t like relying on private API. Looking around Active Storage implementation for a moment, we noticed additional configuration options like the one above, so we tried those and it works…

Community · Accepted Answer · 2019-01-09 20:28:35Z

4

Svg are considered binary content types, so that is why Active storage svg links are represented as download attachment links. You can see all content_types and limitations at this link https://github.com/rails/rails/blob/master/activestorage/lib/active_storage/engine.rb.

More about this limitation and explanation can be found here: http://github.com/jdelStrother/rails/commit/06ab7b27ea1c1ab357085439abacdb464f6742bf. I'll post an issue for this. Maybe they will fix it in the future

edited Jan 9, 2019 at 20:28

CommunityBot

11 silver badge

answered Dec 6, 2018 at 15:17

Visko Plenković

3772 silver badges9 bronze badges

Collectives™ on Stack Overflow

How to display SVG as images with Active Storage

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related