robmcc
June 24, 2022, 5:10am
1
I would like to have an svg image that is in memory to have urls embedded in it, that when the user clicks they go to another page. I am able to create the image:
import matplotlib.pyplot as plt
from io import BytesIO
sns_plot = plt.scatter([1, 2, 3], [4, 5, 6])
sns_plot.set_urls(['https://www.bbc.co.uk/news', 'https://www.google.com/', None])
fig = sns_plot.get_figure()
img_in_memory = BytesIO()
fig.savefig(img_in_memory, format="svg")
image = base64.b64encode(img_in_memory.getvalue())
image = image.decode(settings.DEFAULT_CHARSET)
sns_plot.get_figure().clf()
and display it in the template:
<img src="data:image/svg+xml;base64,{{image}}" class="img-fluid mx-auto d-block"/>
If I right click and save the image and then open in a browser the links are clickable but when the image is rendered in the browser by django they are not?
Visually examine the HTML that has been rendered and verify that it is correct.
robmcc
June 25, 2022, 4:43am
3
On the django site the html is:
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIKICAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjQ2MC44cHQiIGhlaWdodD0iMzQ1LjZwdCIgdmlld0JveD0iMCAwIDQ2MC44IDM0NS42IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSI+CiA8bWV0YWRhdGE+CiAgPHJkZjpSREYgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIiB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPgogICA8Y2M6V29yaz4KICAgIDxkYzp0eXBlIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiLz4KICAgIDxkYzpkYXRlPjIwMjItMDYtMjVUMDQ6NDA6MTIuNDMzMTU2PC9kYzpkYXRlPgogICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICA8ZGM6Y3JlYXRvcj4KICAgICA8Y2M6QWdlbnQ+CiAgICAgIDxkYzp0aXRsZT5NYXRwbG90bGliIHYzLjUuMSwgaHR0cHM6Ly9tYXRwbG90bGliLm9yZy88L2RjOnRpdGxlPgogICAgIDwvY2M6QWdlbnQ+CiAgICA8L2RjOmNyZWF0b3I+CiAgIDwvY2M6V29yaz4KICA8L3JkZjpSREY+CiA8L21ldGFkYXRhPgogPGRlZnM+CiAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4qe3N0cm9rZS1saW5lam9pbjogcm91bmQ7IHN0cm9rZS1saW5lY2FwOiBidXR0fTwvc3R5bGU+CiA8L2RlZnM+CiA8ZyBpZD0iZmlndXJlXzEiPgogIDxnIGlkPSJwYXRjaF8xIj4KICAgPHBhdGggZD0iTSAwIDM0NS42IApMIDQ2MC44IDM0NS42IApMIDQ2MC44IDAgCkwgMCAwIAp6CiIgc3R5bGU9ImZpbGw6ICNmZmZmZmYiLz4KICA8L2c+CiAgPGcgaWQ9ImF4ZXNfMSI+CiAgIDxnIGlkPSJwYXRjaF8yIj4KICAgIDxwYXRoIGQ9Ik0gNTcuNiAzMDcuNTg0IApMIDQxNC43MiAzMDcuNTg0IApMIDQxNC43MiA0MS40NzIgCkwgNTcuNiA0MS40NzIgCnoKIiBzdHlsZT0iZmlsbDogI2ZmZmZmZiIvPgogICA8L2c+CiAgIDxnIGlkPSJwYXRjaF8zIj4KICAgIDxwYXRoIGQ9Ik0gNzMuODMyNzI3IDMwNy41ODQgCkwgMTAwLjMzNTEzOSAzMDcuNTg0IApMIDEwMC4zMzUxMzkgMjgxLjQwODYzNyAKTCA3My44MzI3MjcgMjgxLjQwODYzNyAKegoiIGNsaXAtcGF0aD0idXJsKCNwY2Q4NmIxNzcwMSkiIHN0eWxlPSJmaWxsOiAjMWY3N2I0Ii8+CiAgIDwvZz4KICAgPGcgaWQ9InBhdGNoXzQiPgogICAgPHBhdGggZD0iTSAxMDYuOTYwNzQyIDMwNy41ODQgCkwgMTMzLjQ2MzE1NCAzMDcuNTg0IApMIDEzMy40NjMxNTQgMjg1LjMyODA3OCAKTCAxMDYuOTYwNzQyIDI4NS4zMjgwNzggCnoKIiBjbGlwLXBhdGg9InVybCgjcGNkODZiMTc3MDEpIiBzdHlsZT0iZmlsbDogIzFmNzdiNCIvPgogICA8L2c+CiAgIDxnIGlkPSJwYXRjaF81Ij4KICAgIDxwYXRoIGQ9Ik0gMTQwLjA4ODc1NyAzMDcuNTg0IApMIDE2Ni41OTExNjkgMzA3LjU4NCAKTCAxNjYuNTkxMTY5IDI4My4wNDUyMzIgCkwgMTQwLjA4ODc1NyAyODMuMDQ1MjMyIAp6CiIgY2xpcC1wYXRoPSJ1cmwoI3BjZDg2YjE3NzAxKSIgc3R5bGU9ImZpbGw6ICMxZjc3YjQiLz4KICAgPC9nPgogICA8ZyBpZD0icGF0Y2hfNiI+CiAgICA8cGF0aCBkPSJNIDE3My4yMTY3NzIgMzA3LjU4NCAKTCAxOTkuNzE5MTg0IDMwNy41ODQgCkwgMTk5LjcxOTE4NCAzMDcuNTY2OTE0IApMIDE3My4yMTY3NzIgMzA3LjU2NjkxNCAKegoiIGNsaXAtcGF0aD0idXJsKCNwY2Q4NmIxNzcwMSkiIHN0eWxlPSJmaWxsOiAjMWY3N2I0Ii8+CiAgIDwvZz4KICAgPGcgaWQ9InBhdGNoXzciPgogICAgPHBhdGggZD0iTSAyMDYuMzQ0Nzg3IDMwNy41ODQgCkwgMjMyLjg0NzE5OSAzMDcuNTg0IApMIDIzMi44NDcxOTkgMzAxLjEyMjQyMiAKTCAyMDYuMzQ0Nzg3IDMwMS4xMjI0MjIgCnoKIiBjbGlwLXBhdGg9InVybCgjcGNkODZiMTc3MDEpIiBzdHlsZT0iZmlsbDogIzFmNzdiNCIvPgogICA8L2c+CiAgIDxnIGlkPSJwYXRjaF84Ij4KICAgIDxwYXRoIGQ9Ik0gMjM5LjQ3MjgwMSAzMDcuNTg0IApMIDI2NS45NzUyMTMgMzA3LjU4NCAKTCAyNjUuOTc1MjEzIDI5Ny40NDUxMDEgCkwgMjM5LjQ3MjgwMSAyOTcuNDQ1MTAxIAp6CiIgY2xpcC1wYXRoPSJ1cmwoI3BjZDg2YjE3NzAxKSIgc3R5bGU9ImZpbGw6ICMxZjc3YjQiLz4KICAgPC9nPgogICA8ZyBpZD0icGF0Y2hfOSI+CiAgICA8cGF0aCBkPSJNIDI3Mi42MDA4MTYgMzA3LjU4NCAKTCAyOTkuMTAzMjI4IDMwNy41ODQgCkwgMjk5LjEwMzIyOCAyOTIuMjM5ODY4IApMIDI3Mi42MDA4MTYgMjkyLjIzOTg2OCAKegoiIGNsaXAtcGF0aD0idXJsKCNwY2Q4NmIxNzcwMSkiIHN0eWxlPSJmaWxsOiAjMWY3N2I0Ii8+CiAgIDwvZz4KICAgPGcgaWQ9InBhdGNoXzEwIj4KICAgIDxwYXRoIGQ9Ik0gMzA1LjcyODgzMSAzMDcuNTg0IApMIDMzMi4yMzEyNDMgMzA3LjU4NCAKTCAzMzIuMjMxMjQzIDI3MC45NTM5MjcgCkwgMzA1LjcyODgzMSAyNzAuOTUzOTI3IAp6CiIgY2xpcC1wYXRoPSJ1cmwoI3BjZDg2YjE3NzAxKSIgc3R5bGU9ImZpbGw6ICMxZjc3YjQiLz4KICAgPC9nPgogICA8ZyBpZD0icGF0Y2hfMTEiPgogICAgPHBhdGggZD0iTSAzMzguODU2ODQ2IDMwNy41ODQgCkwgMzY1LjM1OTI1OCAzMDcuNTg0IApMIDM2NS4zNTkyNTggMjk3Ljk2NzY0NCAKTCAzMzguODU2ODQ2IDI5Ny45Njc2NDQgCnoKIiBjbGlwLXBhdGg9InVybCgjcGNkODZiMTc3MDEpIiBzdHlsZT0iZmlsbDogIzFmNzdiNCIvPgogICA8L2c+CiAgIDxnIGlkPSJwYXRjaF8xMiI+CiAgICA8cGF0aCBkPSJNIDM3MS45ODQ4NjEgMzA3LjU4NCAKTCAzOTguNDg3MjczIDMwNy41ODQgCkwgMzk4LjQ4NzI3MyAyODQuOTI1ODY0IApMIDM3MS45ODQ4NjEgMjg0LjkyNTg2NCAKegoiIGNsaXAtcGF0aD0idXJsKCNwY2Q4NmIxNzcwMSkiIHN0eWxlPSJmaWxsOiAjMWY3N2I0Ii8+CiAgIDwvZz4KICAgPGcgaWQ9IlBhdGhDb2xsZWN0aW9uXzEiPgogICAgPGRlZnM+CiAgICAgPHBhdGggaWQ9IkMwXzBfYWU0NzliODJiMyIgZD0iTSAwIDMgCkMgMC43OTU2MDkgMyAxLjU1ODc0IDIuNjgzOTAxIDIuMTIxMzIgMi4xMjEzMiAKQyAyLjY4MzkwMSAxLjU1ODc0IDMgMC43OTU2MDkgMyAtMCAKQyAzIC0wLjc5NTYwOSAyLjY4MzkwMSAtMS41NTg3NCAyLjEyMTMyIC0yLjEyMTMyIApDIDEuNTU4NzQgLTIuNjgzOTAxIDAuNzk1NjA5IC0zIDAgLTMgCkMgLTAuNzk1NjA5IC0zIC0xLjU1ODc0IC0yLjY4MzkwMSAtMi4xMjEzMiAtMi4xMjEzMiAKQyAtMi42ODM5MDEgLTEuNTU4NzQgLTMgLTAuNzk1NjA5IC0zIDAgCkMgLTMgMC43OTU2MDkgLTIuNjgzOTAxIDEuNTU4NzQgLTIuMTIxMzIgMi4xMjEzMiAKQyAtMS41NTg3NCAyLjY4MzkwMSAtMC43OTU2MDkgMyAwIDMgCnoKIi8+CiAgICA8L2RlZnM+CiAgICA8YSB4bGluazpocmVmPSJodHRwczovL3d3dy5iYmMuY28udWsvbmV3cyI+CiAgICAgPGcgY2xpcC1wYXRoPSJ1cmwoI3BjZDg2YjE3NzAxKSI+CiAgICAgIDx1c2UgeGxpbms6aHJlZj0iI0MwXzBfYWU0NzliODJiMyIgeD0iMTIwLjIxMTk0OCIgeT0iMTM4LjYyNCIgc3R5bGU9ImZpbGw6ICNmZjdmMGU7IHN0cm9rZTogI2ZmN2YwZSIvPgogICAgIDwvZz4KICAgIDwvYT4KICAgIDxhIHhsaW5rOmhyZWY9Imh0dHBzOi8vd3d3Lmdvb2dsZS5jb20vIj4KICAgICA8ZyBjbGlwLXBhdGg9InVybCgjcGNkODZiMTc3MDEpIj4KICAgICAgPHVzZSB4bGluazpocmVmPSIjQzBfMF9hZTQ3OWI4MmIzIiB4PSIxNTMuMzM5OTYzIiB5PSI5Ni4zODQiIHN0eWxlPSJmaWxsOiAjZmY3ZjBlOyBzdHJva2U6ICNmZjdmMGUiLz4KICAgICA8L2c+CiAgICA8L2E+CiAgICA8ZyBjbGlwLXBhdGg9InVybCgjcGNkODZiMTc3MDEpIj4KICAgICA8dXNlIHhsaW5rOmhyZWY9IiNDMF8wX2FlNDc5YjgyYjMiIHg9IjE4Ni40Njc5NzgiIHk9IjU0LjE0NCIgc3R5bGU9ImZpbGw6ICNmZjdmMGU7IHN0cm9rZTogI2ZmN2YwZSIvPgogICAgPC9nPgogICA8L2c+CiAgIDxnIGlkPSJtYXRwbG90bGliLmF4aXNfMSI+CiAgICA8ZyBpZD0ieHRpY2tfMSI+CiAgICAgPGcgaWQ9ImxpbmUyZF8xIj4KICAgICAgPGRlZnM+CiAgICAgICA8cGF0aCBpZD0ibTBlMzU1ZGUwMWIiIGQ9Ik0gMCAwIApMIDAgMy41IAoiIHN0eWxlPSJzdHJva2U6ICMwMDAwMDA7IHN0cm9rZS13aWR0aDogMC44Ii8+CiAgICAgIDwvZGVmcz4KICAgICAgPGc+CiAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNtMGUzNTVkZTAxYiIgeD0iODcuMDgzOTMzIiB5PSIzMDcuNTg0IiBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBzdHJva2Utd2lkdGg6IDAuOCIvPgogICAgICA8L2c+CiAgICAgPC9nPgogICAgIDxnIGlkPSJ0ZXh0XzEiPgogICAgICA8IS0tIDAgLS0+CiAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDgzLjkwMjY4MyAzMjIuMTgyNDM3KXNjYWxlKDAuMSAtMC4xKSI+CiAgICAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0iRGVqYVZ1U2Fucy0zMCIgZD0iTSAyMDM0IDQyNTAgClEgMTU0NyA0MjUwIDEzMDEgMzc3MCAKUSAxMDU2IDMyOTEgMTA1NiAyMzI4IApRIDEwNTYgMTM2OSAxMzAxIDg4OSAKUSAxNTQ3IDQwOSAyMDM0IDQwOSAKUSAyNTI1IDQwOSAyNzcwIDg4OSAKUSAzMDE2IDEzNjkgMzAxNiAyMzI4IApRIDMwMTYgMzI5MSAyNzcwIDM3NzAgClEgMjUyNSA0MjUwIDIwMzQgNDI1MCAKegpNIDIwMzQgNDc1MCAKUSAyODE5IDQ3NTAgMzIzMyA0MTI5IApRIDM2NDcgMzUwOSAzNjQ3IDIzMjggClEgMzY0NyAxMTUwIDMyMzMgNTI5IApRIDI4MTkgLTkxIDIwMzQgLTkxIApRIDEyNTAgLTkxIDgzNiA1MjkgClEgNDIyIDExNTAgNDIyIDIzMjggClEgNDIyIDM1MDkgODM2IDQxMjkgClEgMTI1MCA0NzUwIDIwMzQgNDc1MCAKegoiIHRyYW5zZm9ybT0ic2NhbGUoMC4wMTU2MjUpIi8+CiAgICAgICA8L2RlZnM+CiAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNEZWphVnVTYW5zLTMwIi8+CiAgICAgIDwvZz4KICAgICA8L2c+CiAgICA8L2c+CiAgICA8ZyBpZD0ieHRpY2tfMiI+CiAgICAgPGcgaWQ9ImxpbmUyZF8yIj4KICAgICAgPGc+CiAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNtMGUzNTVkZTAxYiIgeD0iMTUzLjMzOTk2MyIgeT0iMzA3LjU4NCIgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgc3Ryb2tlLXdpZHRoOiAwLjgiLz4KICAgICAgPC9nPgogICAgIDwvZz4KICAgICA8ZyBpZD0idGV4dF8yIj4KICAgICAgPCEtLSAyIC0tPgogICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNTAuMTU4NzEzIDMyMi4xODI0Mzcpc2NhbGUoMC4xIC0wLjEpIj4KICAgICAgIDxkZWZzPgogICAgICAgIDxwYXRoIGlkPSJEZWphVnVTYW5zLTMyIiBkPSJNIDEyMjggNTMxIApMIDM0MzEgNTMxIApMIDM0MzEgMCAKTCA0NjkgMCAKTCA0NjkgNTMxIApRIDgyOCA5MDMgMTQ0OCAxNTI5IApRIDIwNjkgMjE1NiAyMjI4IDIzMzggClEgMjUzMSAyNjc4IDI2NTEgMjkxNCAKUSAyNzcyIDMxNTAgMjc3MiAzMzc4IApRIDI3NzIgMzc1MCAyNTExIDM5ODQgClEgMjI1MCA0MjE5IDE4MzEgNDIxOSAKUSAxNTM0IDQyMTkgMTIwNCA0MTE2IApRIDg3NSA0MDEzIDUwMCAzODAzIApMIDUwMCA0NDQxIApRIDg4MSA0NTk0IDEyMTIgNDY3MiAKUSAxNTQ0IDQ3NTAgMTgxOSA0NzUwIApRIDI1NDQgNDc1MCAyOTc1IDQzODcgClEgMzQwNiA0MDI1IDM0MDYgMzQxOSAKUSAzNDA2IDMxMzEgMzI5OCAyODczIApRIDMxOTEgMjYxNiAyOTA2IDIyNjYgClEgMjgyOCAyMTc1IDI0MDkgMTc0MiAKUSAxOTkxIDEzMDkgMTIyOCA1MzEgCnoKIiB0cmFuc2Zvcm09InNjYWxlKDAuMDE1NjI1KSIvPgogICAgICAgPC9kZWZzPgogICAgICAgPHVzZSB4bGluazpocmVmPSIjRGVqYVZ1U2Fucy0zMiIvPgogICAgICA8L2c+CiAgICAgPC9nPgogICAgPC9nPgogICAgPGcgaWQ9Inh0aWNrXzMiPgogICAgIDxnIGlkPSJsaW5lMmRfMyI+CiAgICAgIDxnPgogICAgICAgPHVzZSB4bGluazpocmVmPSIjbTBlMzU1ZGUwMWIiIHg9IjIxOS41OTU5OTMiIHk9IjMwNy41ODQiIHN0eWxlPSJzdHJva2U6ICMwMDAwMDA7IHN0cm9rZS13aWR0aDogMC44Ii8+CiAgICAgIDwvZz4KICAgICA8L2c+CiAgICAgPGcgaWQ9InRleHRfMyI+CiAgICAgIDwhLS0gNCAtLT4KICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjE2LjQxNDc0MyAzMjIuMTgyNDM3KXNjYWxlKDAuMSAtMC4xKSI+CiAgICAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0iRGVqYVZ1U2Fucy0zNCIgZD0iTSAyNDE5IDQxMTYgCkwgODI1IDE2MjUgCkwgMjQxOSAxNjI1IApMIDI0MTkgNDExNiAKegpNIDIyNTMgNDY2NiAKTCAzMDQ3IDQ2NjYgCkwgMzA0NyAxNjI1IApMIDM3MTMgMTYyNSAKTCAzNzEzIDExMDAgCkwgMzA0NyAxMTAwIApMIDMwNDcgMCAKTCAyNDE5IDAgCkwgMjQxOSAxMTAwIApMIDMxMyAxMTAwIApMIDMxMyAxNzA5IApMIDIyNTMgNDY2NiAKegoiIHRyYW5zZm9ybT0ic2NhbGUoMC4wMTU2MjUpIi8+CiAgICAgICA8L2RlZnM+CiAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNEZWphVnVTYW5zLTM0Ii8+CiAgICAgIDwvZz4KICAgICA8L2c+CiAgICA8L2c+CiAgICA8ZyBpZD0ieHRpY2tfNCI+CiAgICAgPGcgaWQ9ImxpbmUyZF80Ij4KICAgICAgPGc+CiAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNtMGUzNTVkZTAxYiIgeD0iMjg1Ljg1MjAyMiIgeT0iMzA3LjU4NCIgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgc3Ryb2tlLXdpZHRoOiAwLjgiLz4KICAgICAgPC9nPgogICAgIDwvZz4KICAgICA8ZyBpZD0idGV4dF80Ij4KICAgICAgPCEtLSA2IC0tPgogICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyODIuNjcwNzcyIDMyMi4xODI0Mzcpc2NhbGUoMC4xIC0wLjEpIj4KICAgICAgIDxkZWZzPgogICAgICAgIDxwYXRoIGlkPSJEZWphVnVTYW5zLTM2IiBkPSJNIDIxMTMgMjU4NCAKUSAxNjg4IDI1ODQgMTQzOSAyMjkzIApRIDExOTEgMjAwMyAxMTkxIDE0OTcgClEgMTE5MSA5OTQgMTQzOSA3MDEgClEgMTY4OCA0MDkgMjExMyA0MDkgClEgMjUzOCA0MDkgMjc4NiA3MDEgClEgMzAzNCA5OTQgMzAzNCAxNDk3IApRIDMwMzQgMjAwMyAyNzg2IDIyOTMgClEgMjUzOCAyNTg0IDIxMTMgMjU4NCAKegpNIDMzNjYgNDU2MyAKTCAzMzY2IDM5ODggClEgMzEyOCA0MTAwIDI4ODYgNDE1OSAKUSAyNjQ0IDQyMTkgMjQwNiA0MjE5IApRIDE3ODEgNDIxOSAxNDUxIDM3OTcgClEgMTEyMiAzMzc1IDEwNzUgMjUyMiAKUSAxMjU5IDI3OTQgMTUzNyAyOTM5IApRIDE4MTYgMzA4NCAyMTUwIDMwODQgClEgMjg1MyAzMDg0IDMyNjEgMjY1NyAKUSAzNjY5IDIyMzEgMzY2OSAxNDk3IApRIDM2NjkgNzc4IDMyNDQgMzQzIApRIDI4MTkgLTkxIDIxMTMgLTkxIApRIDEzMDMgLTkxIDg3NSA1MjkgClEgNDQ3IDExNTAgNDQ3IDIzMjggClEgNDQ3IDM0MzQgOTcyIDQwOTIgClEgMTQ5NyA0NzUwIDIzODEgNDc1MCAKUSAyNjE5IDQ3NTAgMjg2MSA0NzAzIApRIDMxMDMgNDY1NiAzMzY2IDQ1NjMgCnoKIiB0cmFuc2Zvcm09InNjYWxlKDAuMDE1NjI1KSIvPgogICAgICAgPC9kZWZzPgogICAgICAgPHVzZSB4bGluazpocmVmPSIjRGVqYVZ1U2Fucy0zNiIvPgogICAgICA8L2c+CiAgICAgPC9nPgogICAgPC9nPgogICAgPGcgaWQ9Inh0aWNrXzUiPgogICAgIDxnIGlkPSJsaW5lMmRfNSI+CiAgICAgIDxnPgogICAgICAgPHVzZSB4bGluazpocmVmPSIjbTBlMzU1ZGUwMWIiIHg9IjM1Mi4xMDgwNTIiIHk9IjMwNy41ODQiIHN0eWxlPSJzdHJva2U6ICMwMDAwMDA7IHN0cm9rZS13aWR0aDogMC44Ii8+CiAgICAgIDwvZz4KICAgICA8L2c+CiAgICAgPGcgaWQ9InRleHRfNSI+CiAgICAgIDwhLS0gOCAtLT4KICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzQ4LjkyNjgwMiAzMjIuMTgyNDM3KXNjYWxlKDAuMSAtMC4xKSI+CiAgICAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0iRGVqYVZ1U2Fucy0zOCIgZD0iTSAyMDM0IDIyMTYgClEgMTU4NCAyMjE2IDEzMjYgMTk3NSAKUSAxMDY5IDE3MzQgMTA2OSAxMzEzIApRIDEwNjkgODkxIDEzMjYgNjUwIApRIDE1ODQgNDA5IDIwMzQgNDA5IApRIDI0ODQgNDA5IDI3NDMgNjUxIApRIDMwMDMgODk0IDMwMDMgMTMxMyAKUSAzMDAzIDE3MzQgMjc0NSAxOTc1IApRIDI0ODggMjIxNiAyMDM0IDIyMTYgCnoKTSAxNDAzIDI0ODQgClEgOTk3IDI1ODQgNzcwIDI4NjIgClEgNTQ0IDMxNDEgNTQ0IDM1NDEgClEgNTQ0IDQxMDAgOTQyIDQ0MjUgClEgMTM0MSA0NzUwIDIwMzQgNDc1MCAKUSAyNzMxIDQ3NTAgMzEyOCA0NDI1IApRIDM1MjUgNDEwMCAzNTI1IDM1NDEgClEgMzUyNSAzMTQxIDMyOTggMjg2MiAKUSAzMDcyIDI1ODQgMjY2OSAyNDg0IApRIDMxMjUgMjM3OCAzMzc5IDIwNjggClEgMzYzNCAxNzU5IDM2MzQgMTMxMyAKUSAzNjM0IDYzNCAzMjIwIDI3MSAKUSAyODA2IC05MSAyMDM0IC05MSAKUSAxMjYzIC05MSA4NDggMjcxIApRIDQzNCA2MzQgNDM0IDEzMTMgClEgNDM0IDE3NTkgNjkwIDIwNjggClEgOTQ3IDIzNzggMTQwMyAyNDg0IAp6Ck0gMTE3MiAzNDgxIApRIDExNzIgMzExOSAxMzk4IDI5MTYgClEgMTYyNSAyNzEzIDIwMzQgMjcxMyAKUSAyNDQxIDI3MTMgMjY3MCAyOTE2IApRIDI5MDAgMzExOSAyOTAwIDM0ODEgClEgMjkwMCAzODQ0IDI2NzAgNDA0NyAKUSAyNDQxIDQyNTAgMjAzNCA0MjUwIApRIDE2MjUgNDI1MCAxMzk4IDQwNDcgClEgMTE3MiAzODQ0IDExNzIgMzQ4MSAKegoiIHRyYW5zZm9ybT0ic2NhbGUoMC4wMTU2MjUpIi8+CiAgICAgICA8L2RlZnM+CiAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNEZWphVnVTYW5zLTM4Ii8+CiAgICAgIDwvZz4KICAgICA8L2c+CiAgICA8L2c+CiAgIDwvZz4KICAgPGcgaWQ9Im1hdHBsb3RsaWIuYXhpc18yIj4KICAgIDxnIGlkPSJ5dGlja18xIj4KICAgICA8ZyBpZD0ibGluZTJkXzYiPgogICAgICA8ZGVmcz4KICAgICAgIDxwYXRoIGlkPSJtYzNhOGI2N2M1ZCIgZD0iTSAwIDAgCkwgLTMuNSAwIAoiIHN0eWxlPSJzdHJva2U6ICMwMDAwMDA7IHN0cm9rZS13aWR0aDogMC44Ii8+CiAgICAgIDwvZGVmcz4KICAgICAgPGc+CiAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNtYzNhOGI2N2M1ZCIgeD0iNTcuNiIgeT0iMzA3LjU4NCIgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgc3Ryb2tlLXdpZHRoOiAwLjgiLz4KICAgICAgPC9nPgogICAgIDwvZz4KICAgICA8ZyBpZD0idGV4dF82Ij4KICAgICAgPCEtLSAwIC0tPgogICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0NC4yMzc1IDMxMS4zODMyMTkpc2NhbGUoMC4xIC0wLjEpIj4KICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI0RlamFWdVNhbnMtMzAiLz4KICAgICAgPC9nPgogICAgIDwvZz4KICAgIDwvZz4KICAgIDxnIGlkPSJ5dGlja18yIj4KICAgICA8ZyBpZD0ibGluZTJkXzciPgogICAgICA8Zz4KICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI21jM2E4YjY3YzVkIiB4PSI1Ny42IiB5PSIyNjUuMzQ0IiBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBzdHJva2Utd2lkdGg6IDAuOCIvPgogICAgICA8L2c+CiAgICAgPC9nPgogICAgIDxnIGlkPSJ0ZXh0XzciPgogICAgICA8IS0tIDEgLS0+CiAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0LjIzNzUgMjY5LjE0MzIxOSlzY2FsZSgwLjEgLTAuMSkiPgogICAgICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9IkRlamFWdVNhbnMtMzEiIGQ9Ik0gNzk0IDUzMSAKTCAxODI1IDUzMSAKTCAxODI1IDQwOTEgCkwgNzAzIDM4NjYgCkwgNzAzIDQ0NDEgCkwgMTgxOSA0NjY2IApMIDI0NTAgNDY2NiAKTCAyNDUwIDUzMSAKTCAzNDgxIDUzMSAKTCAzNDgxIDAgCkwgNzk0IDAgCkwgNzk0IDUzMSAKegoiIHRyYW5zZm9ybT0ic2NhbGUoMC4wMTU2MjUpIi8+CiAgICAgICA8L2RlZnM+CiAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNEZWphVnVTYW5zLTMxIi8+CiAgICAgIDwvZz4KICAgICA8L2c+CiAgICA8L2c+CiAgICA8ZyBpZD0ieXRpY2tfMyI+CiAgICAgPGcgaWQ9ImxpbmUyZF84Ij4KICAgICAgPGc+CiAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNtYzNhOGI2N2M1ZCIgeD0iNTcuNiIgeT0iMjIzLjEwNCIgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgc3Ryb2tlLXdpZHRoOiAwLjgiLz4KICAgICAgPC9nPgogICAgIDwvZz4KICAgICA8ZyBpZD0idGV4dF84Ij4KICAgICAgPCEtLSAyIC0tPgogICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg0NC4yMzc1IDIyNi45MDMyMTkpc2NhbGUoMC4xIC0wLjEpIj4KICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI0RlamFWdVNhbnMtMzIiLz4KICAgICAgPC9nPgogICAgIDwvZz4KICAgIDwvZz4KICAgIDxnIGlkPSJ5dGlja180Ij4KICAgICA8ZyBpZD0ibGluZTJkXzkiPgogICAgICA8Zz4KICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI21jM2E4YjY3YzVkIiB4PSI1Ny42IiB5PSIxODAuODY0IiBzdHlsZT0ic3Ryb2tlOiAjMDAwMDAwOyBzdHJva2Utd2lkdGg6IDAuOCIvPgogICAgICA8L2c+CiAgICAgPC9nPgogICAgIDxnIGlkPSJ0ZXh0XzkiPgogICAgICA8IS0tIDMgLS0+CiAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0LjIzNzUgMTg0LjY2MzIxOSlzY2FsZSgwLjEgLTAuMSkiPgogICAgICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9IkRlamFWdVNhbnMtMzMiIGQ9Ik0gMjU5NyAyNTE2IApRIDMwNTAgMjQxOSAzMzA0IDIxMTIgClEgMzU1OSAxODA2IDM1NTkgMTM1NiAKUSAzNTU5IDY2NiAzMDg0IDI4NyAKUSAyNjA5IC05MSAxNzM0IC05MSAKUSAxNDQxIC05MSAxMTMwIC0zMyAKUSA4MTkgMjUgNDg4IDE0MSAKTCA0ODggNzUwIApRIDc1MCA1OTcgMTA2MiA1MTkgClEgMTM3NSA0NDEgMTcxNiA0NDEgClEgMjMwOSA0NDEgMjYyMCA2NzUgClEgMjkzMSA5MDkgMjkzMSAxMzU2IApRIDI5MzEgMTc2OSAyNjQyIDIwMDEgClEgMjM1MyAyMjM0IDE4MzggMjIzNCAKTCAxMjk0IDIyMzQgCkwgMTI5NCAyNzUzIApMIDE4NjMgMjc1MyAKUSAyMzI4IDI3NTMgMjU3NSAyOTM5IApRIDI4MjIgMzEyNSAyODIyIDM0NzUgClEgMjgyMiAzODM0IDI1NjcgNDAyNiAKUSAyMzEzIDQyMTkgMTgzOCA0MjE5IApRIDE1NzggNDIxOSAxMjgxIDQxNjIgClEgOTg0IDQxMDYgNjI4IDM5ODggCkwgNjI4IDQ1NTAgClEgOTg4IDQ2NTAgMTMwMiA0NzAwIApRIDE2MTYgNDc1MCAxODk0IDQ3NTAgClEgMjYxMyA0NzUwIDMwMzEgNDQyMyAKUSAzNDUwIDQwOTcgMzQ1MCAzNTQxIApRIDM0NTAgMzE1MyAzMjI4IDI4ODYgClEgMzAwNiAyNjE5IDI1OTcgMjUxNiAKegoiIHRyYW5zZm9ybT0ic2NhbGUoMC4wMTU2MjUpIi8+CiAgICAgICA8L2RlZnM+CiAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNEZWphVnVTYW5zLTMzIi8+CiAgICAgIDwvZz4KICAgICA8L2c+CiAgICA8L2c+CiAgICA8ZyBpZD0ieXRpY2tfNSI+CiAgICAgPGcgaWQ9ImxpbmUyZF8xMCI+CiAgICAgIDxnPgogICAgICAgPHVzZSB4bGluazpocmVmPSIjbWMzYThiNjdjNWQiIHg9IjU3LjYiIHk9IjEzOC42MjQiIHN0eWxlPSJzdHJva2U6ICMwMDAwMDA7IHN0cm9rZS13aWR0aDogMC44Ii8+CiAgICAgIDwvZz4KICAgICA8L2c+CiAgICAgPGcgaWQ9InRleHRfMTAiPgogICAgICA8IS0tIDQgLS0+CiAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0LjIzNzUgMTQyLjQyMzIxOSlzY2FsZSgwLjEgLTAuMSkiPgogICAgICAgPHVzZSB4bGluazpocmVmPSIjRGVqYVZ1U2Fucy0zNCIvPgogICAgICA8L2c+CiAgICAgPC9nPgogICAgPC9nPgogICAgPGcgaWQ9Inl0aWNrXzYiPgogICAgIDxnIGlkPSJsaW5lMmRfMTEiPgogICAgICA8Zz4KICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI21jM2E4YjY3YzVkIiB4PSI1Ny42IiB5PSI5Ni4zODQiIHN0eWxlPSJzdHJva2U6ICMwMDAwMDA7IHN0cm9rZS13aWR0aDogMC44Ii8+CiAgICAgIDwvZz4KICAgICA8L2c+CiAgICAgPGcgaWQ9InRleHRfMTEiPgogICAgICA8IS0tIDUgLS0+CiAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQ0LjIzNzUgMTAwLjE4MzIxOSlzY2FsZSgwLjEgLTAuMSkiPgogICAgICAgPGRlZnM+CiAgICAgICAgPHBhdGggaWQ9IkRlamFWdVNhbnMtMzUiIGQ9Ik0gNjkxIDQ2NjYgCkwgMzE2OSA0NjY2IApMIDMxNjkgNDEzNCAKTCAxMjY5IDQxMzQgCkwgMTI2OSAyOTkxIApRIDE0MDYgMzAzOCAxNTQzIDMwNjEgClEgMTY4MSAzMDg0IDE4MTkgMzA4NCAKUSAyNjAwIDMwODQgMzA1NiAyNjU2IApRIDM1MTMgMjIyOCAzNTEzIDE0OTcgClEgMzUxMyA3NDQgMzA0NCAzMjYgClEgMjU3NSAtOTEgMTcyMiAtOTEgClEgMTQyOCAtOTEgMTEyMyAtNDEgClEgODE5IDkgNDk0IDEwOSAKTCA0OTQgNzQ0IApRIDc3NSA1OTEgMTA3NSA1MTYgClEgMTM3NSA0NDEgMTcwOSA0NDEgClEgMjI1MCA0NDEgMjU2NSA3MjUgClEgMjg4MSAxMDA5IDI4ODEgMTQ5NyAKUSAyODgxIDE5ODQgMjU2NSAyMjY4IApRIDIyNTAgMjU1MyAxNzA5IDI1NTMgClEgMTQ1NiAyNTUzIDEyMDQgMjQ5NyAKUSA5NTMgMjQ0MSA2OTEgMjMyMiAKTCA2OTEgNDY2NiAKegoiIHRyYW5zZm9ybT0ic2NhbGUoMC4wMTU2MjUpIi8+CiAgICAgICA8L2RlZnM+CiAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNEZWphVnVTYW5zLTM1Ii8+CiAgICAgIDwvZz4KICAgICA8L2c+CiAgICA8L2c+CiAgICA8ZyBpZD0ieXRpY2tfNyI+CiAgICAgPGcgaWQ9ImxpbmUyZF8xMiI+CiAgICAgIDxnPgogICAgICAgPHVzZSB4bGluazpocmVmPSIjbWMzYThiNjdjNWQiIHg9IjU3LjYiIHk9IjU0LjE0NCIgc3R5bGU9InN0cm9rZTogIzAwMDAwMDsgc3Ryb2tlLXdpZHRoOiAwLjgiLz4KICAgICAgPC9nPgogICAgIDwvZz4KICAgICA8ZyBpZD0idGV4dF8xMiI+CiAgICAgIDwhLS0gNiAtLT4KICAgICAgPGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDQuMjM3NSA1Ny45NDMyMTkpc2NhbGUoMC4xIC0wLjEpIj4KICAgICAgIDx1c2UgeGxpbms6aHJlZj0iI0RlamFWdVNhbnMtMzYiLz4KICAgICAgPC9nPgogICAgIDwvZz4KICAgIDwvZz4KICAgPC9nPgogICA8ZyBpZD0icGF0Y2hfMTMiPgogICAgPHBhdGggZD0iTSA1Ny42IDMwNy41ODQgCkwgNTcuNiA0MS40NzIgCiIgc3R5bGU9ImZpbGw6IG5vbmU7IHN0cm9rZTogIzAwMDAwMDsgc3Ryb2tlLXdpZHRoOiAwLjg7IHN0cm9rZS1saW5lam9pbjogbWl0ZXI7IHN0cm9rZS1saW5lY2FwOiBzcXVhcmUiLz4KICAgPC9nPgogICA8ZyBpZD0icGF0Y2hfMTQiPgogICAgPHBhdGggZD0iTSA0MTQuNzIgMzA3LjU4NCAKTCA0MTQuNzIgNDEuNDcyIAoiIHN0eWxlPSJmaWxsOiBub25lOyBzdHJva2U6ICMwMDAwMDA7IHN0cm9rZS13aWR0aDogMC44OyBzdHJva2UtbGluZWpvaW46IG1pdGVyOyBzdHJva2UtbGluZWNhcDogc3F1YXJlIi8+CiAgIDwvZz4KICAgPGcgaWQ9InBhdGNoXzE1Ij4KICAgIDxwYXRoIGQ9Ik0gNTcuNiAzMDcuNTg0IApMIDQxNC43MiAzMDcuNTg0IAoiIHN0eWxlPSJmaWxsOiBub25lOyBzdHJva2U6ICMwMDAwMDA7IHN0cm9rZS13aWR0aDogMC44OyBzdHJva2UtbGluZWpvaW46IG1pdGVyOyBzdHJva2UtbGluZWNhcDogc3F1YXJlIi8+CiAgIDwvZz4KICAgPGcgaWQ9InBhdGNoXzE2Ij4KICAgIDxwYXRoIGQ9Ik0gNTcuNiA0MS40NzIgCkwgNDE0LjcyIDQxLjQ3MiAKIiBzdHlsZT0iZmlsbDogbm9uZTsgc3Ryb2tlOiAjMDAwMDAwOyBzdHJva2Utd2lkdGg6IDAuODsgc3Ryb2tlLWxpbmVqb2luOiBtaXRlcjsgc3Ryb2tlLWxpbmVjYXA6IHNxdWFyZSIvPgogICA8L2c+CiAgPC9nPgogPC9nPgogPGRlZnM+CiAgPGNsaXBQYXRoIGlkPSJwY2Q4NmIxNzcwMSI+CiAgIDxyZWN0IHg9IjU3LjYiIHk9IjQxLjQ3MiIgd2lkdGg9IjM1Ny4xMiIgaGVpZ2h0PSIyNjYuMTEyIi8+CiAgPC9jbGlwUGF0aD4KIDwvZGVmcz4KPC9zdmc+Cg==" class="img-fluid mx-auto d-block"/>'''
And this renders correctly as the image (but without clickable links), when one right clicks ‘open image in new tab’ the links then work
What I notice is that when that element is rendered as you’ve described, it does show up in the developer tools as an image element. However, when you “Open image in new tab”, the image is opened as an <svg ...> element.
If I replace the image element with the full text of the svg element the links work.
I would suggest not base64 encoding the svg, and render the element directly.
robmcc
June 25, 2022, 1:22pm
5
Thank you - so iI could just have:
image = img_in_memory.getvalue()
Any idea how should I then reference this in the template?
<img src="data:image/svg+xml;{{image}}"
Does not work
I would try it as {{image|safe}} - it’s a complete html fragment. (You might have to mark it as “safe” so that Django doesn’t escape the tags.)
robmcc
June 25, 2022, 2:29pm
7
KenWhitesell:
{{image|safe}}
Thanks but this renders as:
b'<?xml version="1.0" encoding="utf-8" standalone="no"?>\n<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"\n "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">\n<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="460.8pt" height="345.6pt" viewBox="0 0 460.8 345.6" xmlns="http://www.w3.org/2000/svg" version="1.1">\n <metadata>\n <rdf:RDF xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">\n <cc:Work>\n <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>\n <dc:date>2022-06-25T14:24:41.121892</dc:date>\n <dc:format>image/svg+xml</dc:format>\n <dc:creator>\n <cc:Agent>\n <dc:title>Matplotlib v3.5.1, https://matplotlib.org/</dc:title>\n </cc:Agent>\n </dc:creator>\n </cc:Work>\n </rdf:RDF>\n </metadata>\n <defs>\n <style type="text/css">*{stroke-linejoin: round; stroke-linecap: butt}</style>\n </defs>\n <g id="figure_1">\n <g id="patch_1">\n <path d="M 0 345.6 \nL 460.8 345.6 \nL 460.8 0 \nL 0 0 \nz\n" style="fill: #ffffff"/>\n </g>\n <g id="axes_1">\n <g id="patch_2">\n <path d="M 57.6 307.584 \nL 414.72 307.584 \nL 414.72 41.472 \nL 57.6 41.472 \nz\n" style="fill: #ffffff"/>\n </g>\n <g id="patch_3">\n <path d="M 73.832727 307.584 \nL 100.335139 307.584 \nL 100.335139 304.090634 \nL 73.832727 304.090634 \nz\n" clip-path="url(#pd2efa3713b)" style="fill: #1f77b4"/>\n </g>\n <g id="patch_4">\n <path d="M 106.960742 307.584 \nL 133.463154 307.584 \nL 133.463154 305.094661 \nL 106.960742 305.094661 \nz\n" clip-path="url(#pd2efa3713b)" style="fill: #1f77b4"/>\n </g>\n <g id="patch_5">\n <path d="M 140.088757 307.584 \nL 166.591169 307.584 \nL 166.591169 305.303038 \nL 140.088757 305.303038 \nz\n" clip-path="url(#pd2efa3713b)" style="fill: #1f77b4"/>\n </g>\n <g id="patch_6">\n <path d="M 173.216772 307.584 \nL 199.719184 307.584 \nL 199.719184 298.915306 \nL 173.216772 298.915306 \nz\n" clip-path="url(#pd2efa3713b)" style="fill: #1f77b4"/>\n </g>\n <g id="patch_7">\n <path d="M 206.344787 307.584 \nL 232.847199 307.584 \nL 232.847199 293.658339 \nL 206.344787 293.658339 \nz\n" clip-path="url(#pd2efa3713b)" style="fill: #1f77b4"/>\n </g>\n <g id="patch_8">\n <path d="M 239.472801 307.584 \nL 265.975213 307.584 \nL 265.975213 285.572079 \nL 239.472801 285.572079 \nz\n" clip-path="url(#pd2efa3713b)" style="fill: #1f77b4"/>\n </g>\n <g id="patch_9">\n <path d="M 272.600816 307.584 \nL 299.103228 307.584 \nL 299.103228 303.134211 \nL 272.600816 303.134211 \nz\n" clip-path="url(#pd2efa3713b)" style="fill: #1f77b4"/>\n </g>\n <g id="patch_10">\n <path d="M 305.728831 307.584 \nL 332.231243 307.584 \nL 332.231243 266.787013 \nL 305.728831 266.787013 \nz\n" clip-path="url(#pd2efa3713b)" style="fill: #1f77b4"/>\n </g>\n <g id="patch_11">\n <path d="M 338.856846 307.584 \nL 365.359258 307.584 \nL 365.359258 276.601359 \nL 338.856846 276.601359 \nz\n" clip-path="url(#pd2efa3713b)" style="fill: #1f77b4"/>\n </g>\n <g id="patch_12">\n <path d="M 371.984861 307.584 \nL 398.487273 307.584 \nL 398.487273 270.433939 \nL 371.984861 270.433939 \nz\n" clip-path="url(#pd2efa3713b)" style="fill: #1f77b4"/>\n </g>\n <g id="PathCollection_1">\n <defs>\n <path id="C0_0_a9a085ff10" d="M 0 3 \nC 0.795609 3 1.55874 2.683901 2.12132 2.12132 \nC 2.683901 1.55874 3 0.795609 3 -0 \nC 3 -0.795609 2.683901 -1.55874 2.12132 -2.12132 \nC 1.55874 -2.683901 0.795609 -3 0 -3 \nC -0.795609 -3 -1.55874 -2.683901 -2.12132 -2.12132 \nC -2.683901 -1.55874 -3 -0.795609 -3 0 \nC -3 0.795609 -2.683901 1.55874 -2.12132 2.12132 \nC -1.55874 2.683901 -0.795609 3 0 3 \nz\n"/>\n </defs>\n <a xlink:href="https://www.bbc.co.uk/news">\n <g clip-path="url(#pd2efa3713b)">\n <use xlink:href="#C0_0_a9a085ff10" x="120.211948" y="138.624" style="fill: #ff7f0e; stroke: #ff7f0e"/>\n </g>\n </a>\n <a xlink:href="https://www.google.com/">\n <g clip-path="url(#pd2efa3713b)">\n <use xlink:href="#C0_0_a9a085ff10" x="153.339963" y="96.384" style="fill: #ff7f0e; stroke: #ff7f0e"/>\n </g>\n </a>\n <g clip-path="url(#pd2efa3713b)">\n <use xlink:href="#C0_0_a9a085ff10" x="186.467978" y="54.144" style="fill: #ff7f0e; stroke: #ff7f0e"/>\n </g>\n </g>\n <g id="matplotlib.axis_1">\n <g id="xtick_1">\n <g id="line2d_1">\n <defs>\n <path id="m555431933a" d="M 0 0 \nL 0 3.5 \n" style="stroke: #000000; stroke-width: 0.8"/>\n </defs>\n <g>\n <use xlink:href="#m555431933a" x="87.083933" y="307.584" style="stroke: #000000; stroke-width: 0.8"/>\n </g>\n </g>\n <g id="text_1">\n <!-- 0 -->\n <g transform="translate(83.902683 322.182437)scale(0.1 -0.1)">\n <defs>\n <path id="DejaVuSans-30" d="M 2034 4250 \nQ 1547 4250 1301 3770 \nQ 1056 3291 1056 2328 \nQ 1056 1369 1301 889 \nQ 1547 409 2034 409 \nQ 2525 409 2770 889 \nQ 3016 1369 3016 2328 \nQ 3016 3291 2770 3770 \nQ 2525 4250 2034 4250 \nz\nM 2034 4750 \nQ 2819 4750 3233 4129 \nQ 3647 3509 3647 2328 \nQ 3647 1150 3233 529 \nQ 2819 -91 2034 -91 \nQ 1250 -91 836 529 \nQ 422 1150 422 2328 \nQ 422 3509 836 4129 \nQ 1250 4750 2034 4750 \nz\n" transform="scale(0.015625)"/>\n </defs>\n <use xlink:href="#DejaVuSans-30"/>\n </g>\n </g>\n </g>\n <g id="xtick_2">\n <g id="line2d_2">\n <g>\n <use xlink:href="#m555431933a" x="153.339963" y="307.584" style="stroke: #000000; stroke-width: 0.8"/>\n </g>\n </g>\n <g id="text_2">\n <!-- 2 -->\n <g transform="translate(150.158713 322.182437)scale(0.1 -0.1)">\n <defs>\n <path id="DejaVuSans-32" d="M 1228 531 \nL 3431 531 \nL 3431 0 \nL 469 0 \nL 469 531 \nQ 828 903 1448 1529 \nQ 2069 2156 2228 2338 \nQ 2531 2678 2651 2914 \nQ 2772 3150 2772 3378 \nQ 2772 3750 2511 3984 \nQ 2250 4219 1831 4219 \nQ 1534 4219 1204 4116 \nQ 875 4013 500 3803 \nL 500 4441 \nQ 881 4594 1212 4672 \nQ 1544 4750 1819 4750 \nQ 2544 4750 2975 4387 \nQ 3406 4025 3406 3419 \nQ 3406 3131 3298 2873 \nQ 3191 2616 2906 2266 \nQ 2828 2175 2409 1742 \nQ 1991 1309 1228 531 \nz\n" transform="scale(0.015625)"/>\n </defs>\n <use xlink:href="#DejaVuSans-32"/>\n </g>\n </g>\n </g>\n <g id="xtick_3">\n <g id="line2d_3">\n <g>\n <use xlink:href="#m555431933a" x="219.595993" y="307.584" style="stroke: #000000; stroke-width: 0.8"/>\n </g>\n </g>\n <g id="text_3">\n <!-- 4 -->\n <g transform="translate(216.414743 322.182437)scale(0.1 -0.1)">\n <defs>\n <path id="DejaVuSans-34" d="M 2419 4116 \nL 825 1625 \nL 2419 1625 \nL 2419 4116 \nz\nM 2253 4666 \nL 3047 4666 \nL 3047 1625 \nL 3713 1625 \nL 3713 1100 \nL 3047 1100 \nL 3047 0 \nL 2419 0 \nL 2419 1100 \nL 313 1100 \nL 313 1709 \nL 2253 4666 \nz\n" transform="scale(0.015625)"/>\n </defs>\n <use xlink:href="#DejaVuSans-34"/>\n </g>\n </g>\n </g>\n <g id="xtick_4">\n <g id="line2d_4">\n <g>\n <use xlink:href="#m555431933a" x="285.852022" y="307.584" style="stroke: #000000; stroke-width: 0.8"/>\n </g>\n </g>\n <g id="text_4">\n <!-- 6 -->\n <g transform="translate(282.670772 322.182437)scale(0.1 -0.1)">\n <defs>\n <path id="DejaVuSans-36" d="M 2113 2584 \nQ 1688 2584 1439 2293 \nQ 1191 2003 1191 1497 \nQ 1191 994 1439 701 \nQ 1688 409 2113 409 \nQ 2538 409 2786 701 \nQ 3034 994 3034 1497 \nQ 3034 2003 2786 2293 \nQ 2538 2584 2113 2584 \nz\nM 3366 4563 \nL 3366 3988 \nQ 3128 4100 2886 4159 \nQ 2644 4219 2406 4219 \nQ 1781 4219 1451 3797 \nQ 1122 3375 1075 2522 \nQ 1259 2794 1537 2939 \nQ 1816 3084 2150 3084 \nQ 2853 3084 3261 2657 \nQ 3669 2231 3669 1497 \nQ 3669 778 3244 343 \nQ 2819 -91 2113 -91 \nQ 1303 -91 875 529 \nQ 447 1150 447 2328 \nQ 447 3434 972 4092 \nQ 1497 4750 2381 4750 \nQ 2619 4750 2861 4703 \nQ 3103 4656 3366 4563 \nz\n" transform="scale(0.015625)"/>\n </defs>\n <use xlink:href="#DejaVuSans-36"/>\n </g>\n </g>\n </g>\n <g id="xtick_5">\n <g id="line2d_5">\n <g>\n <use xlink:href="#m555431933a" x="352.108052" y="307.584" style="stroke: #000000; stroke-width: 0.8"/>\n </g>\n </g>\n <g id="text_5">\n <!-- 8 -->\n <g transform="translate(348.926802 322.182437)scale(0.1 -0.1)">\n <defs>\n <path id="DejaVuSans-38" d="M 2034 2216 \nQ 1584 2216 1326 1975 \nQ 1069 1734 1069 1313 \nQ 1069 891 1326 650 \nQ 1584 409 2034 409 \nQ 2484 409 2743 651 \nQ 3003 894 3003 1313 \nQ 3003 1734 2745 1975 \nQ 2488 2216 2034 2216 \nz\nM 1403 2484 \nQ 997 2584 770 2862 \nQ 544 3141 544 3541 \nQ 544 4100 942 4425 \nQ 1341 4750 2034 4750 \nQ 2731 4750 3128 4425 \nQ 3525 4100 3525 3541 \nQ 3525 3141 3298 2862 \nQ 3072 2584 2669 2484 \nQ 3125 2378 3379 2068 \nQ 3634 1759 3634 1313 \nQ 3634 634 3220 271 \nQ 2806 -91 2034 -91 \nQ 1263 -91 848 271 \nQ 434 634 434 1313 \nQ 434 1759 690 2068 \nQ 947 2378 1403 2484 \nz\nM 1172 3481 \nQ 1172 3119 1398 2916 \nQ 1625 2713 2034 2713 \nQ 2441 2713 2670 2916 \nQ 2900 3119 2900 3481 \nQ 2900 3844 2670 4047 \nQ 2441 4250 2034 4250 \nQ 1625 4250 1398 4047 \nQ 1172 3844 1172 3481 \nz\n" transform="scale(0.015625)"/>\n </defs>\n <use xlink:href="#DejaVuSans-38"/>\n </g>\n </g>\n </g>\n </g>\n <g id="matplotlib.axis_2">\n <g id="ytick_1">\n <g id="line2d_6">\n <defs>\n <path id="m354c22d951" d="M 0 0 \nL -3.5 0 \n" style="stroke: #000000; stroke-width: 0.8"/>\n </defs>\n <g>\n <use xlink:href="#m354c22d951" x="57.6" y="307.584" style="stroke: #000000; stroke-width: 0.8"/>\n </g>\n </g>\n <g id="text_6">\n <!-- 0 -->\n <g transform="translate(44.2375 311.383219)scale(0.1 -0.1)">\n <use xlink:href="#DejaVuSans-30"/>\n </g>\n </g>\n </g>\n <g id="ytick_2">\n <g id="line2d_7">\n <g>\n <use xlink:href="#m354c22d951" x="57.6" y="265.344" style="stroke: #000000; stroke-width: 0.8"/>\n </g>\n </g>\n <g id="text_7">\n <!-- 1 -->\n <g transform="translate(44.2375 269.143219)scale(0.1 -0.1)">\n <defs>\n <path id="DejaVuSans-31" d="M 794 531 \nL 1825 531 \nL 1825 4091 \nL 703 3866 \nL 703 4441 \nL 1819 4666 \nL 2450 4666 \nL 2450 531 \nL 3481 531 \nL 3481 0 \nL 794 0 \nL 794 531 \nz\n" transform="scale(0.015625)"/>\n </defs>\n <use xlink:href="#DejaVuSans-31"/>\n </g>\n </g>\n </g>\n <g id="ytick_3">\n <g id="line2d_8">\n <g>\n <use xlink:href="#m354c22d951" x="57.6" y="223.104" style="stroke: #000000; stroke-width: 0.8"/>\n </g>\n </g>\n <g id="text_8">\n <!-- 2 -->\n <g transform="translate(44.2375 226.903219)scale(0.1 -0.1)">\n <use xlink:href="#DejaVuSans-32"/>\n </g>\n </g>\n </g>\n <g id="ytick_4">\n <g id="line2d_9">\n <g>\n <use xlink:href="#m354c22d951" x="57.6" y="180.864" style="stroke: #000000; stroke-width: 0.8"/>\n </g>\n </g>\n <g id="text_9">\n <!-- 3 -->\n <g transform="translate(44.2375 184.663219)scale(0.1 -0.1)">\n <defs>\n <path id="DejaVuSans-33" d="M 2597 2516 \nQ 3050 2419 3304 2112 \nQ 3559 1806 3559 1356 \nQ 3559 666 3084 287 \nQ 2609 -91 1734 -91 \nQ 1441 -91 1130 -33 \nQ 819 25 488 141 \nL 488 750 \nQ 750 597 1062 519 \nQ 1375 441 1716 441 \nQ 2309 441 2620 675 \nQ 2931 909 2931 1356 \nQ 2931 1769 2642 2001 \nQ 2353 2234 1838 2234 \nL 1294 2234 \nL 1294 2753 \nL 1863 2753 \nQ 2328 2753 2575 2939 \nQ 2822 3125 2822 3475 \nQ 2822 3834 2567 4026 \nQ 2313 4219 1838 4219 \nQ 1578 4219 1281 4162 \nQ 984 4106 628 3988 \nL 628 4550 \nQ 988 4650 1302 4700 \nQ 1616 4750 1894 4750 \nQ 2613 4750 3031 4423 \nQ 3450 4097 3450 3541 \nQ 3450 3153 3228 2886 \nQ 3006 2619 2597 2516 \nz\n" transform="scale(0.015625)"/>\n </defs>\n <use xlink:href="#DejaVuSans-33"/>\n </g>\n </g>\n </g>\n <g id="ytick_5">\n <g id="line2d_10">\n <g>\n <use xlink:href="#m354c22d951" x="57.6" y="138.624" style="stroke: #000000; stroke-width: 0.8"/>\n </g>\n </g>\n <g id="text_10">\n <!-- 4 -->\n <g transform="translate(44.2375 142.423219)scale(0.1 -0.1)">\n <use xlink:href="#DejaVuSans-34"/>\n </g>\n </g>\n </g>\n <g id="ytick_6">\n <g id="line2d_11">\n <g>\n <use xlink:href="#m354c22d951" x="57.6" y="96.384" style="stroke: #000000; stroke-width: 0.8"/>\n </g>\n </g>\n <g id="text_11">\n <!-- 5 -->\n <g transform="translate(44.2375 100.183219)scale(0.1 -0.1)">\n <defs>\n <path id="DejaVuSans-35" d="M 691 4666 \nL 3169 4666 \nL 3169 4134 \nL 1269 4134 \nL 1269 2991 \nQ 1406 3038 1543 3061 \nQ 1681 3084 1819 3084 \nQ 2600 3084 3056 2656 \nQ 3513 2228 3513 1497 \nQ 3513 744 3044 326 \nQ 2575 -91 1722 -91 \nQ 1428 -91 1123 -41 \nQ 819 9 494 109 \nL 494 744 \nQ 775 591 1075 516 \nQ 1375 441 1709 441 \nQ 2250 441 2565 725 \nQ 2881 1009 2881 1497 \nQ 2881 1984 2565 2268 \nQ 2250 2553 1709 2553 \nQ 1456 2553 1204 2497 \nQ 953 2441 691 2322 \nL 691 4666 \nz\n" transform="scale(0.015625)"/>\n </defs>\n <use xlink:href="#DejaVuSans-35"/>\n </g>\n </g>\n </g>\n <g id="ytick_7">\n <g id="line2d_12">\n <g>\n <use xlink:href="#m354c22d951" x="57.6" y="54.144" style="stroke: #000000; stroke-width: 0.8"/>\n </g>\n </g>\n <g id="text_12">\n <!-- 6 -->\n <g transform="translate(44.2375 57.943219)scale(0.1 -0.1)">\n <use xlink:href="#DejaVuSans-36"/>\n </g>\n </g>\n </g>\n </g>\n <g id="patch_13">\n <path d="M 57.6 307.584 \nL 57.6 41.472 \n" style="fill: none; stroke: #000000; stroke-width: 0.8; stroke-linejoin: miter; stroke-linecap: square"/>\n </g>\n <g id="patch_14">\n <path d="M 414.72 307.584 \nL 414.72 41.472 \n" style="fill: none; stroke: #000000; stroke-width: 0.8; stroke-linejoin: miter; stroke-linecap: square"/>\n </g>\n <g id="patch_15">\n <path d="M 57.6 307.584 \nL 414.72 307.584 \n" style="fill: none; stroke: #000000; stroke-width: 0.8; stroke-linejoin: miter; stroke-linecap: square"/>\n </g>\n <g id="patch_16">\n <path d="M 57.6 41.472 \nL 414.72 41.472 \n" style="fill: none; stroke: #000000; stroke-width: 0.8; stroke-linejoin: miter; stroke-linecap: square"/>\n </g>\n </g>\n </g>\n <defs>\n <clipPath id="pd2efa3713b">\n <rect x="57.6" y="41.472" width="357.12" height="266.112"/>\n </clipPath>\n </defs>\n</svg>\n'
This doesn’t display as an image I think perhaps due to having eg \n as opposed to an actual new line. I say this because even if I remove the 'b deom the beginning it does not render whereas the code for the svg with the line breaks does:
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="460.8pt" height="345.6pt" viewBox="0 0 460.8 345.6" xmlns="http://www.w3.org/2000/svg" version="1.1">
<metadata>
<rdf:RDF xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
<cc:Work>
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
<dc:date>2022-06-25T14:17:26.514485</dc:date>
<dc:format>image/svg+xml</dc:format>
<dc:creator>
<cc:Agent>
<dc:title>Matplotlib v3.5.1, https://matplotlib.org/</dc:title>
</cc:Agent>
</dc:creator>
</cc:Work>
</rdf:RDF>
</metadata>
<defs>
<style type="text/css">*{stroke-linejoin: round; stroke-linecap: butt}</style>
</defs>
<g id="figure_1">
<g id="patch_1">
<path d="M 0 345.6
L 460.8 345.6
L 460.8 0
L 0 0
z
" style="fill: #ffffff"/>
</g>
<g id="axes_1">
<g id="patch_2">
<path d="M 57.6 307.584
L 414.72 307.584
L 414.72 41.472
L 57.6 41.472
z
" style="fill: #ffffff"/>
</g>
<g id="patch_3">
<path d="M 73.832727 307.584
L 100.335139 307.584
L 100.335139 277.964223
L 73.832727 277.964223
z
" clip-path="url(#pba3ab8f1d9)" style="fill: #1f77b4"/>
</g>
<g id="patch_4">
<path d="M 106.960742 307.584
L 133.463154 307.584
L 133.463154 286.887969
L 106.960742 286.887969
z
" clip-path="url(#pba3ab8f1d9)" style="fill: #1f77b4"/>
</g>
<g id="patch_5">
<path d="M 140.088757 307.584
L 166.591169 307.584
L 166.591169 297.988529
L 140.088757 297.988529
z
" clip-path="url(#pba3ab8f1d9)" style="fill: #1f77b4"/>
</g>
<g id="patch_6">
<path d="M 173.216772 307.584
L 199.719184 307.584
L 199.719184 298.941423
L 173.216772 298.941423
z
" clip-path="url(#pba3ab8f1d9)" style="fill: #1f77b4"/>
</g>
<g id="patch_7">
<path d="M 206.344787 307.584
L 232.847199 307.584
L 232.847199 299.387188
L 206.344787 299.387188
z
" clip-path="url(#pba3ab8f1d9)" style="fill: #1f77b4"/>
</g>
<g id="patch_8">
<path d="M 239.472801 307.584
L 265.975213 307.584
L 265.975213 301.5369
L 239.472801 301.5369
z
" clip-path="url(#pba3ab8f1d9)" style="fill: #1f77b4"/>
</g>
<g id="patch_9">
<path d="M 272.600816 307.584
L 299.103228 307.584
L 299.103228 280.579277
L 272.600816 280.579277
z
" clip-path="url(#pba3ab8f1d9)" style="fill: #1f77b4"/>
</g>
<g id="patch_10">
<path d="M 305.728831 307.584
L 332.231243 307.584
L 332.231243 292.232275
L 305.728831 292.232275
z
" clip-path="url(#pba3ab8f1d9)" style="fill: #1f77b4"/>
</g>
<g id="patch_11">
<path d="M 338.856846 307.584
L 365.359258 307.584
L 365.359258 283.276565
L 338.856846 283.276565
z
" clip-path="url(#pba3ab8f1d9)" style="fill: #1f77b4"/>
</g>
<g id="patch_12">
<path d="M 371.984861 307.584
L 398.487273 307.584
L 398.487273 276.139997
L 371.984861 276.139997
z
" clip-path="url(#pba3ab8f1d9)" style="fill: #1f77b4"/>
</g>
<g id="PathCollection_1">
<defs>
<path id="C0_0_484e016c29" d="M 0 3
C 0.795609 3 1.55874 2.683901 2.12132 2.12132
C 2.683901 1.55874 3 0.795609 3 -0
C 3 -0.795609 2.683901 -1.55874 2.12132 -2.12132
C 1.55874 -2.683901 0.795609 -3 0 -3
C -0.795609 -3 -1.55874 -2.683901 -2.12132 -2.12132
C -2.683901 -1.55874 -3 -0.795609 -3 0
C -3 0.795609 -2.683901 1.55874 -2.12132 2.12132
C -1.55874 2.683901 -0.795609 3 0 3
z
"/>
</defs>
<a xlink:href="https://www.bbc.co.uk/news">
<g clip-path="url(#pba3ab8f1d9)">
<use xlink:href="#C0_0_484e016c29" x="120.211948" y="138.624" style="fill: #ff7f0e; stroke: #ff7f0e"/>
</g>
</a>
<a xlink:href="https://www.google.com/">
<g clip-path="url(#pba3ab8f1d9)">
<use xlink:href="#C0_0_484e016c29" x="153.339963" y="96.384" style="fill: #ff7f0e; stroke: #ff7f0e"/>
</g>
</a>
<g clip-path="url(#pba3ab8f1d9)">
<use xlink:href="#C0_0_484e016c29" x="186.467978" y="54.144" style="fill: #ff7f0e; stroke: #ff7f0e"/>
</g>
</g>
<g id="matplotlib.axis_1">
<g id="xtick_1">
<g id="line2d_1">
<defs>
<path id="m53c8e90c47" d="M 0 0
L 0 3.5
" style="stroke: #000000; stroke-width: 0.8"/>
</defs>
<g>
<use xlink:href="#m53c8e90c47" x="87.083933" y="307.584" style="stroke: #000000; stroke-width: 0.8"/>
</g>
</g>
<g id="text_1">
<!-- 0 -->
<g transform="translate(83.902683 322.182437)scale(0.1 -0.1)">
<defs>
<path id="DejaVuSans-30" d="M 2034 4250
Q 1547 4250 1301 3770
Q 1056 3291 1056 2328
Q 1056 1369 1301 889
Q 1547 409 2034 409
Q 2525 409 2770 889
Q 3016 1369 3016 2328
Q 3016 3291 2770 3770
Q 2525 4250 2034 4250
z
M 2034 4750
Q 2819 4750 3233 4129
Q 3647 3509 3647 2328
Q 3647 1150 3233 529
Q 2819 -91 2034 -91
Q 1250 -91 836 529
Q 422 1150 422 2328
Q 422 3509 836 4129
Q 1250 4750 2034 4750
z
" transform="scale(0.015625)"/>
</defs>
<use xlink:href="#DejaVuSans-30"/>
</g>
</g>
</g>
<g id="xtick_2">
<g id="line2d_2">
<g>
<use xlink:href="#m53c8e90c47" x="153.339963" y="307.584" style="stroke: #000000; stroke-width: 0.8"/>
</g>
</g>
<g id="text_2">
<!-- 2 -->
<g transform="translate(150.158713 322.182437)scale(0.1 -0.1)">
<defs>
<path id="DejaVuSans-32" d="M 1228 531
L 3431 531
L 3431 0
L 469 0
L 469 531
Q 828 903 1448 1529
Q 2069 2156 2228 2338
Q 2531 2678 2651 2914
Q 2772 3150 2772 3378
Q 2772 3750 2511 3984
Q 2250 4219 1831 4219
Q 1534 4219 1204 4116
Q 875 4013 500 3803
L 500 4441
Q 881 4594 1212 4672
Q 1544 4750 1819 4750
Q 2544 4750 2975 4387
Q 3406 4025 3406 3419
Q 3406 3131 3298 2873
Q 3191 2616 2906 2266
Q 2828 2175 2409 1742
Q 1991 1309 1228 531
z
" transform="scale(0.015625)"/>
</defs>
<use xlink:href="#DejaVuSans-32"/>
</g>
</g>
</g>
<g id="xtick_3">
<g id="line2d_3">
<g>
<use xlink:href="#m53c8e90c47" x="219.595993" y="307.584" style="stroke: #000000; stroke-width: 0.8"/>
</g>
</g>
<g id="text_3">
<!-- 4 -->
<g transform="translate(216.414743 322.182437)scale(0.1 -0.1)">
<defs>
<path id="DejaVuSans-34" d="M 2419 4116
L 825 1625
L 2419 1625
L 2419 4116
z
M 2253 4666
L 3047 4666
L 3047 1625
L 3713 1625
L 3713 1100
L 3047 1100
L 3047 0
L 2419 0
L 2419 1100
L 313 1100
L 313 1709
L 2253 4666
z
" transform="scale(0.015625)"/>
</defs>
<use xlink:href="#DejaVuSans-34"/>
</g>
</g>
</g>
<g id="xtick_4">
<g id="line2d_4">
<g>
<use xlink:href="#m53c8e90c47" x="285.852022" y="307.584" style="stroke: #000000; stroke-width: 0.8"/>
</g>
</g>
<g id="text_4">
<!-- 6 -->
<g transform="translate(282.670772 322.182437)scale(0.1 -0.1)">
<defs>
<path id="DejaVuSans-36" d="M 2113 2584
Q 1688 2584 1439 2293
Q 1191 2003 1191 1497
Q 1191 994 1439 701
Q 1688 409 2113 409
Q 2538 409 2786 701
Q 3034 994 3034 1497
Q 3034 2003 2786 2293
Q 2538 2584 2113 2584
z
M 3366 4563
L 3366 3988
Q 3128 4100 2886 4159
Q 2644 4219 2406 4219
Q 1781 4219 1451 3797
Q 1122 3375 1075 2522
Q 1259 2794 1537 2939
Q 1816 3084 2150 3084
Q 2853 3084 3261 2657
Q 3669 2231 3669 1497
Q 3669 778 3244 343
Q 2819 -91 2113 -91
Q 1303 -91 875 529
Q 447 1150 447 2328
Q 447 3434 972 4092
Q 1497 4750 2381 4750
Q 2619 4750 2861 4703
Q 3103 4656 3366 4563
z
" transform="scale(0.015625)"/>
</defs>
<use xlink:href="#DejaVuSans-36"/>
</g>
</g>
</g>
<g id="xtick_5">
<g id="line2d_5">
<g>
<use xlink:href="#m53c8e90c47" x="352.108052" y="307.584" style="stroke: #000000; stroke-width: 0.8"/>
</g>
</g>
<g id="text_5">
<!-- 8 -->
<g transform="translate(348.926802 322.182437)scale(0.1 -0.1)">
<defs>
<path id="DejaVuSans-38" d="M 2034 2216
Q 1584 2216 1326 1975
Q 1069 1734 1069 1313
Q 1069 891 1326 650
Q 1584 409 2034 409
Q 2484 409 2743 651
Q 3003 894 3003 1313
Q 3003 1734 2745 1975
Q 2488 2216 2034 2216
z
M 1403 2484
Q 997 2584 770 2862
Q 544 3141 544 3541
Q 544 4100 942 4425
Q 1341 4750 2034 4750
Q 2731 4750 3128 4425
Q 3525 4100 3525 3541
Q 3525 3141 3298 2862
Q 3072 2584 2669 2484
Q 3125 2378 3379 2068
Q 3634 1759 3634 1313
Q 3634 634 3220 271
Q 2806 -91 2034 -91
Q 1263 -91 848 271
Q 434 634 434 1313
Q 434 1759 690 2068
Q 947 2378 1403 2484
z
M 1172 3481
Q 1172 3119 1398 2916
Q 1625 2713 2034 2713
Q 2441 2713 2670 2916
Q 2900 3119 2900 3481
Q 2900 3844 2670 4047
Q 2441 4250 2034 4250
Q 1625 4250 1398 4047
Q 1172 3844 1172 3481
z
" transform="scale(0.015625)"/>
</defs>
<use xlink:href="#DejaVuSans-38"/>
</g>
</g>
</g>
</g>
<g id="matplotlib.axis_2">
<g id="ytick_1">
<g id="line2d_6">
<defs>
<path id="m9052c3e169" d="M 0 0
L -3.5 0
" style="stroke: #000000; stroke-width: 0.8"/>
</defs>
<g>
<use xlink:href="#m9052c3e169" x="57.6" y="307.584" style="stroke: #000000; stroke-width: 0.8"/>
</g>
</g>
<g id="text_6">
<!-- 0 -->
<g transform="translate(44.2375 311.383219)scale(0.1 -0.1)">
<use xlink:href="#DejaVuSans-30"/>
</g>
</g>
</g>
<g id="ytick_2">
<g id="line2d_7">
<g>
<use xlink:href="#m9052c3e169" x="57.6" y="265.344" style="stroke: #000000; stroke-width: 0.8"/>
</g>
</g>
<g id="text_7">
<!-- 1 -->
<g transform="translate(44.2375 269.143219)scale(0.1 -0.1)">
<defs>
<path id="DejaVuSans-31" d="M 794 531
L 1825 531
L 1825 4091
L 703 3866
L 703 4441
L 1819 4666
L 2450 4666
L 2450 531
L 3481 531
L 3481 0
L 794 0
L 794 531
z
" transform="scale(0.015625)"/>
</defs>
<use xlink:href="#DejaVuSans-31"/>
</g>
</g>
</g>
<g id="ytick_3">
<g id="line2d_8">
<g>
<use xlink:href="#m9052c3e169" x="57.6" y="223.104" style="stroke: #000000; stroke-width: 0.8"/>
</g>
</g>
<g id="text_8">
<!-- 2 -->
<g transform="translate(44.2375 226.903219)scale(0.1 -0.1)">
<use xlink:href="#DejaVuSans-32"/>
</g>
</g>
</g>
<g id="ytick_4">
<g id="line2d_9">
<g>
<use xlink:href="#m9052c3e169" x="57.6" y="180.864" style="stroke: #000000; stroke-width: 0.8"/>
</g>
</g>
<g id="text_9">
<!-- 3 -->
<g transform="translate(44.2375 184.663219)scale(0.1 -0.1)">
<defs>
<path id="DejaVuSans-33" d="M 2597 2516
Q 3050 2419 3304 2112
Q 3559 1806 3559 1356
Q 3559 666 3084 287
Q 2609 -91 1734 -91
Q 1441 -91 1130 -33
Q 819 25 488 141
L 488 750
Q 750 597 1062 519
Q 1375 441 1716 441
Q 2309 441 2620 675
Q 2931 909 2931 1356
Q 2931 1769 2642 2001
Q 2353 2234 1838 2234
L 1294 2234
L 1294 2753
L 1863 2753
Q 2328 2753 2575 2939
Q 2822 3125 2822 3475
Q 2822 3834 2567 4026
Q 2313 4219 1838 4219
Q 1578 4219 1281 4162
Q 984 4106 628 3988
L 628 4550
Q 988 4650 1302 4700
Q 1616 4750 1894 4750
Q 2613 4750 3031 4423
Q 3450 4097 3450 3541
Q 3450 3153 3228 2886
Q 3006 2619 2597 2516
z
" transform="scale(0.015625)"/>
</defs>
<use xlink:href="#DejaVuSans-33"/>
</g>
</g>
</g>
<g id="ytick_5">
<g id="line2d_10">
<g>
<use xlink:href="#m9052c3e169" x="57.6" y="138.624" style="stroke: #000000; stroke-width: 0.8"/>
</g>
#Deleted here as over word limite
</g>
</g>
</g>
<defs>
<clipPath id="pba3ab8f1d9">
<rect x="57.6" y="41.472" width="357.12" height="266.112"/>
</clipPath>
</defs>
</svg>
The ‘b’ prefix indicates that this is a bytes array and not a string. Convert this to a string.
Also, and I don’t know for sure either way, but you might also need to remove either (or both) of the ?xml tag and the !DOCTYPE tag.
robmcc
June 25, 2022, 2:48pm
9
Amazing it works thank you!
image = image.decode(settings.DEFAULT_CHARSET)
There is no problem with those other tags