--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/1.svg	Wed Mar 12 22:16:10 2014 +0000
@@ -0,0 +1,31 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="650">>
+
+  <!-- hostile resource -->
+  <text x="224" y="14" font-size="14" text-anchor="left" fill="fuchsia">OriginX resource, 500x600 @ 0,0</text>
+  <rect x="10" y="20" width="500" height="600"
+        style="stroke:fuchsia;stroke-width:5;fill:transparent;"/>
+
+  <!-- protected resource -->
+  <text x="260" y="100" font-size="14" text-anchor="left" fill="darkorange">OriginY protected resource,</text>
+  <text x="260" y="115" font-size="14" text-anchor="left" fill="darkorange">500x450 @ 100,100</text>
+  <rect x="110" y="120" width="500" height="450" style="stroke:darkorange;stroke-width:5;fill:transparent;"/>
+
+  <!-- div 1 -->
+  <text x="245" y="225" font-size="14" text-anchor="left" fill="darkorange">&lt;div id=div1&gt;, 450x200 @ 110,110</text>
+  <rect x="120" y="130" width="450" height="200" style="stroke:darkorange;stroke-width:1;fill:transparent;"/>
+
+  <!-- div 2 -->
+  <text x="245" y="445" font-size="14" text-anchor="left" fill="darkorange">&lt;div id=div2&gt;, 450x200 @ 110,330</text>
+  <rect x="120" y="350" width="450" height="200" style="stroke:darkorange;stroke-width:1;fill:transparent;"/>
+
+  <!-- root viewport -->
+  <text x="10" y="14" font-size="14" text-anchor="left" fill="black">root viewport, 500x500 @ 0,0</text>
+  <rect x="10" y="20" width="500" height="500" style="stroke:black;stroke-width:2;fill:transparent;" stroke-dasharray="7,7"/>
+
+  <!-- iframe viewport -->
+  <text x="110" y="100" font-size="14" text-anchor="left" fill="black">iframe viewport,</text>
+  <text x="110" y="115" font-size="14" text-anchor="left" fill="black">100x100 @ 100,100</text>
+  <rect x="110" y="120" width="100" height="100" style="stroke:black;stroke-width:2;fill:transparent;" stroke-dasharray="7,7"/>
+
+
+</svg>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/2.svg	Wed Mar 12 22:16:10 2014 +0000
@@ -0,0 +1,37 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="650">
+
+  <!-- protected area -->
+  <rect x="120" y="130" width="450" height="200" fill="cyan"/> 
+
+  <!-- hostile resource -->
+  <text x="224" y="14" font-size="14" text-anchor="left" fill="fuchsia">OriginX resource, 500x600 @ 0,0</text>
+  <rect x="10" y="20" width="500" height="600"
+        style="stroke:fuchsia;stroke-width:5;fill:transparent;"/>
+
+  <!-- protected resource -->
+  <text x="260" y="100" font-size="14" text-anchor="left" fill="darkorange">OriginY protected resource,</text>
+  <text x="260" y="115" font-size="14" text-anchor="left" fill="darkorange">500x450 @ 100,100</text>
+  <rect x="110" y="120" width="500" height="450" style="stroke:darkorange;stroke-width:5;fill:transparent;"/>
+
+  <!-- div 1 -->
+  <text x="245" y="225" font-size="14" text-anchor="left" fill="darkorange">&lt;div id=div1&gt;, 450x200 @ 110,110</text>
+  <rect x="120" y="130" width="450" height="200" style="stroke:darkorange;stroke-width:1;fill:transparent;"/>
+
+  <!-- div 2 -->
+  <text x="245" y="445" font-size="14" text-anchor="left" fill="darkorange">&lt;div id=div2&gt;, 450x200 @ 110,330</text>
+  <rect x="120" y="350" width="450" height="200" style="stroke:darkorange;stroke-width:1;fill:transparent;"/>
+
+  <!-- root viewport -->
+  <text x="10" y="14" font-size="14" text-anchor="left" fill="black">root viewport, 500x500 @ 0,0</text>
+  <rect x="10" y="20" width="500" height="500" style="stroke:black;stroke-width:2;fill:transparent;" stroke-dasharray="7,7"/>
+
+  <!-- iframe viewport -->
+  <text x="110" y="100" font-size="14" text-anchor="left" fill="black">iframe viewport,</text>
+  <text x="110" y="115" font-size="14" text-anchor="left" fill="black">100x100 @ 100,100</text>
+  <rect x="110" y="120" width="100" height="100" style="stroke:black;stroke-width:2;fill:transparent;" stroke-dasharray="7,7"/>
+
+  <!-- event -->
+  <circle cx="130" cy="140" r="2" fill="red"/>
+  <circle cx="130" cy="140" r="4" fill="transparent" stroke="red"/>
+
+</svg>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/3.svg	Wed Mar 12 22:16:10 2014 +0000
@@ -0,0 +1,47 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="650">
+
+  <defs>
+   <pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="rotate(45 2 2)"> 
+      <path d="M -1,2 l 6,0" stroke="cyan" stroke-width="1"/>
+   </pattern>
+  </defs>
+
+  <!-- protected area -->
+  <rect x="120" y="130" width="70" height="70" fill="cyan"/> 
+
+  <!-- hostile resource -->
+  <text x="224" y="14" font-size="14" text-anchor="left" fill="fuchsia">OriginX resource, 500x600 @ 0,0</text>
+  <rect x="10" y="20" width="500" height="600"
+        style="stroke:fuchsia;stroke-width:5;fill:transparent;"/>
+
+  <!-- protected resource -->
+  <text x="260" y="100" font-size="14" text-anchor="left" fill="darkorange">OriginY protected resource,</text>
+  <text x="260" y="115" font-size="14" text-anchor="left" fill="darkorange">500x450 @ 100,100</text>
+  <rect x="110" y="120" width="500" height="450" style="stroke:darkorange;stroke-width:5;fill:transparent;"/>
+
+  <!-- div 1 -->
+  <rect x="120" y="130" width="450" height="200" style="stroke:darkorange;stroke-width:1;" fill="url(#diagonalHatch)"/>
+  <text x="245" y="225" font-size="14" text-anchor="left" fill="darkorange">&lt;div id=div1&gt;, 450x200 @ 110,110</text>
+
+  <!-- div 2 -->
+  <text x="245" y="445" font-size="14" text-anchor="left" fill="darkorange">&lt;div id=div2&gt;, 450x200 @ 110,330</text>
+  <rect x="120" y="350" width="450" height="200" style="stroke:darkorange;stroke-width:1;fill:transparent;"/>
+
+  <!-- root viewport -->
+  <text x="10" y="14" font-size="14" text-anchor="left" fill="black">root viewport, 500x500 @ 0,0</text>
+  <rect x="10" y="20" width="500" height="500" style="stroke:black;stroke-width:2;fill:transparent;" stroke-dasharray="7,7"/>
+
+  <!-- iframe viewport -->
+  <rect x="110" y="120" width="100" height="100" style="stroke:black;stroke-width:2;fill:transparent;" stroke-dasharray="7,7"/>
+  <text x="110" y="100" font-size="14" text-anchor="left" fill="black">iframe viewport,</text>
+  <text x="110" y="115" font-size="14" text-anchor="left" fill="black">100x100 @ 100,100</text>
+
+  <!-- event -->
+  <circle cx="130" cy="140" r="2" fill="red"/>
+  <circle cx="130" cy="140" r="4" fill="transparent" stroke="red"/>
+
+  <!-- clip -->
+  <text x="70" y="74" font-size="14" text-anchor="left" fill="green">clip before=60 after=60 above=60 below=60</text>
+  <rect x="70" y="80" height="120" width="120" style="stroke:green;stroke-width=3;fill:transparent;" stroke-dasharray="2,2"/>
+
+</svg>

--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/4.svg	Wed Mar 12 22:16:10 2014 +0000
@@ -0,0 +1,47 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="650">
+
+  <defs>
+   <pattern id="diagonalHatch" patternUnits="userSpaceOnUse" width="4" height="4" patternTransform="rotate(45 2 2)"> 
+      <path d="M -1,2 l 6,0" stroke="cyan" stroke-width="1"/>
+   </pattern>
+  </defs>
+
+  <!-- protected area -->
+  <rect x="110" y="120" width="80" height="80" fill="cyan"/> 
+
+  <!-- hostile resource -->
+  <text x="224" y="14" font-size="14" text-anchor="left" fill="fuchsia">OriginX resource, 500x600 @ 0,0</text>
+  <rect x="10" y="20" width="500" height="600"
+        style="stroke:fuchsia;stroke-width:5;fill:transparent;"/>
+
+  <!-- protected resource -->
+  <text x="260" y="100" font-size="14" text-anchor="left" fill="darkorange">OriginY protected resource,</text>
+  <text x="260" y="115" font-size="14" text-anchor="left" fill="darkorange">500x450 @ 100,100</text>
+  <rect x="110" y="120" width="500" height="450" style="stroke:darkorange;stroke-width:5;" fill="url(#diagonalHatch)"/>
+
+  <!-- div 1 -->
+  <rect x="120" y="130" width="450" height="200" style="stroke:darkorange;stroke-width:1;fill:transparent"/>
+  <text x="245" y="225" font-size="14" text-anchor="left" fill="darkorange">&lt;div id=div1&gt;, 450x200 @ 110,110</text>
+
+  <!-- div 2 -->
+  <text x="245" y="445" font-size="14" text-anchor="left" fill="darkorange">&lt;div id=div2&gt;, 450x200 @ 110,330</text>
+  <rect x="120" y="350" width="450" height="200" style="stroke:darkorange;stroke-width:1;fill:transparent;"/>
+
+  <!-- root viewport -->
+  <text x="10" y="14" font-size="14" text-anchor="left" fill="black">root viewport, 500x500 @ 0,0</text>
+  <rect x="10" y="20" width="500" height="500" style="stroke:black;stroke-width:2;fill:transparent;" stroke-dasharray="7,7"/>
+
+  <!-- iframe viewport -->
+  <rect x="110" y="120" width="100" height="100" style="stroke:black;stroke-width:2;fill:transparent;" stroke-dasharray="7,7"/>
+  <text x="110" y="100" font-size="14" text-anchor="left" fill="black">iframe viewport,</text>
+  <text x="110" y="115" font-size="14" text-anchor="left" fill="black">100x100 @ 100,100</text>
+
+  <!-- event -->
+  <circle cx="130" cy="140" r="2" fill="red"/>
+  <circle cx="130" cy="140" r="4" fill="transparent" stroke="red"/>
+
+  <!-- clip -->
+  <text x="70" y="74" font-size="14" text-anchor="left" fill="green">clip before=60 after=60 above=60 below=60</text>
+  <rect x="70" y="80" height="120" width="120" style="stroke:green;stroke-width=3;fill:transparent;" stroke-dasharray="2,2"/>
+
+</svg>