How can you display the code for an SVG within an html document?

Question

I'm trying to share the actual code for an SVG, how can I display this inside of a div without the SVG rendering?

I've tried using <code> and <pre><code>. I've also tried separating the code into different sections. The problem is likely the beginning <?xml... starts the rendering process. I subbed out the brackets as per my comment: EDIT:

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

Answer 1

If you retrieve the source of an SVG file and the use this string to set the innerHTML of an element, you'll see the image. If instead, you set the same string of text to the textContent of an HTML element, all of the brackets etc are escaped for you.

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>

Answer 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"/>

This is the closest I have been able to get, by using jQuery to .get() the page source. Inspired by this answer.

Answer 3

The best hack I went with was to sub 〈 for left bracket and 〉 for right bracket. This is obviously not ideal for a number of reasons. codepen.