I have svg file that looks like this
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="300.000000pt" height="226.000000pt" viewBox="0 0 300.000000 226.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,226.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M891 2162 c-95 -33 -418 -606 -616 -1092 -75 -185 -106 -330 -70 -67 -2 3 7 36 19 75 13
27 67 2 -3 -7 -36 -19 -75z"/>
<path d="M1316 2019 c-33 -39 -8035 -57 -37 -58 -82 -59 -25 0 -55 -2 -66 -4 -11 -2 -58 -8 -104
-15 -158 -22 -330 -77 -315 -101 10 -17 85 -5 311 51 -12 -15 -27z"/>
<path d="M925 1349 c-4 -6 -5 -12 -2 -15 2 -3 7 2 10 11 7 17 1 20 -8 4z"/>
</g>
</svg>
I want to get d attribute of each path element and combine it in one svg path string (that consists of all three paths )
I've tried this buy only get first one every time
fs.readFile(path_to_svg,'utf8',(err,data)=>{
if(err) console.log(err);
$ = cheerio.load(data,{ xmlMode : true });
$('svg').children().each(function(i,path){
console.log($('path').attr('d'))
});
});
You can get those with:
$('svg path').get().map(path => $(path).attr('d'))
Related
I convert PGN chess pieces into SVG files then load them up into Glyphr Studio that makes a .OTF file so that I use then in various chess programs.
Unfortunately after installing the font the white pieces are all transparent instead of being a solid white piece.
Could someone have a look at my code to see why I have this problem, this is the white rook.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="315.000000pt" height="271.000000pt" viewBox="0 0 315.000000 271.000000"
preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,271.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M387 2423 c-4 -3 -7 -386 -7 -850 l0 -843 -57 -26 c-67 -29 -126 -82
-155 -138 -29 -57 -36 -173 -13 -233 24 -63 94 -135 158 -164 l52 -24 1205 0
c1161 0 1207 1 1254 19 200 77 252 338 95 481 -24 23 -70 51 -101 64 l-58 23
-2 847 -3 846 -305 0 -305 0 -3 -162 -2 -163 -130 0 -130 0 -2 163 -3 162
-305 0 -305 0 -3 -162 -2 -163 -130 0 -130 0 -2 163 -3 162 -301 3 c-165 1
-303 -1 -307 -5z m473 -298 l0 -165 270 0 270 0 0 165 0 165 170 0 170 0 0
-165 0 -165 270 0 270 0 0 165 0 165 170 0 170 0 0 -780 0 -780 -1050 0 -1050
0 0 780 0 780 170 0 170 0 0 -165z m1912 -1562 c118 -54 118 -202 0 -256 l-47
-22 -1150 0 -1150 0 -47 22 c-57 26 -88 71 -88 128 0 46 28 98 62 116 70 38
70 38 1238 36 l1135 -2 47 -22z"/>
</g>
</svg>
I am trying to get an svg path to be 'clickable' when put into an file rather than put in-line in the document.
Basically I just want to be able to click on the filled elements of an image, not any empty areas.
I have converted my PNG image to svg and got this working, so that when I click on the filled areas the code executes as I need to, but not when clicking on any empty areas.
To do this, I have only had to put in a 'class' to the 'path' tag to make the filled areas interactive via the code.
However, if I now put this svg code into a file and load it into an element, as seems to be the way to do it from what I've read, then it won't working.
I have already added the jquery add on files below, and while these have allowed other svg functions to work it hasn't allowed for this one.
<link rel="stylesheet" type="text/css" href="assets/js/jquery.svg.css">
I am unable to interact with the internal svg path within the file even with some simple css. if I put the css into the file directly in a 'style' tag then the css is applied.
I am not sure where to go with this. I have several thousand images that need to have this functionality and each one has a lot of coding to create the path for the svg image so I really don't want to have to put all of these into the html document as it will be a nightmare to deal with.
I've seen people acheieving similar interactions but as yet I've not found one applying jquery or java or even a solution that will get the ability to vary css working.
here is the code for the svg, which is just using a test image rather than one of my own but works the same.
<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0
300.000000 300.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,300.000000) scale(0.050000,-0.050000)" fill="#00000" stroke="none">
<!-- The <a> tag we've added -->
<path class="imageSelector" style="cursor: pointer;" d="M4390 5952 c-113 -53 -289 -221 -427
-409 -84 -114 -98 -125 -153
-117 -171 27 -523 -80 -714 -217 l-98 -71 -97 71 c-186 137 -427 215 -661 215
l-115 0 -91 123 c-228 310 -551 543 -524 378 5 -30 19 -167 31 -305 12 -137
30 -281 40 -318 17 -66 13 -74 -119 -213 -336 -354 -415 -830 -210 -1265 l50
-106 -38 -104 c-235 -632 -120 -1587 226 -1874 64 -53 11 -59 -607 -64 l-636
-6 -79 -55 c-242 -167 -208 -515 61 -637 75 -34 153 -37 1058 -38 l977 0 -13
-75 c-25 -132 -109 -254 -295 -425 -213 -197 -351 -454 -221 -414 553 173 689
197 799 139 298 -158 287 -155 466 -155 179 0 168 -3 466 155 110 58 246 34
799 -139 130 -40 -8 217 -221 414 -186 171 -270 293 -295 425 l-13 75 977 0
c905 1 983 4 1058 38 269 122 303 470 61 637 l-79 55 -636 6 c-618 5 -671 11
-607 64 346 287 461 1244 225 1877 l-39 107 51 103 c208 416 127 909 -208
1262 -135 141 -136 144 -120 222 10 43 27 178 39 299 13 121 27 258 32 305 5
47 7 85 5 85 -3 0 -50 -22 -105 -48z m-1960 -899 c250 -67 549 -348 550 -518
0 -19 9 -35 20 -35 11 0 20 16 20 35 1 170 300 451 550 518 734 196 1249 -740
706 -1280 -233 -231 -581 -286 -874 -138 -71 36 -130 63 -132 60 -2 -3 -61
-115 -132 -250 -70 -135 -132 -245 -138 -245 -6 0 -68 110 -138 245 -71 135
-130 247 -132 250 -2 3 -61 -24 -132 -60 -297 -151 -682 -79 -905 167 -500
553 23 1441 737 1251z m-55 -3239 c25 -23 45 -55 45 -72 0 -19 25 -1 61 43 78
95 190 105 270 26 47 -47 49 -60 49 -311 0 -251 -2 -264 -49 -311 -80 -79
-192 -69 -270 26 -40 49 -61 63 -61 41 0 -104 -198 -150 -294 -68 l-56 49 0
260 c0 246 3 262 47 310 75 79 175 82 258 7z m1146 -31 c36 -44 59 -60 59 -41
0 114 205 162 298 70 51 -52 52 -59 52 -314 l0 -261 -56 -49 c-93 -80 -294
-37 -294 63 0 16 -9 29 -20 29 -11 0 -20 -11 -20 -24 0 -108 -203 -155 -291
-67 -54 55 -75 504 -27 594 57 108 210 108 299 0z" />
<path d="M2090 4647 c-352 -186 -235 -697 160 -697 391 0 514 514 166 692 -91
46 -243 48 -326 5z" />
<path d="M3590 4647 c-352 -186 -235 -697 160 -697 391 0 514 514 166 692 -91
46 -243 48 -326 5z" />
</g>
</svg>
If I put this into the document, it works fine. If I load it from a file, the image renders but I can't interact with the class for the path
this is the code for the flie load option:
<object class="imageClass" type="image/svg+xml" data="ImageFile.svg"></object>
thanks for any help on this
Update:
I have tried several ways to get this to work looking at options online and the help from suggestions below but I haven't had any success in getting the svg to be clickable at all when loaded from a file.
The only way I have been able to even access the inner elements of the svg file is using the following method with jquery.svg:
(document).ready(function() {
$("#divforSVG").svg(
{
onLoad: function() { var svg = $("#divforSVG").svg('get');
svg.load('svgFile.svg', {addTo: true, changeSize: false});
},
settings: {}} );
$('#Button').click(function(e) {
var rect = $('#ImagePath');
rect.css('fill','green');
rect.attrib('fill','green');
});
});
This i found from the following link:
Modify a svg file using jQuery
This loads the svg file into an element, rather than placing the svg file within an object element in the html page, as seems to be the way suggested. This works, changing the colour by clicking on the button, and can apply this to any inner part of the svg file. However, I cannot find a way to bind a click event to the inner elements of the svg file.
The main method of accessing inner elements of the svg file using the object method, as set out in this link, I can't get to work at all to access any part of the svg element.
How to access SVG elements with Javascript
this seems to be the way to do it with normal javascript but I've not made any progress with it. If anyone has any suggestions on how I may be able to bind a click event using the jquery.svg method as set out above, or how to get the object element method working, I'd greatly appreciate it
If you reference a file in another file, that file is no longer part of the document object model, and Javascript can no longer interact with it. The file has its own, separate DOM.
You were right to use an <object> tag, because that gives you the possibility to bridge the gap between the two DOMs (something that would be impossible with an <img> tag). Basically, with
var childDocument = $('object.imageClass').prop('contentDocument')
you get access to the document interface of the SVG content - but only provided the linked file fullfills the same-origin policy.
Note carefully the role that jQuery plays in this. jQuery has been loaded into the parent document and is not present in the child document. So instead of selecting the SVG root element in the child document with $('svg'), you must use $(childDocument).find('svg'). You cannot traverse from one document to the other with .parent(), .children() or other traversal functions. You cannot delegate events from the child document to elements in the parent document.
The jquery-svg plugin would have to work with
var svg = $(childDocument).find('svg').svg('get')
I need to know how to combine multiple from a SVG file.
Right now I have three icons and somehow I can not find any logic behind that.
I read that I need to remove the last part and combine it with the following.
Example:
From
<path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437zm0 0"/><path d="m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>
TO
<path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437 m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>
But the output is empty.
And if I only take one path of both I will see only this path.
Is there any easy explanation how to do that?
If you then take your path:
M54.4 2a54.4 54.4 0 106.2 108.4c9.1 2.2 18.9 3.5 28.3 5.2a40 40 0 0132.4 32.4l35.4 99.7a49.9 49.9 0 0049.2 41.3h210c22 0 41.5-14.4 47.9-35.5l47-155.8c.8-3 .3-6.3-1.5-8.9-2-2.5-4.9-4-8-4H148.2l-7.2-40.3c-7-24.4-13.6-38.3-49.2-48.7A54.2 54.2 0 0054.4 2zm0 20a34.4 34.4 0 110 68.8 34.4 34.4 0 010-68.8zm97.4 182.7h336l-43.1 142.9a29.8 29.8 0 01-28.7 1.3H206c-14.6 0-27-10.4-29.5-24.8z
and multiply it by 10 using: https://yqnn.github.io/svg-path-editor/
You get rid of all decimal notation and make the file even smaller:
M 544 20 a 544 544 90 1 0 62 1084 c 91 22 189 35 283 52 a 400 400 90 0 1 324 324 l 354 1997 a 499 499 90 0 0 492 413 h 2100 c 220 0 415 -144 479 -355 l 470 -1558 c 8 -30 3 -63 -15 -89 c -20 -25 -49 -40 -80 -40 H 1482 l -72 -403 c -70 -244 -136 -383 -492 -487 A 542 542 90 0 0 544 20 z m 0 200 a 344 344 90 1 1 0 688 a 344 344 90 0 1 0 -688 z m 974 1827 h 3360 l -431 1429 a 298 298 90 0 1 -287 213 H 2060 c -146 0 -270 -104 -295 -248 z
The viewBox ofcourse needs to be multiplied as well. As the (default) stroke-width="1"
<svg width="400" viewBox="0 0 5150 3900">
<path d="M544 20a544 544 90 1 0 62 1084c91 22 189 35 283 52a400 400 90 0 1 324 324l354 1997
a499 499 90 0 0 492 413h2100c220 0 415-144 479-355l470-1558c8-30 3-63-15-89
c-20-25-49-40-80-40h-3531l-72-403c-70-244-136-383-492-487a542 542 90 0 0-374-938z
m0 200a344 344 90 1 1 0 688a344 344 90 0 1 0-688z
m974 1827h3360l-431 1429a298 298 90 0 1-287 213h-2100c-146 0-270-104-295-248z"
stroke="red" stroke-width="10" fill="gray"/>
</svg>
You can save 30 bytes more in the path if you now divide everything by 6
M90 3a90 90 90 1 0 10 180c15 4 31 6 47 9a66 66 90 0 1 54 54l59 332a83 83 90 0 0 82 69h349c37 0 69-24 80-59l78-259c1-5 0-10-2-15c-3-4-8-7-13-7h-588l-12-67c-12-41-23-64-82-81a90 90 90 0 0-62-156zm0 33a57 57 90 1 1 0 114a57 57 90 0 1 0-114zm162 303h558l-72 237a49 49 90 0 1-48 35h-348c-24 0-45-17-49-41z
You can visualize your paths if you put them in a suitable <svg> element. It needs to have a "sensible" viewBox attribute in it. For your example the following works: <svg viewBox="0 0 620 840">. I also added two rectangles (<rect>) to show the extent of your overlaying symbols.
Note: To actually combine two paths into one is a slightly more complex task. This can be done with a suitable graphical SVG-editor, like Inkscape (or many others ...).
<svg viewBox="0 0 620 840">
<rect x="0" y="0" width="480" height="440" style="stroke:black;fill:none"/>
<path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437zm0 0"/><path d="m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>
<rect x="80" y="300" width="540" height="440" style="stroke:black;fill:none"/>
<g style="fill:none;stroke:red">
<path d="m150.355469 322.332031c-30.046875 0-54.402344 24.355469-54.402344 54.402344 0 30.042969 24.355469 54.398437 54.402344 54.398437 30.042969 0 54.398437-24.355468 54.398437-54.398437-.03125-30.03125-24.367187-54.371094-54.398437-54.402344zm0 88.800781c-19 0-34.402344-15.402343-34.402344-34.398437 0-19 15.402344-34.402344 34.402344-34.402344 18.996093 0 34.398437 15.402344 34.398437 34.402344 0 18.996094-15.402344 34.398437-34.398437 34.398437 m446.855469 94.035156h-353.101563l-7.199218-40.300781c-4.4375-24.808594-23.882813-44.214844-48.699219-48.601563l-26.101563-4.597656c-5.441406-.96875-10.632812 2.660156-11.601562 8.097656-.964844 5.441407 2.660156 10.632813 8.101562 11.601563l26.199219 4.597656c16.53125 2.929688 29.472656 15.871094 32.402344 32.402344l35.398437 199.699219c4.179688 23.894531 24.941406 41.324218 49.199219 41.300781h210c22.0625.066406 41.546875-14.375 47.902344-35.5l47-155.800781c.871093-3.039063.320312-6.3125-1.5-8.898438-1.902344-2.503906-4.859375-3.980468-8-4zm-56.601563 162.796875c-3.773437 12.6875-15.464844 21.367188-28.699218 21.300781h-210c-14.566407.039063-27.035157-10.441406-29.5-24.800781l-24.699219-139.398437h336.097656zm0 0"/>
</g>
</svg>
I combined the two paths of your second part using Inkscape, put it through the online SVG optimizer SVGOMG! (thanks for the hint, Danny '365CSI' Engelman) and ended up with this:
<svg xmlns="http://www.w3.org/2000/svg"
width="400" viewBox="-1 0 515 390">
<path d="M54.4 2a54.4 54.4 0 106.2 108.4
c9.1 2.2 18.9 3.5 28.3 5.2
a40 40 0 0132.4 32.4l35.4 199.7a49.9 49.9 0 0049.2 41.3
h210c22 0 41.5-14.4 47.9-35.5l47-155.8
c.8-3 .3-6.3-1.5-8.9-2-2.5-4.9-4-8-4H148.2l-7.2-40.3
c-7-24.4-13.6-38.3-49.2-48.7A54.2 54.2 0 0054.4 2zm0 20
a34.4 34.4 0 110 68.8 34.4 34.4 0 010-68.8z
m97.4 182.7h336l-43.1 142.9a29.8 29.8 0 01-28.7 21.3H206
c-14.6 0-27-10.4-29.5-24.8z"
stroke="red" fill="gray"/>
</svg>
In my project, I need a SVG icon, but I am not good at SVG stuff. So far, I get the SVG image as following:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="768.000000pt" height="766.000000pt" viewBox="0 0 768.000000 766.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g fill="#b7e68f" transform="translate(0.000000,766.000000) scale(0.100000,-0.100000)"
stroke="none">
<path d="M3580 7650 c-14 -4 -48 -8 -76 -9 -53 -1 -200 -20 -344 -45 -324 -57
-682 -173 -977 -318 -473 -231 -843 -512 -1200 -906 -279 -309 -514 -682 -676
-1072 -152 -366 -252 -776 -278 -1138 -5 -81 -14 -166 -19 -190 -12 -52 -13
-289 -2 -296 5 -3 12 -61 15 -128 18 -341 111 -754 249 -1108 122 -311 312
-658 489 -890 187 -245 384 -456 604 -646 53 -46 228 -179 310 -236 271 -189
657 -380 970 -481 410 -132 755 -186 1186 -187 534 0 941 75 1422 264 481 188
888 453 1266 821 204 200 290 301 500 590 57 79 185 301 262 455 44 87 79 161
79 165 0 3 9 25 19 48 57 125 142 377 181 538 47 197 52 220 85 449 30 204 39
650 17 850 -36 331 -86 571 -177 845 -376 1142 -1274 2047 -2412 2432 -270 91
-567 153 -878 185 -128 13 -582 19 -615 8z m422 -1601 c35 -12 81 -34 103 -50
22 -15 367 -355 766 -756 791 -793 765 -763 790 -904 10 -57 10 -77 -5 -134
-23 -93 -49 -139 -112 -202 -72 -72 -145 -105 -250 -111 -94 -5 -169 13 -242
58 -26 16 -208 191 -405 390 -198 198 -361 360 -363 360 -2 0 -5 -606 -6
-1347 l-3 -1348 -32 -67 c-85 -180 -286 -276 -466 -223 -121 35 -239 146 -279
263 -10 29 -14 329 -18 1379 l-5 1342 -366 -363 c-201 -199 -381 -373 -400
-387 -148 -111 -375 -92 -508 42 -90 91 -134 226 -112 345 24 133 5 111 799
907 406 406 757 751 782 767 93 60 225 75 332 39z"/>
</g>
</svg>
Currently, the arrow is transparent, in my case, I want to make it red color, how to modify this svg image to support it?
In your example, the SVG circle and arrow are drawn in one patch.
It is necessary to divide one patch into two separate patches for a circle and an arrow.
Then it will be possible to paint them in different colors.
#circle {
fill:#b7e68f;
}
#arrow {
fill:red;
}
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1" width="768" height="766" viewBox="0 0 768 766" preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,766.000000) scale(0.100000,-0.100000)" stroke="none">
<path id="arrow" d="m3580 7650c-14-4-48-8-76-9-53-1-200-20-344-45-324-57-682-173-977-318C1710 7047 1340 6766 983 6372 704 6063 469 5690 307 5300 155 4934 55 4524 29 4162 24 4081 15 3996 10 3972-2 3920-3 3683 8 3676c5-3 12-61 15-128 18-341 111-754 249-1108 122-311 312-658 489-890 187-245 384-456 604-646 53-46 228-179 310-236C1946 479 2332 288 2645 187 3055 55 3400 1 3831 0c534 0 941 75 1422 264 481 188 888 453 1266 821 204 200 290 301 500 590 57 79 185 301 262 455 44 87 79 161 79 165 0 3 9 25 19 48 57 125 142 377 181 538 47 197 52 220 85 449 30 204 39 650 17 850-36 331-86 571-177 845-376 1142-1274 2047-2412 2432-270 91-567 153-878 185-128 13-582 19-615 8z"/>
</g>
<path id="circle" d="m358 1c-1.4 0.4-4.8 0.8-7.6 0.9-5.3 0.1-20 2-34.4 4.5-32.4 5.7-68.2 17.3-97.7 31.8C171 61.3 134 89.4 98.3 128.8 70.4 159.7 46.9 197 30.7 236c-15.2 36.6-25.2 77.6-27.8 113.8-0.5 8.1-1.4 16.6-1.9 19-1.2 5.2-1.3 28.9-0.2 29.6 0.5 0.3 1.2 6.1 1.5 12.8 1.8 34.1 11.1 75.4 24.9 110.8 12.2 31.1 31.2 65.8 48.9 89 18.7 24.5 38.4 45.6 60.4 64.6 5.3 4.6 22.8 17.9 31 23.6 27.1 18.9 65.7 38 97 48.1 41 13.2 75.5 18.6 118.6 18.7 53.4 0 94.1-7.5 142.2-26.4 48.1-18.8 88.8-45.3 126.6-82.1 20.4-20 29-30.1 50-59 5.7-7.9 18.5-30.1 26.2-45.5 4.4-8.7 7.9-16.1 7.9-16.5 0-0.3 0.9-2.5 1.9-4.8 5.7-12.5 14.2-37.7 18.1-53.8 4.7-19.7 5.2-22 8.5-44.9 3-20.4 3.9-65 1.7-85-3.6-33.1-8.6-57.1-17.7-84.5C710.9 149.3 621.1 58.8 507.3 20.3 480.3 11.2 450.6 5 419.5 1.8 406.7 0.5 361.3-0.1 358 1Zm42.2 160.1c3.5 1.2 8.1 3.4 10.3 5 2.2 1.5 36.7 35.5 76.6 75.6 79.1 79.3 76.5 76.3 79 90.4 1 5.7 1 7.7-0.5 13.4-2.3 9.3-4.9 13.9-11.2 20.2-7.2 7.2-14.5 10.5-25 11.1-9.4 0.5-16.9-1.3-24.2-5.8-2.6-1.6-20.8-19.1-40.5-39-19.8-19.8-36.1-36-36.3-36-0.2 0-0.5 60.6-0.6 134.7l-0.3 134.8-3.2 6.7c-8.5 18-28.6 27.6-46.6 22.3C365.6 591 353.8 579.9 349.8 568.2c-1-2.9-1.4-32.9-1.8-137.9l-0.5-134.2-36.6 36.3c-20.1 19.9-38.1 37.3-40 38.7-14.8 11.1-37.5 9.2-50.8-4.2-9-9.1-13.4-22.6-11.2-34.5 2.4-13.3 0.5-11.1 79.9-90.7 40.6-40.6 75.7-75.1 78.2-76.7 9.3-6 22.5-7.5 33.2-3.9z" stroke-width="0.1"/>
</svg>
To adjust the size of the image and make it adaptive:
Remove width="768" and height="766" from the svg header
Wrap the svg in the container <div class =" container ">
.container {
width:15%;
height:15%;
}
#circle {
fill:#b7e68f;
}
#arrow {
fill:red;
}
<div class="container">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 768 766" preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.15, written by Peter Selinger 2001-2017
</metadata>
<g transform="translate(0.000000,766.000000) scale(0.100000,-0.100000)" stroke="none">
<path id="arrow" d="m3580 7650c-14-4-48-8-76-9-53-1-200-20-344-45-324-57-682-173-977-318C1710 7047 1340 6766 983 6372 704 6063 469 5690 307 5300 155 4934 55 4524 29 4162 24 4081 15 3996 10 3972-2 3920-3 3683 8 3676c5-3 12-61 15-128 18-341 111-754 249-1108 122-311 312-658 489-890 187-245 384-456 604-646 53-46 228-179 310-236C1946 479 2332 288 2645 187 3055 55 3400 1 3831 0c534 0 941 75 1422 264 481 188 888 453 1266 821 204 200 290 301 500 590 57 79 185 301 262 455 44 87 79 161 79 165 0 3 9 25 19 48 57 125 142 377 181 538 47 197 52 220 85 449 30 204 39 650 17 850-36 331-86 571-177 845-376 1142-1274 2047-2412 2432-270 91-567 153-878 185-128 13-582 19-615 8z"/>
</g>
<path id="circle" d="m358 1c-1.4 0.4-4.8 0.8-7.6 0.9-5.3 0.1-20 2-34.4 4.5-32.4 5.7-68.2 17.3-97.7 31.8C171 61.3 134 89.4 98.3 128.8 70.4 159.7 46.9 197 30.7 236c-15.2 36.6-25.2 77.6-27.8 113.8-0.5 8.1-1.4 16.6-1.9 19-1.2 5.2-1.3 28.9-0.2 29.6 0.5 0.3 1.2 6.1 1.5 12.8 1.8 34.1 11.1 75.4 24.9 110.8 12.2 31.1 31.2 65.8 48.9 89 18.7 24.5 38.4 45.6 60.4 64.6 5.3 4.6 22.8 17.9 31 23.6 27.1 18.9 65.7 38 97 48.1 41 13.2 75.5 18.6 118.6 18.7 53.4 0 94.1-7.5 142.2-26.4 48.1-18.8 88.8-45.3 126.6-82.1 20.4-20 29-30.1 50-59 5.7-7.9 18.5-30.1 26.2-45.5 4.4-8.7 7.9-16.1 7.9-16.5 0-0.3 0.9-2.5 1.9-4.8 5.7-12.5 14.2-37.7 18.1-53.8 4.7-19.7 5.2-22 8.5-44.9 3-20.4 3.9-65 1.7-85-3.6-33.1-8.6-57.1-17.7-84.5C710.9 149.3 621.1 58.8 507.3 20.3 480.3 11.2 450.6 5 419.5 1.8 406.7 0.5 361.3-0.1 358 1Zm42.2 160.1c3.5 1.2 8.1 3.4 10.3 5 2.2 1.5 36.7 35.5 76.6 75.6 79.1 79.3 76.5 76.3 79 90.4 1 5.7 1 7.7-0.5 13.4-2.3 9.3-4.9 13.9-11.2 20.2-7.2 7.2-14.5 10.5-25 11.1-9.4 0.5-16.9-1.3-24.2-5.8-2.6-1.6-20.8-19.1-40.5-39-19.8-19.8-36.1-36-36.3-36-0.2 0-0.5 60.6-0.6 134.7l-0.3 134.8-3.2 6.7c-8.5 18-28.6 27.6-46.6 22.3C365.6 591 353.8 579.9 349.8 568.2c-1-2.9-1.4-32.9-1.8-137.9l-0.5-134.2-36.6 36.3c-20.1 19.9-38.1 37.3-40 38.7-14.8 11.1-37.5 9.2-50.8-4.2-9-9.1-13.4-22.6-11.2-34.5 2.4-13.3 0.5-11.1 79.9-90.7 40.6-40.6 75.7-75.1 78.2-76.7 9.3-6 22.5-7.5 33.2-3.9z" />
</svg>
</div>
I'm currently trying to create the SVG of an old image, however I have trouble creating the correct rotated and positioned text cutout.
When I try to add a <text> element it ends up stretched, under the form or is not visible at all.
Here is what I came up with so far:
<svg
height="360px"
width="100%"
preserveAspectRatio="none"
viewBox="0 0 100 360"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path
id="banner"
d="M0,186 L 100,0 100,186 0,360 Z"
fill="#2180b3"
vector-effect="non-scaling-stroke" />
</defs>
<use xlink:href="#banner" />
</svg>
And here is what I'm trying to archive:
The cutout should be white
Thanks!
You can just use an image to svg converter like this one
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="1280.000000pt" height="376.000000pt" viewBox="0 0 1280.000000 376.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.13, written by Peter Selinger 2001-2015
</metadata>
<g transform="translate(0.000000,376.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M12700 3702 c-52 -7 -95 -14 -96 -15 -14 -22 -434 -961 -432 -966 2
-5 143 -157 313 -339 l310 -330 3 413 c1 227 1 602 0 832 l-3 418 -95 -13z"/>
<path d="M11785 3569 c-176 -26 -331 -49 -343 -51 -21 -3 0 -33 199 -283 184
-231 223 -276 230 -260 10 28 240 617 246 633 3 6 1 11 -3 11 -5 -1 -153 -23
-329 -50z"/>
<path d="M5440 2648 c-2989 -435 -5436 -792 -5438 -793 -1 -1 -1 -391 0 -866
l3 -864 5592 760 c3076 418 5596 765 5601 770 10 10 441 948 449 976 3 10
-122 155 -352 410 -319 353 -360 394 -388 396 -18 1 -2478 -354 -5467 -789z"/>
<path d="M11818 2058 c-75 -189 -135 -344 -134 -344 1 -2 669 88 732 98 18 2
-14 46 -208 283 -126 154 -234 286 -242 293 -10 10 -38 -52 -148 -330z"/>
</g>
</svg>