Flask：我如何提供动态生成的 svg答案

【问题标题】：Flask: how do I serve an svg that's dynamically generatedFlask：我如何提供动态生成的 svg
【发布时间】：2015-05-29 10:57:48
【问题描述】：

所以我有生成 SVG xml 的代码：

def get_map(locations):
    max_value = max(locations.iteritems(), key=operator.itemgetter(1))[1]
    base = "fill:#%s;fill-rule:nonzero;"

    f = open("../static/img/usaHigh.svg", "r").read()
    soup = BeautifulSoup(f)

    for l in locations:
       #do stuff.....

    return str(soup)

但现在我想通过烧瓶提供这个 svg。能够做类似的事情

<img src='sometemp.svg'>

所以我的烧瓶函数看起来像：

def serve_content():
    return render_template('sometemplate.html', map=get_map())

不创建临时文件可以吗？

编辑：这是输出的一部分：

<?xml version='1.0' encoding='utf-8'?>
<!-- (c) ammap.com | SVG map of USA -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:amcharts="http://amcharts.com/ammap" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<defs>
<style type="text/css">
            .land
            {
                fill: #CCCCCC;
                fill-opacity: 1;
                stroke:white;
                stroke-opacity: 1;
                stroke-width:0.5;
            }
        </style>
<!--{id:"US-AK"},{id:"US-AL"},{id:"US-AR"},{id:"US-AZ"},{id:"US-CA"},{id:"US-CO"},{id:"US-CT"},{id:"US-DC"},{id:"US-DE"},{id:"US-FL"},{id:"US-GA"},{id:"US-HI"},{id:"US-IA"},{id:"US-ID"},{id:"US-IL"},{id:"US-IN"},{id:"US-KS"},{id:"US-KY"},{id:"US-LA"},{id:"US-MA"},{id:"US-MD"},{id:"US-ME"},{id:"US-MI"},{id:"US-MN"},{id:"US-MO"},{id:"US-MS"},{id:"US-MT"},{id:"US-NC"},{id:"US-ND"},{id:"US-NE"},{id:"US-NH"},{id:"US-NJ"},{id:"US-NM"},{id:"US-NV"},{id:"US-NY"},{id:"US-OH"},{id:"US-OK"},{id:"US-OR"},{id:"US-PA"},{id:"US-RI"},{id:"US-SC"},{id:"US-SD"},{id:"US-TN"},{id:"US-TX"},{id:"US-UT"},{id:"US-VA"},{id:"US-VT"},{id:"US-WA"},{id:"US-WI"},{id:"US-WV"},{id:"US-WY"}-->
</defs>
<g>
<path id="US-AK" title="Alaska" class="land" d="M456.18,521.82l-0.1,4.96l-0.1,4.94l-0.1,4.92l-0.1,4.9l-0.1,4.88l-0.1,4.86l-0.1,4.84l-0.1,4.82l-0.1,4.8l-0.1,4.78l-0.1,4.77l-0.09,4.75l-0.1,4.73l-0.09,4.71l-0.09,4.7l-0.09,4.68l-0.09,4.66l-0.09,4.65l-0.09,4.64l-0.09,4.62l-0.09,4.61l-0.09,4.59l-0.09,4.58l-0.09,4.56l-0.09,4.55l-0.09,4.54l-0.09,4.53l-0.09,4.51l-0.09,4.5l-0.09,4.49l-0.09,4.48l-0.09,4.47l1.8,0.66l1.79,0.65l0.57,-1.23l1.93,0.97l1.69,0.85l1.09,-1.06l1.18,-1.14l1.58,-0.07l1.77,-0.09l1.18,-0.06l0,0.98l-0.44,1.63l-

所以我试图将它传回页面模板，而不是先将其保存到文件中，然后再提供它。这可能吗？

编辑 2：

这是路由函数

@app.route("/map", methods=["GET", "POST"])
def map():
    locations = {"US-NY":60,
             "US-FL":30,
             "US-CA":100}
    #return Response(get_map(locations), mimetype='image/svg+xml')
    return render_template("map.html", svg=get_map(locations))

这是我的模板：

<html>
<body>

this is some of the stuff I want, here's a beautiful map

{{ svg }}
</body>

</html>

这就是我的页面在 Chrome 上的样子

所以它实际上并没有显示 svg :'(

【问题讨论】：

标签： python svg flask

【解决方案1】：

您的 SVG 代码是 autoescaped。一个合适的解决方案是调用Markup()，如下所示：

return render_template("map.html", svg=Markup(get_map(locations)))

【讨论】：

get_map 函数是什么？我该如何导入它？当我尝试运行此代码时，我的程序给了我一个NameError。我觉得这个答案需要更新。文档链接也坏了。
get_map() 是原始问题提供的功能。我已经更新了链接，但您可以自己更新带有死链接的答案。

【解决方案2】：

您可以为此使用 StringIO：

from flask import send_file
from StringIO import StringIO

def serve_content(content):
    svg_io = StringIO()
    svg_io.write(content)
    svg_io.seek(0)
    return send_file(svg_io, mimetype='image/svg+xml')

【讨论】：

是的，这就是我目前所拥有的，但如果我这样做，整个渲染页面将是地图本身，这就是我试图避免的我试图包含地图作为页面的一部分。所以除了地图之外，页面还有其他内容。
使用 StringIO（或最快的替代 cStringIO）允许“在内存中”工作而无需临时文件
您需要两个“servlet”：一个用于您的页面（一个包含），一个用于 sometemp.svg 本身。我的代码是第二个
既然我已经有了 xml，我不应该需要两个 servlet 来提供 svg。
好的，HTML 中的 svg 元素应该以结尾，Beautiful soup 添加 xml 标签，尝试删除它们

【解决方案3】：

对于那些不需要实际文件的人，以下是我从头开始制作具有自定义颜色的 SVG 并使用 Flask 提供它的方法。

import flask

custom_color_global_variable = 'red'

@app.route('/circle-thin-custom-color.svg', methods=('GET', 'HEAD'))
def circle_thin_custom_color):
    """Thin circle with the color set by a global variable."""
    return flask.Response(
        """
            <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 512 512"
            ><path 
                fill="{color}" 
                d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111
                    248-248S393 8 256 8zm216 248c0 118.7-96.1 216-216 216-118.7
                    0-216-96.1-216-216 0-118.7 96.1-216 216-216 118.7 0 216 96.1
                    216 216z"
            /></svg>
        \n""".format(
            color=custom_color_global_variable,
        ),
        mimetype='image/svg+xml'
    )

【讨论】：