<head>
<style>
  
  // Set image1 to visible, image2 to invisible by default
.image1 {
  display: inline;
  }
.image2 {
  display: none;
  }
</style>
        <!-- If SVG supported by browser, swap the visiblilty state of both images -->
        var svgSupport = !!document.createElementNS && !!document.createElementNS('http://www.w3.org/2000/svg', 'svg').createSVGRect;
        if ( svgSupport ) {
            <style>
            .image1 {
              display: none;
              }
            .image2 {
              display: inline;
            }
            </style>
</head>
<body>
  <!-- Div container has both images, but only one should 'exist' (Be visible AND take up physial space) -->
<div>
  <image src="image1" class="image1" />
  <image src="image2" class="image2" />
</div>
</body>
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.