bellbind/clock.html

## clock.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no" />
    <link rel="icon" href="././clock.svg" />
    <link rel="manifest" href="./manifest.json" />
    <title>SVG Clock</title>
    <style>
      html {height: 100%;}
      body {
          margin: 0;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #334444;
      }
      object {
          width: 100vmin;
          height: 100vmin;
      }
    </style>
  </head>
  <body>
    <object data="./clock.svg" />
  </body>
</html>

## clock.svg

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              clock.svg
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!doctype html>
<html>
  <head>
  </head>
  <body style="display: flex; background-color: #3c4044; color: #dddddd;">
    <div style="text-align: center;">
      <h1>&lt;img src="./clock.svg" /&gt;</h1>
      <img src="./clock.svg" />
      <p>NOTE: script and web font are disabled</p>
    </div>
    <hr />
    <div style="text-align: center;">
      <h1>&lt;object data="./clock.svg"&gt;&lt;/object&gt;</h1>
      <object data="./clock.svg"></object>
      <p>NOTE: cannot omit a closing tag &lt;/object&gt;</p>
    </div>
    <hr />
    <div style="text-align: center;">
      <h1>objectElement.contentWindow from HTML</h1>
      <object data="./clock.svg"></object>
      <div>
        <button onclick="this.parentNode.parentNode.querySelector('object').contentWindow.clock.showDigital()">show digital panel</button>
        <button onclick="this.parentNode.parentNode.querySelector('object').contentWindow.clock.hideDigital()">hide digital panel</button>
      </div>
      <p>NOTE: cannot access contentWindow when file: protocol</p>
    </div>
  </body>
</html>

## manifest.json
{
  "short_name": "SVG Clock",
  "name": "SVG Analog Clock",
  "icons": [
    {
      "src": "./clock.svg",
      "type": "image/svg+xml",
      "sizes": "320x320"
    }
  ],
  "start_url": "./clock.html",
  "theme_color": "#334444",
  "background_color": "#334444",
  "display": "standalone",
  "display_override": ["fullscreen", "minimal-ui", "window-controls-overlay", "browser"]
}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="user-scalable=no" />
	<link rel="icon" href="././clock.svg" />
	<link rel="manifest" href="./manifest.json" />
	<title>SVG Clock</title>
	<style>
	html {height: 100%;}
	body {
	margin: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #334444;
	}
	object {
	width: 100vmin;
	height: 100vmin;
	}
	</style>
	</head>
	<body>
	<object data="./clock.svg" />
	</body>
	</html>
	{
	"short_name": "SVG Clock",
	"name": "SVG Analog Clock",
	"icons": [
	{
	"src": "./clock.svg",
	"type": "image/svg+xml",
	"sizes": "320x320"
	}
	],
	"start_url": "./clock.html",
	"theme_color": "#334444",
	"background_color": "#334444",
	"display": "standalone",
	"display_override": ["fullscreen", "minimal-ui", "window-controls-overlay", "browser"]
	}