I am using Angular 5.2.0 and Inkscape. I am just trying to get an inline SVG in my template so I can put some transitions on it. When I am not within angular this SVG renders fine, however, I have been unsuccessful getting the SVG to render in Angular.
So far I have tried minimizing the number of svg specific tags so I can avoid this problem, however, it seems the ones I have are all required to properly render the image (left the version below uncut).
I have also tried putting the svg: prefix in front of every tag within the SVG in hopes Angular will recognize it. I suspect this would work if it had not been for the other prefixes already on the tags.
SNIPPET:
https://stackblitz.com/edit/angular-wmhj27?file=app%2Fapp.component.html
Any tips/suggestions welcome.
I have gotten rid of all other possible error factors so I just have my svg within the component template:
<svg width="297mm"
height="91mm"
version="1.1"
viewBox="0 0 297 91"
xmlns="http://www.w3.org/2000/svg"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:xlink="http://www.w3.org/1999/xlink">
<svg:defs>
<svg:linearGradient id="linearGradient3880"
x1="65.8"
x2="276"
y1="188"
y2="173"
gradientUnits="userSpaceOnUse">
<svg:stop offset="0" />
<svg:stop stop-opacity="0"
offset="1" />
</svg:linearGradient>
</svg:defs>
<svg:metadata>
<svg:rdf:RDF>
<svg:cc:Work rdf:about="">
<svg:dc:format>image/svg+xml</dc:format>
<svg:dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<svg:dc:title/>
</svg:cc:Work>
</svg:rdf:RDF>
</svg:metadata>
<svg:g transform="translate(18.1 -119)">
<svg:path d="m269 162c9e-3 -0.707 0.183-1.5 0.624-2.28 0.632-1.09 1.78-2.08 3.39-2.41v-1e-5c1.36-0.26 2.92-4e-3 4.26 1.01 1.17 0.904 2.03 2.31 2.16 4.03 0.0612 0.955-0.0915 1.91-0.462 2.79-0.349 0.833-0.841 1.59-1.45 2.23-1.15 1.19-2.51 2.03-3.9 2.58-2.61 1.09-5.39 1.62-7.82 2.37-2.04 0.736-4.16 1.6-4.96 2.98-0.694 0.861-1.01 2.21-1.23 3.81-0.181 1.56-0.0605 3.26-0.039 5.43 0.0601 2-0.0229 4.36-0.688 6.93-0.62 2.52-2.14 5.1-4.77 7.07-1.61 1.11-3.46 1.78-5.4 1.95h-2e-5c-1.88 0.162-3.76-0.105-5.51-0.787-3.36-1.37-6.02-3.91-7.52-7.1-1.42-3.01-1.96-6.26-1.72-9.38 0.215-3 0.927-5.81 1.89-8.39 1.78-4.93 4.19-9.08 5-13 0.388-1.84 0.576-3.62 0.26-5.1-0.312-1.4-0.874-2.73-1.7-3.39-0.868-0.935-2.67-1.39-4.27-1.27-1.64 0.102-3.44 1.08-4.95 2.43-1.5 1.35-2.66 3.35-3.56 5.59-0.881 2.23-1.36 4.81-1.7 7.61-0.624 5.48-0.434 11.9-1.95 19.1-0.75 3.52-2.09 7.15-4.26 10.6-2.16 3.42-5.32 6.42-9.36 8.39-5.97 2.68-12.6 2.58-18.3 0.0831-5.53-2.44-9.93-6.53-12.9-11.4l-2e-5 -2e-5c-5.61-9.56-6.66-20-6.78-29.3-0.478-9.14-0.402-17.7-3.71-24.1-1.27-2.56-2.89-4.89-4.84-6.54-0.477-0.404-0.972-0.768-1.49-1.08-2.56-1.58-5.7-2.42-8.16-1.78-2.58 0.379-5.18 2.55-7.3 5.13-2.16 2.71-3.61 6.4-5.02 10.4l-1e-5 1e-5c-1.39 4.13-2.57 8.54-4.46 13.2-1.86 4.79-4.69 9.55-8.9 13.5-6.75 5.89-15.3 8.17-23.1 7.82-8.07-0.327-15.4-2.7-21.8-5.45-6.79-2.87-12.8-6.02-18.6-8.25-6.34-2.38-12.3-3.88-17.9-3.46-5.84 0.301-11.5 2.64-16.3 5.51-5.47 3.28-10.3 7.75-14.4 11.8-13.5 13.6-23.7 23.5-29.3 26.4-2.56 1.29-3.87 1.51-3.88 1.08-0.01-0.408 0.917-1.3 2.63-2.89 4.44-4.11 12.3-14.2 25.4-29.4 3.89-4.55 8.85-9.71 15-14 5.42-3.76 12.2-6.93 20.1-7.83 7.51-0.739 15 0.636 22.2 3.19 6.61 2.29 12.9 5.3 19.2 7.73 5.91 2.22 12 4.13 17.9 4.08 5.52-0.0871 11.3-1.57 14.8-5.11 2.41-2.16 4.13-5.48 5.67-9.22 1.46-3.71 2.52-8 4.01-12.6l1e-5 -2e-5c1.41-4.56 3.43-9.45 6.74-14 3.29-4.62 8.32-8.42 14.6-9.98 6.34-1.29 12.7 0.0889 17.8 3.43 3.63 2.39 6.58 5.47 8.81 8.9 0.828 1.27 1.56 2.6 2.19 3.95 4.48 9.95 4.82 20.2 4.96 29.1 0.503 8.94 0.853 17.3 4.75 23.1l1e-5 1e-5c1.86 2.91 4.3 5.37 7.05 6.49 2.68 1.1 5.89 1.33 8.07 0.212 1.6-0.653 3.1-2.13 4.32-3.86 1.24-1.79 2.08-4.08 2.71-6.57 1.31-5.09 1.18-11.2 2.09-17.9 0.445-3.41 1.24-6.94 2.64-10.4 1.42-3.57 3.66-6.95 6.71-9.72 3.15-2.87 7.24-4.7 11.7-5.07 4.67-0.367 9.29 1.29 12.8 4.67 2.64 2.78 4.11 6.13 4.53 9.44 0.432 3.35 0.0796 6.5-0.713 9.28-1.65 5.76-4.31 10.1-5.9 13.9-0.807 2.02-1.42 3.89-1.59 5.64-0.159 1.79-0.0423 3.48 0.551 4.78 0.595 1.3 1.54 2.46 2.56 2.87 0.524 0.24 1.09 0.38 1.59 0.366h1e-5c0.504-0.0109 1.02-0.134 1.39-0.357 0.7-0.269 1.3-1.32 1.79-2.47 0.492-1.26 0.609-2.95 0.733-4.75 0.0907-1.97 0.136-4.05 0.533-6.36 0.383-2.46 1.4-4.92 3.14-7.01 2.68-2.85 5.94-4.06 8.63-4.55 3.03-0.655 5.52-0.817 7.5-1.44 1.02-0.342 1.83-0.642 2.36-1.11 0.284-0.235 0.519-0.478 0.668-0.726 0.155-0.257 0.265-0.522 0.29-0.753 0.071-0.384-0.0964-0.893-0.355-1.2-0.289-0.366-0.841-0.604-1.3-0.619-0.561-0.0333-1.17 0.257-1.54 0.631-0.503 0.492-0.71 1.25-0.696 1.83"
fill="url(#linearGradient3880)"
stroke="#000"
stroke-width=".265px" />
</svg:g>
</svg>
My resources:
https://500tech.com/blog/all/svg-in-angular-2/
https://teropa.info/blog/2016/12/12/graphics-in-angular-2.html#avoiding-element-selectors-for-components
https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course
Seems the main problem here is that angular can't recognize tags inside svg metadata tag such as rdf:RDF, cc:Work etc.
So if you remove them all should work as expected.
<metadata>
</metadata>
Stackblitz Example
Related
On youtube I learned how to place my SVG code inside a elements at the bottom of my index.html and whenever I want to use the SVG then I would use the tags. Doing this makes sure that my code remains clean and it worked.
Now I am finished with my project but under my footer, there is this big white space. When using chrome inspect, I can see that the white space is used for the bottom SVG's. Even when styling the SVG to visibility: hidden; , it is still showing the white space.
How should I approach this problem so that the bottom SVG's are in my index.html but not on my live server page?
In the image: the brown part is my footer and the white space underneath is what I am talking about.
enter image description here
In the first part you can see how I use the elements
<article class="service-blocks service-block1">
<div class="square">
<svg class="cog-icon" width="80"><use href="#cog-icon"></use></svg>
</div>
<div class="triangle"></div>
<div class="service-text">
<h3><strong>Mobile first</strong></h3>
<p>Start with mobile and work your way up with media queries.</p>
</div>
</article>
Here you see the SVG saved at the bottom
<!-- SVG 3 column top ---------------------------------------------->
<div class="svgs">
<svg style="visibility: hidden;">
<symbol id="cog-icon"
class="icons"
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="cog"
role="img"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg">
<path fill="white"
d="M487.4 315.7l-42.6-24.6c4.3-23.2
4.3-47 0-70.2l42.6-24.6c4.9-2.8
7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8
110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4
6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7
85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7
94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47
0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6
30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9
15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7
8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9
42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7
43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1
0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z">
</path>
</symbol>
</svg>
</body>
</html>
I tried removing the bottom SVG's and the white space disappeared. But then I lost the purpose of this technique to not clutter my code with SVG-code.
I tried using an direct style on the SVG --> visiblility: hidden; but the space was still showing
I put the SVG's in a div and give the div a visibility: hidden; style but I had the same issue as above.
To make the bottom SVG invisible you can set the height and width to 0. The CSS property visibility will hide content, but it will still take up the space on the page.
Also, to remove the white space around the icon in the top set both width and height.
<article class="service-blocks service-block1">
<div class="square">
<svg xmlns="http://www.w3.org/2000/svg" class="cog-icon" width="80" height="80">
<use href="#cog-icon" />
</svg>
</div>
<div class="triangle"></div>
<div class="service-text">
<h3><strong>Mobile first</strong></h3>
<p>Start with mobile and work your way up with media queries.</p>
</div>
</article>
<!-- SVG 3 column top ---------------------------------------------->
<svg width="0" height="0" style="display:none" xmlns="http://www.w3.org/2000/svg">
<symbol id="cog-icon"
class="icons"
aria-hidden="true"
focusable="false"
data-prefix="fas"
data-icon="cog"
role="img"
viewBox="0 0 512 512" >
<path fill="orange" d="M 487.4 315.7 l -42.6 -24.6 c 4.3 -23.2 4.3 -47 0 -70.2 l 42.6 -24.6 c 4.9 -2.8 7.1 -8.6 5.5 -14 c -11.1 -35.6 -30 -67.8 -54.7 -94.6 c -3.8 -4.1 -10 -5.1 -14.8 -2.3 L 380.8 110 c -17.9 -15.4 -38.5 -27.3 -60.8 -35.1 V 25.8 c 0 -5.6 -3.9 -10.5 -9.4 -11.7 c -36.7 -8.2 -74.3 -7.8 -109.2 0 c -5.5 1.2 -9.4 6.1 -9.4 11.7 V 75 c -22.2 7.9 -42.8 19.8 -60.8 35.1 L 88.7 85.5 c -4.9 -2.8 -11 -1.9 -14.8 2.3 c -24.7 26.7 -43.6 58.9 -54.7 94.6 c -1.7 5.4 0.6 11.2 5.5 14 L 67.3 221 c -4.3 23.2 -4.3 47 0 70.2 l -42.6 24.6 c -4.9 2.8 -7.1 8.6 -5.5 14 c 11.1 35.6 30 67.8 54.7 94.6 c 3.8 4.1 10 5.1 14.8 2.3 l 42.6 -24.6 c 17.9 15.4 38.5 27.3 60.8 35.1 v 49.2 c 0 5.6 3.9 10.5 9.4 11.7 c 36.7 8.2 74.3 7.8 109.2 0 c 5.5 -1.2 9.4 -6.1 9.4 -11.7 v -49.2 c 22.2 -7.9 42.8 -19.8 60.8 -35.1 l 42.6 24.6 c 4.9 2.8 11 1.9 14.8 -2.3 c 24.7 -26.7 43.6 -58.9 54.7 -94.6 c 1.5 -5.5 -0.7 -11.3 -5.6 -14.1 z M 256 336 c -44.1 0 -80 -35.9 -80 -80 s 35.9 -80 80 -80 s 80 35.9 80 80 s -35.9 80 -80 80 z" />
</symbol>
</svg>
I am using svg icons for my webpage and when i put them inside a hyperlink tag "" a hyphen appears on the right side of the icon.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<div style="text-align:center;">
<div class="row border-top py-4 text-center">
<div class="col mb-4">
<a class="link-dark ms-3 me-3" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="40" fill="#212529" viewBox="0 0 448 512">
<path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z" />
</svg>
</a>
<a class="link-dark ms-3 me-3" href="https://github.com/">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="#212529" viewBox="0 0 496 512">
<path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
</svg>
</a>
<a class="link-dark ms-3 me-3" href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="#212529" viewBox="0 0 512 512">
<path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z" />
</svg>
</a>
</div>
how it looks
As you can see in the image i can even highligth the hyphen as if it was text.
I tried using other tags like button and they work just fine, so it only happens when i use hyperlink, i would like to know if there is a way to fix it so i can keep using the hyperlink tag or if i have to use button instead.
Apparently in the stack overflow code snippet it doesn't happen :/ maybe it is because i'm using bootsrap?
It could be an underlined whitespace. Try this css rule:
a.link-dark {
text-decoration:none;
font-size:0;
}
You can either set the font size to 0, remove them in the html, or use css flexbox. Just as you like.
To be very, very clear:
If you copy-paste this code, it will work in a Chrome browser. The issue lies when you put a map.svg containing the nested <symbol>'s and access the resource with external loading like so:
<svg role="img" title="Python" class="icon">
<use xlink:href="public/img/map.svg#python" />
</svg>
Here's the code that's in a <section>
<div class="row">
<svg role="img" title="Python" class="icon col-lg-3 col-md-3 col-sm-6 col-xs-6"><use xlink:href="#python" /></svg>
<svg role="img" title="C" class="icon col-lg-3 col-md-3 col-sm-6 col-xs-6"><use xlink:href="#c" /></svg>
<svg role="img" title="C++" class="icon col-lg-3 col-md-3 col-sm-6 col-xs-6"><use xlink:href="#cpp" /></svg>
<svg role="img" title="Swift" class="icon col-lg-3 col-md-3 col-sm-6 col-xs-6"><use xlink:href="#swift" /></svg>
</div>
If you notice, I'm referencing an SVG map file with <symbol id="relevant-id"> for each SVG path. I was able to get
.icon:hover {
fill: red;
}
working as you would expect in Chrome, but I had the SVG map referenced at the bottom of index.html instead of in a separate directory. So, when working to solve this problem, please be certain to make sure your xlink:href points to the correct location.
Here's the SVG map:
<svg xmlns="http://www.w3.org/2000/svg" style="display:none;">
<symbol id="c" viewBox="0 0 1000 1000">
<title>C</title>
<path d="M639 579.3c-5.5-3.2-11.1-6.4-16.7-9.6-4.5-2.5-5.8-2.1-8.4 2-14.3 22.2-32.7 39.8-57 50.6-17 7.5-34.9 10.7-53.4 11-20.6.3-40.5-3.4-59-12.4-23-11.1-40.6-28.4-54.5-49.4-.7-1-.9-2.4-1.5-3.6-.7-1.5-1.4-3.1-2.2-4.6-2.9-5.2-6.4-10.1-8.5-15.7-8.1-21.3-9.9-43.4-6.8-65.9 4.3-31.2 17.8-58 41.1-79.3 32.4-29.5 71-39.6 114-33 35.3 5.4 63 23.4 83.3 52.8 2.4 3.5 4.7 7.2 7.1 10.9 39.1-22.6 78-45.2 117.1-67.8-2.7-3.6-5.2-7-7.7-10.4-13.3-18.9-27.9-36.3-44.7-52.1-30.9-29-66.6-49.8-107.8-60.5-39.3-10.2-78.8-10.6-118.6-4-54.1 8.9-100.4 33.4-139.3 71.9-31.5 31.2-53.9 68.2-67.5 110.4-10.7 33.6-14.6 68.2-11.2 103.3 2.1 23 7.4 45.4 15.3 67.1 5.5 15.2 11.4 30.3 19.9 44.1 18 29.2 40.3 54.9 67.4 76.1 43.9 34.3 93.8 52.7 149.3 55.6 33.1 1.7 65.6-2.6 97.1-13 56-18.5 101.6-51.3 135.2-100.1 4.2-6.1 7.9-12.6 12-19.1-1.9-1.5-3.4-3.1-5.1-4.1-30.1-17-59.5-34.1-88.9-51.2z"/><path d="M899.6 0H100.4C45 0 0 45 0 100.4v799.2C0 955 45 1000 100.4 1000h799.2c55.4 0 100.4-45 100.4-100.4V100.4C1000 45 955 0 899.6 0zM918 691.4c0 11.9-2.1 23.5-6.7 34.5-8.1 19.3-22.2 33.2-40 43.6-97.7 56.6-195.4 113.2-293.2 169.7-12.9 7.4-25.8 14.8-39.1 21.4-14.6 7.2-30.1 9.6-46.4 7.8-14.6-1.6-27.9-6.8-40.5-14.1C378.1 911.5 304 868.9 230 826c-35.2-20.5-70.7-40.8-105.4-62-25.7-15.7-38.6-39.5-38.8-69.8-.1-15.7-.1-31.3-.1-46.9 0-.9-.3-1.8-.4-2.7V313.5c.1-1.1.4-2.2.4-3.2-.1-7.7.2-15.5 1.9-23.1 5-22 17.7-38.7 36.4-50.6 13.9-8.8 28.1-17 42.3-25.2 56.7-32.7 113.6-65.4 170.4-98.1 41-23.5 81.7-47.3 122.9-70.5 25.8-14.6 52.6-15.7 79.4-2.9 11.2 5.3 22 11.8 32.8 18.1 58.5 33.7 117.1 67.7 175.6 101.5 40.6 23.5 81.1 47 121.6 70.6 9.8 5.7 19.2 12.2 26.9 20.8 15.4 16.8 22 36.9 22 59.3.1 126.9.1 254.1.1 381.2z"/>
</symbol>
<symbol id="cpp" viewBox="0 0 1000 1000">
<title>C++</title>
<path d="M639 579.3c-5.5-3.2-11.1-6.4-16.7-9.6-4.5-2.5-5.8-2.1-8.4 2-14.3 22.2-32.7 39.8-57 50.6-17 7.5-34.9 10.7-53.4 11-20.6.3-40.5-3.4-59-12.4-23-11.1-40.6-28.4-54.5-49.4-.7-1-.9-2.4-1.5-3.6-.7-1.5-1.4-3.1-2.2-4.6-2.9-5.2-6.4-10.1-8.5-15.7-8.1-21.3-9.9-43.4-6.8-65.9 4.3-31.2 17.8-58 41.1-79.3 32.4-29.5 71-39.6 114-33 35.3 5.4 63 23.4 83.3 52.8 2.4 3.5 4.7 7.2 7.1 10.9 39.1-22.6 78-45.2 117.1-67.8-2.7-3.6-5.2-7-7.7-10.4-13.3-18.9-27.9-36.3-44.7-52.1-30.9-29-66.6-49.8-107.8-60.5-39.3-10.2-78.8-10.6-118.6-4-54.1 8.9-100.4 33.4-139.3 71.9-31.5 31.2-53.9 68.2-67.5 110.4-10.7 33.6-14.6 68.2-11.2 103.3 2.1 23 7.4 45.4 15.3 67.1 5.5 15.2 11.4 30.3 19.9 44.1 18 29.2 40.3 54.9 67.4 76.1 43.9 34.3 93.8 52.7 149.3 55.6 33.1 1.7 65.6-2.6 97.1-13 56-18.5 101.6-51.3 135.2-100.1 4.2-6.1 7.9-12.6 12-19.1-1.9-1.5-3.4-3.1-5.1-4.1-30.1-17-59.5-34.1-88.9-51.2z"/><path d="M736.5 453h-30.4v32.4h-32.4v30.2h32.5V548h30.4v-32.3h32.2v-30.2h-32.3V453z"/><path d="M899.6 0H100.4C45 0 0 45 0 100.4v799.2C0 955 45 1000 100.4 1000h799.2c55.4 0 100.4-45 100.4-100.4V100.4C1000 45 955 0 899.6 0zM918 691.4c0 11.9-2.1 23.5-6.7 34.5-8.1 19.3-22.2 33.2-40 43.6-97.7 56.6-195.4 113.2-293.2 169.7-12.9 7.4-25.8 14.8-39.1 21.4-14.6 7.2-30.1 9.6-46.4 7.8-14.6-1.6-27.9-6.8-40.5-14.1C378.1 911.5 304 868.9 230 826c-35.2-20.5-70.7-40.8-105.4-62-25.7-15.7-38.6-39.5-38.8-69.8-.1-15.7-.1-31.3-.1-46.9 0-.9-.3-1.8-.4-2.7V313.5c.1-1.1.4-2.2.4-3.2-.1-7.7.2-15.5 1.9-23.1 5-22 17.7-38.7 36.4-50.6 13.9-8.8 28.1-17 42.3-25.2 56.7-32.7 113.6-65.4 170.4-98.1 41-23.5 81.7-47.3 122.9-70.5 25.8-14.6 52.6-15.7 79.4-2.9 11.2 5.3 22 11.8 32.8 18.1 58.5 33.7 117.1 67.7 175.6 101.5 40.6 23.5 81.1 47 121.6 70.6 9.8 5.7 19.2 12.2 26.9 20.8 15.4 16.8 22 36.9 22 59.3.1 126.9.1 254.1.1 381.2z"/><path d="M849.9 453.1h-30.1v32.4h-32.4v30.1h32.5V548h30.2v-32.4h32.4v-30.3H850c-.1-10.9-.1-21.5-.1-32.2z"/>
</symbol>
<symbol id="python" viewBox="0 0 1000 1000">
<title>Python</title>
<path d="M619 858.9c20.7 0 37.3-16.7 37.3-37.2 0-20.5-16.8-37.1-37.2-37.1-20.6 0-37.1 16.6-37.1 37.1-.1 20.7 16.4 37.2 37 37.2zM384.8 140.4c-20.8 0-37.3 16.5-37.3 37.1s16.6 37.2 37.1 37.2c20.6 0 37.2-16.6 37.3-37 .1-20.6-16.5-37.3-37.1-37.3z"/><path d="M899.6 0H100.4C45 0 0 45 0 100.4v799.2C0 955 45 1000 100.4 1000h799.2c55.4 0 100.4-45 100.4-100.4V100.4C1000 45 955 0 899.6 0zM268.3 607.5c-.3 33.2-.1 66.5 0 99.8 0 1.9-.4 2.3-2.3 2.3-23.1-.1-46.1-.1-69.2 0-13.2.1-25.6-2.9-37.4-8.3-19.7-8.9-34.8-23.1-46.9-40.8-12.9-18.9-21-39.9-26.7-61.9-7.9-31-10.6-62.7-11-94.6v-10.2c0-3.6.1-7.2.3-10.8.5-17.2 2-34.2 4.8-51.2 3.1-18.7 7.9-36.9 15.4-54.4 8.8-20.8 20.8-39.4 38.1-54.1 18.1-15.5 38.9-24.5 62.4-27.4 7.5-.9 15-.5 22.5-.4 19.8.1 39.6 0 59.3 0H500c2 0 2.7-.5 2.6-2.6-.1-8 0-16.1-.1-24 0-3.1.3-2.7-2.7-2.7H298c-1.9 0-2.5-.4-2.5-2.4v-55.7c0-12.9.1-25.7-.1-38.5-.1-5.1.1-10.1 1.3-15.2 3.4-14.4 11.4-25.9 22.3-35.6 11.6-10.5 25.3-17.9 39.9-23.6 21.8-8.5 44.5-13.3 67.6-16.3 21-2.7 42.1-3.8 63.2-4.2h19.6c8.8.4 17.7.7 26.5 1.1 7.7.4 15.4 1.3 23 2.1 4 .4 8 .8 11.9 1.4 5.6.8 11.2 1.8 16.9 2.9 9.8 1.9 19.5 4 29 6.9 9.6 2.9 19.1 6.3 28.2 10.5 13 6.1 25 13.6 35.4 23.3 12.3 11.4 21.2 25.2 25.5 41.7 2.2 8.3 2.2 16.8 2.1 25.3-.2 61.1-.1 122.4-.1 183.5 0 9.8-.6 19.7-2.6 29.4-5.4 27-19.1 48.6-42.4 63.6-21.6 13.9-45.6 20.2-71 20.3-67.5.3-135 .1-202.5.1-12.8 0-25.3.9-37.8 3.9-25.7 6.2-46.7 19.5-61.4 41.7-15 22.8-21.5 48.1-21.7 75.1zm657.4-51.1c-.1.5-.3.9-.4 1.4-1.5 11.1-3.6 22.2-6.4 33.1-6.1 23.6-15.2 45.9-30 65.4-19.4 25.4-44.7 41.2-76.3 46.4-8.3 1.4-16.7 1.1-25 1.1-55.5-.2-111-.1-166.6-.1-39.1 0-78.1 0-117.2-.1-2.2 0-2.7.6-2.7 2.7.1 7.8.1 15.6.1 23.4 0 3.2 0 3.2 3.3 3.2 67 0 134 0 201-.1 2 0 2.6.5 2.6 2.5-.1 8.5.1 17.2.1 25.7.1 24.1.2 48.2.2 72.3 0 2.8-.2 5.6-.7 8.4-2.5 13.3-9 24.3-18.3 33.9-11.8 12.3-26.4 20.7-42.1 27.1-25.5 10.4-52.2 15.4-79.4 18.4-13.8 1.5-27.5 2.3-41.4 2.7-24.1.7-48.2.3-72.2-1.8-10.6-.9-21.3-2.2-31.8-4-14.1-2.4-27.9-5.6-41.5-10.1-19.4-6.4-37.7-15-53.3-28.3-14.8-12.6-25.4-27.7-30-46.8-2-8.1-1.8-16.4-1.7-24.7.2-60.9.1-122 .1-182.9 0-10.8.7-21.5 3.1-32.1 6.5-28.9 22.6-50.7 48.7-64.9 20.1-10.9 41.8-16.2 64.5-16.3 67.8-.2 135.5-.1 203.3-.1 13.5 0 26.7-1.3 39.8-4.8 21.3-5.7 39.4-16.6 53.2-33.9 18.2-22.9 26.3-49.6 26.9-78.4.7-34.3.2-68.7.1-102.9 0-2.1.5-2.6 2.6-2.6 23.1.1 46.2.1 69.4 0 11.7 0 22.9 2.5 33.7 6.9 19.8 8.1 35.2 21.7 47.8 38.8 11.3 15.5 18.8 32.8 24.9 50.9 4.5 13.6 7.5 27.6 9.8 41.8.7 4.4 1.4 8.7 2.1 13.2-.3 38.7-.3 77.2-.3 115.6z"/>
</symbol>
<symbol id="swift" viewBox="0 0 1000 1000">
<title>Swift</title>
<path d="M499 487.2h.3c-.1-.1-.2-.1-.2-.2-.1 0-.1.1-.1.2z"/><path d="M899.6 0H100.4C45 0 0 45 0 100.4v799.2C0 955 45 1000 100.4 1000h799.2c55.4 0 100.4-45 100.4-100.4V100.4C1000 45 955 0 899.6 0zm20.8 854c-.7 5.2-1.6 10.4-3.8 15.3-.9 1.9-1.7 4.3-4.1 4.4-2.4.1-3-2.3-3.9-4-9.4-18-21.2-34-37.3-46.6-15.5-12-33-19-52.4-21.6-19.3-2.5-38.2-.5-57 3.7-16.1 3.6-31.6 8.9-46.6 15.6-6.7 2.9-13 6.8-19.5 10.1-22.4 11.1-45.7 19.5-70 25.4-16.6 4-33.2 7-50.2 8.8-20.4 2.1-40.8 2.7-61.2 1.9-26.8-1.1-53.3-4.6-79.5-10.3-40.8-8.8-79.8-22.7-117.4-40.6-39.5-18.8-76.2-42-110.4-69.2-14-11-27.3-22.8-40.3-35-6.3-5.9-12.6-12-18.5-18.3-26.7-28-50.5-58-71.2-90.7-.3-.5-.5-1-.8-1.5l.2-.2c10 8 20.3 15.6 31 22.6 16.3 10.5 33.1 19.8 50.4 28.6 9.2 4.7 18.7 9 28.1 13.3 7.6 3.4 15.4 6.4 23.2 9.4 9.5 3.7 19.3 7.1 29 10.2 10.7 3.4 21.7 6.4 32.6 9.1 9 2.2 18.1 4.1 27.1 5.9 5.6 1.1 11.2 2 17 2.6 4.9.5 9.7 1.7 14.6 2.1 3.5.3 7.1.6 10.6 1 4.9.5 9.9 1 14.9 1.1 9.6.2 19.4.7 29 .4 12.4-.3 24.9-1 37.2-2.4 13.8-1.6 27.4-3.9 41-7 32.8-7.6 63.8-19.8 92.6-37.1.7-.4 1.3-.8 2-1.2.2-.1.3-.3.6-.5-4-3.1-8-6.2-12-9.4-7.8-6.2-15.7-12.6-23.5-18.9-1.6-1.3-3.1-2.6-4.7-3.9-11.4-9.2-22.5-19-33.5-28.7-39.8-35.1-77.6-72.4-114-111-7.8-8.3-15.6-16.6-23.3-25-7.6-8.3-15.3-16.9-22.8-25.3-6-6.7-11.9-13.6-17.8-20.4-28.3-33-56-66.5-82.9-100.7-6.3-8-12.3-16.2-18.9-24-5.5-6.6-11.6-12.8-16.9-19.6-10.8-14-20.3-28.9-30-43.6-.1-.2-.1-.4-.2-.5 2 .9 3.4 2.6 4.9 4.1 34.4 31 70.2 60.5 106.4 89.4 38.7 30.7 78.1 60.5 118 89.6 9 6.6 18.2 13.2 27.4 19.6 5.3 3.8 10.6 7.6 16.1 11.3 12.8 8.6 25.6 17.2 38.5 25.8 9.5 6.3 19.2 12.3 29 18.2.5.3.9.9 1.6.6-3.5-3.9-7-7.7-10.6-11.5-15.1-16.2-29.7-32.6-44.3-49.4-27-31.1-53.2-63-78.7-95.4-35.7-45.6-70.5-91.9-103.2-139.8-1-1.5-1.9-3-2.8-4.5l.3-.3c2.9 2.9 5.9 5.7 8.8 8.6 33.8 33.7 68.6 66.6 104.3 98.4 36.5 32.5 73.9 64.1 112.2 94.5 22.3 17.7 44.8 34.8 67.6 51.9 12.4 9.4 25.2 18.6 37.9 27.6 9.6 6.8 19.4 13.7 29.2 20.3 17 11.3 33.9 22.6 51.5 33 1.1.7 1.4.6 1.9-.6 7.3-19 12.8-38.5 16.5-58.4 1.8-9.7 3.2-19.5 4.1-29.3 1.7-18.2 2.1-36.3 1.1-54.5-3.7-68.7-24.2-132.5-56-193.1-12.1-23.2-26-45.3-41.4-66.5-.4-.5-.7-1-1.2-1.7.9-.2 1.4.4 1.9.7 36.6 22.5 70.5 48.5 101.5 78.2 50 48 90.8 102.7 120.8 165.4 5.5 11.4 10.6 23.1 15.1 35 2.9 7.9 5.7 15.9 8.4 23.8 6 17.8 10.6 35.9 14.2 54.4 3.1 16.3 5.2 32.7 6.3 49.3 1.1 16.8 1.1 33.4-.1 50.2-1.1 15.4-3.2 30.5-6.5 45.6-.6 2.5-.8 5.2-2.1 7.5 0 2.9-1 5.5-1.8 8.2-1.1 4.1-1.8 8.3-3.5 12.2-.3.8.1 1.1.5 1.6 24.4 30.2 43.3 63.6 55.8 100.3 6.6 19.5 11.2 39.6 13.6 60 1.8 15.3 2.3 30.4.3 45.4z"/>
</symbol>
</svg>
CSS you'd need to get it working:
Bootstrap 3.3.7 CDN: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
.icon {
fill: black;
}
Lastly, here's a CodePen:
https://codepen.io/kylemh/pen/ZeBKYG
TO REITERATE, THE CODEPEN WORKS BECAUSE THE SVG MAP IS IN INDEX.HTML
I checked it out in Chrome on Mac and didn't see any strange behavior.
Are you certain that you don't have any extensions interfering?
As a part of Stack Overflow Winter Bash, I too got a hat. The thing is, I just wanted to save my pic, and found the hat, as an overlay, so I took a screenshot. But when I studied further about the hat, I found that it's not a normal image, and thus, even the media pane of "page info" section of Firefox, is not recognizing it as an image. I couldn't even save that pic.
Later, I used some tools like Firebug, and found this;
<img width="137" height="134" style="display: block;" src="data:image/svg+xml,%3Csvg%20xmlns%3Ardf%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2F02%2F22-rdf-syntax-ns%23%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%22134%22%20width%3D%22137%22%20version%3D%221.1%22%20xmlns%3Acc%3D%22http%3A%2F%2Fcreativecommons.org%2Fns%23%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Adc%3D%22http%3A%2F%2Fpurl.org%2Fdc%2Felements%2F1.1%2F%22%20viewBox%3D%2227.125%2029%20137.75%20134%22%3E%0A%0A%3Cg%20transform%3D%22%20translate(19.976182752768793%2022.142908647051712)%20scale(0.7536437893157988)%22%3E%3Cg%20transform%3D%22translate(-137.8%20-503.8)%22%3E%0A%3Cg%20transform%3D%22translate(-340%20-622.5)%22%3E%0A%3Cpath%20fill%3D%22%23231f20%22%20d%3D%22m620.8%201228h-11c-2.2-4.2-7.6-5.2-13.9-5.2-4.7%200-8.9%200.5-11.6%202.5-24.2-11.2-35.7-27-35.9-27.2-0.5-0.7-1.4-0.8-2-0.3-0.7%200.5-0.8%201.4-0.3%202%200.5%200.8%2011.9%2016.4%2036.1%2027.8-0.8%201.3-1.3%203-1.3%205.2%200%208.3%206.7%2015%2015%2015s15-6.7%2015-15c0-0.7-0.1-1.3-0.1-1.9h10.1c0.8%200%201.5-0.7%201.5-1.5-0.1-0.8-0.8-1.4-1.6-1.4z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%23414042%22%20d%3D%22m595.8%201240c-3.8%200-7.2-0.9-9.6-2.3%201.9%203.3%205.5%205.5%209.6%205.5s7.6-2.2%209.6-5.5c-2.4%201.4-5.8%202.3-9.6%202.3z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%23231f20%22%20d%3D%22m609.9%201160c-5.9-11.1-17.3-18-29.8-18s-24%206.9-29.8%2018c-13.3%2025.3-37.6%2021.5-59%2021.5%200%2018.6%2024.9%2033.7%2043.5%2033.7%200%200%2023.5-9.8%2045.4-9.8s45.4%209.8%2045.4%209.8c18.6%200%2043.5-15.1%2043.5-33.7-20.7%200.1-45.8%204.1-59.2-21.5z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%23cca650%22%20d%3D%22m550.2%201160c5.9-11.1%2017.3-18%2029.8-18s24%206.9%2029.8%2018c13.3%2025.3%2037.6%2021.5%2059%2021.5v-5.9c-20.7%200-42.2%203.7-53.9-18.4-6.6-12.6-19.8-21.1-35-21.1s-28.4%208.6-35%2021.1c-11.6%2022-32.9%2018.4-53.9%2018.4v5.9c20.7%200.1%2045.7%204.1%2059.2-21.5z%22%3E%3C%2Fpath%3E%0A%3Cg%20fill%3D%22%23d1d3d4%22%3E%0A%3Cpath%20d%3D%22m588.6%201180-0.9%203.2c-0.1%200.4-0.5%200.6-0.8%200.6h-2.4v1.6c0%200.5-0.4%200.9-0.9%200.9s-0.9-0.4-0.9-0.9v-1.6h-1.8v1.6c0%200.5-0.4%200.9-0.9%200.9s-0.9-0.4-0.9-0.9v-1.6h-1.8v1.6c0%200.5-0.4%200.9-0.9%200.9s-0.9-0.4-0.9-0.9v-1.6h-2.4c-0.4%200-0.7-0.3-0.8-0.6l-0.9-3.2h-1.9l1.7%205.8c0.7%202.4%202.8%204.1%205.2%204.4%202.2%200.3%204.8%200.3%207%200%202.5-0.3%204.5-2.1%205.2-4.4l1.8-5.8h-1.8z%22%3E%3C%2Fpath%3E%0A%3Cpath%20d%3D%22m580%201153c-8.7%200-15.8%206.4-15.8%2014.4%200%204.1%201.8%207.7%204.8%2010.3h3.1c0.4%200%200.7%200.3%200.8%200.6l0.9%203.2h1.8v-1.6c0-0.5%200.4-0.9%200.9-0.9s0.9%200.4%200.9%200.9v1.6h1.8v-1.6c0-0.5%200.4-0.9%200.9-0.9s0.9%200.4%200.9%200.9v1.6h1.8v-1.6c0-0.5%200.4-0.9%200.9-0.9s0.9%200.4%200.9%200.9v1.6h1.8l0.9-3.2c0.1-0.4%200.5-0.6%200.8-0.6h3.1c3-2.6%204.8-6.3%204.8-10.3-0.2-8-7.2-14.4-16-14.4zm-8.7%2019.8c-2.4%200-3.2-1.4-3.2-3.8s1.9-4.3%204.3-4.3c4.4%200%204.8%202.5%204.3%204.3-0.5%202.1-3%203.8-5.4%203.8zm11.9%203.9c-0.8%200.9-1.9-1.7-3.1-1.6-1.3%200.1-2.3%202.5-3.1%201.6-0.3-0.3%201.4-5.4%203.1-5.4%201.8%200%203.3%205.1%203.1%205.4zm5.5-3.9c-2.4%200-4.9-1.7-5.4-3.8-0.5-1.8-0.1-4.3%204.3-4.3%202.4%200%204.3%201.9%204.3%204.3s-0.8%203.8-3.2%203.8z%22%3E%3C%2Fpath%3E%0A%3C%2Fg%3E%0A%3Cpath%20fill%3D%22%23c41a1e%22%20d%3D%22m522.9%201288c-2.1%204.1-7.1%205.7-11.2%203.7l-14.8-7.5c-8.2-4.2-11.5-14.2-7.3-22.4l29.6%2015c4.1%202.1%205.8%207.1%203.7%2011.2z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%23ed1c24%22%20d%3D%22m535.8%201308h-10c-10.3%200-18.7-8.4-18.7-18.7v-37.2h28.7v55.9z%22%3E%3C%2Fpath%3E%0A%3Ccircle%20cy%3D%221252%22%20cx%3D%22520.8%22%20r%3D%2215%22%20fill%3D%22%23ed1c24%22%3E%3C%2Fcircle%3E%0A%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m529.9%201252c0%205.1-4.1%209.2-9.2%209.2s-9.2-4.1-9.2-9.2%204.1-9.2%209.2-9.2%209.2%204.2%209.2%209.2z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%23ed1c24%22%20d%3D%22m516%201238c3.3-3.3%209.6-3.6%2017.7-1.2l-3.4%203.9%204.6%201.1-5%203.5-13.9-7.3z%22%3E%3C%2Fpath%3E%0A%3Crect%20height%3D%228%22%20width%3D%2211.3%22%20y%3D%221253%22%20x%3D%22509.5%22%20fill%3D%22%23fff%22%3E%3C%2Frect%3E%0A%3Ccircle%20cy%3D%221257%22%20cx%3D%22507%22%20r%3D%226.3%22%20fill%3D%22%236d6e71%22%3E%3C%2Fcircle%3E%0A%3Cpath%20fill%3D%22%23414042%22%20d%3D%22m507.2%201248h-5.2c-3.4%200-6.1%202.7-6.1%206.1v3.4h17.5v-3.4c0-3.3-2.8-6.1-6.2-6.1z%22%3E%3C%2Fpath%3E%0A%3Ccircle%20cy%3D%221252%22%20cx%3D%22520.8%22%20r%3D%223.3%22%20fill%3D%22%23414042%22%3E%3C%2Fcircle%3E%0A%3Ccircle%20cy%3D%221251%22%20cx%3D%22521.6%22%20r%3D%220.8%22%20fill%3D%22%23fff%22%3E%3C%2Fcircle%3E%0A%3Cpath%20fill%3D%22%23c41a1e%22%20d%3D%22m535.8%201268c-1.5-1.1-3.3-1.7-5.3-1.7-5%200-9.1%204.1-9.1%209.1v18.1c0%206%202.9%2011.4%207.4%2014.7h6.9v-40z%22%3E%3C%2Fpath%3E%0A%3Cpath%20fill%3D%22%23ed1c24%22%20d%3D%22m533.2%201266c-5%200-9.1%204.1-9.1%209.1v18.1c0%2010%208.1%2018.2%2018.2%2018.2v-36.3c-0.1-5-4.1-9.1-9.1-9.1z%22%3E%3C%2Fpath%3E%0A%3Crect%20height%3D%2213.3%22%20width%3D%2218.2%22%20y%3D%221280%22%20x%3D%22524.1%22%20fill%3D%22%23fff200%22%3E%3C%2Frect%3E%0A%3Cpath%20fill%3D%22%231c75bc%22%20d%3D%22m542.2%201312v-18.2h-18.2c0.1%2010.1%208.2%2018.2%2018.2%2018.2z%22%3E%3C%2Fpath%3E%0A%3C%2Fg%3E%0A%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E">
after decoding the same, I got this;
<img width="137" height="134" style="display: block;" src="data:image/svg xml,
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="134" width="137" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="27.125 29 137.75 134">
<g transform=" translate(19.976182752768793 22.142908647051712) scale(0.7536437893157988)">
<g transform="translate(-137.8 -503.8)">
<g transform="translate(-340 -622.5)">
<path fill="#231f20" d="m620.8 1228h-11c-2.2-4.2-7.6-5.2-13.9-5.2-4.7 0-8.9 0.5-11.6 2.5-24.2-11.2-35.7-27-35.9-27.2-0.5-0.7-1.4-0.8-2-0.3-0.7 0.5-0.8 1.4-0.3 2 0.5 0.8 11.9 16.4 36.1 27.8-0.8 1.3-1.3 3-1.3 5.2 0 8.3 6.7 15 15 15s15-6.7 15-15c0-0.7-0.1-1.3-0.1-1.9h10.1c0.8 0 1.5-0.7 1.5-1.5-0.1-0.8-0.8-1.4-1.6-1.4z"></path>
<path fill="#414042" d="m595.8 1240c-3.8 0-7.2-0.9-9.6-2.3 1.9 3.3 5.5 5.5 9.6 5.5s7.6-2.2 9.6-5.5c-2.4 1.4-5.8 2.3-9.6 2.3z"></path>
<path fill="#231f20" d="m609.9 1160c-5.9-11.1-17.3-18-29.8-18s-24 6.9-29.8 18c-13.3 25.3-37.6 21.5-59 21.5 0 18.6 24.9 33.7 43.5 33.7 0 0 23.5-9.8 45.4-9.8s45.4 9.8 45.4 9.8c18.6 0 43.5-15.1 43.5-33.7-20.7 0.1-45.8 4.1-59.2-21.5z"></path>
<path fill="#cca650" d="m550.2 1160c5.9-11.1 17.3-18 29.8-18s24 6.9 29.8 18c13.3 25.3 37.6 21.5 59 21.5v-5.9c-20.7 0-42.2 3.7-53.9-18.4-6.6-12.6-19.8-21.1-35-21.1s-28.4 8.6-35 21.1c-11.6 22-32.9 18.4-53.9 18.4v5.9c20.7 0.1 45.7 4.1 59.2-21.5z"></path>
<g fill="#d1d3d4">
<path d="m588.6 1180-0.9 3.2c-0.1 0.4-0.5 0.6-0.8 0.6h-2.4v1.6c0 0.5-0.4 0.9-0.9 0.9s-0.9-0.4-0.9-0.9v-1.6h-1.8v1.6c0 0.5-0.4 0.9-0.9 0.9s-0.9-0.4-0.9-0.9v-1.6h-1.8v1.6c0 0.5-0.4 0.9-0.9 0.9s-0.9-0.4-0.9-0.9v-1.6h-2.4c-0.4 0-0.7-0.3-0.8-0.6l-0.9-3.2h-1.9l1.7 5.8c0.7 2.4 2.8 4.1 5.2 4.4 2.2 0.3 4.8 0.3 7 0 2.5-0.3 4.5-2.1 5.2-4.4l1.8-5.8h-1.8z"></path>
<path d="m580 1153c-8.7 0-15.8 6.4-15.8 14.4 0 4.1 1.8 7.7 4.8 10.3h3.1c0.4 0 0.7 0.3 0.8 0.6l0.9 3.2h1.8v-1.6c0-0.5 0.4-0.9 0.9-0.9s0.9 0.4 0.9 0.9v1.6h1.8v-1.6c0-0.5 0.4-0.9 0.9-0.9s0.9 0.4 0.9 0.9v1.6h1.8v-1.6c0-0.5 0.4-0.9 0.9-0.9s0.9 0.4 0.9 0.9v1.6h1.8l0.9-3.2c0.1-0.4 0.5-0.6 0.8-0.6h3.1c3-2.6 4.8-6.3 4.8-10.3-0.2-8-7.2-14.4-16-14.4zm-8.7 19.8c-2.4 0-3.2-1.4-3.2-3.8s1.9-4.3 4.3-4.3c4.4 0 4.8 2.5 4.3 4.3-0.5 2.1-3 3.8-5.4 3.8zm11.9 3.9c-0.8 0.9-1.9-1.7-3.1-1.6-1.3 0.1-2.3 2.5-3.1 1.6-0.3-0.3 1.4-5.4 3.1-5.4 1.8 0 3.3 5.1 3.1 5.4zm5.5-3.9c-2.4 0-4.9-1.7-5.4-3.8-0.5-1.8-0.1-4.3 4.3-4.3 2.4 0 4.3 1.9 4.3 4.3s-0.8 3.8-3.2 3.8z"></path>
</g>
<path fill="#c41a1e" d="m522.9 1288c-2.1 4.1-7.1 5.7-11.2 3.7l-14.8-7.5c-8.2-4.2-11.5-14.2-7.3-22.4l29.6 15c4.1 2.1 5.8 7.1 3.7 11.2z"></path>
<path fill="#ed1c24" d="m535.8 1308h-10c-10.3 0-18.7-8.4-18.7-18.7v-37.2h28.7v55.9z"></path>
<circle cy="1252" cx="520.8" r="15" fill="#ed1c24"></circle>
<path fill="#fff" d="m529.9 1252c0 5.1-4.1 9.2-9.2 9.2s-9.2-4.1-9.2-9.2 4.1-9.2 9.2-9.2 9.2 4.2 9.2 9.2z"></path>
<path fill="#ed1c24" d="m516 1238c3.3-3.3 9.6-3.6 17.7-1.2l-3.4 3.9 4.6 1.1-5 3.5-13.9-7.3z"></path>
<rect height="8" width="11.3" y="1253" x="509.5" fill="#fff"></rect>
<circle cy="1257" cx="507" r="6.3" fill="#6d6e71"></circle>
<path fill="#414042" d="m507.2 1248h-5.2c-3.4 0-6.1 2.7-6.1 6.1v3.4h17.5v-3.4c0-3.3-2.8-6.1-6.2-6.1z"></path>
<circle cy="1252" cx="520.8" r="3.3" fill="#414042"></circle>
<circle cy="1251" cx="521.6" r="0.8" fill="#fff"></circle>
<path fill="#c41a1e" d="m535.8 1268c-1.5-1.1-3.3-1.7-5.3-1.7-5 0-9.1 4.1-9.1 9.1v18.1c0 6 2.9 11.4 7.4 14.7h6.9v-40z"></path>
<path fill="#ed1c24" d="m533.2 1266c-5 0-9.1 4.1-9.1 9.1v18.1c0 10 8.1 18.2 18.2 18.2v-36.3c-0.1-5-4.1-9.1-9.1-9.1z"></path>
<rect height="13.3" width="18.2" y="1280" x="524.1" fill="#fff200"></rect>
<path fill="#1c75bc" d="m542.2 1312v-18.2h-18.2c0.1 10.1 8.2 18.2 18.2 18.2z"></path>
</g>
</g>
</g>
</svg>">
So what is this? What is the role of XML here? how can I retrieve that image?
The XML is a SVG vector graphic, you can copy the XML code and put it in a text editor and save it as SVG and reopen it in graphic program or you use a SVG to canvas service:
http://www.professorcloud.com/svg-to-canvas/
<div data-role="content">
<div id="skeletonsmall">
<center>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="262px" height="644px" viewBox="128 65.25 262 644" enable-background="new 128 65.25 262 644" xml:space="preserve">
<a xlink:href="#skull">
<path id="skull" opacity="0.5" fill="#5CCAE8" enable-background="new " d="M237.026 122.5 c1.92 7.2 3.3 7.6 3 10.028c-0.341 2.388-0.375 10.5 10.1 11.58c10.522 1.1 22.9 1.6 26.282-5.134 c0 0 1.338-8.834 2.817-10.267c1.479-1.433 0.765-4.775 1.958-6.208c1.192-1.433 3.485-23.877-1.958-32.233 c-5.444-8.357-7.435-12.655-21.124-12.655c-13.69 0-19.059 8.118-20.193 10.028c-1.137 1.91-1.455 5.253-2.251 6.5 c-0.795 1.273-1.113 6.048-1.272 7.958c-0.16 1.9 0 14.5 0.8 16.873C236.002 121.4 237 122.5 237 122.477z"/></a>
<g id="humerus">
<path id="humerus" opacity="0.5" fill="#9B4F9E" enable-background="new " d="M190.635 197.309c-2.093-5.987-1.962-8.47-0.813-10.126 c1.147-1.655 0.957-1.908 3.312-2.478c2.356-0.57 3.695-1.97 5.67-1.458c1.973 0.5 3.3 0.7 5.6 3.8 c2.289 3.1 0.8 5.3 0.8 5.35s-2.737 0.059-3.824 2.86c-1.086 2.8-2.602 43.292-3.114 45.3 c-0.512 1.973-3.397 17.25-3.02 20.943c0.378 3.7 4.7 19.6 4.8 21.845c0.124 2.3 1.5 5.67-3.638 6.3 c0 0 0.7 2.516-1.503 2.243c-2.192-0.273-4.356-1.041-6.52-1.808c-2.163-0.767-7.004-0.327-6.808-3.256 c0.194-2.929-0.565-5.54 2.876-8.911c3.442-3.371 5.869-32.016 6.592-37.428S190.635 197.3 190.6 197.309z"/>
<path id="humerus" opacity="0.5" fill="#9B4F9E" enable-background="new " d="M326.388 196.912c2.059-5.999 1.914-8.481 0.758-10.129 c-1.158-1.647-0.97-1.903-3.329-2.46c-2.359-0.556-3.706-1.948-5.678-1.424c-1.97 0.524-3.307 0.724-5.577 3.8 c-2.27 3.072-0.788 5.354-0.788 5.354s2.738 0 3.8 2.838c1.102 2.8 2.9 43.3 3.4 45.2 c0.524 2 3.5 17.2 3.1 20.926c-0.356 3.697-4.573 19.58-4.686 21.873c-0.111 2.293-1.424 5.7 3.7 6.3 c0 0-0.675 2.5 1.5 2.234c2.191-0.286 4.35-1.065 6.511-1.843c2.156-0.781 7.001-0.369 6.79-3.296 c-0.213-2.927 0.533-5.542-2.929-8.895c-3.462-3.35-6.054-31.981-6.808-37.389C325.444 234.6 326.4 196.9 326.4 196.912z"/>
</g>
I can't seem to figure out why my code isn't working! I'm trying to use xlink to let my path (id skull) lead to the skull page. I'm sure this is some moronic coding error I'm making, but PLEASE HELP!
Your path has id="skull" and you link to it, in other words: if you click the link you just go to where you already are. Try replacing xlink:href="#skull" with e.g xlink:href="http://example.com" to test.
In general, it's not a good idea to have several elements with the same id in the same document.