diff --git a/OpenOversight/app/main/views.py b/OpenOversight/app/main/views.py
index e79200847..71a0fbe76 100644
--- a/OpenOversight/app/main/views.py
+++ b/OpenOversight/app/main/views.py
@@ -160,7 +160,6 @@ def index():
         state_count=state_count,
         department_count=department_count,
         departments_by_state=departments_by_state,
-        map_paths=current_app.config["MAP_DATA"],
     )
 
 
@@ -179,10 +178,19 @@ def set_session_timezone():
 @main.route("/browse", methods=[HTTPMethod.GET])
 def browse():
     departments_by_state = Department.by_state()
-    return render_template(
-        "browse.html",
-        departments_by_state=departments_by_state,
-        map_paths=current_app.config["MAP_DATA"],
+    return render_template("browse.html", departments_by_state=departments_by_state)
+
+
+@main.route("/map.svg", methods=[HTTPMethod.GET])
+def render_map():
+    departments_by_state = Department.by_state()
+    return Response(
+        render_template(
+            "map.svg",
+            departments_by_state=departments_by_state,
+            map_paths=current_app.config["MAP_DATA"],
+        ),
+        mimetype="image/svg+xml",
     )
 
 
diff --git a/OpenOversight/app/templates/browse.html b/OpenOversight/app/templates/browse.html
index 5266e545f..c6bb64b03 100644
--- a/OpenOversight/app/templates/browse.html
+++ b/OpenOversight/app/templates/browse.html
@@ -13,36 +13,7 @@ <h1 class="hero">Browse Officers by Department</h1>
     <div class="text-center">
       <div class="col-lg-6 text-start mx-auto py-5">
         <p class="mb-5 vertical-padding">Use the map or list below to browse officers by department.</p>
-        <svg xmlns="http://www.w3.org/2000/svg"
-             version="1.1"
-             viewBox="0 0 1000 618">
-          <defs>
-          <style>
-              .cls-1 {
-                  fill: #0099c9;
-              }
-
-              .cls-1,
-              .cls-2 {
-                  stroke: #fff;
-                  stroke-width: .8px;
-              }
-
-              .cls-2 {
-                  fill: #d3d3d3;
-              }
-          </style>
-          </defs>
-          {% for state, path in map_paths.items() %}
-            {% if state in departments_by_state.keys() %}
-              <a href="#state-{{ state }}">
-                <path class="cls-1" d="{{ path }}" />
-              </a>
-            {% else %}
-              <path class="cls-2" d="{{ path }}" />
-            {% endif %}
-          {% endfor %}
-        </svg>
+        <object type="image/svg+xml" data="{{ url_for('main.render_map') }}"></object>
         {% for state, departments in departments_by_state.items() %}
           <div id="state-{{ state }}" class="state-row mt-5">
             <h3>{{ state | get_state_full_name }}</h3>
diff --git a/OpenOversight/app/templates/index.html b/OpenOversight/app/templates/index.html
index c3a17d218..e1899dd16 100644
--- a/OpenOversight/app/templates/index.html
+++ b/OpenOversight/app/templates/index.html
@@ -23,34 +23,8 @@ <h1>OpenOversight</h1>
         </div>
         <div class="row display-flex horizontal-padding text-start">
           <div class="col-lg-6">
-            <svg xmlns="http://www.w3.org/2000/svg"
-                 version="1.1"
-                 viewBox="0 0 1000 618">
-              <defs>
-              <style>
-                  .cls-1 {
-                      fill: #0099c9;
-                  }
-
-                  .cls-1,
-                  .cls-2 {
-                      stroke: #fff;
-                      stroke-width: .8px;
-                  }
-
-                  .cls-2 {
-                      fill: #d3d3d3;
-                  }
-              </style>
-              </defs>
-              {% for state, path in map_paths.items() %}
-                {% if state in departments_by_state.keys() %}
-                  <path class="cls-1" d="{{ path }}" />
-                {% else %}
-                  <path class="cls-2" d="{{ path }}" />
-                {% endif %}
-              {% endfor %}
-            </svg>
+            <img alt="Map of states with departments in OpenOversight"
+                 src="{{ url_for('main.render_map') }}" />
           </div>
           <div class="col-lg-6">
             <a href="{{ url_for('main.get_officer') }}"
diff --git a/OpenOversight/app/templates/map.svg b/OpenOversight/app/templates/map.svg
new file mode 100644
index 000000000..69381f750
--- /dev/null
+++ b/OpenOversight/app/templates/map.svg
@@ -0,0 +1,28 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1000 618">
+  <defs>
+    <style>
+      .cls-1 {
+          fill: #0099c9;
+      }
+
+      .cls-1,
+      .cls-2 {
+          stroke: #fff;
+          stroke-width: .8px;
+      }
+
+      .cls-2 {
+          fill: #d3d3d3;
+      }
+    </style>
+  </defs>
+  {% for state, path in map_paths.items() %}
+    {% if state in departments_by_state.keys() %}
+      <a href="{{ url_for('main.browse') }}#state-{{ state }}" target="_top">
+        <path class="cls-1" d="{{ path }}" />
+      </a>
+    {% else %}
+      <path class="cls-2" d="{{ path }}" />
+    {% endif %}
+  {% endfor %}
+</svg>
diff --git a/OpenOversight/tests/routes/test_other.py b/OpenOversight/tests/routes/test_other.py
index 9e19ead5c..ab6026790 100644
--- a/OpenOversight/tests/routes/test_other.py
+++ b/OpenOversight/tests/routes/test_other.py
@@ -4,6 +4,7 @@
 import pytest
 from flask import current_app, url_for
 
+from OpenOversight.app.models.database import Department
 from OpenOversight.app.utils.constants import ENCODING_UTF_8, KEY_TIMEZONE
 from OpenOversight.tests.constants import GENERAL_USER_USERNAME
 from OpenOversight.tests.routes.route_helpers import login_user
@@ -83,3 +84,14 @@ def test_timezone_setting_empty_string(client):
         assert rv.status_code == HTTPStatus.OK
         with client.session_transaction() as session:
             assert session[KEY_TIMEZONE] == current_app.config.get(KEY_TIMEZONE)
+
+
+def test_map_rendering(client, mockdata):
+    with current_app.test_request_context():
+        departments_by_state = Department.by_state()
+        rv = client.get(url_for("main.render_map"))
+        assert rv.status_code == HTTPStatus.OK
+        assert rv.mimetype == "image/svg+xml"
+
+        for state in departments_by_state.keys():
+            assert f"#state-{state}" in rv.data.decode(ENCODING_UTF_8)