My flask app has a route that creates a .svg file (using pygal) and renders in in a template. Within the app, there are no interactive features however, if I open the the same .svg file from my file browser, I get the full interactive features I'm aiming for like labels on hover etc. Any ideas on how to get the interactive hovers working from my route?
{% extends "base.html" %}
{% block content %}
<div class="container">
<h2 style="text-align:center;">Matrix of Concern for {{ company.companyname }}</H2>
<div class="container-fluid">
<div class="row-fluid">
<img src="{{plot|safe}}" alt="Image did not Load">
</div>
</div>
</div>
{% endblock %}
here is the plot variable passed to the template
<?xml version='1.0' encoding='utf-8'?>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" class="pygal-chart" id="chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg"><!--Generated with pygal 2.3.1 (etree) ©Kozea 2012-2016 on 2017-12-07--><!--http://pygal.org--><!--http://github.com/Kozea/pygal--><defs><style type="text/css">#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3{-webkit-user-select:none;-webkit-font-smoothing:antialiased;font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .title{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:16px}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .legends .legend text{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:14px}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis text{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis text.major{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .text-overlay text.value{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:16px}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .text-overlay text.label{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:10px}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .tooltip{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:14px}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 text.no_data{font-family:Consolas,"Liberation Mono",Menlo,Courier,monospace;font-size:64px}
#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3{background-color:rgba(249,249,249,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 path,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 line,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 rect,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 circle{-webkit-transition:150ms;-moz-transition:150ms;transition:150ms}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .graph > .background{fill:rgba(249,249,249,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .plot > .background{fill:rgba(255,255,255,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .graph{fill:rgba(0,0,0,.87)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 text.no_data{fill:rgba(0,0,0,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .title{fill:rgba(0,0,0,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .legends .legend text{fill:rgba(0,0,0,.87)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .legends .legend:hover text{fill:rgba(0,0,0,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis .line{stroke:rgba(0,0,0,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis .guide.line{stroke:rgba(0,0,0,.54)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis .major.line{stroke:rgba(0,0,0,.87)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis text.major{fill:rgba(0,0,0,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis.y .guides:hover .guide.line,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .line-graph .axis.x .guides:hover .guide.line,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .stackedline-graph .axis.x .guides:hover .guide.line,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .xy-graph .axis.x .guides:hover .guide.line{stroke:rgba(0,0,0,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis .guides:hover text{fill:rgba(0,0,0,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .reactive{fill-opacity:.7;stroke-opacity:.8}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .ci{stroke:rgba(0,0,0,.87)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .reactive.active,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .active .reactive{fill-opacity:.8;stroke-opacity:.9;stroke-width:4}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .ci .reactive.active{stroke-width:1.5}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .series text{fill:rgba(0,0,0,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .tooltip rect{fill:rgba(255,255,255,1);stroke:rgba(0,0,0,1);-webkit-transition:opacity 150ms;-moz-transition:opacity 150ms;transition:opacity 150ms}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .tooltip .label{fill:rgba(0,0,0,.87)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .tooltip .label{fill:rgba(0,0,0,.87)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .tooltip .legend{font-size:.8em;fill:rgba(0,0,0,.54)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .tooltip .x_label{font-size:.6em;fill:rgba(0,0,0,1)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .tooltip .xlink{font-size:.5em;text-decoration:underline}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .tooltip .value{font-size:1.5em}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .bound{font-size:.5em}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .max-value{font-size:.75em;fill:rgba(0,0,0,.54)}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .map-element{fill:rgba(255,255,255,1);stroke:rgba(0,0,0,.54) !important}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .map-element .reactive{fill-opacity:inherit;stroke-opacity:inherit}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .color-0,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .color-0 a:visited{stroke:#F44336;fill:#F44336}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .text-overlay .color-0 text{fill:black}
#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 text.no_data{text-anchor:middle}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .guide.line{fill:none}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .centered{text-anchor:middle}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .title{text-anchor:middle}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .legends .legend text{fill-opacity:1}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis.x text{text-anchor:middle}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis.x:not(.web) text[transform]{text-anchor:start}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis.x:not(.web) text[transform].backwards{text-anchor:end}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis.y text{text-anchor:end}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis.y text[transform].backwards{text-anchor:start}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis.y2 text{text-anchor:start}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis.y2 text[transform].backwards{text-anchor:end}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis .guide.line{stroke-dasharray:4,4}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis .major.guide.line{stroke-dasharray:6,6}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .horizontal .axis.y .guide.line,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .horizontal .axis.y2 .guide.line,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .vertical .axis.x .guide.line{opacity:0}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .horizontal .axis.always_show .guide.line,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .vertical .axis.always_show .guide.line{opacity:1 !important}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis.y .guides:hover .guide.line,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis.y2 .guides:hover .guide.line,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis.x .guides:hover .guide.line{opacity:1}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .axis .guides:hover text{opacity:1}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .nofill{fill:none}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .subtle-fill{fill-opacity:.2}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .dot{stroke-width:1px;fill-opacity:1}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .dot.active{stroke-width:5px}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .dot.negative{fill:transparent}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 text,#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 tspan{stroke:none !important}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .series text.active{opacity:1}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .tooltip rect{fill-opacity:.95;stroke-width:.5}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .tooltip text{fill-opacity:1}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .showable{visibility:hidden}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .showable.shown{visibility:visible}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .gauge-background{fill:rgba(229,229,229,1);stroke:none}#chart-9aa1b551-e893-4065-bf16-b5022bb4e8e3 .bg-lines{stroke:rgba(249,249,249,1);stroke-width:2px}</style><script type="text/javascript">window.pygal = window.pygal || {};window.pygal.config = window.pygal.config || {};window.pygal.config['9aa1b551-e893-4065-bf16-b5022bb4e8e3'] = {"allow_interruptions": false, "box_mode": "extremes", "classes": ["pygal-chart"], "css": ["file://style.css", "file://graph.css"], "defs": [], "disable_xml_declaration": false, "dots_size": 2.5, "dynamic_print_values": false, "explicit_size": false, "fill": false, "force_uri_protocol": "https", "formatter": null, "half_pie": false, "height": 600, "include_x_axis": false, "inner_radius": 0, "interpolate": null, "interpolation_parameters": {}, "interpolation_precision": 250, "inverse_y_axis": false, "js": ["//kozea.github.io/pygal.js/2.0.x/pygal-tooltips.min.js"], "legend_at_bottom": false, "legend_at_bottom_columns": null, "legend_box_size": 12, "logarithmic": false, "margin": 20, "margin_bottom": null, "margin_left": null, "margin_right": null, "margin_top": null, "max_scale": 16, "min_scale": 4, "missing_value_fill_truncation": "x", "no_data_text": "No data", "no_prefix": false, "order_min": null, "pretty_print": false, "print_labels": true, "print_values": false, "print_values_position": "center", "print_zeroes": true, "range": null, "rounded_bars": null, "secondary_range": null, "show_dots": true, "show_legend": true, "show_minor_x_labels": true, "show_minor_y_labels": true, "show_only_major_dots": false, "show_x_guides": false, "show_x_labels": true, "show_y_guides": true, "show_y_labels": true, "spacing": 10, "stack_from_top": false, "strict": false, "stroke": false, "stroke_style": null, "style": {"background": "rgba(249, 249, 249, 1)", "ci_colors": [], "colors": ["#F44336", "#3F51B5", "#009688", "#FFC107", "#FF5722", "#9C27B0", "#03A9F4", "#8BC34A", "#FF9800", "#E91E63", "#2196F3", "#4CAF50", "#FFEB3B", "#673AB7", "#00BCD4", "#CDDC39", "#9E9E9E", "#607D8B"], "font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "foreground": "rgba(0, 0, 0, .87)", "foreground_strong": "rgba(0, 0, 0, 1)", "foreground_subtle": "rgba(0, 0, 0, .54)", "guide_stroke_dasharray": "4,4", "label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "label_font_size": 10, "legend_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "legend_font_size": 14, "major_guide_stroke_dasharray": "6,6", "major_label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "major_label_font_size": 10, "no_data_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "no_data_font_size": 64, "opacity": ".7", "opacity_hover": ".8", "plot_background": "rgba(255, 255, 255, 1)", "stroke_opacity": ".8", "stroke_opacity_hover": ".9", "title_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "title_font_size": 16, "tooltip_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "tooltip_font_size": 14, "transition": "150ms", "value_background": "rgba(229, 229, 229, 1)", "value_colors": [], "value_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "value_font_size": 16, "value_label_font_family": "Consolas, \"Liberation Mono\", Menlo, Courier, monospace", "value_label_font_size": 10}, "title": "Matrix of Concern", "tooltip_border_radius": 0, "tooltip_fancy_mode": true, "truncate_label": null, "truncate_legend": null, "width": 800, "x_label_rotation": 0, "x_labels": null, "x_labels_major": null, "x_labels_major_count": null, "x_labels_major_every": null, "x_title": null, "xrange": null, "y_label_rotation": 0, "y_labels": null, "y_labels_major": null, "y_labels_major_count": null, "y_labels_major_every": null, "y_title": null, "zero": 0, "legends": ["ob-dl"]}</script><script type="text/javascript" xlink:href="https://kozea.github.io/pygal.js/2.0.x/pygal-tooltips.min.js" /></defs><title>Matrix of Concern</title><g class="graph xy-graph vertical"><rect class="background" height="600" width="800" x="0" y="0" /><g class="plot" transform="translate(112, 46)"><rect class="background" height="514" width="668.0" x="0" y="0" /><g class="axis y"><path class="line" d="M0.000000 514.000000 h668.000000" /><g class="guides"><path class="guide line" d="M0.000000 472.433925 h668.000000" /><text class="" x="-5" y="475.93392504930966">20</text><title>20</title></g><g class="guides"><path class="guide line" d="M0.000000 430.191979 h668.000000" /><text class="" x="-5" y="433.6919789612097">40</text><title>40</title></g><g class="guides"><path class="guide line" d="M0.000000 387.950033 h668.000000" /><text class="" x="-5" y="391.4500328731098">60</text><title>60</title></g><g class="guides"><path class="guide line" d="M0.000000 345.708087 h668.000000" /><text class="" x="-5" y="349.20808678500987">80</text><title>80</title></g><g class="guides"><path class="major guide line" d="M0.000000 303.466141 h668.000000" /><text class="major" x="-5" y="306.9661406969099">100</text><title>100</title></g><g class="guides"><path class="guide line" d="M0.000000 261.224195 h668.000000" /><text class="" x="-5" y="264.72419460880997">120</text><title>120</title></g><g class="guides"><path class="guide line" d="M0.000000 218.982249 h668.000000" /><text class="" x="-5" y="222.48224852071007">140</text><title>140</title></g><g class="guides"><path class="guide line" d="M0.000000 176.740302 h668.000000" /><text class="" x="-5" y="180.24030243261012">160</text><title>160</title></g><g class="guides"><path class="guide line" d="M0.000000 134.498356 h668.000000" /><text class="" x="-5" y="137.99835634451017">180</text><title>180</title></g><g class="guides"><path class="major guide line" d="M0.000000 92.256410 h668.000000" /><text class="major" x="-5" y="95.75641025641028">200</text><title>200</title></g><g class="guides"><path class="guide line" d="M0.000000 50.014464 h668.000000" /><text class="" x="-5" y="53.514464168310326">220</text><title>220</title></g></g><g class="axis x"><g class="guides"><path class="axis line" d="M12.846154 0.000000 v514.000000" /><text class="" x="12.846153846153845" y="529.0">0</text><title>0</title></g><g class="guides"><path class="guide line" d="M146.716036 0.000000 v514.000000" /><text class="" x="146.7160355276237" y="529.0">100</text><title>100</title></g><g class="guides"><path class="guide line" d="M280.585917 0.000000 v514.000000" /><text class="" x="280.5859172090935" y="529.0">200</text><title>200</title></g><g class="guides"><path class="guide line" d="M414.455799 0.000000 v514.000000" /><text class="" x="414.45579889056336" y="529.0">300</text><title>300</title></g><g class="guides"><path class="guide line" d="M548.325681 0.000000 v514.000000" /><text class="" x="548.3256805720332" y="529.0">400</text><title>400</title></g></g><g class="series serie-0 color-0" /></g><g class="titles"><text class="title plot_title" x="400.0" y="26">Matrix of Concern</text></g><g class="plot overlay" transform="translate(112, 46)"><g class="series serie-0 color-0"><g class="dots"><a target="_blank" xlink:href="http://127.0.0.1:5000/graph/12467966"><desc class="xlink">http://127.0.0.1:5000/graph/12467966</desc><desc class="label">Pikachu</desc><circle class="dot reactive tooltip-trigger" cx="12.846153846153845" cy="22.557199211045372" r="2.5" /><desc class="value">0: 233</desc><desc class="x ">12.846153846153845</desc><desc class="y ">22.557199211045372</desc></a></g><g class="dots"><a target="_blank" xlink:href="http://127.0.0.1:5000/graph/12467967"><desc class="xlink">http://127.0.0.1:5000/graph/12467967</desc><desc class="label">Eevee</desc><circle class="dot reactive tooltip-trigger" cx="12.846153846153845" cy="472.43392504930966" r="2.5" /><desc class="value">0: 20</desc><desc class="x top">12.846153846153845</desc><desc class="y top">472.43392504930966</desc></a></g><g class="dots"><a target="_blank" xlink:href="http://127.0.0.1:5000/graph/12467968"><desc class="xlink">http://127.0.0.1:5000/graph/12467968</desc><desc class="label">Snorlax</desc><circle class="dot reactive tooltip-trigger" cx="12.846153846153845" cy="487.21860618014466" r="2.5" /><desc class="value">0: 13</desc><desc class="x top">12.846153846153845</desc><desc class="y top">487.21860618014466</desc></a></g><g class="dots"><a target="_blank" xlink:href="http://127.0.0.1:5000/graph/12467969"><desc class="xlink">http://127.0.0.1:5000/graph/12467969</desc><desc class="label">Charizard</desc><circle class="dot reactive tooltip-trigger" cx="12.846153846153845" cy="499.8911900065746" r="2.5" /><desc class="value">0: 7</desc><desc class="x top">12.846153846153845</desc><desc class="y top">499.8911900065746</desc></a></g><g class="dots"><a target="_blank" xlink:href="http://127.0.0.1:5000/graph/12467970"><desc class="xlink">http://127.0.0.1:5000/graph/12467970</desc><desc class="label">Charmander</desc><circle class="dot reactive tooltip-trigger" cx="12.846153846153845" cy="172.51610782380016" r="2.5" /><desc class="value">0: 162</desc><desc class="x ">12.846153846153845</desc><desc class="y ">172.51610782380016</desc></a></g><g class="dots"><a target="_blank" xlink:href="http://127.0.0.1:5000/graph/12467971"><desc class="xlink">http://127.0.0.1:5000/graph/12467971</desc><desc class="label">Squirtle</desc><circle class="dot reactive tooltip-trigger" cx="58.62965338121652" cy="371.0532544378698" r="2.5" /><desc class="value">34.2: 68</desc><desc class="x top">58.62965338121652</desc><desc class="y top">371.0532544378698</desc></a></g><g class="dots"><a target="_blank" xlink:href="http://127.0.0.1:5000/graph/12467972"><desc class="xlink">http://127.0.0.1:5000/graph/12467972</desc><desc class="label">Gengar</desc><circle class="dot reactive tooltip-trigger" cx="12.846153846153845" cy="316.1387245233399" r="2.5" /><desc class="value">0: 94</desc><desc class="x top">12.846153846153845</desc><desc class="y top">316.1387245233399</desc></a></g><g class="dots"><a target="_blank" xlink:href="http://127.0.0.1:5000/graph/12467973"><desc class="xlink">http://127.0.0.1:5000/graph/12467973</desc><desc class="label">Dragonite</desc><circle class="dot reactive tooltip-trigger" cx="655.1538461538461" cy="504.11538461538464" r="2.5" /><desc class="value">479.8: 5</desc><desc class="x left top">655.1538461538461</desc><desc class="y left top">504.11538461538464</desc></a></g><g class="dots"><a target="_blank" xlink:href="http://127.0.0.1:5000/graph/12467974"><desc class="xlink">http://127.0.0.1:5000/graph/12467974</desc><desc class="label">Bulbasaur</desc><circle class="dot reactive tooltip-trigger" cx="12.846153846153845" cy="9.884615384615415" r="2.5" /><desc class="value">0: 239</desc><desc class="x ">12.846153846153845</desc><desc class="y ">9.884615384615415</desc></a></g><g class="dots"><a target="_blank" xlink:href="http://127.0.0.1:5000/graph/12467975"><desc class="xlink">http://127.0.0.1:5000/graph/12467975</desc><desc class="label">Jiggleypuff</desc><circle class="dot reactive tooltip-trigger" cx="12.846153846153845" cy="81.6959237343853" r="2.5" /><desc class="value">0: 205</desc><desc class="x ">12.846153846153845</desc><desc class="y ">81.6959237343853</desc></a></g><g class="dots"><a target="_blank" xlink:href="http://127.0.0.1:5000/graph/12467976"><desc class="xlink">http://127.0.0.1:5000/graph/12467976</desc><desc class="label">Lapras</desc><circle class="dot reactive tooltip-trigger" cx="250.46519383076281" cy="504.11538461538464" r="2.5" /><desc class="value">177.5: 5</desc><desc class="x top">250.46519383076281</desc><desc class="y top">504.11538461538464</desc></a></g></g></g><g class="plot text-overlay" transform="translate(112, 46)"><g class="series serie-0 color-0"><text class="label" x="28.846153846153847" y="43.89053254437871">Pikachu</text><text class="label" x="28.846153846153847" y="493.767258382643">Eevee</text><text class="label" x="28.846153846153847" y="508.551939513478">Snorlax</text><text class="label" x="28.846153846153847" y="521.2245233399079">Charizard</text><text class="label" x="28.846153846153847" y="193.8494411571335">Charmander</text><text class="label" x="74.62965338121651" y="392.3865877712031">Squirtle</text><text class="label" x="28.846153846153847" y="337.4720578566732">Gengar</text><text class="label" x="671.1538461538461" y="525.448717948718">Dragonite</text><text class="label" x="28.846153846153847" y="31.217948717948747">Bulbasaur</text><text class="label" x="28.846153846153847" y="103.02925706771863">Jiggleypuff</text><text class="label" x="266.4651938307628" y="525.448717948718">Lapras</text></g></g><g class="plot tooltip-overlay" transform="translate(112, 46)"><g class="tooltip" style="opacity: 0" transform="translate(0 0)"><rect class="tooltip-box" height="0" rx="0" ry="0" width="0" /><g class="text" /></g></g><g class="legends" transform="translate(10, 56)"><g class="legend reactive activate-serie" id="activate-serie-0"><rect class="color-0 reactive" height="12" width="12" x="0.0" y="1.0" /><text x="17.0" y="11.2">ob-dl</text></g></g><g class="legends" transform="translate(790, 56)" /></g></svg>
source code from generated page-
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/favicons/favicon-16x16.png">
<link rel="manifest" href="/static/favicons/manifest.json">
<link rel="mask-icon" href="/static/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<!-- Bootstrap -->
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<style>
nav {
margin-left: 0.25in;
}
.navbar-nav {
padding-top: 1em;
}
.nav-item {
padding-right: 1em;
}
nav img {
width: 0.5in;
margin-right: 1em;
}
a#userinfo {
color: gray;
}
</style>
<nav>
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/design_list">
<img src="/static/pcbevo-logo.png">
</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="/help">Help</a></li>
<li><a href="/changes">Changes</a></li>
<li><a href="/logout">Logout</a></li>
<li><a id="userinfo"href="#">User: timothy</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Admin
<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="/error_listing">Error Listing</a></li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="container">
<h2 style="text-align:center;">Matrix of Concern for ACME</H2>
<div class="container-fluid">
<div class="row-fluid">
<img src="/gen/5f64cddf0a90b44c/tmp_2d48sq2.svg" alt="Image did not Load">
</div>
</div>
</div>
<style>
#footer {
margin-left: .25in;
}
#footer p {
font-size: 70%;
margin-top: 6px;
color: gray;
}
#footer hr {
height: 2px;
}
</style>
<div id="footer">
<hr>
<p>Copyright © 2017 PCBevo Pty. Ltd.<br>All rights reserved.</p>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
When you load SVG as an image, in this case via the <img> tag it is not interactive. This is a general rule and is not flask specific.
SVG in an image has the same capabilities as raster images so that they can be used in the same situations without needing to specially consider their security and privacy implications.