--- a/src/egonomy/templates/egonomy_all_fragments.html	Tue Feb 26 17:52:44 2013 +0100
+++ b/src/egonomy/templates/egonomy_all_fragments.html	Wed Feb 27 18:42:19 2013 +0100
@@ -28,34 +28,75 @@
                             <li class="subcol subcol-eighth">
                               <a href="{% url 'view_fragment' fragment_pk=frg.pk %}">
                               <div class="center-image">
-                                <div class="image-and-fragment">
+                                <div class="image-and-fragment" style="width:110px; height:110px">
                                  {% with frgmt=frg.object|default:frg %}{# frg.object in search case, frg otherwise #}
                                  {% with image=frgmt.image.info.image_file %}
                                  {% if image %}
                                   {% if image|is_portrait %}
 							 	    {% thumbnail image "x110" format="PNG" crop="center" as im %}
-	                                  <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
+	                                  <!--img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" class="sub_svg_image"/-->
+                                      <svg preserveAspectRatio="none" width="110px" height="110px" viewBox="{{ frgmt.viewbox_square }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                                        <defs>
+                                            <clipPath id="fragment-clip{{ frgmt.pk }}">
+                                                <path d="{{ frgmt.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{{ frgmt.pk }})"/>
+                                      </svg>
 	                                {% empty %}
-	                                  <img src="{% static 'egonomy/img/empty.gif' %}" width="110" height="110" class="placeholder" />
+	                                  <!--img src="{% static 'egonomy/img/empty.gif' %}" width="110" height="110" class="placeholder sub_svg_image" /-->
+                                      <svg preserveAspectRatio="none" width="110" height="110" 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{{ frgmt.pk }}">
+                                                <path d="{{ frgmt.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{{ frgmt.pk }})"/>
+                                      </svg>
 	                                {% endthumbnail %}
 	                              {% else %}
                                     {% thumbnail image "110" format="PNG" crop="center" as im %}
-                                      <img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}"/>
+                                      <!--img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}" class="sub_svg_image"/-->
+                                      <svg preserveAspectRatio="none" width="110px" height="110px" viewBox="{{ frgmt.viewbox_square }}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+                                        <defs>
+                                            <clipPath id="fragment-clip{{ frgmt.pk }}">
+                                                <path d="{{ frgmt.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{{ frgmt.pk }})"/>
+                                      </svg>
                                     {% empty %}
-                                      <img src="{% static 'egonomy/img/empty.gif' %}" width=110" height="110" class="placeholder" />
+                                      <!--img src="{% static 'egonomy/img/empty.gif' %}" width="110" height="110" class="placeholder sub_svg_image" /-->
+                                      <svg preserveAspectRatio="none" width="110" height="110" 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{{ frgmt.pk }}">
+                                                <path d="{{ frgmt.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{{ frgmt.pk }})"/>
+                                      </svg>
                                     {% endthumbnail %}
 	                              {% endif %}
 	                             {% else %}
-	                                  <img src="{% static 'egonomy/img/empty.gif' %}" width=110" height="110" class="placeholder" />
+	                                  <img src="{% static 'egonomy/img/empty.gif' %}" width="110" height="110" class="placeholder sub_svg_image" />
+                                      <svg preserveAspectRatio="none" width="110" height="110" 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{{ frgmt.pk }}">
+                                                <path d="{{ frgmt.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{{ frgmt.pk }})"/>
+                                      </svg>
 	                             {% endif %}
 	                             {% endwith %}
-	                                  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
-                                        <path d="{{ frgmt.coordinates }}" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
-                                      </svg>
                                  {% endwith %}
                                 </div>
                              </div>
                              <h3>{{ frg.highlighted.title|first|safe|default:frg.title }}</h3></a>
+                             <p>{{ frg.viewbox }} - {{ frg.viewbox_square }}</p>
                              <p>{% trans "Annotated by" %} <strong><a href="{% url 'user_fragments' username=frg.author %}">{{ frg.author }}</a></strong></p>
                             </li>
                           {% endfor %}