Load SVG contained within a HTML page to an .aspx page - html

Question

I have a svg.html file where the svg content are defined within a element.
I've been combing the Internet for 3 days now, have not found a solution as to why the icons I use don't show up on the rendered .aspx web pages. svg.html looks like this:
<div class="svg-icons">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-icons">
<symbol id="icon-menu" viewBox="0 0 18 18">
<path d="##path value##"></path>
</symbol>
</svg>
</div>
I have tried the following:
using the <object></object> tags referring to svg.html.
<use> tags.
In web.config <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />
What am I doing wrong?
Please note that I cannot change the svg.html file, and this is an ASP.Net web forms project.

Answer 1

If you have complete markup inside html file containing SVG image, you can place a literal control & assign the HTML page contents from code behind by stripping unnecessary markups with regex:
ASPX
<asp:Literal ID="placeholder" runat="server" />
Code-behind
protected void Page_Load(object sender, EventArgs e)
{
string html;
using (StreamReader sr = File.OpenText(Server.MapPath("~/path_to_html_file.html"))
{
html = sr.ReadToEnd();
sr.Close();
}
Regex start = new Regex(#"[\s\S]*<body[^<]*>", RegexOptions.IgnoreCase);
html = start.Replace(html, "");
Regex end = new Regex(#"</body[\s\S]*", RegexOptions.IgnoreCase);
html = end.Replace(html, "");
placeholder.Text = html;
}
If you have raw SVG file and want to use it in literal tag element, you can simply use <iframe src="/path_to_SVG_file.svg" />/<embed src="/path_to_SVG_file.svg" /> inside user control, or a div assigned with InnerHtml attribute:
ASPX
<div id="placeholder" runat="server"></div>
Code-behind
placeholder.InnerHtml = File.ReadAllText(Server.MapPath("~/path_to_SVG_file.svg"));
References:
Include contents of an html page in an aspx page
Interactive Mapping Using SVG & ASP.NET