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>

Could you provide us the HTML code, or at least a part of it? — lucasnadalutti, Sep 17 '16 at 01:24
i updated with actual code I'm using and included the codepen below. Essentially same issue - The code content of actual ` — systemaddict, Sep 17 '16 at 01:38

score 3 · Answer 1 · answered Sep 17 '16 at 02:47

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>

score 1 · Answer 2 · answered Sep 17 '16 at 01:46

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

score 0 · Answer 3 · answered Sep 17 '16 at 01:35

0

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.

answered Sep 17 '16 at 01:35

systemaddict

363
2
13

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

3 Answers3