diff --git a/web/gui/src/main/webapp/app/index.html b/web/gui/src/main/webapp/app/index.html
index da61ee1..c238d7f 100644
--- a/web/gui/src/main/webapp/app/index.html
+++ b/web/gui/src/main/webapp/app/index.html
@@ -40,6 +40,12 @@
 
     <script src="fw/mast/mast.js"></script>
 
+    <script src="fw/svg/svg.js"></script>
+    <script src="fw/svg/glyph.js"></script>
+    <script src="fw/svg/icon.js"></script>
+    <script src="fw/svg/map.js"></script>
+    <script src="fw/svg/zoom.js"></script>
+
     <!-- Framework and library stylesheets included here -->
     <!-- TODO: use a single catenated-minified file here -->
     <link rel="stylesheet" href="onos.css">
diff --git a/web/gui/src/main/webapp/app/onos.js b/web/gui/src/main/webapp/app/onos.js
index cad9cab..2941f17 100644
--- a/web/gui/src/main/webapp/app/onos.js
+++ b/web/gui/src/main/webapp/app/onos.js
@@ -23,43 +23,43 @@
 (function () {
     'use strict';
 
-    var coreDependencies = [
+    var moduleDependencies = [
+        // view modules...
+        // TODO: inject view dependencies server side
+        // {INJECTED-VIEW-MODULE-DEPENDENCIES}
+        // NOTE: 'ov' == 'Onos View'...
+        'ovSample',
+        'ovTopo',
+        // (end of view modules)
+
+        // core modules...
         'ngRoute',
         'onosUtil',
+        'onosSvg',
         'onosMast'
     ];
 
-    var viewDependencies = [
-        // TODO: inject view dependencies server side
-        // NOTE: 'ov' == 'Onos View'...
-        // {INJECTED-VIEW-MODULE-DEPENDENCIES}
-        'ovSample',
-        'ovTopo',
-        // NOTE: dummy element allows all previous entries to end with comma
-        '___dummy___'
-    ];
+    var $log;
 
-    var dependencies = coreDependencies.concat(viewDependencies);
-    dependencies.pop(); // remove dummy
-
-    angular.module('onosApp', dependencies)
+    angular.module('onosApp', moduleDependencies)
 
         .controller('OnosCtrl', [
             '$log', '$route', '$routeParams', '$location',
-            'KeyService', 'ThemeService',
+            'KeyService', 'ThemeService', 'GlyphService',
 
-        function (_$log_, $route, $routeParams, $location, ks, ts) {
-            var $log = _$log_,
-                self = this;
+        function (_$log_, $route, $routeParams, $location, ks, ts, gs) {
+            var self = this;
 
+            $log = _$log_;
             self.$route = $route;
             self.$routeParams = $routeParams;
             self.$location = $location;
             self.version = '1.1.0';
 
-            // initialize onos (main app) controller here...
+            // initialize services...
             ts.init();
             ks.installOn(d3.select('body'));
+            gs.init();
 
             $log.log('OnosCtrl has been created');
 
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.css b/web/gui/src/main/webapp/app/view/topo/topo.css
index 46740ee..84a4eff 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.css
+++ b/web/gui/src/main/webapp/app/view/topo/topo.css
@@ -27,3 +27,7 @@
     font-style: italic;
     color: seagreen;
 }
+
+#ov-topo svg {
+    background-color: #88f;
+}
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.html b/web/gui/src/main/webapp/app/view/topo/topo.html
index a1e0749..9fec03a 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.html
+++ b/web/gui/src/main/webapp/app/view/topo/topo.html
@@ -1,10 +1,4 @@
 <!-- Topology View partial HTML -->
 <div id="ov-topo">
-    <h2> Topology View </h2>
-
-    <p>
-        This is a place-holder for the topology viewer.
-    </p>
-
-    <div class="msg"> {{ctrl.message}} </div>
+    <svg viewBox="0 0 1000 1000"></svg>
 </div>
diff --git a/web/gui/src/main/webapp/app/view/topo/topo.js b/web/gui/src/main/webapp/app/view/topo/topo.js
index 833d0cd..adf7d2a 100644
--- a/web/gui/src/main/webapp/app/view/topo/topo.js
+++ b/web/gui/src/main/webapp/app/view/topo/topo.js
@@ -22,13 +22,65 @@
 
 (function () {
     'use strict';
-    angular.module('ovTopo', ['onosUtil'])
-        .controller('OvTopoCtrl', ['$log', function (_$log_) {
-            var self = this,
-                $log = _$log_;
+
+    var moduleDependencies = [
+        'onosUtil',
+        'onosSvg'
+    ];
+
+    // references to injected services etc.
+    var $log, ks, gs;
+
+    // DOM elements
+    var defs;
+
+    // Internal state
+    // ...
+
+    // Note: "exported" state should be properties on 'self' variable
+
+    var keyBindings = {
+        W: [logWarning, 'log a warning'],
+        E: [logError, 'log an error']
+    };
+
+    // -----------------
+    // these functions are necessarily temporary examples....
+    function logWarning() {
+        $log.warn('You have been warned!');
+    }
+    function logError() {
+        $log.error('You are erroneous!');
+    }
+    // -----------------
+
+    function setUpKeys() {
+        ks.keyBindings(keyBindings);
+    }
+
+    function setUpDefs() {
+        defs = d3.select('#ov-topo svg').append('defs');
+        gs.loadDefs(defs);
+    }
+
+
+    angular.module('ovTopo', moduleDependencies)
+
+        .controller('OvTopoCtrl', [
+            '$log', 'KeyService', 'GlyphService',
+
+        function (_$log_, _ks_, _gs_) {
+            var self = this;
+
+            $log = _$log_;
+            ks = _ks_;
+            gs = _gs_;
 
             self.message = 'Topo View Rocks!';
 
-         $log.log('OvTopoCtrl has been created');
+            setUpKeys();
+            setUpDefs();
+
+            $log.log('OvTopoCtrl has been created');
         }]);
 }());