app/assets/jinja-templates/image.j2

<svg viewBox="0 0 {{ page.width }} {{ page.height }}" xmlns="http://www.w3.org/2000/svg">
    <image height="{{ page.height }}" width="{{ page.width }}" href="/gradio_api/file={{ page.path }}" />
    {%- for line in page.cells -%}
        <a class="cellline line{{loop.index}} highlighted" onmouseover="document.querySelectorAll('.line{{loop.index}}').forEach(element => {element.classList.remove('highlighted')});" onmouseout="document.querySelectorAll('.line{{loop.index}}').forEach(element => {element.classList.add('highlighted')});">
        <polygon id="{{ loop.index }}" points="{% for point in line.polygon %}{{ point|join(',') }}{% if not loop.last %} {% endif %}{% endfor %}"/>
        <text class="celltext" x="{{ line.text_x }}" y="{{ line.text_y }}">{{ line.text }}</text>
        </a>
    {% endfor %}
</svg>