{% load static %}
{% if image %}
     <svg preserveAspectRatio="none" width="100%" height="100%" viewBox="{{ fragment.viewbox_square }}" 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="{{ image.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" opacity=".3"/>
       <image xlink:href="{{ image.url }}" x="0" y="0" preserveAspectRatio="none" width="1" height="1" clip-path="url(#fragment-clip{{ fragment.pk }})"/>
     </svg>
{% else %}
     <svg preserveAspectRatio="none" width="100%" height="100%" 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" opacity=".3"/>
       <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>
{% endif %}