I am simply trying to render the svg on the page however it is not loading.
<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"
stroke-linejoin="round" stroke-miterlimit="2">
<g transform="matrix(.48451 0 0 .60177 -438.2 27)">
<path fill="none" d="M906.2-44.5h55.3V0h-55.3z" />
<clipPath id="a">
<path d="M906.2-44.5h55.3V0h-55.3z" />
</clipPath>
<g clip-path="url(#a)">
<path
d="M928.5-.4v-5.8l6.3-3 6.3 3v5.5a33.8 33.8 0 01-12.6.3zM916-6.9A42.1 42.1 0 00927-1.6v1a33.4 33.4 0 01-12.5-5.7L916-7zm37.8.3A29.6 29.6 0 01942-1v-5.3l6.2-3 5.5 2.6zm-26-12.1l6.3 2.9v5.8l-6.3 3-6.3-3v-5.8l6.3-3zM907.4-16l6-2.7 6.3 2.9v5.8l-6.1 2.8c-2.9-2.5-5-5.4-6.2-8.8zm53.2-.3a21.4 21.4 0 01-6 8.9l-5.5-2.6v-5.8l6.3-3 5.2 2.5zm-12.3-12l6.2 3v5.8l-6.2 2.9-6.3-3v-5.8l6.3-3zm-13.5 0l6.3 3v5.8l-6.3 2.9-6.2-3v-5.8l6.2-3zm-27.5 0l6.1 3v5.8l-6.3 2.9a18.2 18.2 0 01.2-11.6zm52.2 10.4c.5-1.7.6-3 .6-4.6 0-1.7-.6-3.4-1-4.5l1.5-.7a17.1 17.1 0 01.2 10.5l-1.3-.7zm-31.8-20L934-35v5.8l-6.3 3-6.3-3V-35l6.3-3zm-13.8.2l5.8 2.7v5.8l-6.3 3-5.9-2.8a22 22 0 016.4-8.7zm40.4.3c2.8 2.5 5 5.4 6.2 8.7l-5.1 2.4-6.3-2.9V-35l5.2-2.4zM942-43.6c4.3 1 8.2 3 11.4 5.4l-5.1 2.4-6.3-3v-4.8zm-13.4-.6a34.7 34.7 0 0112.5.4v5l-6.3 3-6.2-3v-5.4zm-1.2 1.5c-2.3.5-4.6 1.2-6.1 2-1.6.6-4 2.1-5.1 3l-1.4-.6a30.1 30.1 0 0112.6-5.7v1.3z"
fill="#404040" />
</g>
</g>
</svg>
This is my SVG from my HTML, on the webpage it is loaded.
However it doesn't render to the page.
I should add I also have a width and height on the svg of 25px.
Maybe there is something on top the icon. Try with
svg {
width: 25px;
z-index: 200;
}
<clipPath id="b">
<path d="M712 0h39.1v23.6H712z"/>
</clipPath>
<g clip-path="url(#b)">
Id's for all components were the same. Ids need to be unique. Must have been a setting in Affinity Designer.
I hate weird Matrix conversions.
Your SVG is a soccerball, and I presume all that mumbo jumbo is to make it look round? It is not round!
I multiplied the path by 10 with: https://yqnn.github.io/svg-path-editor/
Made it a Relative path so positioning is all done with the first M225 444
adjusted viewBox
removed SVG mumbo jumbo
added <circle> for reference
Took some minutes to adjust to scale(1.08, 1.333) and position with M225 444
re-adjusted viewBox
<svg viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2">
<circle cx='50%' cy='50%' r='50%' fill='red'></circle>
<g transform="matrix(.48451 0 0 .60177 -438.2 27)">
<path fill="none" d="M906.2-44.5h55.3V0h-55.3z" />
<clipPath id="a">
<path d="M906.2-44.5h55.3V0h-55.3z" />
</clipPath>
<g clip-path="url(#a)">
<path d="M928.5-.4v-5.8l6.3-3 6.3 3v5.5a33.8 33.8 0 01-12.6.3zM916-6.9A42.1 42.1 0 00927-1.6v1a33.4 33.4 0 01-12.5-5.7L916-7zm37.8.3A29.6 29.6 0 01942-1v-5.3l6.2-3 5.5 2.6zm-26-12.1l6.3 2.9v5.8l-6.3 3-6.3-3v-5.8l6.3-3zM907.4-16l6-2.7 6.3 2.9v5.8l-6.1 2.8c-2.9-2.5-5-5.4-6.2-8.8zm53.2-.3a21.4 21.4 0 01-6 8.9l-5.5-2.6v-5.8l6.3-3 5.2 2.5zm-12.3-12l6.2 3v5.8l-6.2 2.9-6.3-3v-5.8l6.3-3zm-13.5 0l6.3 3v5.8l-6.3 2.9-6.2-3v-5.8l6.2-3zm-27.5 0l6.1 3v5.8l-6.3 2.9a18.2 18.2 0 01.2-11.6zm52.2 10.4c.5-1.7.6-3 .6-4.6 0-1.7-.6-3.4-1-4.5l1.5-.7a17.1 17.1 0 01.2 10.5l-1.3-.7zm-31.8-20L934-35v5.8l-6.3 3-6.3-3V-35l6.3-3zm-13.8.2l5.8 2.7v5.8l-6.3 3-5.9-2.8a22 22 0 016.4-8.7zm40.4.3c2.8 2.5 5 5.4 6.2 8.7l-5.1 2.4-6.3-2.9V-35l5.2-2.4zM942-43.6c4.3 1 8.2 3 11.4 5.4l-5.1 2.4-6.3-3v-4.8zm-13.4-.6a34.7 34.7 0 0112.5.4v5l-6.3 3-6.2-3v-5.4zm-1.2 1.5c-2.3.5-4.6 1.2-6.1 2-1.6.6-4 2.1-5.1 3l-1.4-.6a30.1 30.1 0 0112.6-5.7v1.3z" fill="#404040" />
</g>
</g>
</svg>
<!-- My Version: -->
<svg viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
<circle cx='50%' cy='50%' r='50%' fill='green'></circle>
<path transform="scale(1.08, 1.333)" fill='#404040' d='M225 444v-58l63-30l63 30v55a338 338 90 01-126 3zm-125-65a421 421 90 00110 53v10a334 334 90 01-125-57l15-7zm378 3a296 296 90 01-118 56v-53l62-30l55 26zm-260-121l63 29v58l-63 30l-63-30v-58l63-30zm-204 27l60-27l63 29v58l-61 28c-29-25-50-54-62-88zm532-3a214 214 90 01-60 89l-55-26v-58l63-30l52 25zm-123-120l62 30v58l-62 29l-63-30v-58l63-30zm-135 0l63 30v58l-63 29l-62-30v-58l62-30zm-275 0l61 30v58l-63 29a182 182 90 012-116zm522 104c5-17 6-30 6-46c0-17-6-34-10-45l15-7a171 171 90 012 105l-13-7zm-318-200l63 29v58l-63 30l-63-30v-58l63-30zm-138 2l58 27v58l-63 30l-59-28a220 220 90 0164-87zm404 3c28 25 50 54 62 87l-51 24l-63-29v-58l52-24zm-123-62c43 10 82 30 114 54l-51 24l-63-30v-48zm-134-6a347 347 90 01125 4v50l-63 30l-62-30v-54zm-12 15c-23 5-46 12-61 20c-16 6-40 21-51 30l-14-6a301 301 90 01126-57v13z' />
</svg>
<style>
svg {
background: pink;
width:180px;
}
</style>
Related
I'm looking to change position of a few created SVG shapes with CSS. I've had no trouble positioning them from the beginning, and I've been able to re-position other objects like rectangles and circles with CSS. But I can't figure out how to do it with a path. I've done searches both here and through Google search for several hours, but haven't found any usable clues. I'm beginning to suspect that there is something about SVG paths I haven't understood fully yet, but at the same time I can't help but think that it might just be down to me not understanding the correct syntax in CSS.
Below is an SVG elliptical arc path I've created. I'd like to move it anywhere within view (so I can spot the difference and work from there). Can someone tell me if I'm lacking some knowledge about how paths work (contrary to how rectangles work in this regard), or if I just need the proper syntax in CSS?
Please note: I do NOT want to animate it in any way, just move it to a new position if possible.
<svg xmlns="http://www.w3.org/2000/svg">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue" stroke="blue" stroke-width="1" stroke-miterlimit="5"/>
</svg>
You can move the path using transform/translate either as a CSS property (first example) or as an attribute (second example).
I also added the viewBox attribute to the SVG element -- then it's easier to see where you place the path in the SVG.
svg {
background: orange;
}
path {
transform: translate(10px, 10px);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 20">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue"
stroke="blue" stroke-width="1" stroke-miterlimit="5"/>
</svg>
svg {
background: orange;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 20">
<path id="cockpit" d="M 0 0 A 50 37.5 0 0 1 50 0" fill="lightblue"
stroke="blue" stroke-width="1" stroke-miterlimit="5" transform="translate(10 10)" />
</svg>
The capital A in your path M 0 0 A 50 37.5 0 0 1 50 0 makes it Arc at an absolute position
If you convert that whole path to use a relative a position: M0 0 a 50 37.5 0 0 1 50 0
(use https://yqnn.github.io/svg-path-editor/# for more complex paths)
You can use the first M x y notation to position the path anywhere in the viewBox
<style>
svg { background:hotpink; height:50px }
path { fill:lightblue; stroke:blue }
</style>
<svg viewBox="0 0 55 10">
<path d="M 0 7 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 14 7 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 4 9 a 50 37.5 0 0 1 50 0" />
</svg>
<svg viewBox="0 0 55 10">
<path d="M 4 12 a 50 37.5 0 0 1 50 0" />
</svg>
I finally got on track with 'offset-path', and with some tinkering I managed to understand enough about how it works to move the path to a new position:
offset-path: path("M237.5 50");
I am trying to add a text inside svg path i copy from figma.
Here is how it's look in figma:
Here is my code base:
<svg width="185" height="89" viewBox="0 0 185 89" fill="none" xmlns="http://www.w3.org/2000/svg">
<text>hello</text>
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.87195 4.36808C5 6.07937 5 8.31958 5 12.8V27.4268L0.481487 32.6984C-0.160496 33.4474 -0.160496 34.5526 0.481487 35.3016L5 40.5732V76.2C5 80.6804 5 82.9206 5.87195 84.6319C6.63893 86.1372 7.86278 87.3611 9.36808 88.1281C11.0794 89 13.3196 89 17.8 89H172.2C176.68 89 178.921 89 180.632 88.1281C182.137 87.3611 183.361 86.1372 184.128 84.6319C185 82.9206 185 80.6804 185 76.2V12.8C185 8.31958 185 6.07937 184.128 4.36808C183.361 2.86278 182.137 1.63893 180.632 0.871948C178.921 0 176.68 0 172.2 0H17.8C13.3196 0 11.0794 0 9.36808 0.871948C7.86278 1.63893 6.63893 2.86278 5.87195 4.36808Z" fill="#E06956" />
</svg>
The main thing is to swap the order of the path and text elements so the text element is drawn on top of the path. After that you just need to position the text where you want it and ensure it has a fill colour so you can see it.
<svg width="185" height="89" viewBox="0 0 185 89" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.87195 4.36808C5 6.07937 5 8.31958 5 12.8V27.4268L0.481487 32.6984C-0.160496 33.4474 -0.160496 34.5526 0.481487 35.3016L5 40.5732V76.2C5 80.6804 5 82.9206 5.87195 84.6319C6.63893 86.1372 7.86278 87.3611 9.36808 88.1281C11.0794 89 13.3196 89 17.8 89H172.2C176.68 89 178.921 89 180.632 88.1281C182.137 87.3611 183.361 86.1372 184.128 84.6319C185 82.9206 185 80.6804 185 76.2V12.8C185 8.31958 185 6.07937 184.128 4.36808C183.361 2.86278 182.137 1.63893 180.632 0.871948C178.921 0 176.68 0 172.2 0H17.8C13.3196 0 11.0794 0 9.36808 0.871948C7.86278 1.63893 6.63893 2.86278 5.87195 4.36808Z" fill="#E06956" />
<text y="43" x="61" fill="white">hello</text>
</svg>
I have a weird issue. I a musing a sprite for all my SVGs. They all work just fine, and even the one in issue works fine when I run my code locally.
But when I deploy it (firebase), one of the SVGs just doesn't show up. What could be the reason?
Here's the code for two of the SVGs. smile is the one that gives me issues, the other one doesn't.
<symbol id="create" viewBox="0 0 24 24">
<title>create</title>
<path d="M11 6.999c2.395.731 4.27 2.607 4.999 5.001.733-2.395 2.608-4.269 5.001-5-2.393-.731-4.268-2.605-5.001-5-.729 2.394-2.604 4.268-4.999 4.999zm7 7c1.437.438 2.562 1.564 2.999 3.001.44-1.437 1.565-2.562 3.001-3-1.436-.439-2.561-1.563-3.001-3-.437 1.436-1.562 2.561-2.999 2.999zm-6 5.501c1.198.365 2.135 1.303 2.499 2.5.366-1.198 1.304-2.135 2.501-2.5-1.197-.366-2.134-1.302-2.501-2.5-.364 1.197-1.301 2.134-2.499 2.5zm-6.001-12.5c-.875 2.873-3.128 5.125-5.999 6.001 2.876.88 5.124 3.128 6.004 6.004.875-2.874 3.128-5.124 5.996-6.004-2.868-.874-5.121-3.127-6.001-6.001z"/>
</symbol>
<symbol id="smile" viewBox="0 0 24 24">
<title>smile</title>
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 14h-12c.331 1.465 2.827 4 6.001 4 3.134 0 5.666-2.521 5.999-4zm0-3.998l-.755.506s-.503-.948-1.746-.948c-1.207 0-1.745.948-1.745.948l-.754-.506c.281-.748 1.205-2.002 2.499-2.002 1.295 0 2.218 1.254 2.501 2.002zm-7 0l-.755.506s-.503-.948-1.746-.948c-1.207 0-1.745.948-1.745.948l-.754-.506c.281-.748 1.205-2.002 2.499-2.002 1.295 0 2.218 1.254 2.501 2.002z"/>
</symbol>
They are both wrapped between these two together with all the other symbols
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
.....svgs......
</defs>
</svg>
You can resolve this by changing the <symbol> tag to one of <svg>.
I'm looking through the W3C documentation but I can't find the <symbol> tag, probably you or "firebase" are using some API or something to adjust the code, try something like this:
<svg id="smile" viewBox="0 0 24 24">
<title>smile</title>
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 14h-12c.331 1.465 2.827 4 6.001 4 3.134 0 5.666-2.521 5.999-4zm0-3.998l-.755.506s-.503-.948-1.746-.948c-1.207 0-1.745.948-1.745.948l-.754-.506c.281-.748 1.205-2.002 2.499-2.002 1.295 0 2.218 1.254 2.501 2.002zm-7 0l-.755.506s-.503-.948-1.746-.948c-1.207 0-1.745.948-1.745.948l-.754-.506c.281-.748 1.205-2.002 2.499-2.002 1.295 0 2.218 1.254 2.501 2.002z"/>
</svg>
You may be using an API that I think is also practical, which is the fontAwesome API, it is simple to move and fits well with the text.
I can't understand this SVG path code. Normally SVG path code is not like this. This code draws letters "The Verge". I want to draw some other stuff by doing the same method. By I can't understand the code, I tried many different things but could not draw the letters, I want to draw by applying the same code method as mentioned below.
Below is the code
<svg fill="#fff" xmlns="http://www.w3.org/2000/svg" viewbox="0 291.4 1280 217.2">
<path d="M0 292.1v58.1h39.7v153.2h67.1V292.1M220.1
372.4h-31.4v-22.3h15.8v-58h-82.8v211.3h67v-79.9h31.4v79.9h67.2V292.1h-67.2M302 503.4h124.3v-58.2h-60.2v-24.6h38.3v-48.2h-38.3v-22.2h60.2v-58.1H302M954.8 363.6c0-45.6-33.7-71.5-81.5-71.5h-74.7v211.2h67.1v-54.1l38.4 54.1h75.7l-54.4-81c19.6-10.7 29.4-30.2 29.4-58.7M865.5 387v-39.3c9.3 0 20.7 2.8 24.1 13 .3.9.5 1.9.8 2.9 0 .1 0 .3.1.4.1 1 .3 2.2.3 3.4 0 15.7-14.3 19.6-25.3 19.6M559.2 420.8h-.6l-4.8-17.4-15-53.1h26.4l17.4-58.2h-134l76.8 211.2h68.8l8.3-22.6s36.8-99.8 56.9-154.2v176.8h124.3v-58.2h-60.2v-24.6h38.2v-48.1h-38.2v-22.2h60.2V292H598l-38.8 128.8zM1280 350.3v-58.1h-124.3v211.2H1280v-58.2h-60.3v-24.6h38.3v-48h-38.3v-22.3">
</path>
<path d="M1142.8 459.1V373H1048v48h35.3v17.1c-2.7 2.4-8.5 3.7-14.5 3.7-24.6 0-42.8-19.4-42.8-43.1s17.7-44.7 42.3-44.7c14.9 0 50.2.1 50.2.1v-62.6h-16.1c-30 0-59.9-2.4-87.4 11.8-21.7 11.2-38.9 30.2-48 52.8-5.3 13.3-8 27.7-8 42 0 59.9 47 110.4 107.9 110.4 30.2 0 59.7-11.3 75.8-25.4.1-14.6.1-16.8.1-24">
</path>
<path d="M0 292.1v58.1h39.7v153.2h67.1V292.1M220.1
372.4h-31.4v-22.3h15.8v-58h-82.8v211.3h67v-79.9h31.4v79.9h67.2V292.1h-67.2M302 503.4h124.3v-58.2h-60.2v-24.6h38.3v-48.2h-38.3v-22.2h60.2v-58.1H302M954.8">
</path>
</svg>
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/