test/html/svg-spa.html

<!DOCTYPE html>
<html lang="en"><head>
<title>LiteJS Full SVG Single-Page Application example</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1">
<link rel="icon" href="data:image/x-icon;,">
<link rel="stylesheet" href="svg-example1.css">
</head><body>
<script type="ui">
%js
  // Prefill El.cache with `a` element in svg namespace, all `a` elements created will be svg ones.
  // In case of html/svg mixed content you could use `svg|a` to separate html `a` and svg `a`.
  El.cache["a"] = document.createElementNS("http://www.w3.org/2000/svg", "a")

// Container can have a route, so you can view it without content
%view main #
  svg[viewBox="0 0 200 100"][preserveAspectRatio="xMidYMin meet"]
    rect.bg1[x=5][y=5][width=190][height=20][rx=3][ry=3]
    text[x=10][y=17][font-family=Verdana][font-size=5] Full SVG single-page application example
    rect.bg1[x=5][y=30][width=50][height=65][rx=3][ry=3]
    a.Menu-item ;xlink: "#home"
      text[x=10][y=40][font-family=Verdana][font-size=5] Home
    a.Menu-item ;xlink: "#settings"
      text[x=10][y=50][font-family=Verdana][font-size=5] Settings
    // Use svg nesting for relative position
    svg[x=60][y=30][width=135][height=65][viewBox="0 0 135 65"]
      rect.bg1[x=0][y=0][width="100%"][height="100%"][rx=3][ry=3]
      g
        %slot

%view home main
  text[x=5][y=15][font-family=Verdana][font-size=10] Main page

%view settings main
  text[x=5][y=15][font-family=Verdana][font-size=10] Settings page
  text[x=5][y=25][font-family=Verdana][font-size=5] Subheader

%start
</script>
<script src="https://litejs.com/litejs.full.min.js"></script>
<noscript>This application requires JavaScript</noscript>
</body></html>