Django – How can i resize the svg in the html template

Question

I just created a matplot figure from a csv in django (line graph) and rendering it to the html template and I can’t modify its dimensions

imgdata = io.StringIO()
        fig.savefig(imgdata, format='svg')
        imgdata.seek(0)
        data = imgdata.getvalue()
        return data
    data = isolate(selected_loc)
    return render(request, 'hello.html', {'data': data, 'locations' : list(locations)})

html template

<div class="figure" style="">{{ data|safe }}</div>

i tried styling the div in css

.figure {
        width: 40%;
        height: 500px;
      }

and it doesnt working only the div container expands but not the svg that just rendered

enter image description here

Asked By: Gabe Fletcher Sanchez

||

Source

Answer 1

Try it like this .

<svg width="100" height="100" viewBox="0 0 100 100" )
        imgdata.seek(0)
        data = imgdata.getvalue()
        return data
    data = isolate(selected_loc)
    return render(request, 'hello.html', {'data': data, 'locations' : list(locations)})


tree = ET.parse(imgdata)
root = tree.getroot()

# whatever the namespace is typically "http://www.w3.org/2000/svg"
# elements are the elements you are looking for
for e in root.findall("{namespace}elements"):
    e.attrib["attribute_to_set"] = ""

root.attrib["height"] = "100%"
root.attrib["width"] = "100%"

# tree.write() saves the file so you can write it to a BytesIO or StringIO
# the below should work.
tree.write(imgdata)

Your css should also work, but I think you should be attaching it to the svg itself and not the container. There is a chance that some style is taking precedence over the style you’re trying to apply, so you could always add an !important at the end of it, like so, border: solid black 1px !important; to rule that out.

Given the information above, you have 2 options; Either use the CSS below or use the etree code and remove the svg {...} css I have below.

If you don’t have an id attached to the svg itself, you would have to select it:

svg
{
    width: 100%;
    /*height: 100%;*/
}
.container
{
    width: 40%;
    height: 500px;
}

Answered By: Anoop

Django – How can i resize the svg in the html template

Question:

Answers: