Use HTML5 picture element to prefer SVG logo

diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index 09a75d891899bf5aeacee459cda1d603efbd8f5c..7e4dd96d3dec3e73456aae0176e0f0e27edf7e62 100644 (file)
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -1,7 +1,10 @@
 <header class="closed">
   <h1>
     <a href="<%= root_path %>" class="geolink">
-      <%= image_tag "osm_logo.png", :alt => t('layouts.logo.alt_text'), :class => 'logo' %>
+      <picture>
+        <source srcset="<%= image_path "osm_logo.svg" %>" type="image/svg+xml">
+        <%= image_tag "osm_logo.png", :alt => t('layouts.logo.alt_text'), :class => 'logo' %>
+      </picture>
       <%= t 'layouts.project_name.h1' %>
     </a>
   </h1>