Export plot to svg instead of png

static/style.css

@@ -1,8 +1,8 @@
-.container {
+main {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-around;
-    gap: 15px;
+    gap: 1em;
     align-items: flex-start;
 }
 
@@ -15,16 +15,13 @@ a {
     color: black;
 }
 
-img {
-    max-width: 600px;
-}
-
 .dataframe {
     border-collapse: collapse;
     font-size: 0.9em;
     font-family: sans-serif;
     min-width: 400px;
     box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+    flex-grow: 1;
 }
 
 .dataframe thead tr {

templates/base.html

@@ -6,11 +6,14 @@
 <title>Digitale Beschäftigtenbefragung</title>
 
 
+<article>
+<header>
 <p>Daten abgerufen: {{ timestamp }}</p>
-
 <p><i>Hinweis:</i> Die Daten entstammen der <a href="https://zusammen-geht-mehr.verdi.de/beschaeftigtenbefragung">Karte der digitalen Beschäftigtenbefragung</a> und sind dort nur für die ver.di-Bezirke auf Bezirksebene aufgelöst, bei denen TVStud auch als Schwerpunkt angegeben ist.</p>
+</header>
 
-<div class="container">
-    <img src="{{ image }}"/>
+<main>
+    {{ image|safe }}
     {{ tables|safe }}
-</div>
+</main>
+</article>

wsgi.py

@@ -1,4 +1,3 @@
-import base64
 import datetime
 import io
 from itertools import chain
@@ -11,7 +10,6 @@ import numpy as np
 import pandas as pd
 from flask import Flask, render_template, request
 from flask_caching import Cache
-from matplotlib.backends.backend_agg import FigureCanvasAgg as FigureCanvas
 
 from download_digital import construct_dataframe, get_bez_data
 
@@ -84,7 +82,7 @@ def plot(
         sum_val = current_df[["Digitale Befragung"]].sum().iloc[0]
         df.loc[datetime.datetime.now()] = sum_val
 
-    plt.figure(dpi=300)
+    fig = plt.figure(dpi=300)
 
     # fill weekends
     max_date = max(data_dict.keys())
@@ -155,15 +153,12 @@ def plot(
     plt.axhline(y=total_target, color="#48a9be", linestyle="--")
     plt.tight_layout()
 
-    # Convert plot to PNG image
-    pngImage = io.BytesIO()
-    FigureCanvas(plt.gcf()).print_png(pngImage)
+    # Convert plot to SVG image
+    imgdata = io.StringIO()
+    fig.savefig(imgdata, format="svg")
+    svgImage.seek(0)  # rewind the data
 
-    # Encode PNG image to base64 string
-    pngImageB64String = "data:image/png;base64,"
-    pngImageB64String += base64.b64encode(pngImage.getvalue()).decode("utf8")
-
-    return pngImageB64String
+    return svgImage.read()
 
 
 @app.route("/")