Manipulation of SVG icon's dimensions - css
I have the following SVG file
<svg width="523" height="524" style='background-color: teal;' xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-ec2d25d9" viewBox="0 0 60 30">
<g stroke="#000" fill="#fff">
<path d="M0 0h60v60H0z" fill="#FFF"/>
<path d="M0 0l30 37.1v-18l30 37.2" fill="none"/>
</g>
<g>
<path fill="none" d="M-1-1h583v403H-1z"/>
</g>
</symbol>
<path d="M85 84 127 84 127 126 85 126 "/>
<use href="#icon-ec2d25d9" x="85" y="84" width="22" height="36" fill="none" stroke="black" class="icon 4"/>
</svg>
(https://jsfiddle.net/L5xz73j4/) and I would like to modify the dimensions of the small icon inside the black rectangle to match the width and height of the rectangle. I'm generating these kinds of SVG's on the fly so I cannot start playing with the width and height attributes by hand. My question is that can I use the path element of the black rectangle to achieve this or what's the appropriate way?
I've changed the viewBox of the symbol to viewBox="0 0 60 60" acording to the size of the group inside. Now the symbol is square. In order to make the use fill the black square I've changed the width and the height of the use to width="42" height="42" i.e, the size of the black square.
I hope this is what you are asking
<svg width="523" height="524" style='background-color: teal;' xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-ec2d25d9" viewBox="0 0 60 60">
<g stroke="#000" fill="#fff">
<path d="M0 0h60v60H0z"/>
<path d="M0 0l30 37.1v-18l30 37.2" fill="none"/>
</g>
<!--<g><path fill="none" d="M-1-1h583v403H-1z"/></g>-->
</symbol>
<path d="M85 84 127 84 127 126 85 126 " />
<use href="#icon-ec2d25d9" x="85" y="84" width="42" height="42" fill="none" stroke="black" class="icon 4"/>
</svg>
Related
Center SVG in its viewport
I have the following SVG: <svg width="15px" height="18px" viewBox="0 0 15 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <title>Shape</title> <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="question-controls" transform="translate(-52.000000, -1.000000)" fill="#72758D" fill-rule="nonzero"> <path d="M62,1 L54,1 C52.9,1 52,1.9 52,3 L52,13 L54,13 L54,3 L62,3 L62,1 Z M65,5 L58,5 C56.9,5 56,5.9 56,7 L56,17 C56,18.1 56.9,19 58,19 L65,19 C66.1,19 67,18.1 67,17 L67,7 C67,5.9 66.1,5 65,5 Z M65,17 L58,17 L58,7 L65,7 L65,17 Z" id="Shape"></path> </g> </g> </svg> It is a "Duplicate Icon" from Material IO. https://material.io/resources/icons/?search=duplicat&icon=content_copy&style=baseline However, as can you see it is not centered in its view port. I tried by giving the same viewBox value like viewBox="0 0 100 100" with little success.
clip-path url fails to find id
I have an SVG that I am trying to use to clip a div, but the id I give to the <clipPath> tag does not work. I have tried changing the ID, and have made sure that the SVG does indeed exist in the same file, and the ID is visible. The svg is like so: <svg id="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 149.559"> <defs> <clipPath id="clipper"> <g id="svgg" stroke="none" fill-rule="evenodd"> <path id="path0" d= .../> <path id="path1" d= .../> <path id="path2" d= .../> <path id="path3" d= .../> <path id="path4" d= .../> </g> </clipPath> </defs> </svg> I added the <defs> and <clipPath> tag so I could use the svg I had as a clipping mask. The html element being used is: <div class="logo-bg" style="clipPath: url(#clipper)"></div> the div does have a width and height. Within developer tools, the css property of the div I am trying to clip with clip-path: url(#clip-id) shows "could not load the image". Ideally I would be able to clip the div with the SVG. here's the code I am working with: https://jsfiddle.net/mzLtsqva/6/ I am new to working with SVGs and so would appreciate any help to solve this issue.
Inside the <clipPath> don't wrap the paths in a group element.
In the next example I'm using a clipping path that is not working: #no and one that is working: #yes. In the one that is not working I'm wrapping the elements inside in a <g> element.
svg{border:1px solid;}
<svg width="250" height="250" viewBox="0 0 250 250" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<rect id="rect" x ="0" y ="0" height ="150" width ="70" style ="stroke:#000;" transform="translate(90, 50)"/>
<clipPath id="no">
<g>
<use xlink:href="#rect" fill="none"></use>
<use xlink:href="#rect" fill="none" transform="rotate(60 125 125)"></use>
<use xlink:href="#rect" fill="none" transform="rotate(-60 125 125)"></use>
</g>
</clipPath>
</defs>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" height="250" width="250" x="-15" y ="50" clip-path="url(#no)"></image>
</svg>
<svg width="250" height="250" viewBox="0 0 250 250" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="yes">
<use xlink:href="#rect" fill="none"></use>
<use xlink:href="#rect" fill="none" transform="rotate(60 125 125)"></use>
<use xlink:href="#rect" fill="none" transform="rotate(-60 125 125)"></use>
</clipPath>
</defs>
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/beagle400.jpg" height="250" width="250" x="-15" y ="50" clip-path="url(#yes)"></image>
</svg>
Material SVGs exported from sketch not showing up in client's browser, but fine in my browser - how to test?
I'm assuming it's an export issue. Trying to figure out how to recreate the issue - any one experience this? Solutions also welcome. Will try re-exporting from Illustrator. here are some troublesome SVGs (material icons): <?xml version="1.0" encoding="UTF-8"?> <svg width="18px" height="19px" viewBox="0 0 18 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs></defs> <g id="R02" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="material" font-size="24" font-weight="normal"> <g id="Live-Event-03---Account-Menu" transform="translate(-1160.000000, -158.000000)" fill="#98A4AE"> <g id="menu" transform="translate(1124.000000, 56.000000)"> <g id="item" transform="translate(33.000000, 100.000000)"> <text id="exit_to_app---material"> <tspan x="0" y="20"></tspan> </text> </g> </g> </g> </g> <?xml version="1.0" encoding="UTF-8"?> <svg width="27px" height="23px" viewBox="0 0 27 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch --> <title>send - material</title> <desc>Created with Sketch.</desc> <defs></defs> <g id="R02" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="material" font-size="30" font-weight="normal"> <g id="Modal-05---Share" transform="translate(-477.000000, -395.000000)" fill="#98A4AE"> <g id="modal" transform="translate(435.000000, 376.000000)"> <g id="header"> <text id="send---material"> <tspan x="40" y="41"></tspan> </text> </g> </g> </g> </g> Here is a SVG that was viewed correctly (custom): <?xml version="1.0" encoding="UTF-8"?> <svg width="56px" height="56px" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="icon/account-white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <path d="M28,45.256 C30.8373475,45.256 33.5066542,44.5466738 36.008,43.128 C38.4346788,41.8213268 40.4319922,40.0106782 42,37.696 C41.9626665,36.2773262 41.0853419,34.9706726 39.368,33.776 C37.8746592,32.767995 35.9706782,31.9466698 33.656,31.312 C31.5653229,30.7519972 29.6706752,30.472 27.972,30.472 C26.2733248,30.472 24.3786771,30.7519972 22.288,31.312 C19.9733218,31.9466698 18.0880073,32.767995 16.632,33.776 C14.9146581,34.9706726 14.0373335,36.2773262 14,37.696 C15.5680078,40.0106782 17.5653212,41.8213268 19.992,43.128 C22.5306794,44.5466738 25.199986,45.256 28,45.256 Z M28,12.104 C26.7679938,12.104 25.6106721,12.4213302 24.528,13.056 C23.4453279,13.6906698 22.5866698,14.5493279 21.952,15.632 C21.3173302,16.7146721 21,17.8719938 21,19.104 C21,20.3360062 21.3173302,21.4933279 21.952,22.576 C22.5866698,23.6586721 23.4453279,24.5173302 24.528,25.152 C25.6106721,25.7866698 26.7679938,26.104 28,26.104 C29.2320062,26.104 30.3893279,25.7866698 31.472,25.152 C32.5546721,24.5173302 33.4133302,23.6586721 34.048,22.576 C34.6826698,21.4933279 35,20.3360062 35,19.104 C35,17.8719938 34.6826698,16.7146721 34.048,15.632 C33.4133302,14.5493279 32.5546721,13.6906698 31.472,13.056 C30.3893279,12.4213302 29.2320062,12.104 28,12.104 Z M28,5.104 C32.2560213,5.104 36.1946486,6.16798936 39.816,8.296 C43.3253509,10.3120101 46.0879899,13.0746491 48.104,16.584 C50.2320106,20.2053514 51.296,24.1439787 51.296,28.4 C51.296,32.6560213 50.2320106,36.5946486 48.104,40.216 C46.0879899,43.7253509 43.3253509,46.4879899 39.816,48.504 C36.1946486,50.6320106 32.2560213,51.696 28,51.696 C23.7439787,51.696 19.8053514,50.6320106 16.184,48.504 C12.6746491,46.4506564 9.91201008,43.6693509 7.896,40.16 C5.76798936,36.5386486 4.704,32.6186878 4.704,28.4 C4.704,24.1813122 5.76798936,20.2613514 7.896,16.64 C9.9493436,13.1306491 12.7306491,10.3493436 16.24,8.296 C19.8613514,6.16798936 23.7813122,5.104 28,5.104 Z" id="account_circle---material" fill="#FFFFFF"></path> </g>
The svgs had a lot of transforms going to and fro which I deleted. Also I could have eliminated some of the nested <g> elements, but maybe you putted them there for some reason.
Also in the CSS I've putted a border to the SVG so that you can see that there is a white space between the icon and the border of the svg canvas. Should it have been for me I would have eliminated that space, but again: you may need it. I hope this helps.
svg{border:1px solid}
<svg width="18px" height="19px" viewBox="0 2 18 19" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs></defs>
<g id="R02" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="material" font-size="24" font-weight="normal">
<g id="Live-Event-03---Account-Menu" fill="#98A4AE">
<g id="menu">
<g id="item">
<text id="exit_to_app---material">
<tspan y="20"></tspan>
</text>
</g>
</g>
</g>
</g>
</svg>
<svg width="27px" height="23px" viewBox="0 20 27 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
<title>send - material</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="R02" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-family="material" font-size="30" font-weight="normal">
<g id="Modal-05---Share" fill="#98A4AE">
<g id="modal" >
<g id="header">
<text id="send---material">
<tspan y="41"></tspan>
</text>
</g>
</g>
</g>
</g>
</svg>
<svg width="56px" height="56px" viewBox="0 0 56 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="icon" stroke="black" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M28,45.256 C30.8373475,45.256 33.5066542,44.5466738 36.008,43.128 C38.4346788,41.8213268 40.4319922,40.0106782 42,37.696 C41.9626665,36.2773262 41.0853419,34.9706726 39.368,33.776 C37.8746592,32.767995 35.9706782,31.9466698 33.656,31.312 C31.5653229,30.7519972 29.6706752,30.472 27.972,30.472 C26.2733248,30.472 24.3786771,30.7519972 22.288,31.312 C19.9733218,31.9466698 18.0880073,32.767995 16.632,33.776 C14.9146581,34.9706726 14.0373335,36.2773262 14,37.696 C15.5680078,40.0106782 17.5653212,41.8213268 19.992,43.128 C22.5306794,44.5466738 25.199986,45.256 28,45.256 Z M28,12.104 C26.7679938,12.104 25.6106721,12.4213302 24.528,13.056 C23.4453279,13.6906698 22.5866698,14.5493279 21.952,15.632 C21.3173302,16.7146721 21,17.8719938 21,19.104 C21,20.3360062 21.3173302,21.4933279 21.952,22.576 C22.5866698,23.6586721 23.4453279,24.5173302 24.528,25.152 C25.6106721,25.7866698 26.7679938,26.104 28,26.104 C29.2320062,26.104 30.3893279,25.7866698 31.472,25.152 C32.5546721,24.5173302 33.4133302,23.6586721 34.048,22.576 C34.6826698,21.4933279 35,20.3360062 35,19.104 C35,17.8719938 34.6826698,16.7146721 34.048,15.632 C33.4133302,14.5493279 32.5546721,13.6906698 31.472,13.056 C30.3893279,12.4213302 29.2320062,12.104 28,12.104 Z M28,5.104 C32.2560213,5.104 36.1946486,6.16798936 39.816,8.296 C43.3253509,10.3120101 46.0879899,13.0746491 48.104,16.584 C50.2320106,20.2053514 51.296,24.1439787 51.296,28.4 C51.296,32.6560213 50.2320106,36.5946486 48.104,40.216 C46.0879899,43.7253509 43.3253509,46.4879899 39.816,48.504 C36.1946486,50.6320106 32.2560213,51.696 28,51.696 C23.7439787,51.696 19.8053514,50.6320106 16.184,48.504 C12.6746491,46.4506564 9.91201008,43.6693509 7.896,40.16 C5.76798936,36.5386486 4.704,32.6186878 4.704,28.4 C4.704,24.1813122 5.76798936,20.2613514 7.896,16.64 C9.9493436,13.1306491 12.7306491,10.3493436 16.24,8.296 C19.8613514,6.16798936 23.7813122,5.104 28,5.104 Z" id="account_circle---material" fill="#FFFFFF"></path>
</g>
</svg>
In the end, we were able to solve the issue by exporting through Illustrator. Here is how the newly exported SVG code looked:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 56 56"><defs><style>.a{fill:#98a4ae;}</style></defs><title>sign-out-gray</title><path class="a" d="M44.2964,7a4.5218,4.5218,0,0,1,3.3027,1.4A4.52,4.52,0,0,1,49,11.7036V44.2964a4.7835,4.7835,0,0,1-4.7031,4.7041H11.7041a4.4923,4.4923,0,0,1-3.332-1.4A4.5585,4.5585,0,0,1,7,44.2964V35h4.7041v9.2969H44.2964V11.7036H11.7041V21H7V11.7036A4.5629,4.5629,0,0,1,8.3721,8.3994,4.4919,4.4919,0,0,1,11.7041,7ZM23.52,36.4l5.9922-6.1045H7V25.7036H29.5122L23.52,19.6l3.3042-3.3042L38.5278,28,26.8242,39.7036Z"/></svg>
SVG path with border
How can I create a path with a fill and outline similar to
So far I have found a couple of ways but none that is particularly clean.
One way would be to use paint-order but this does not work in mobile and IE.
Another way duplicate the path... but this would create needless amounts of data.
Is there a different way to use CSS to simply create an outline or border for an SVG path?
<svg height="50" width="300">
<path d="M5 20 1215 20" />
</svg>
path {
fill: red;
stroke: #646464;
stroke-width:10px;
stroke-linejoin: round;
}
Here is a codepen
You have to draw the path as an outline as so:
<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220" viewBox="0 0 220 220">
<path fill="#ddd" stroke="#3f4141" d="M0 0h220v220H0z"/>
<path fill="#fff" stroke="#00b400" stroke-width="4"
d="M 159.8 30.3
h -110
v 120
h-20
l 30 40
30 -40
h-20
v-100
h90"/>
</svg>
Sketched in Inkscape, optimised in SVGOMG then tweaked by hand.
EDIT
I have a working solution using markers that works as follows:
Create the line (any line) as a symbol
Create a faux - stroke by layering two instances of the line on top of each other, with different line widths
Add arrow with pre-defined stroke as marker
Hairline stroke shows through sometimes at start of line ... solve this using another marker that masks using the background color.
this technique would only work over a plain background.
<svg style="display: inline-block; margin-left: 2em;" width="220" height="220" viewBox="0 0 220 220" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<style>
.arrow-stroke {
stroke: #00b400;
stroke-width: 28;
/* marker-end etc should be supported but unsure of browser support */
}
.arrow-fill {
stroke: white;
stroke-width: 20
}
</style>
<marker id="arrow" markerWidth="45" markerHeight="70" refX="5" refY="35" orient="auto" markerUnits="userSpaceOnUse">
<path fill="#fff" stroke="#00b400" stroke-width="4" d="M 2 25 v-20 l 40,30 -40,30 v-20"/>
</marker>
<!-- Used to hide hairline that shows through, fill color must match background color -->
<marker id="startMask" markerWidth="2" markerHeight="30" refX="1" refY="15" orient="auto" markerUnits="userSpaceOnUse">
<path fill="#ddd" d="M0 0 v30 h2 v-30 z" />
</marker>
<symbol id="line">
<path d="M 159.8 30.3 h -110 v 120"/>
</symbol>
<symbol id="line2">
<path d="M 140 60 l 20 30"/>
</symbol>
<symbol id="line3">
<path d="M 100 80 q 0 40 20 70"/>
</symbol>
</defs>
<path id="grey-box" fill="#ddd" stroke="#3f4141" d="M0 0h220v220H0z"/>
<g fill="none">
<use xlink:href="#line" class="arrow-stroke" />
<use xlink:href="#line" class="arrow-fill" marker-end="url(#arrow)" marker-start="url(#startMask)" />
<use xlink:href="#line2" class="arrow-stroke" />
<use xlink:href="#line2" class="arrow-fill" marker-end="url(#arrow)" marker-start="url(#startMask)" />
<use xlink:href="#line3" class="arrow-stroke" />
<use xlink:href="#line3" class="arrow-fill" marker-end="url(#arrow)" marker-start="url(#startMask)" />
</g>
</svg>
Hope this helps
SVG - Top pixels were not visible
Using SVG as a source of my <img> and it is a clock having a circle and hour minute hands. <?xml version="1.0"?> <svg xmlns="http://www.w3.org/2000/svg"> <g class="sprite" id="ico-watch" transform="scale(0.03125 0.03125)"> <path d="M512 960c-282.317 0-512-229.683-512-512s229.683-512 512-512 512 229.683 512 512-229.683 512-512 512zM512-23.040c-259.727 0-471.040 211.292-471.040 471.040 0 259.727 211.313 471.040 471.040 471.040 259.748 0 471.040-211.313 471.040-471.040 0-259.748-211.292-471.040-471.040-471.040zM790.733 748.298c8.274-7.68 8.765-20.644 1.085-28.938l-225.587-243.057c4.444-8.499 7.209-18.043 7.209-28.303 0-15.79-6.124-30.065-15.933-40.94l84.808-156.344c5.407-9.933 1.7-22.364-8.233-27.75-3.092-1.679-6.431-2.478-9.748-2.478-7.27 0-14.316 3.871-18.022 10.711l-84.808 156.324c-3.113-0.492-6.246-0.963-9.503-0.963-33.935 0-61.44 27.505-61.44 61.44s27.505 61.44 61.44 61.44c8.663 0 16.896-1.843 24.371-5.079l225.403 242.852c7.7 8.335 20.623 8.786 28.959 1.085z" fill="#000000" stroke-width="1" /> </g> </svg> Demo: jsFiddle Issue: The top pixel(s) is not visible, the circle is incomplete. Adding padding-top:10px; dynamically works, but not when added to the SVG file itself.
Using translate(0, 60) works, you just need to reposition your svg in the viewbox. Since your SVG was a big blank space with a small clock, I've used width="32" height="32" on the <svg> element to size the viewport <?xml version="1.0"?> <svg width="32" height="32" xmlns="http://www.w3.org/2000/svg"> <g class="sprite" id="ico-watch" transform="scale(0.03125 0.03125) translate(0, 60)"> <path d="M512 960c-282.317 0-512-229.683-512-512s229.683-512 512-512 512 229.683 512 512-229.683 512-512 512zM512-23.040c-259.727 0-471.040 211.292-471.040 471.040 0 259.727 211.313 471.040 471.040 471.040 259.748 0 471.040-211.313 471.040-471.040 0-259.748-211.292-471.040-471.040-471.040zM790.733 748.298c8.274-7.68 8.765-20.644 1.085-28.938l-225.587-243.057c4.444-8.499 7.209-18.043 7.209-28.303 0-15.79-6.124-30.065-15.933-40.94l84.808-156.344c5.407-9.933 1.7-22.364-8.233-27.75-3.092-1.679-6.431-2.478-9.748-2.478-7.27 0-14.316 3.871-18.022 10.711l-84.808 156.324c-3.113-0.492-6.246-0.963-9.503-0.963-33.935 0-61.44 27.505-61.44 61.44s27.505 61.44 61.44 61.44c8.663 0 16.896-1.843 24.371-5.079l225.403 242.852c7.7 8.335 20.623 8.786 28.959 1.085z" fill="#000000" stroke-width="1" /> </g> </svg>
The SVG it-self is off canvas.
You can fix it by redefining the canvas with a viewBox attribute
svg {
outline: 1px solid blue;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -70 1030 1040" width="200">
<g class="sprite" id="ico-watch">
<path d="M512 960c-282.317 0-512-229.683-512-512s229.683-512 512-512 512 229.683 512 512-229.683 512-512 512zM512-23.040c-259.727 0-471.040 211.292-471.040 471.040 0 259.727 211.313 471.040 471.040 471.040 259.748 0 471.040-211.313 471.040-471.040 0-259.748-211.292-471.040-471.040-471.040zM790.733 748.298c8.274-7.68 8.765-20.644 1.085-28.938l-225.587-243.057c4.444-8.499 7.209-18.043 7.209-28.303 0-15.79-6.124-30.065-15.933-40.94l84.808-156.344c5.407-9.933 1.7-22.364-8.233-27.75-3.092-1.679-6.431-2.478-9.748-2.478-7.27 0-14.316 3.871-18.022 10.711l-84.808 156.324c-3.113-0.492-6.246-0.963-9.503-0.963-33.935 0-61.44 27.505-61.44 61.44s27.505 61.44 61.44 61.44c8.663 0 16.896-1.843 24.371-5.079l225.403 242.852c7.7 8.335 20.623 8.786 28.959 1.085z"
fill="#000000" stroke-width="1" />
</g>
</svg>
But, I think there is a real problem with the SVG it-self. The circle isn't even a circle!
You could simplify it a lot, and get rid of your off-canvas problem, by recreating a clean one from scratch.
svg {
outline: 1px solid blue;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="200">
<g class="sprite" id="ico-watch" fill="none" stroke="black" stroke-width="4" stroke-linecap="round">
<circle cx="50" cy="50" r="47"/>
<circle cx="50" cy="50" r="6" fill="black" stroke="none"/>
<path d="M50,50 l13,-22 M50,50 l25,25"/>
</g>
</svg>