Question

我正在开发一个ASP.NET MVC 4应用程序，我想在我的剃刀视图中显示一个SVG图像我尝试了一切，但它没有用，我可以很容易地显示＆＃34; .png＆＃34;或任何其他格式，但它不能与＆＃34; .SVG＆＃34;延期。在Razor中显示SVG图像的正确方法是什么？

Answer 1

我知道两个不错的选择。

在所有现代浏览器中，您都可以显示带有标准<IMG>标签的SVG文件，就像png文件一样。如果您想将SVG视为图像，则可以采用这种方法。唯一的实际区别是，由于SVG图像是可伸缩的，因此您通常将需要指定图像的大小。另外，如果SVG图像没有嵌入的颜色，则有时必须指定要使用的颜色。大多数情况下，SVG图标或较小的平面图像会省略颜色，因此您可以使用CSS进行指定。

它应该看起来像这样：

<style>
    #myImg { 
        height:100px; 
        width:100px; 
        color:black;
        background-color:white;
    } 
</style>

<img id="myImg" src="Areas_icon.svg" />

您还可以使用<SVG>标签将SVG文件直接嵌入HTML输出中。在这种情况下，您将需要使用文件流（或类似文件流）在服务器上打开SVG文件，然后将文件的文本内容写入Razor视图的响应中。如果您的SVG是交互式应用程序元素，那么您需要采取此路线。这是HTML Helper的不错的选择。

您可以看到Mozilla Docs on Inline SVG作为示例

Answer 2

在css文件背景中设置 background：url（data：image / svg + xml; base64，“svg to base64 conversion code”

在剃刀视图ASP.NET MVC4中显示SVG图像

2 个答案: