diff --git a/media/css/seahub.css b/media/css/seahub.css
index 60f0e81a2b..1d77e488ed 100644
--- a/media/css/seahub.css
+++ b/media/css/seahub.css
@@ -2783,8 +2783,11 @@ button.sf-dropdown-toggle:focus {
     font-size:0;
     line-height:0;
 }
+#svg-view {
+    max-width:calc(100% - 4px);
+    max-height:calc(100% - 4px);
+}
 #docu-view,
-#svg-view,
 #md-view,
 #md-edit {
     background:#fff;
@@ -2825,10 +2828,6 @@ button.sf-dropdown-toggle:focus {
 .anchor:hover {
    text-decoration:none;
 }
-#svg-view {
-    min-height:500px;/*for ff*/
-}
-#svg-view,
 #pdf {
     width:950px;
     margin:0 auto;
@@ -2856,7 +2855,6 @@ button.sf-dropdown-toggle:focus {
 #md-view {
     padding:40px 96px;
 }
-/* for repo, file_view page. */
 #side-toolbar {
     position:fixed;
     right:0;
diff --git a/seahub/templates/snippets/file_content_html.html b/seahub/templates/snippets/file_content_html.html
index 1ce16e5b1d..edfec3c00b 100644
--- a/seahub/templates/snippets/file_content_html.html
+++ b/seahub/templates/snippets/file_content_html.html
@@ -4,7 +4,7 @@
 content of files that can be viewed online shows here.
 For details please refer to 'snippets/file_content_js.html'.
 {% endcomment %}
-<div id="file-view" {% if filetype == 'Image' and not err %}class="image-file-view"{% endif %}>
+<div id="file-view" {% if filetype == 'Image' or filetype == 'SVG' and not err %}class="image-file-view"{% endif %}>
     {% include 'snippets/file_encoding.html' %}
     {% if not err %}
         {% if filetype == 'Text' or filetype == 'Markdown' %}
@@ -31,6 +31,11 @@ For details please refer to 'snippets/file_content_js.html'.
             <span class="loading-icon"></span>
             <img src="" alt="{{ file_name }}" id="image-view" class="hide" />
         {% endif %}
+
+        {% if filetype == 'SVG' %}
+            <span class="loading-icon"></span>
+            <img src="{{raw_path}}" alt="{{ file_name }}" id="svg-view" class="hide" />
+        {% endif %}
         
         {% if filetype == 'Document' or filetype == 'PDF' and not use_pdfjs %} 
             {% include 'snippets/office_convert_html.html' %}
diff --git a/seahub/templates/snippets/file_content_js.html b/seahub/templates/snippets/file_content_js.html
index 76b70c4ae0..70a144e338 100644
--- a/seahub/templates/snippets/file_content_js.html
+++ b/seahub/templates/snippets/file_content_js.html
@@ -21,11 +21,14 @@
 {% endif %}
 
 {% if filetype == 'SVG' %}
-    if (!$.browser.mozilla && !$.browser.safari && !($.browser.msie && parseInt($.browser.version) > 8)) {
-        $('#file-view').html('<div id="file-view-tip"><p>' + "{% trans "To view it online, you can use firefox, chrome or IE 9." %}" + '</p></div>');
-    } else {
-        $('#file-view').html('<iframe src="{{ raw_path }}" frameborder="0" id="svg-view"></iframe>');
-    }
+function setFileViewAreaHeight() {
+    var $fileView = $('#file-view');
+    $fileView.outerHeight($(window).height() - $fileView.offset().top);
+}
+setFileViewAreaHeight();
+$(window).resize(setFileViewAreaHeight);
+$('#svg-view').prev('.loading-icon').hide();
+$('#svg-view').show();
 {% endif %}
 
 {% if filetype == 'Markdown' %}
diff --git a/seahub/templates/snippets/file_view_style.html b/seahub/templates/snippets/file_view_style.html
index 2b02b10b77..851e5722ca 100644
--- a/seahub/templates/snippets/file_view_style.html
+++ b/seahub/templates/snippets/file_view_style.html
@@ -15,6 +15,12 @@ body { overflow:hidden; }
 </style>
 {% endif %}
 
+{% if filetype == 'SVG' %}
+<style type="text/css">
+#file-view { text-align:center; }
+</style>
+{% endif %}
+
 {% if filetype == 'Audio' %}
 <link rel="stylesheet" href="{{MEDIA_URL}}css/mediaelementplayer.css" />
 {% endif %}
diff --git a/seahub/templates/view_file_base.html b/seahub/templates/view_file_base.html
index 10c1125669..2ea8087767 100644
--- a/seahub/templates/view_file_base.html
+++ b/seahub/templates/view_file_base.html
@@ -92,7 +92,7 @@
         <div id="file-discussions" class="right-side-panel"></div>
     </div>
 
-    <div id="file-view" {% if filetype == 'Image' and not err %}class="image-file-view"{% endif %}>
+    <div id="file-view" class="{% block file_view_extra_class %}{% endblock %}">
       {% if err %}
         <div id="file-view-tip">
         {% if err != 'invalid extension' %}
diff --git a/seahub/templates/view_file_image.html b/seahub/templates/view_file_image.html
index 4381f07122..e2ec189c8f 100644
--- a/seahub/templates/view_file_image.html
+++ b/seahub/templates/view_file_image.html
@@ -9,6 +9,8 @@ body { overflow:hidden; }
 </style>
 {% endblock %}
 
+{% block file_view_extra_class %}image-file-view{% endblock %}
+
 {% block file_view %}
     {% if img_prev %}
     <a href="{% url 'view_lib_file' repo.id img_prev %}" id="img-prev" title="{% trans 'you can also press ← ' %}"><span class="icon-chevron-left"></span></a>
diff --git a/seahub/templates/view_file_svg.html b/seahub/templates/view_file_svg.html
index aaa800f733..1e6532d836 100644
--- a/seahub/templates/view_file_svg.html
+++ b/seahub/templates/view_file_svg.html
@@ -1,12 +1,30 @@
 {% extends 'view_file_base.html' %}
 {% load i18n %}
 
+{% block extra_style %}{{ block.super }}
+<style type="text/css">
+#file-view {
+    text-align:center;
+}
+</style>
+{% endblock %}
+
+{% block file_view_extra_class %}image-file-view{% endblock %}
+
+{% block file_view %}
+<span class="loading-icon"></span>
+<img src="{{ raw_path }}" alt="{{ filename }}" id="svg-view" class="hide" />
+{% endblock %}
+
 {% block extra_script %}{{ block.super }}
 <script type="text/javascript">
-    if (!$.browser.mozilla && !$.browser.safari && !($.browser.msie && parseInt($.browser.version) > 8)) {
-        $('#file-view').html('<div id="file-view-tip"><p>{% trans "To view it online, you can use firefox, chrome or IE 9." %}</p></div>');
-    } else {
-        $('#file-view').html('<iframe src="{{ raw_path }}" frameborder="0" id="svg-view"></iframe>');
-    }
+function setFileViewAreaHeight() {
+    var $fileView = $('#file-view');
+    $fileView.outerHeight($(window).height() - $fileView.offset().top);
+}
+setFileViewAreaHeight();
+$(window).resize(setFileViewAreaHeight);
+$('#svg-view').prev('.loading-icon').hide();
+$('#svg-view').show();
 </script>
 {% endblock %}
diff --git a/seahub/utils/__init__.py b/seahub/utils/__init__.py
index 28a6dfefa5..730f2d4d18 100644
--- a/seahub/utils/__init__.py
+++ b/seahub/utils/__init__.py
@@ -98,7 +98,7 @@ PREVIEW_FILEEXT = {
     IMAGE: ('gif', 'jpeg', 'jpg', 'png', 'ico', 'bmp'),
     DOCUMENT: ('doc', 'docx', 'ppt', 'pptx', 'odt', 'fodt', 'odp', 'fodp'),
     SPREADSHEET: ('xls', 'xlsx', 'ods', 'fods'),
-    # SVG: ('svg',),
+    SVG: ('svg',),
     PDF: ('pdf',),
     MARKDOWN: ('markdown', 'md'),
     VIDEO: ('mp4', 'ogv', 'webm', 'mov'),