img-and-image-1.html

Enable keyboard shortcuts

<html>

<head>

  <style>

    img { position: absolute; }

  </style>

</head>

<body style="margin: 0">

  <!-- Use the base images "a" and "b" first -->

  <img src="img-and-image-1-helper-a.svg"

       style="left: 0;      top: 0;      width: 60px;  height: 20px">

  <img src="img-and-image-1-helper-b.svg"

       style="left: 150px;  top: 0;      width: 60px;  height: 20px">

  <!-- Now, use an SVG image "c", which itself uses both base images. -->

  <img src="img-and-image-1-helper-c.svg"

       style="left: 0;      top: 50px;   width: 300px; height: 200px">

  <!-- And finally, use "a" and "b" again, but now with a different size. -->

  <img src="img-and-image-1-helper-a.svg"

       style="left: 0;     top: 250px;   width: 30px;  height: 50px">

  <img src="img-and-image-1-helper-b.svg"

       style="left: 150px; top: 250px;   width: 30px;  height: 50px">

</body>

</html>