SVG images are not display asp.net mvc 4

Question

I have images in a svg format. When i used it on a simple html it display, but when i try to use it in a real project (asp.net mvc 4, visual studio 2010) it doesn't display.

    @model KZStream.Web.Site.Models.IamSelling.IamSellingModel
@using KZStream.Web.Site.Resources.Views.Products
@{
    Layout = "~/Views/Shared/_Mobile.cshtml";
}
<div id="wrapper">
    <div class="top-pannel">
        <div class="tp-languge">
            <a href="">Русский</a>
        </div>
        <div class="tp-basket">
        </div>
        <div class="tp-sign-in">
            <a href="">Войти</a>
        </div>
    </div>
    <header>
        <div class="main-page-header clearfix">
            <div class="mp-logo">
                <img src="/Content/images/mobile/MS_Logo.svg" alt="">
            </div>
            <div class="mp-join-us">
                <button class="kzstreambutton button-orange">
                    <span>Присоединиться</span>
                </button>
            </div>
        </div>
        <nav>
            <div class="main-page-menu">
            </div>
        </nav>
    </header>
    <div class="main-page-cont">
    </div>
    <footer>
    </footer>
</div>

depending on you folder structure, try: src="../Content/images/mobile/MS_Logo.svg" — DmitryK, Mar 05 '14 at 11:58
oh then, here is the solution: http://stackoverflow.com/questions/4476526/do-i-use-img-object-or-embed-for-svg-files — DmitryK, Mar 05 '14 at 12:01
Checkout the MIME type support configured for SVG if you use IIS. — Murali Murugesan, Mar 05 '14 at 12:42

score 14 · Answer 1 · answered Mar 05 '14 at 12:45

Try accessing the .svg file directly like localhost:port/content/images/mobile/MS_Logo.svg.

If you are getting filetype not supported message, You can add it below in Web.config to make sure your server is capable of serving the .svg format

<system.webServer>
  <staticContent>
    <remove fileExtension=".svg" />
    <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
  </staticContent>
</system.webServer>

score 4 · Answer 2 · answered Mar 17 '17 at 13:04

4

ok guys i found something related to this question that worked for me. i found that the solution for big svg file is:

@Html.Raw(File.ReadAllText(Server.MapPath("~/image.svg")))

in razor file there is another approach with html partial but unfortunately this trick is not working with big svg file.

hope this help..

answered Mar 17 '17 at 13:04

Setmax

946
6
10

you, my friend, are a hero. saved my butt! – EJay Aug 03 '21 at 18:37

score 2 · Answer 3 · answered May 31 '16 at 20:23

2

the best way to call svg files is this:

<object data='svg-test.svg' type='image/svg+xml' width='500' height='500' />

answered May 31 '16 at 20:23

Igor Monteiro

933
1
11
29

score 1 · Answer 4 · answered Jun 22 '20 at 13:04

1

Do not forget width=" " height=" " parameters. I fixed my problem with this issue

answered Jun 22 '20 at 13:04

Semih Can Bilgen

318
2
7

score 0 · Answer 5 · edited May 23 '17 at 12:34

0

Beside the web.config change. if you are using ASP.net also make sure you run your VS solution in IIS , but not VS development server. for more information. please refer to this question. Setting MIME types using the ASP.NET Development Server

edited May 23 '17 at 12:34

Community

1
1

answered Jun 28 '14 at 13:08

anIBMer

1,159
2
12
20

score 0 · Answer 6 · answered Nov 18 '16 at 21:57

0

The best way to render the SVG images on Razor Markup is use IIS Server: Click on Project > Use IIS Express(Or your installed version that commonly is IIS7). Be sure if you have added the Myme Type added if this not working.

answered Nov 18 '16 at 21:57

Walter Espino

11

SVG images are not display asp.net mvc 4

6 Answers6