Change image selection color - html
enter image description here
I want the color of the area to change when the mouse hovers over the area.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
area:hover{
filter: opacity(0.9) drop-shadow(0 0 0 #ff0000);
}
</style>
</head>
<body>
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="전국지도.png" usemap="#image-map">
<map name="image-map">
<area target="_blank" alt="서울 관광지" title="서울 관광지" href="" coords="140,147,139,153,143,157,148,163,157,164,165,164,172,160,174,152,169,145,165,135,159,139,153,141,149,145" shape="poly">
<area target="_blank" alt="인천 관광지" title="인천 관광지" href="" coords="121,146,121,159,122,170,125,175,133,170,135,155,131,149" shape="poly">
<area target="_blank" alt="경기 관광지" title="경기 관광지" href="" coords="115,126,128,127,128,105,140,98,147,86,156,81,156,73,174,71,181,81,186,77,187,86,198,87,205,99,217,110,209,131,237,154,229,195,214,212,185,229,170,223,141,229,139,210,140,201,125,194,117,185,140,182,130,176,120,165,120,159,123,149,117,143,115,137" shape="poly">
</map>
</body>
</html>
area 태그를 css로 선택하여 background color를 바꾸어 보았으나 실패하였습니다.
Instead of helping (trying to figure out, actually) with images and map areas I decided to show you how you can create an interactive country map with an in-document SVG.
Compared to an <img> with <map><area> an in-doc SVG will give you much more control over user interaction with the map. An SVG is essentially an XML document you can style and manipulate with all the benefits of CSS and Javascript, where an image is nothing more than a static, graphical element.
I downloaded a free SVG map of South Korea and modified it to have an interactive country map in the below snippet.
You can find plenty of SVG references online, so I won't go into specifics, but here is a summary of what I did:
Download the SVG and copy it into the main HTML document. A document in a document, hence in-doc.
Hide it from the users view by making it width="0" height="0".
Define <defs> section inside the SVG.
Define the country province <path> elements as <symbol> inside <defs> for later use (reusable elements because symbols don't show up in the viewport, they are just 'definitions').
Combined various <symbol> (provinces and specials) as new <symbol> (entire country), to be used in the main document HTML.
Defined <svg><use href="#South-Korea"></svg> in the main HTML document to show the final interactive map.
Once that has been done, you can use 'regular' CSS to control colors, line styles, hover effects, animations, etc.
I inserted an anchor <a> in the <symbol> for Seoul linking to its Wikipedia page, just to show how that is done.
It may not be the answer you wanted, but it might well be the answer you needed. Let me know...
Check out d-maps.com South Korea for more interesting SVG maps you could use.
The number of character in my answer and code exceed the maximum allowed on Stackoverflow so I have to post the link to my Codepen Demo. Sorry for that, but upside is that you can fork it and easily modify it to your needs.
snippet with only a partial country.
.country {
height: calc(100vh - 4em);
padding: 2rem;
}
svg {
display: block;
width : 100%;
height: 100%;
}
/*****************************/
/* Styling of the in-doc SVG */
/*****************************/
path { fill: #f5f5f5; stroke: #000; stroke-width: 2px }
path:hover { fill: #ff0000; filter: opacity(90%)/* url(#dropshadow)*/ }
circle { fill: blue; stroke: red; stroke-width: 4 }
circle:hover { fill: red; stroke: blue }
/* Seoul */
a path:hover { fill: green }
/***********************/
/* DEMO page eye-candy */
/***********************/
* { box-sizing: border-box }
body {
margin: 0;
width: 100%; min-height: 100vh;
background-color: #ddd;
}
h3 {
margin: 0;
padding: 1em;
background-color: black; color: white;
text-align: center;
}
<h3>Showing usage of an in-doc SVG country (parts) map</h3>
<div class="country">
<svg><use href="#South-Korea"></use></svg>
</div>
<!--
In document SVG, hidden from view because of width/height=0
Various <path> define the country/province outlines
<symbol><use> combines various <symbol> into collections
<svg><use> In <body> shows the selected <symbol>
-->
<svg width="0" height="0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!--
Copyright (c) 2017 Pareto Softare, LLC DBA Simplemaps.com
Free for Commercial Use, full terms at http://simplemaps.com/resources/svg-license
Attribution is appreciated! http://simplemaps.com
map downloaded from: https://simplemaps.com/resources/svg-kr
-->
<style>
/* All styling is done in the document main CSS section */
</style>
<defs>
<filter id="dropshadow" x="0" y="0" width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha" dx="5" dy="5" />
<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
</filter>
<!-- Define Province/Islands symbols that make up the entire country -->
<symbol viewbox="0 0 1000 1064" id="KOR2496" name="Gangwon"><path d="M762 402.5l-1.6-0.1-5.3-1.2-5.1 2.3-10.9-4.1 1.7-4.7-0.5-4.4-1.4-4.9-0.4-5.5 2.1-5.3 1.7-4.9-1.2-1.5-1.4-1.3 0.7-4.5-11.6-0.9-3.4-1.9-3.7-1.6-1.5-3.6-1.1-4.2-5.2-2.5-3.3-4.9-0.7-6.5 1.1-4.9 2.7-2 3-1.1 4.6 1.8 3.8-2.8-1.6-4.6-4.9-3-5.4-1.2-4.3 2.2-4.2 1.1-5.8-2.7-6.2-1-2.1 0.8-1.7-0.2-1.4-1.8-1.9-0.8-4.5 3.5-4.7 1.9-0.4-3.5 0.4-3.4-2.8-1.4-3-0.7-2.2-3.9-4.4-0.4-4.3 2.1-2.8 3.5 1 4.9-0.5 4.5-0.9 4.2-4.1-0.3-4.7-1.1-3.9-1.6-4.1-2.2-3.1-2-3.2-1.4-4.1-0.5-4.1-0.8-4.2-2.7-3.7-2.9-3.8 0.1-3.8 1.2-3.4 0.6-2.9 0.2-1.1-2.6-3.2-3.3 0.3-2.8-1.6-1.7-7.5 0.8-4.8 1.6-1.4 0.7-1.5 0-2.2-1.3-1.7-1.9 2.7-4.2 4.6-3.3 1.8-4.2-2.9-0.8-9-1.5-8.8-3.1-3.7 2.8-3.1 1.7-3.8-0.8-3.2 2.4-5.2 3-5.2 1.2-2-2.7 0-4.3-6-6.4-8.1 2.7-3 3.7 0.9 9.7-3.2 2.2-1.1 1.3-1.2 1.1-2.7-1.5-4.8-0.4-4.9 1.2 1.4-9.6-16.8 2.3-16.7 4.6 8.5-15.9 7.1-17.4 9.7-20.8 1.2-4.5-0.9-4.5 2.1-3.6 2.9-3.6 3.2-1.3 1.6-3.5-1.8-3.1-2.3-2-3.8-0.4-3.9-1.5-5.3-0.7-8.9-4.9-4-1.7-4-2.6-4.3-0.7-4.3 1.4-3.5-3 0.3-3.3 1.7-3.4 0.6-3.9 0.1-4.1-4.2 1.4-1.9-2.4 4.6-5.5-0.8-3.6-1.2-3.6 0.9-2.7-0.1-3.3-0.3-3.1 8.1-5.9 3.2-1.1 1.8-2.8 0.8-8.1-3.7-5.8-3.1-0.6-2.9-1.3-2.2-6-3.5-0.1-3.8 0.2-4-3-2-5.3-0.8-9.5-1.5-4.7-1.1-1-1.2 0.3-0.9 0.8-1 0.1-2.7-1.9-6.6 2.3-6.1-1.4-2.4-1.5-2.5-2.3-0.1-3.8 1.2-3.6 1.6-2.6-1.1-0.9-1.3-0.3-1.3 0.2-1.1 0.9-2.1 2.7-2.4 2.4-3.6 0.6-3.1-2.1-0.6-2-0.3-2-1.1-0.7-1.2 1.3-0.4 2-0.1 6.6-2 3.3-5.8-2.8-5.3-4.8-1.9-2-2 0.3-1.7-2.6-1.1-3.3-1.5-1.7-1.7-1.4-1.3-3.2-7.9-5-3.2-1.6 1-1.1 8.6-7.2 10.1-6.3 10.6-4.4 10.2-1.1 5.1 0.6 19.5-1.7 15 4.5 4.8-0.4 9.3-2.8 30.5-2.7 1.3 0.9 2 2.9 1.9 2 2.2 0.5 10.5-2.2 16.6 1 10.8-0.9 10.8-3.8 10.1-6.6 8.4-8.8 3.7-5.3 3.1-5.6 2-6.3 0.7-7.1-1.3-7-0.4-3.5 1-2.6 4.3-3.4 9-4.7 12.1 24 1.5 6.4 3.7 9.7 14 27.7 10.9 29.1 1.8 3.1 5.6 7.1 2.2 5.9 26.4 37.8 10.2 14.9 12.3 13.6 1.7 1.4 8.2 9.7 0.5 4.1 0 4.9 1 4.2 5.6 3.1 1.6 3.4 4.6 15.1 2.1 3.4 2.5 1.5 2 2.2 7.2 14.2 4.4 5.4 1.5 3 0.5 3.2 1.1 3.1 7.7 8.4 2.4 6.9 2.2 15.1 2.9 8.2 8.2 11.4 0.6 2.3-1 2.3-1.4 2.2-1 2.2 0 1.9 1.1 6.2 1.4 17.7 1.5 8.2 5.2 16.6 0.5 8.2-1.7 7.5-3.5 6.9-2.9 8.1z"><title>Gangwon</title></path></symbol>
<symbol viewbox="0 0 1000 1064" id="KOR2497" name="Seoul">
<a target="_blank" rel="noopener" href="https://en.wikipedia.org/wiki/Seoul">
<path d="M398.4 211.4l-1.5 5.7 4.4-0.1 3.7-1.3 3.2-0.1 1.2 2.9-0.4 3-2.2 1.1-2.4 1.6 0 3.6 1.3 1.5-2.7 3.7-1.5 2.6-4.1 2.4-4.5 1.1-4.7 2.3-1.8-4.1-3.9 0.9-4 1.2-2.7 1.6-2.9 0.5-6.8-0.3-4.7-6.1-4.6-1.4-3.1-2-0.8-5.8-3.2-4.4-3.7-4.6 2.3-5.1 4.5 0.2 5 3.1 3.8-1.2 3.4-2.1 0.2-3.4 0.9-3.2 7.1-0.7 3.7-4.6 2.2-4.8 3.2-3.3 4.9-1.2 5.7 0.4 2.7 4.7 1.1 6.4 1.6 4.4 0.1 4.9z">
<title>Seoul (links to info at Wikipedia)</title>
</path>
</a>
</symbol>
<symbol viewbox="0 0 1000 1064" id="KOR2498" name="Gyeonggi"><path d="M245.6 280.6l-0.7 1.2-2 2.1-1.4 0.6-1.9 0.3-1.6-0.7-1.4-2.9-1.5 0.8-0.7-0.2 0.5-4 0.9-2.7 1.1-1.6 1.3 0.9 1.1 1.9 1.2 0.9 3.9 2.1 1.2 1.3z m50.4-1.9l-1.3 1.6-1.8 0.4-1.2-0.9-1.3 0.1-1.1-0.6-0.3-2.5 0.3-2.6 1.3-1.8 2.8-1.5 3.6 0.3 1.6 1.1 0.6 2.4-0.7 0.9-1.7 0.5-0.6 1.3-0.2 1.3z m15.2-7.5l0.6 1.6 1.9 1.1 3 1.2 0.8 0.9 0.8 2.6-0.8 1.8-8.1 6.5-3.7 0.4 0.1-1 1.7-2.3 0.2-1.4-0.7-1.1 2-2.4 0.1-2.4-0.8-2.9-1.2-2-1.2-1.4 0.4-0.4 2.6 1.3 2.2-2 0.5 0.2-0.4 1.7z m-139.3-74.8l-0.9 0.4-1.4-3.5 0.2-1.8 1.2-0.2 1.8 0.3 1.1 1.1-0.5 2.2-1.5 1.5z m107-0.9l-3.2 0.2-10.7-8.4 1.4-1.2 0.6-1.6 0.9-3.8 1.3-2 0.9-0.7 0.9-0.3 0.6 0.4 0.6 1.4 0.5 3.7 1 2 1 1.1 4.1 3.4 1.5 1.8 0.3 1.9-1.7 2.1z m-253.9-24l0.8 0.7-0.3 1-1.1 0.3-1.5-0.4-1.1 0.5-1 1.2-1.4 0.7 0.7-2.1 1.1-0.8 0.3-1.1 2.1 0.1 1.4-0.1z m239.1-6.6l3 1.8 3.1-0.1 2.9 0.5 1.5 1.6-1.1 3.6-2.8 2.4-3.4 0.3-6.6-1.5-3.3 1.6-1.5 0-0.6-2.2 0.3-0.7 1.8-5.5 2-1.9 2.2-0.6 2.5 0.7z m40 37.3l-1.8 4.2-1.6 1.4-1.2 0.2-0.9-0.5-1.7-1.8-1.2-0.7-0.8 0.3-1.3 1-8.3 0.5-3.1-1.5-3.3-4.3 4.9-1.3 1.2-0.8 1.3-2.1-0.2-0.9-0.9-0.6-0.8-1.1-5.6-10.8-0.4-1.7 0.6-2.1-0.1-9.5 0.6-2.2 1.6-0.5 3.7-4.4 2.9-0.7 2.5 1.8 2.4 2.8 2.4 2.2 5.1 2.6 2 2 0.8 3.2-0.2 1.7-0.8 2.7-0.2 1.2 0.4 1.3 1.4 2.7 0.4 1.5 0.5 7.2-0.5 1.7 0.8 1.1 1.4 3-2 1.2z m-287.2-37l-1.2 0.7-1.2-0.1-1 0.4-0.8 0.8-1-1.6-1.2-1.7 0.5-1.5 2.6-2.2 2.5-2.4 1.2 0.2 1.2 0.6 0.3 1.3-0.8 1.8-0.4 2-0.7 1.7z m2.9-34.2l1.8 2.1-0.3 3-2.2 1.6-3-1.9-4.1 0.4-0.8 0.4 0.1 2.1 1.5 0.7 1.8 0.4 0.9 0.7-3.2 2.6-6.5-0.9-4.8-4.1 1.6-7.1 4.1 1.4 8.7-3.1 4.4 1.7z m454.9 169.6l-1.1 2.1-1.3 1.9-2.5 1.9-1.7 3.2-7.6 14.1-3.9 2.8-0.9-1.2-3.1-0.6-2.5 2.6-1.3 3.3-1.9 2.5-4.1 1.7-2.5 2.8-1.5 5.8-5.2 1.8-6.8 3.3-7.1 2-7.4-1-6.1-5.1-6.9-3.1-13.1 5.6-6.2 0-7.5-1.5 2.1-1.6 2.4-1.1 1.7-1.9 1-4.8-0.3-0.9-1.7-2 0.8-0.8 1.7 0 2.2-1.3 1.4-0.2 1-0.7 0.5-2.3-9.5 2.7-1.4 2 0.5 6.1-1.2 1.4-3.7 1.2-5.2-0.7-6.2-3.6-5.6-5.6-2.2-5.3 9.5-1 0-1.2-2.1-1.5 1.7-0.2 1.7 0.1 1.6 0.5 1.3 1.1-0.6-3.8-2.2-3.4-1.6-3.8 1.2-5.3-1.8-0.8-1.4 1.8-0.8 3.2-0.3 3.2-0.8 3.5-1.5 0.8-1.5-1.5-3 0.6-3 0.8-7.3-2.2 0-2.3-0.7-1.9 0.6-2.7-0.3-3.4 1.8-3.4 2.2-3 2.5-1.2 2.7-1 4-0.1 4.3-1.2 0.9-1.3 0.3-3.7-1-0.7-2.2 1.2-3.3 2.9-2.1-0.5-1.5-0.9-0.8-1.5 0-2.4-3.7 1.9-3.1 2.2-5.6 6.1-1.5 1.2-1.8 0.6-1.7 0-1-1.1 0-1.8 1-1.8 2.3-3.3-4.6 1.1-1.4-0.5-0.6-2.7 0.9-2 1.9-1.1 2.2-0.8 1.6-0.9 1.9-2.6-0.5-0.7-4.2 0.6-1.4-0.9-1.1-2.1-1.1-2.7-1.2-2.5 0.7-0.2 1.4-1.2 1.2 0.9 1.7-0.1 3.1-0.8 2.5 0.7 2.1 1.3 2.1 0.6 2.4-1.2-0.2 2.3 0.2 2.1 0.8 1.7 1.5 0.7 1.7-0.6 0.7-1.9 0.8-4.3 2.7-4 2.2 0.4 2.5 1.5 3.5-0.6-0.8-1.6-1-1.2-1.2-0.8-1.5-0.4-2.2 0-1-1.5-2.3-0.4-1.9 0.6-1.9-0.1-3-0.6-5-1.6-6.9-5.2-0.3-2.3 3-4.5 2.1-2.1 5-1.5 3.3-2.4 2.2-4.3 1.5-5-1.5-2.4-2.6-1.7-1.7-3.9 0.1-4.7-9.4-9-15.3 0.5-2-4.7-3-5.1-1.8-1.8-0.1-2.7-0.6-4-1.7-6.3-2.3-16.5 0.6-2.7 2.1-0.4 8.7 3.2 2.8-0.6 2.3-1.1 2.1-0.4 2.1 1.4 0.8 2.4 0.3 3.6-0.2 3.8-0.9 2.6-0.1 4.7 4.9 4.1 6.2 2.6 3.8 0.2-3-3.1-9.1-6.6 2.6-7.1 0.8-4.2-0.6-3-1.5-3.1-0.3-4.1 0.7-4 1.6-3.2-1.2-1.5-1.5 0.2-2.4 1.7-1.1-17.3 0.8-4.7 1.9-1.4 3-0.4 4-1.5 6.3-5.1 13.6-20.7 2.7-2.8 6.1-4.7 2.6-3.1 5.4-13.3 1.9-2.5 3.2 1.6 7.9 5 1.3 3.2 1.7 1.4 1.5 1.7 1.1 3.3 1.7 2.6 2-0.3 1.9 2 5.3 4.8 5.8 2.8 2-3.3 0.1-6.6 0.4-2 1.2-1.3 1.1 0.7 0.3 2 0.6 2 3.1 2.1 3.6-0.6 2.4-2.4 2.1-2.7 1.1-0.9 1.3-0.2 1.3 0.3 1.1 0.9-1.6 2.6-1.2 3.6 0.1 3.8 2.5 2.3 2.4 1.5 6.1 1.4 6.6-2.3 2.7 1.9 1-0.1 0.9-0.8 1.2-0.3 1.1 1 1.5 4.7 0.8 9.5 2 5.3 4 3 3.8-0.2 3.5 0.1 2.2 6 2.9 1.3 3.1 0.6 3.7 5.8-0.8 8.1-1.8 2.8-3.2 1.1-8.1 5.9 0.3 3.1 0.1 3.3-0.9 2.7 1.2 3.6 0.8 3.6-4.6 5.5 1.9 2.4 4.2-1.4-0.1 4.1-0.6 3.9-1.7 3.4-0.3 3.3 3.5 3 4.3-1.4 4.3 0.7 4 2.6 4 1.7 8.9 4.9 5.3 0.7 3.9 1.5 3.8 0.4 2.3 2 1.8 3.1-1.6 3.5-3.2 1.3-2.9 3.6-2.1 3.6 0.9 4.5-1.2 4.5-9.7 20.8-7.1 17.4-8.5 15.9z m-76.3-89.2l-0.1-4.9-1.6-4.4-1.1-6.4-2.7-4.7-5.7-0.4-4.9 1.2-3.2 3.3-2.2 4.8-3.7 4.6-7.1 0.7-0.9 3.2-0.2 3.4-3.4 2.1-3.8 1.2-5-3.1-4.5-0.2-2.3 5.1 3.7 4.6 3.2 4.4 0.8 5.8 3.1 2 4.6 1.4 4.7 6.1 6.8 0.3 2.9-0.5 2.7-1.6 4-1.2 3.9-0.9 1.8 4.1 4.7-2.3 4.5-1.1 4.1-2.4 1.5-2.6 2.7-3.7-1.3-1.5 0-3.6 2.4-1.6 2.2-1.1 0.4-3-1.2-2.9-3.2 0.1-3.7 1.3-4.4 0.1 1.5-5.7z"><title>Gyeonggi</title></path></symbol>
<!-- Define cities, villages, locations, water, roads etc -->
<symbol id="symbol-south-korea-specials" viewbox="0 0 1000 1064">
<!-- Not sure what these are for. Cities, capitals? -->
<circle r="15" cx="382.7" cy="319.5" id="0"><title>some city 1</title></circle>
<circle r="15" cx="449.5" cy="323.2" id="1"><title>some city 2</title></circle>
</symbol>
<!-- Construct the country from <symbol> definitions -->
<symbol id="symbol-south-korea">
<use href="#KOR2496"></use>
<use href="#KOR2497"></use>
<use href="#KOR2498"></use>
</symbol>
<symbol id="South-Korea">
<use href="#symbol-south-korea"></use>
<use href="#symbol-south-korea-specials"></use>
</symbol>
</defs>
</svg>
Related
How to remove white space on website from SVG symbol at botton of index.html
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>
How do i get rid of this hypen that appears in the hyperlink tag for no reason?
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.
How to give an svg a background-image?
I have 2 .svg's: map.svg - https://github.com/djaiss/mapsicon/blob/master/all/ad/vector.svg flag.svg- https://github.com/hjnilsson/country-flags/blob/master/svg/ad.svg I want to inject the flag.svg as a background-image into the map.svg What's the way to do it? Is there's an attribute for the svg or a sub element which is right for this kind of task? Here's my snippet: <svg xmlns="http://www.w3.org/2000/svg" width= '400' height='400' version="1" viewBox="0 0 1024 1024"> <path d="M372 98.3c-5.8 3.5-14.9 8.7-20.3 11.6l-9.8 5.3-5.7-1.9c-5.5-1.9-6-1.9-13.4-.3-4.2 1-8.3 2-9.2 2.3-.8.3-3.6 4.4-6.2 9.1-2.6 4.7-5.3 8.6-5.8 8.6-.6 0-8.4.9-17.4 1.9l-16.3 1.9-9.5-2.9c-5.2-1.5-9.8-3-10.2-3.3-.4-.2-4.7-5.4-9.7-11.5-7-8.5-9.6-11-11.5-11-1.4-.1-10.4 1.1-20.1 2.6l-17.6 2.6-2.8 9.5c-2.3 8.1-2.6 10.6-2.1 17.1l.7 7.6-11.5 12-11.5 12-.1 10.2v10.1l3.8.9 3.7.9.6 7.9c.5 7 1.2 9.4 5.8 18.9 3.9 8 5.8 13.4 7.2 20.8 1 5.4 1.9 10.6 1.9 11.6s-3.3 3.9-8.5 7.2l-8.5 5.5v12l-9.8 2.8c-6.8 2-12.6 4.7-19.4 8.8l-9.8 5.8-6.7-2.8c-4.9-2.1-9.7-3.2-17.2-4-5.8-.5-10.8-.8-11.1-.6-.4.2-1 3.9-1.4 8.2-.3 4.3-1.1 12.8-1.7 19-1.3 12.6-.2 11.4-11.6 12.8l-5.2.7-6.7 10.4-6.6 10.5-5.2-.3-5.1-.3-.8 7.6-.9 7.5 6 12c4.1 8.2 8.1 14.3 12.7 19.6l6.6 7.6 7.2.7c13 1.1 12.3.7 15.2 9.6 1.5 4.3 2.5 8.3 2.3 8.9-.2.5-6.3 6-13.6 12.3-12.3 10.5-14.4 11.9-27 17.6-7.5 3.5-14.2 6.8-14.9 7.4-.6.7-6.1 13.4-12.2 28.3s-13.3 32-16.1 37.9c-2.8 6-4.9 11.4-4.7 11.9.3.6 1.6 1.8 3 2.5 2.5 1.3 3 1.1 12.1-6.3l9.5-7.6h7.7c7.1 0 9.4-.6 25.8-6.7 10-3.6 18.6-6.6 19.1-6.6.8 0 26.1 16.3 29.3 18.8.1.1-.2 3.2-.8 6.8-1 6.3-.9 6.8 3.4 18.8 2.4 6.8 4.7 13.2 5.1 14.1.5 1.2 2.3 2 5.5 2.4 2.6.3 5.3.9 5.9 1.3 1 .6 24.9 50.9 25.4 53.4.1.5-5 5-11.3 9.9-6.3 4.9-16.3 13.2-22.2 18.4-10.4 9.2-10.8 9.7-11.4 14.5-.4 2.7-1.2 5.5-1.8 6.3-.6.8-8 4.6-16.4 8.5L82.9 693l-19.7.1c-10.8 0-24.2.6-29.7 1.2l-10 1.2-5.7 8.5c-5.3 7.8-6.3 8.7-11.2 10.5-3 1.1-5.7 2.3-6 2.6-.5.5.3 3.4 2.9 10.7.3.9 2.1.6 7.1-1.3 3.6-1.4 7.2-2.5 8-2.5.7 0 2.1 2.5 3.1 5.6l1.7 5.6 8.6-.6c4.7-.3 13-.8 18.5-1.1l10-.6L75 747.4 89.5 762l-3.8 7.3-3.8 7.2 2.9 13.4 3 13.4 4.9 4.2c2.6 2.3 6.1 5.3 7.8 6.7l2.9 2.6-7.8 8.7-7.9 8.6 3.2 10.7c1.8 5.8 5.7 15.4 8.7 21.3l5.4 10.8-6.7-2.5c-3.7-1.4-7.2-2.8-7.7-3.2-2-1.2 3.6 5.6 12.1 14.6l8.8 9.3L131 898c18.4 2.8 20.9 3.5 45.6 12l26.2 9h43.3l22.5 6.6 22.6 6.6 16.1-5.8 16.2-5.7 28.5-1.8c15.7-1 30.8-1.8 33.6-1.8l5.1-.1.7-4.8c.3-2.6.9-10.6 1.3-17.9l.6-13.2 8.6-2.9c4.7-1.6 8.6-3.3 8.6-3.8s-.4-8.2-.9-17.1c-.8-16-.8-16.3 1.9-24.3 2.1-6.2 3.1-8.1 4.8-8.5 3-.7 16.8-3.5 17.1-3.5.2 0 4.3 5.2 9 11.5 7.7 10.3 9.3 11.8 14.2 14 8.7 3.8 8.2 4.1 12.8-6.8 3.2-7.6 6.3-12.6 13.6-22.1l9.4-12.3 13.6-7.7 13.5-7.8 9.1 4.7 9 4.8 17-1.7c20.8-2 23-2 37.6.1l11.8 1.6 5.7-5c3.2-2.7 6.3-5.2 7-5.6.6-.4 3.7.5 6.8 2l5.6 2.8 9.1-4.9 9-4.8 4.9 4.8 4.9 4.8 8.6-2.8 8.6-2.8 3.1-6.9c2.5-5.9 3.7-7.4 7.8-9.9 5.5-3.3 5.5-2.3.1-14l-2.9-6.6 1.9-4.8c1-2.6 3.4-12.1 5.3-21 4.9-23.5 5.8-27 6.6-28 .4-.4 17.2-2.6 37.4-4.7l36.6-3.9 15.4 11.6 15.5 11.6 3.7-3.3c2.1-1.8 11-10.1 19.8-18.5 8.8-8.3 20.8-19.1 26.7-23.9 8.6-7 11-9.4 11.8-12.4.5-2 1-11.2 1-20.5v-16.9l-4.5-5.5c-2.5-3-4.5-5.7-4.5-6.1 0-.4 2.5-1.5 5.5-2.5l5.5-1.7 6.9-13.7c6.5-13 6.9-14.4 8.6-26.1 1.8-11.9 1.8-12.6 0-19.6l-1.8-7.3 3.8-9.4 3.8-9.3-1.8-13.1-1.8-13.1 6.8-12.5c6.2-11.7 7.4-13.3 16.9-22 17.8-16.6 16.3-15.7 30.9-19.9l13.2-3.8 11.7 1 11.8 1.1 10.7-5.8c13.1-7 38.6-26.7 37.9-29.3-1.4-4.9-8.9-28.7-9.2-29.2-.2-.3-10.8 1.2-23.5 3.3l-23.2 3.9-17.1-5.7c-12.3-4.1-21.4-7.9-32.6-13.7-14.1-7.4-16.4-8.2-26-9.9-5.8-1-13.5-1.8-17.2-1.8-5.8 0-7.5-.4-11.8-3.1-4-2.5-4.9-3.5-4.5-5.2.3-1.2 1.6-9.1 3-17.5l2.5-15.3 6-8c4-5.3 6-9 6-10.9 0-2.1 1.1-3.6 4.7-6.4 2.6-2 7.3-6.7 10.5-10.5l5.9-7-3-5.8c-1.6-3.2-3.2-8.4-3.6-11.6-.4-3.1-1.1-5.7-1.5-5.7-.4 0-2.9 1.9-5.6 4.2-2.7 2.3-5.6 4.8-6.5 5.5-1.4 1.2-3.9 1.1-16.5-.6-8.1-1.2-18.3-2.1-22.5-2.1-6.4 0-9.6-.6-18.1-3.7-9.4-3.4-11.1-4.4-19.6-11.8-12.2-10.8-17.5-13-38-15.6l-15.4-2-10.2 6.1-10.2 6-10.5.1c-5.7 0-12.6.4-15.3.8-6.2 1-13.4-.5-19.8-4.3-4.4-2.6-4.7-3-5.4-8.2-.4-3.5-1.2-5.8-2.3-6.3-2.3-1.3-37.5-9.1-47.5-10.5l-8.1-1.2-9.9 4.9-9.9 4.9-7.7-1.1c-5.2-.7-8.9-.7-11.1 0-4.6 1.3-15.9.2-24.7-2.6-8.5-2.7-12.1-2.2-18.6 2.6-3.3 2.4-5 2.9-9.8 2.9H520l-6.6-13.3c-3.7-7.2-7.1-13.5-7.7-13.8-.5-.4-2.8-1-5.1-1.3-4.1-.7-34.6-7.3-37.8-8.2-1.6-.5-1.8-1.9-1.8-10.3v-9.8l-4.5-1.7c-2.4-1-4.6-2.5-4.9-3.4-.2-.9-.8-5.8-1.1-10.9l-.7-9.2-7.1-.3-7.1-.3-6.3-8.9c-3.4-4.8-6.4-9.1-6.7-9.3-.3-.3-4 .7-8.4 2.2l-7.8 2.8-11.5-8.6c-6.4-4.8-11.8-8.7-12-8.7-.2 0-5.1 2.8-10.9 6.3z"/> <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/6/6b/Flag_of_Norway%2C_state.svg" /> </svg>
Use the image element and reference your SVG file. <svg> <image href="flag.svg"/> </svg> then set the map.svg as the background image.
What do XML do as "src" in <img> tag, and how to get that image?
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/
SVG XLink Issue - Not working
<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.