Ruby on Rails #83 import and use SVG in Rails. gem inline_svg

15/06/2022 (almost 2 years ago)
·

Sometimes instead of depending on an external SVG library you will want to import your own SVGs into a Rails app. In this episode we will look at different approaches and problems while importing and styling SVGs in a Rails app.

I recommend using the gem inline_svg that offers a well-maintained and tested inline_svg_tag that will let you apply any HTML attributes to your SVG.

Also consider that you might sometimes have to update the source code of an imported SVG, so that it can be transformed using classes and styles withing your app.

0:00 The problem
0:45 Import SVG from Figma & Fontawesome
2:27 image_tag (render SVG as IMG)
4:00 Try styling SVG
5:03 SVG fill currentColor
6:00 svg_tag (render SVG as SVG not IMG)
8:00 Fix SVG size scaling
9:20 Fix Fontawesome size scaling
10:21 Use gem inline_svg

Episode source code: https://github.com/corsego/83-rails-svg/commit/c96ca0ae88d989abc5579def927cecb39e2201e1
Blogpost: https://blog.corsego.com/gem-inline-svg
Gem inline_svg: https://github.com/jamesmartin/inline_svg


2
Sign in to join the conversation