wrap svg in images

src/skrubview/_data/templates/column-summary.html

@@ -49,9 +49,7 @@ <h3 class="skrubview-margin-r-t">
         </div>
 
         {% for plot_name in column.plot_names %}
-        <div>
-            {{ column[plot_name] | safe }}
-        </div>
+        <img class="pure-img" src="{{ column[plot_name] | svg_to_img_src | safe }}" alt={{ plot_name }} />
         {% endfor %}
 
     </div>

src/skrubview/_html.py

@@ -16,6 +16,7 @@ def _get_jinja_env():
     )
     env.filters["format_number"] = _utils.format_number
     env.filters["format_percent"] = _utils.format_percent
+    env.filters["svg_to_img_src"] = _utils.svg_to_img_src
     return env
 
 

src/skrubview/_utils.py

@@ -1,3 +1,4 @@
+import base64
 import re
 from pathlib import Path
 
@@ -114,3 +115,7 @@ def format_percent(proportion):
     if 0.0 < proportion < 0.001:
         return "< 0.1%"
     return f"{proportion:0.1%}"
+
+def svg_to_img_src(svg):
+    encoded_svg = base64.b64encode(svg.encode("UTF-8")).decode("UTF-8")
+    return f"data:image/svg+xml;base64,{encoded_svg}"