ViewComponent outperforms inline_svg

[JamesChevalier]

👋 I discovered inline_svg through this project & started implementing it in mine. Then I wondered how it compared to setting up SVGs with ViewComponent. I thought I'd share what I found, since you also use ViewComponent...

I used the solid 'check' SVG from Heroicons:

<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>

I set up a view_component that accepts svg_class:

class SvgCheckComponent < ViewComponent::Base
  def initialize(svg_class:)
    @svg_class = svg_class
  end
end

and swapped out the classes with <%= @svg_class %> in the SVG tag:

<svg xmlns="http://www.w3.org/2000/svg" class="<%= @svg_class %>" viewBox="0 0 20 20" fill="currentColor">
  <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
</svg>

Then I ran Benchmark.ips against both versions:

require "benchmark/ips"

Benchmark.ips do |ips|
  ips.report("inline_svg") do
    helper.inline_svg_tag "icons/check.svg", class: "h-5 w-5"
  end

  ips.report("view_component") do
    helper.render SvgCheckComponent.new(svg_class: "h-5 w-5")
  end

  ips.compare!
end;nil

with a big performance difference:

Warming up --------------------------------------
          inline_svg   144.000  i/100ms
      view_component    16.270k i/100ms
Calculating -------------------------------------
          inline_svg      1.408k (± 4.5%) i/s -      7.056k in   5.022979s
      view_component    165.302k (± 3.4%) i/s -    829.770k in   5.025336s

Comparison:
      view_component:   165301.6 i/s
          inline_svg:     1407.7 i/s - 117.42x  (± 0.00) slower

---

I opted to create a component for each SVG image in the format SvgCheckComponent, SvgDeleteComponent, etc. The erb for each component is the SVG tag with the class passed as a variable like class="<%= @svg_class %>" and I render them on pages by swapping out the inline_svg_tag with <%= render SvgCheckComponent.new(svg_class: "inline-block w-6") %>

[joemasilotti]

This is crazy! Awesome work digging in to this. Before I go and migrate all of railsdevs, I have a few questions.

I'm assuming the massive speed up is because inline_svg_tag is reading, parsing, modifying, then writing XML every time to insert the classes. Your approach is "just" rendering a view so it the speed increase makes sense, at least in theory.

1. Does the same speed improvement apply for other icons? Or is the check an outlier?
2. Does the speed increase matter? Like, let's say I have 20 icons on a page, what's the effective time savings?
3. If/when we migrate railsdevs, I have a few ideas on the component but I will hold off on that for now :)

[JamesChevalier]

1. All of them are similarly performant, it's not an outlier
2. 🤷 I didn't run web-based benchmarks
3. Yeah, I'm figuring there are some ways that my component setup can be improved & I'm interested in what you come up with

My decision to go with ViewComponent instead of inline_svg was paired with an interest in keeping dependencies low, an interest in using ViewComponent more (I only just started using it in November), and the overall win of reworking my code from individual SVGs everywhere to reusable code (I "won" with either option I chose). I'd make the same decision even if this performance improvement doesn't really matter because I like that it expands on my existing ViewComponent use instead of adding another methodology.

[joemasilotti]

For now, I'm going to hold off on this because inline_svg_tag works so well. I'm not convinced the speed increase will have much of an effect just yet (Heroku is reporting 71ms response times). But if you want to open a PR that converts the code I'm more than happy to review it!