{% load static %}
{% load thumbnail %}
{% load egonomy_thumbnail %}
{% with fragment.image.info.image_file as image %}
{% if image|ratio > ratio %}
 {% thumbnail image w_size format="PNG" crop="center" as im %}
  <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" class="sub_svg_image"/>
  <svg preserveAspectRatio="none" width="{{ im.width }}" height="{{ im.height }}" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <clipPath id="fragment-clip{{ fragment.pk }}">
            <path d="{{ fragment.coordinates }}" />
        </clipPath>
    </defs>
    <image xlink:href="{{ im.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
  </svg>
 {% empty %}
  <img src="{% static 'egonomy/img/empty.gif' %}" width="{{w_size}}" height="{{w_size}}" class="placeholder sub_svg_image" />
  <svg preserveAspectRatio="none" width="476" height="476" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <clipPath id="fragment-clip{{ fragment.pk }}">
            <path d="{{ fragment.coordinates }}" />
        </clipPath>
    </defs>
    <image xlink:href="{% static 'egonomy/img/empty.gif' %}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
  </svg>
 {% endthumbnail %}
{% else %}
 {% thumbnail image h_size format="PNG" crop="center" as im %}
  <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" class="sub_svg_image"/>
  <svg preserveAspectRatio="none" width="{{ im.width }}" height="{{ im.height }}" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <clipPath id="fragment-clip{{ fragment.pk }}">
            <path d="{{ fragment.coordinates }}" />
        </clipPath>
    </defs>
    <image xlink:href="{{ im.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
 {% empty %}
  <img src="{% static 'egonomy/img/empty.gif' %}" width="{{w_size}}" height="{{w_size}}" class="placeholder sub_svg_image" />
  <svg preserveAspectRatio="none" width="{{w_size}}" height="{{w_size}}" viewBox="0 0 1 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <clipPath id="fragment-clip{{ fragment.pk }}">
            <path d="{{ fragment.coordinates }}" />
        </clipPath>
    </defs>
    <image xlink:href="{% static 'egonomy/img/empty.gif' %}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
  </svg>
 {% endthumbnail %}
{% endif %}
{% endwith %}