<?xml version="1.0" encoding="utf-8" standalone="no"?>
<svg contentScriptType="text/ecmascript" width="12cm" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full" xmlns:svg="http://www.w3.org/2000/svg" zoomAndPan="magnify" contentStyleType="text/css" height="12cm" viewBox="0 0 1200 1200" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <title>The FilmReel Template</title>
  <desc>The template consists of four pictures on a film strip below the center hole, against a background of a film reel. There is circular text above the hole, and a small circular text area below the film strip on the border of the reel.
    </desc>
  <lst:categories xmlns:lst="http://www.lightscribe.com/LightScribe/TemplateLabeler">
    <lst:category>business</lst:category>
    <lst:category>cultural</lst:category>
    <lst:category>family</lst:category>
    <lst:category>hobbies</lst:category>
    <lst:category>special occasions</lst:category>
    <lst:category>video/photography</lst:category>
  </lst:categories>
  <defs>
    <!--Housekeeping : This, and some other things that are only for managing the file itself, 
            and not the template definition, are called 'housekeeping' in comments, and can be 
            ignored for the purpose of defining templates and UserDefinableContent.-->
    <mask x="0" width="1200" height="1200" id="LabelArea" y="0" fill-rule="evenodd">
      <!--the mask is only for rendering the SVG on viewers - it has nothing to do with the 
                UserDefinableContent.-->
      <rect fill="#ffffff" width="1200" height="1200" fill-opacity="0.5"></rect>
      <circle fill="#000000" r="600" cx="600" cy="600"></circle>
      <circle fill="#ffffff" r="590" cx="600" cy="600"></circle>
      <circle fill="#808080" fill-opacity="0.75" r="244.0" id="circle2610" cx="600.0" cy="600"></circle>
    </mask>
  </defs>
  <!--the fixed elements in this template-->
  <g id="TemplateBackgroundElements" mask="url(#LabelArea)">
    <title>Template Background</title>
    <desc>This group contains the template background and other fixed elements. None of these elements are intended for user manipulation. In the initial template designs, only a single background image will be expected here. As the technology matures, full fledged SVG descriptions of background may be put here.
        </desc>
    <!--Change this to be the actual background image to use-->
    <image x="0.0" y="0.0" width="1200" xlink:href="backgrounds/FilmReel.jpg" id="BackGroundImage" height="1200" />
  </g>
  <!--the user elements in this template-->
  <g id="UserDefinableElements" attr_name="">
    <title>Template Elements</title>
    <lst:categories xmlns:lst="http://www.lightscribe.com/LightScribe/TemplateLabeler">
      <lst:category>photos</lst:category>
      <lst:category>collage</lst:category>
      <lst:category>frames</lst:category>
      <lst:category>large</lst:category>
      <lst:category>classic</lst:category>
    </lst:categories>
    <g id="Image Item 1" transform="matrix(0.337787 0.94122255 -0.94122255 0.337787 300 850)" clip-path="url('#Image-Item-5-clip')">
      <clipPath id="Image-Item-5-clip">
        <polygon fill="none" points="3.210688,11.7767515 240.72972,13.08446                      236.75526,104.09105 124.76004,188.20451 25.430124,216.30376" stroke="#000000" />
      </clipPath>
      <image x="-1.5675634" y="13.249255" width="255" xlink:href="thumbnails/default.png" visibility="visible" height="261" preserveAspectRatio="xMidYMid slice" />
    </g>
    <g id="Image Item 2" clip-path="url('#Image-Item-1-clip')" transform="translate(573 735) rotate(70)">
      <clipPath id="Image-Item-1-clip">
        <!--rect x="1" width="254.74661" height="302.01776" y="1" stroke="#000000"/-->
        <polygon fill="none" points="1.6237335,-1.537365 14.693152,295.8684                      258.35416,298.60657 272.23563,-0.30365515" stroke="#000000" />
      </clipPath>
      <image display="inline" fill="none" width="510" xlink:href="thumbnails/default.png" height="783" preserveAspectRatio="xMidYMid slice" />
    </g>
    <g id="Image Item 3" transform="translate(945 610) rotate(70)" clip-path="url('#Image-Item-3-clip')">
      <clipPath id="Image-Item-3-clip">
        <polygon fill="none" points="2.2214053,-0.25565234 -7.545059,380.35782                      262.1778,373.1753 281.7661,3.5859444" stroke="#000000" />
      </clipPath>
      <image width="295" xlink:href="thumbnails/default.png" height="392" preserveAspectRatio="xMidYMid slice" />
    </g>
    <g id="Image Item 4" transform="translate(1195 533) rotate(72.5)" clip-path="url('#Image-Item-2-clip')">
      <clipPath id="Image-Item-2-clip">
        <polygon fill="none" points="0.95371693,0.3007058 -1.5000299,237.54315                      280.50662,231.04337 284.82684,127.552605 169.10861,52.27121" stroke="#000000" />
      </clipPath>
      <!--polygon fill="none" points="0.95371693,0.3007058 -1.5000299,237.54315 
                280.50662,231.04337 284.82684,127.552605 169.10861,52.27121" stroke="#000000"/-->
      <image x="0.0" y="0.0" width="289" xlink:href="thumbnails/default.png" height="274" preserveAspectRatio="xMidYMid slice" />
    </g>
    <g id="Arc Item 1" clip-path="url('#Arc-Text-1-clip')" transform="translate(600,600)">
      <clipPath id="Arc-Text-1-clip">
        <path fill="grey" stroke-width="1" d="M -259.56946 164.64578 A 300.0 300.0 210 1 1 295.17355 -47.90282 L 434.52075 -93.76392 A 448.0 448.0 13 1 0 -391.0 227.0 z" id="semi-circle" fill-opacity="50%" stroke="red" />
      </clipPath>
      <path fill="grey" stroke-width="1" d="M -259.56946 164.64578 A 300.0 300.0 210 1 1 295.17355 -47.90282 L 434.52075 -93.76392 A 448.0 448.0 13 1 0 -391.0 227.0 z" id="Arc-Text-1-frame" fill-opacity="50%" stroke="red" />
      <path fill="none" d="M -350,0 A 350,350 00 0 1 350,0" id="Arc-Text-1-baseline" stroke="none"></path>
      <text fill="white" dy="0" font-size="24" text-anchor="middle">
        <textPath startOffset="50%" xlink:href="#Arc-Text-1-baseline">Click to add text</textPath>
      </text>
    </g>
    <g id="Arc Item 2" clip-path="url('#Arc-Text-2-clip')" transform="translate(600,600)">
      <clipPath id="Arc-Text-2-clip">
        <path fill="none" d="M 415.0 362.0 A 550.0 550.0 312 0 1 -157.0 528.0                      L  -53.635456 498.68222 A 500.0 500.0 260 0 0 311.4895 392.84888  z" id="semi-circle" stroke="red" />
      </clipPath>
      <path fill="none" d="M 415.0 362.0 A 550.0 550.0 312 0 1 -157.0 528.0                      L  -53.635456 498.68222 A 500.0 500.0 260 0 0 311.4895 392.84888  z" id="Arc-Text-2-frame" stroke="red" />
      <path fill="none" d="M -141.38892 522.7152 A 525.0 525.0 0.0 0 0 391.30548 369.25687" id="Arc-Text-2-baseline" stroke="green"></path>
      <text fill="white" dy="1" font-size="10" stroke-width="3" stroke="black" text-anchor="middle">
        <textPath startOffset="50%" text-anchor="middle" xlink:href="Arc-Text-2-baseline">Click to add text</textPath>
      </text>
    </g>
  </g>
  <!--Housekeeping : Opaque on the centre of the design.-->
  <circle id="center-semi-opaque-hole" fill="white" fill-opacity="0.75" r="244.0" cx="600" cy="600" />
  <path fill="none" d="M 600.0 0.0 A 600.0 600.0 0.0 1 1 599.0 0.0" stroke-width="10" stroke-color="white" stroke="#ffffff" />
</svg>