如何在 html 文档中显示 SVG 的代码？答案

【问题标题】：How can you display the code for an SVG within an html document?如何在 html 文档中显示 SVG 的代码？
【发布时间】：2017-01-25 07:16:33
【问题描述】：

我正在尝试分享 SVG 的实际代码，如何在没有 SVG 渲染的情况下将其显示在 div 中？

我尝试过使用<code> 和<pre><code>。我还尝试将代码分成不同的部分。问题可能是开头<?xml... 开始渲染过程。我根据我的评论替换了括号： 编辑：

<pre><code>

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="413.838px" height="413.838px" viewBox="0 0 413.838 413.838" style="enable-background:new 0 0 413.838 413.838;"
	 xml:space="preserve">
<g>	<g>
		<path d="M402.113,176.526c0,9.716,0.053,18.654-0.041,27.583c-0.027,2.563-0.18,5.203-0.811,7.679
			c-2.23,8.715-10.518,14.213-19.627,13.264c-9.119-0.953-16.053-8.41-16.27-17.944c-0.207-8.833-0.061-17.673-0.062-26.51
			c0-1.151,0-2.3,0-3.626c-3.992,0-7.598,0-11.344,0c-0.088,0.905-0.219,1.629-0.219,2.36c-0.006,9.375-0.148,18.754,0.047,28.128
			c0.48,23.186,25.744,36.92,45.619,24.895c0.701-0.422,1.436-0.775,2.262-1.221c0.441,8.836-6.305,16.812-15.025,17.896
			c-2.842,0.354-5.715,0.418-8.65,0.625c0,3.896,0,7.5,0,11.406c1.998,0,3.805,0.051,5.604-0.013
			c13.133-0.426,29.801-10.166,30.238-23.289l0.004-3.682c0-19.189,0-38.37,0-57.554
			C410.021,176.526,406.199,176.526,402.113,176.526z"/>
		<path d="M15.245,236.964c5.912,0.146,11.856,0.162,17.744-0.324c15.1-1.248,26.762-13.775,27.084-28.73
			c0.332-15.571-10.535-28.739-25.568-30.598c-12.756-1.58-32.602,5.255-34.373,22.403L0,261.235c3.831,0,7.666,0,11.733,0
			l-0.085-24.281 M31.316,225.153l-19.457,0.062l0.063-20.991c1.015-9.737,9.862-16.21,19.896-15.481
			c9.412,0.68,16.886,8.938,16.695,18.466C48.327,216.897,40.928,224.665,31.316,225.153z"/>
		<path d="M255.158,177.958c-6.596-1.211-13.506-0.665-20.277-0.923c-1.469-0.061-2.938-0.148-4.682-0.248
			c0-8.271,0-16.226,0-24.184c-3.879,0-7.758,0-11.645,0c0.021,18.212-0.08,36.416,0.105,54.628
			c0.188,17.819,15.146,31.101,32.869,29.472c14.816-1.365,26.09-13.132,27.006-28.22
			C279.436,193.962,269.623,180.62,255.158,177.958z M266.928,207.884c-0.867,10.025-8.191,17.146-17.84,17.322
			c-9.955,0.189-17.781-6.488-18.666-16.686l-0.016-19.419l21.459-0.015C261.113,190.183,267.689,199.043,266.928,207.884z"/>
		<path d="M176.499,177.065c-14.39,1.997-24.936,14.031-25.389,28.973c-0.428,14.162,9.801,27.393,23.742,29.656l35.917,0.104
			l0.01-30.871C209.791,186.702,194.585,174.56,176.499,177.065z M177.218,224.251c-9.655-1.271-15.623-10.557-14.298-20.474
			c1.197-8.946,9.442-15.838,18.554-15.522c9.826,0.356,17.493,7.729,17.771,17.348l0.033,18.669L177.218,224.251z"/>
		<path d="M311.469,177.065c-14.385,1.997-24.936,14.031-25.385,28.973c-0.438,14.162,9.801,27.393,23.744,29.656l35.918,0.104
			l0.006-30.871C344.766,186.702,329.555,174.56,311.469,177.065z M312.188,224.251c-9.65-1.271-15.617-10.557-14.295-20.474
			c1.195-8.946,9.443-15.838,18.561-15.522c9.818,0.356,17.484,7.729,17.771,17.348l0.035,18.669L312.188,224.251z"/>
		<path d="M146.359,232.435l-21.502-26.263l22.611-28.95l-15.052-0.003L118.38,195.6l-13.518-18.232l-14.313-0.022
			c1.113,1.614,1.754,2.57,2.427,3.505l18.348,25.427l-20.213,26.677c-0.724,0.967-1.366,2-2.378,3.483l15.278,0.028l13.954-19.67
			c1.058,1.183,1.87,2.017,2.586,2.916l12.747,16.688l16.264,0.015C148.221,234.735,147.299,233.579,146.359,232.435z"/>
		<path d="M68.204,176.821c3.726,0,7.24,0,11.055,0c0,19.748,0,39.493,0,59.528c-3.545,0-7.219,0-11.055,0
			C68.204,216.563,68.204,196.893,68.204,176.821z"/>
	</g>
</g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> <g> </g> </svg>

</code></pre>

【问题讨论】：

你能提供给我们HTML代码，或者至少是其中的一部分吗？
我用我正在使用的实际代码进行了更新，并包含了下面的 codepen。基本相同的问题 - 实际 <svg> 的代码内容不会发布到 stackoverflow。
基本上是<html><div><code> _display svg code here_ </code></div></html>

标签： html image svg

【解决方案1】：

如果您检索 SVG 文件的源并使用此字符串设置元素的 innerHTML，您将看到该图像。相反，如果您将相同的文本字符串设置为 HTML 元素的 textContent，则所有括号等都会为您转义。

function byId(id){return document.getElementById(id);}

function ajaxGet(url, onLoad, onError)
{
	var ajax = new XMLHttpRequest();
	ajax.onreadystatechange = function(){if (this.readyState==4 && this.status==200) onLoad(this);}
	ajax.onerror = function() {error.log("ajax request failed to: "+url);onError(this);}
	ajax.open("GET", url, true);
	ajax.send();
}

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
  var imgSrc = 'https://upload.wikimedia.org/wikipedia/commons/5/54/Dangclass1_3.svg';
  byId('mImg').src = imgSrc;	
  ajaxGet(imgSrc, onLoaded);
	
	function onLoaded(ajax)
	{
		byId('ajaxTgt').textContent = ajax.response;
	}
}

#ajaxTgt
{
    white-space: pre-line;
}

<img id='mImg'/>
<pre id='ajaxTgt'></pre>

【讨论】：

【解决方案2】：

$.get(document.getElementById("code").src, function(data){
    console.log(data.documentElement.innerHTML);
});

img {
    width: 40%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="code" src="https://upload.wikimedia.org/wikipedia/commons/8/88/Inkscape_vectorisation_test.svg"/>

这是我能得到的最接近的，通过使用 jQuery 到 .get() 页面源。灵感来自this answer。

【讨论】：

【解决方案3】：

我使用的最好的方法是将〈 替换为左括号，将〉 替换为右括号。由于多种原因，这显然不是理想的。 codepen.

【讨论】：