Example 8

You may copy and paste the following text into your favorite editor.

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20001102//EN"
   "http://www.w3.org/TR/2000/CR-SVG-20001102/DTD/svg-20001102.dtd">

<svg id="body"
    width="21cm" height="13.5cm"
    viewBox="0 0 210 135">
<title>Example 8</title>
<desc>
    A complex path
</desc>

    <defs>
    <polyline id="loop"
        points="
         1.00,  0.00     0.93,  0.16
         0.72,  0.26     0.43,  0.25
         0.13,  0.11    -0.11, -0.13
        -0.25, -0.43    -0.26, -0.72
        -0.16, -0.93     0.00, -1.00
         0.16, -0.93     0.26, -0.72
         0.25, -0.43     0.11, -0.13
        -0.13,  0.11    -0.43,  0.25
        -0.72,  0.26    -0.93,  0.16
        -1.00,  0.00"
        transform="scale(5, 5)"
        stroke="green" stroke-width="0.1" fill="none" />

    <g id="multiloop">
        <use xlink:href="#loop"/>
        <use xlink:href="#loop" transform="translate(10, 0)"/>
        <use xlink:href="#loop" transform="translate(20, 0)"/>
        <use xlink:href="#loop" transform="translate(30, 0)"/>
        <use xlink:href="#loop" transform="translate(40, 0)"/>
        <use xlink:href="#loop" transform="translate(50, 0)"/>
        <use xlink:href="#loop" transform="translate(60, 0)"/>
        <use xlink:href="#loop" transform="translate(70, 0)"/>
        <use xlink:href="#loop" transform="translate(80, 0)"/>
        <use xlink:href="#loop" transform="translate(90, 0)"/>
        <use xlink:href="#loop" transform="translate(100, 0)"/>
        <use xlink:href="#loop" transform="translate(110, 0)"/>
        <use xlink:href="#loop" transform="translate(120, 0)"/>
    </g>

    <circle id="bullet" cx="0" cy="0" r="1.5" />

    <path id="star"
        d=
        "M -0.951,-0.309
         L  0.951,-0.309
           -0.588, 0.809
            0.000,-1.000
            0.588, 0.809
         Z"
         transform="scale(3,3)" />

    <g id="camera">
        <!-- body -->
        <path fill="#eecc00"
            d="M 0,15 Q 0,8 2,8 L 65,8 65,42 64,44 2,44 0,42"/>
        <!-- flash -->
        <path fill="#999999"
            d="M 49,9 L 49,0 65,0 65,9 Z"/>
        <path fill="#ffffff"
            d="M 51,7 L 51,2 63,2 63,7 Z"/>
        <!-- various countour lines -->
        <path stroke="#c6b127" fill="none"
            d="M 0,15 L 5,15
            M 0,40 L 5,40
            M 7,8 A5,20 0 0 0 7,44
            M 26,10 Q 30,13 27, 17
            A 15,15 0 0 1 27,40
            L 29,44
            M 49,17 A 14,11.5 0 0 1 49,40
            M 49,17 A 9,11.5 0 0 1 49,40"/>
        <path stroke="#f7e77e"
            d="M 26,17 L 12,15 M 27,40 L 12,41"/>
        <!-- lens -->
        <circle cx="45" cy="28" r="10" fill="black"/>
        <circle cx="45" cy="28" r="7" fill="yellow"/>
        <circle cx="45" cy="28" r="6" fill="#666666"/>
        <!-- viewfinder -->
        <rect fill="#cccccc" stroke="#999999"
            stroke-width="0.2" x="35" y="10" width="9" height="5"/>
    </g>
    </defs>

    <rect x="10" y="20" width="150" height="70"
        transform="translate(3, 3)"
        fill="#999999" stroke="#999999" stroke-width="1" />

    <rect x="10" y="20" width="150" height="70"
        fill="#eeeeff" stroke="red" stroke-width="1" />

    <use xlink:href="#camera" transform="scale(1.25, 1.25)
        translate(30, 20)"/>
    <use xlink:href="#multiloop" transform="translate(20, 100)"/>
    <use xlink:href="#multiloop"
        transform="translate(20, 10) rotate(180, 60, 0)"/>

    <use xlink:href="#bullet" fill="#990000" transform="translate(5, 120)"/>
    <use xlink:href="#star" fill="#009900" transform="translate(10, 120)"/>
    <use xlink:href="#star" fill="#990099" transform="translate(180, 120)"/>
    <use xlink:href="#bullet" fill="#000099" transform="translate(185, 120)"/>
</svg>