78811f5f4d
SVG files are smaller than PNG files, can be compressed, and are scalable. We're choosing to render SVG files as images instead of inline because inline SVGs aren't cached nor compressed, and they might appear several times on the same page, making the generated HTML much larger. We could also load them with an SVG sprite, using `<use>`, which would reduce the number of HTTP requests when several icons are present on the page (like in the index of most sections). However, using SVG inside an `<img>` tag is universally supported, while the `<use>` tag doesn't work in Internet Explorer when using an external URI and support in Opera Mini and UC Browser is unknown.
46 lines
831 B
Ruby
46 lines
831 B
Ruby
class SDG::Goals::IconComponent < ApplicationComponent
|
|
attr_reader :goal
|
|
delegate :code, to: :goal
|
|
|
|
def initialize(goal)
|
|
@goal = goal
|
|
end
|
|
|
|
def image_path
|
|
if svg_available?
|
|
svg_path(locale)
|
|
else
|
|
png_path(locale)
|
|
end
|
|
end
|
|
|
|
private
|
|
|
|
def image_text
|
|
goal.code_and_title
|
|
end
|
|
|
|
def locale
|
|
@locale ||= [*I18n.fallbacks[I18n.locale], "default"].find do |fallback|
|
|
AssetFinder.find_asset(svg_path(fallback)) ||
|
|
AssetFinder.find_asset(png_path(fallback))
|
|
end
|
|
end
|
|
|
|
def svg_available?
|
|
AssetFinder.find_asset(svg_path(locale))
|
|
end
|
|
|
|
def svg_path(locale)
|
|
"#{base_path(locale)}.svg"
|
|
end
|
|
|
|
def png_path(locale)
|
|
"#{base_path(locale)}.png"
|
|
end
|
|
|
|
def base_path(locale)
|
|
"sdg/#{locale}/goal_#{code}"
|
|
end
|
|
end
|