CODEWITHSUNDEEP
asp.net-mvcimagesvgxhtml
Andrew
Andrew

Reputation: 31

SVG images are not display asp.net mvc 4

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>

Upvotes: 3

Views: 16576

Answers (6)

Semih Can Bilgen
Semih Can Bilgen

Reputation: 414

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

Upvotes: 1

Setmax
Setmax

Reputation: 1034

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..

Upvotes: 4

Walter Espino
Walter Espino

Reputation: 11

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.

Upvotes: 0

Igor Monteiro
Igor Monteiro

Reputation: 953

the best way to call svg files is this:

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

Upvotes: 2

anIBMer
anIBMer

Reputation: 1209

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

Upvotes: 0

Murali Murugesan
Murali Murugesan

Reputation: 22619

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>

Upvotes: 14

Related Questions