How to render an svg image from an svg byte stream

Question

This python / flask script creates an svg QR code byte stream but when I try to render it using a Jinja2 template {{ qr[0] }}, it renders as text. How can I render it as an image? As you can see from the code below, I have successfully transferred the data to the client - I do not need help with that - the only issue is that the data is in the wrong format - an svg byte stream - whereas I want to display that data as an image.

For the benefit of clarification, I MUST export the qr code in the render_template because I have other variables that contribute to the qr code, which also need to be exported. Therefore, the <img src="{{ url_for('qr') }}"> method does not work.

Likewise, I do not want the data to be visible in the URL.

import pyqrcode
from io import BytesIO

@app.route('/qr/<id>/<price>', methods=['GET', 'POST'])
def qr(id,price):
    if id:
        data = id+price
        basestring = pyqrcode.create(data, error='H')
        stream = BytesIO()
        basestring.svg(stream, scale=5, module_color='#802929', background='#FFFFFF')
        qr = stream.getvalue(), 200, {
            'Content-Type': 'image/svg+xml',
            'Cache-Control': 'no-cache, no-store, must-revalidate',
            'Pragma': 'no-cache',
            'Expires': '0'}

    return render_template('qr.html', qr=qr, data=data)

This is a portion of what currently renders as text on the HTML page:

b'\n<path transform="scale(5)" stroke="#802929" class="pyqrline" d="M4 4.5h7m1 0h1m1 0h2m2 0h2m1 0h3m1 0h1m1 0h2m1 0h2m2 0h5m2 0h4m1 0h1m1 0h4m2 0h7m-57 1h1m5 0h1m2 0h1m1 0h1m2 0h5m1 0h2m3 0h1m4 0h1m1 0h1m1 0h5m4 0h1m3 0h1m2 0h1m5 0h1m-57 1h1m1 0h3m1 0h1m1 0h1m1 0h4m3 0h1m3 0h1m2 0h2m3 0h2m3 0h1m2 0h1m1 0h4m1 0h4m2 0h1m1 0h3m1 0h1m-57 1h1m1 0h3m1 0h1m3 0h3m2 0h1m2 0h3m1 0h1m8 0h2m1 0h2m3 0h2m1 0h3m2 0h1m2 0h1m1 0h3m1 0h1m-57 1h1m1 0h3m1 0h1m1 0h1m1 0h1m1 0h1m2 0h1m5 0h1m3 0h6m1 0h1m1 0h3m3 0h3m1 0h1m2 0h1m2 0h1m1 0h3m1 0h1m-57 1h1m5 0h1m2 0h1m5 0h1m2 0h1m6 0h2m3 0h1m1 0h2m1 0h7m1 0h4m3 0h1m5 0h1m-57 1h7m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h1m1 0h7m-49 1h1m3 0h3m1 0h5m1 0h1m3 0h1m3 0h1m1 0h1m2 0h1m3 0h3m1 0h1m1 0h2m1 0h1m-44 1h2m4 0h1m2 0h2m1 0h4m4 0h6m2 0h5m1 0h1m5 0h3m2 0h1m1 0h1m1 0h1m1 0h1m-57

This question is akin to what I am asking: https://stackoverflow.com/questions/33340728/getting-svg-stored-in-a-variable-in-jinja2 — Jack, Aug 03 '20 at 09:48

score 3 · Accepted Answer · answered Aug 18 '20 at 19:58

You've to decode the byte stream before usage in the template. Further you've to use Jinja's | safe filter.

import pyqrcode
from io import BytesIO

@app.route('/qr/<id>/<price>', methods=['GET', 'POST'])
def qr(id, price):
    data = id + price
    qrcode = pyqrcode.create(data, error='H')
    stream = BytesIO()
    # Added: Disable XML declaration and SVG namespace
    # Removed: background='#FFFFFF' since it is the default
    qrcode.svg(stream, scale=5, xmldecl=False, svgns=False, module_color='#802929')
    qr = stream.getvalue().decode('utf-8')
    return render_template('qr.html', qr=qr, data=data)

In your template:

<div>{{ qr | safe }}</div>

Or even shorter by using another QR code lib

import segno

@app.route('/qr/<id>/<price>', methods=['GET', 'POST'])
def qr(id, price):
    data = id + price
    qr = segno.make(data, error='H')
    return render_template('qr.html', qr=qr, data=data)

Jinja template:

<div>{{ qr.svg_inline(dark='#802929', scale=5) | safe }}</div>

Many thanks for this. I solved it in a similar way but I really like the segno addition. — Jack, Aug 19 '20 at 09:25

How to render an svg image from an svg byte stream

1 Answers1