I'd like to use an icon from bootstrap, but I need it flipped vertically:
https://icons.getbootstrap.com/icons/arrow-left-right/
What I'd rather need is a arrow-right-left, so that the upper arrow points to the right.
I tried to transform with transform="scale(-1 1) translate(-1260 0)", but that did not work:
https://jsfiddle.net/j63zpwqr/
So how could I flip a path on the Y-axis?
I changed path info from 3 paths into 1 because Bootstrap icons are bloated,
using https://yqnn.github.io/svg-path-editor/
That also changed the SVG from Absolute positioning to Relative
a transform="scale(-1 1) flips the image
<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160" fill="red"
class="bi bi-arrow-left-right"
viewBox="0 0 16 16"
transform="scale(-1 1)">
<path d="m10.15 7.65a.5.5 0 01.71 0l3 3a.5.5 0 010 .71l-3 3a.5.5 0 01-.71-.71l2.65-2.65l-2.65-2.65a.5.5 0 010-.71zm-8.15 3.35a.5.5 0 01.5-.5h10.5a.5.5 0 010 1h-10.5a.5.5 0 01-.5-.5zm3.85-9.35a.5.5 0 010 .71l-2.65 2.65l2.65 2.65a.5.5 0 11-.71.71l-3-3a.5.5 0 010-.71l3-3a.5.5 0 01.71 0zm-3.35 3.35a.5.5 0 01.5-.5h10.5a.5.5 0 010 1h-10.5a.5.5 0 01-.5-.5z" />
</svg>
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 have an svg to be used on my blazor where loading is slow, the image is small it weighs about 4KB.
This slowdown only happens when I call the svg file in an image element
If I put the svg code directly, the loading is extremely fast.
But to keep code clean I prefer to use the svg file, is there any way to make this load faster?
Code that loads slowly:
<div>
<img srcset="imgs/mysvgtest.svg"/>
</div>
Code that has fast loading:
<div>
<svg>
<g>
...
</g>
</svg>
</div>
MySvg Test
<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 192.756 192.756">
<g fill-rule="evenodd" clip-rule="evenodd">
<path fill="#fff" d="M0 0h192.756v192.756H0V0z"/>
<path d="M37.624 101.055c0 11.686-3.715 23.734-17.395 23.734S2.834 112.74 2.834 101.055c0-11.688 3.714-23.828 17.395-23.828 13.68 0 17.395 12.14 17.395 23.828zm-22.016 0c0 2.627.182 12.32 4.621 12.32s4.62-9.693 4.62-12.32c0-2.629-.181-12.322-4.62-12.322s-4.621 9.693-4.621 12.322zM55.909 85.2h.182c1.721-4.349 5.617-7.973 10.6-7.973 9.422 0 8.607 10.509 8.607 17.123v29.533H62.523V98.789c0-2.355.906-8.697-3.171-8.697-2.899 0-3.443 2.989-3.443 5.254v28.536H43.135v-45.75h12.774V85.2zM94.311 50.774v73.109H81.537V50.774h12.774zM113.244 78.133v45.75h-12.773v-45.75h12.773zM98.748 64.454c0-4.62 3.715-8.063 8.336-8.063 4.439 0 7.881 3.896 7.881 8.244 0 4.349-3.715 8.063-8.152 8.063-4.44 0-8.065-3.715-8.065-8.244zM132.27 85.2h.182c1.721-4.349 5.617-7.973 10.6-7.973 9.422 0 8.607 10.509 8.607 17.123v29.533h-12.775V98.789c0-2.355.906-8.697-3.17-8.697-2.898 0-3.443 2.989-3.443 5.254v28.536h-12.773v-45.75h12.773V85.2h-.001zM189.605 104.406h-20.201c.09 3.352-.092 10.6 4.801 10.6 3.262 0 4.076-2.537 4.076-5.256h10.871c-1.086 8.426-5.162 15.039-14.494 15.039-12.955 0-17.576-11.506-17.576-22.83 0-10.961 3.986-24.732 17.305-24.732 8.424 0 16.217 7.52 15.492 21.923l-.274 5.256zm-10.779-8.969c0-2.989-.635-8.425-4.621-8.425-3.896 0-4.711 5.254-4.711 8.153v1.358h9.332v-1.086zM3.753 129.209h185.601v12.773H3.753v-12.773z"/>
<path fill="#fff" d="M7.424 130.76v9.484H5.55v-9.484h1.874zM10.808 130.76l2.339 5.723.025-.025a5.977 5.977 0 0 1-.15-1.434v-4.264h1.874v9.484h-1.773l-2.314-5.723-.025.023.088.957.012.391v4.352H9.01v-9.484h1.798zM20.824 130.76v1.761H19.34v7.723h-1.874v-7.723h-1.472v-1.761h4.83zM25.705 130.76v1.761h-1.9v2.063h1.673v1.76h-1.673v2.138h1.925v1.762h-3.799v-9.484h3.774zM27.114 140.244v-9.484H29c1.195 0 3.333.127 3.333 2.717 0 1.045-.416 1.938-1.346 2.453l1.647 4.314h-1.975l-1.647-4.377h-.025v4.377h-1.873zm1.874-5.408l.327.012c.855 0 1.194-.578 1.194-1.359 0-.678-.327-1.23-1.27-1.182h-.251v2.529zM35.832 130.76l2.34 5.723.024-.025a5.977 5.977 0 0 1-.151-1.434v-4.264h1.874v9.484h-1.773l-2.314-5.723-.025.023.088.957.013.391v4.352h-1.874v-9.484h1.798zM45.269 130.76v1.761h-1.9v2.063h1.673v1.76h-1.673v2.138h1.924v1.762h-3.797v-9.484h3.773zM51.03 130.76v1.761h-1.484v7.723h-1.874v-7.723H46.2v-1.761h4.83zM59.081 130.76l2.276 9.484h-2l-.352-1.598h-1.899l-.34 1.598h-1.861l2.201-9.484h1.975zm-.831 3.873l-.214-1.434h-.025l-.201 1.434-.402 2.529h1.32l-.478-2.529zM62.365 140.244v-9.484h1.886c1.194 0 3.333.127 3.333 2.717 0 1.045-.415 1.938-1.346 2.453l1.647 4.314h-1.974l-1.648-4.377h-.025v4.377h-1.873zm1.874-5.408l.327.012c.855 0 1.195-.578 1.195-1.359 0-.678-.327-1.23-1.271-1.182h-.252v2.529h.001zM69.284 140.244v-9.484h1.836c.73 0 1.359.025 1.962.516.628.504.968 1.346.968 2.139 0 .842-.314 1.484-1.019 1.961.78.379 1.17 1.385 1.17 2.201 0 1.875-1.384 2.668-3.094 2.668h-1.823v-.001zm1.874-4.139v2.566c.755.037 1.195-.516 1.195-1.309 0-.741-.453-1.282-1.195-1.257zm0-3.773v2.314c.705 0 1.119-.479 1.119-1.195 0-.691-.402-1.156-1.119-1.119zM79.333 130.76v1.761h-1.899v2.063h1.673v1.76h-1.673v2.138h1.925v1.762H75.56v-9.484h3.773zM82.617 130.76v9.484h-1.874v-9.484h1.874zM88.554 130.76v1.761H87.07v7.723h-1.874v-7.723h-1.471v-1.761h4.829zM93.56 132.898c-.376-.328-.842-.604-1.358-.604-.579 0-.943.352-.943.93 0 1.561 2.854 1.648 2.854 4.213 0 1.686-.968 2.957-2.729 2.957-.527 0-1.182-.164-1.609-.479v-1.785c.44.301.868.502 1.421.502.604 0 1.082-.402 1.082-1.031 0-.729-.578-1.006-1.107-1.383-1.082-.73-1.749-1.434-1.749-2.818 0-1.496.868-2.791 2.479-2.791.604 0 1.144.164 1.659.465v1.824zM101.537 134.961v.742c0 2.012-.49 4.691-3.043 4.691-2.554 0-3.384-2.742-3.384-4.842 0-2.189.705-4.943 3.384-4.943 1.445 0 2.389.904 2.791 2.252l-1.822.703c-.09-.479-.24-1.219-.957-1.219-1.271-.076-1.396 2.264-1.396 3.156 0 .98.062 3.156 1.447 3.156.955 0 1.105-1.283 1.105-1.936h-1.193v-1.762h3.068v.002zM102.785 140.244v-9.484h1.887c1.195 0 3.334.127 3.334 2.717 0 1.045-.416 1.938-1.346 2.453l1.646 4.314h-1.975l-1.646-4.377h-.025v4.377h-1.875zm1.875-5.408l.326.012c.855 0 1.195-.578 1.195-1.359 0-.678-.326-1.23-1.27-1.182h-.252v2.529h.001zM111.529 130.76v6.139c0 .717-.09 1.799.93 1.799.918 0 .918-.693.932-1.396v-6.541h1.873v6.918c0 1.006-.113 2.717-2.816 2.717-1.748 0-2.793-.818-2.793-2.592v-7.043h1.874v-.001zM116.801 140.244v-9.484h1.951c.402 0 3.219-.252 3.219 2.805 0 1.773-1.145 2.793-2.881 2.793l-.414-.025v3.912h-1.875v-.001zm1.875-5.433c.906.037 1.422-.303 1.422-1.271 0-.678-.266-1.232-1.07-1.232h-.352v2.503zM123.18 140.244v-9.484h1.949c.402 0 3.221-.252 3.221 2.805 0 1.773-1.145 2.793-2.881 2.793l-.416-.025v3.912h-1.873v-.001zm1.873-5.433c.906.037 1.422-.303 1.422-1.271 0-.678-.264-1.232-1.068-1.232h-.354v2.503zM133.33 130.76v1.761h-1.898v2.063h1.672v1.76h-1.672v2.138h1.923v1.762h-3.798v-9.484h3.773zM138.074 140.244v-9.484h1.887c1.193 0 3.332.127 3.332 2.717 0 1.045-.414 1.938-1.346 2.453l1.648 4.314h-1.975l-1.648-4.377h-.025v4.377h-1.873zm1.873-5.408l.328.012c.855 0 1.193-.578 1.193-1.359 0-.678-.326-1.23-1.27-1.182h-.252v2.529h.001zM148.766 130.76v1.761h-1.899v2.063h1.672v1.76h-1.672v2.138h1.924v1.762h-3.799v-9.484h3.774zM152.049 130.76v9.484h-1.873v-9.484h1.873zM157.986 130.76v1.761h-1.484v7.723h-1.873v-7.723h-1.473v-1.761h4.83zM160.967 130.76v3.711h1.9v-3.711h1.873v9.484h-1.873v-4.014h-1.9v4.014h-1.873v-9.484h1.873zM169.938 130.76l2.277 9.484h-2l-.352-1.598h-1.9l-.338 1.598h-1.861l2.199-9.484h1.975zm-.831 3.873l-.213-1.434h-.025l-.201 1.434-.402 2.529h1.32l-.479-2.529zM175.098 130.76v7.722h1.961v1.762h-3.836v-9.484h1.875zM180.041 130.76v7.722h1.961v1.762h-3.836v-9.484h1.875zM186.883 130.76v1.761h-1.901v2.063h1.674v1.76h-1.674v2.138h1.926v1.762h-3.799v-9.484h3.774z"/>
</g>
</svg>
I've recently been introduced to svg sprite and I decided to try it out for the first time on my current project but I'm dead sure there's something missing and I just cant figure it out even after reading some documentations and tutorials.
the sprite
<svg xmlns='http://www.w3.org/2000/svg'>
<defs>
<symbol id="icon-github" viewBox='0 0 24 24'>
<title>Github Icon</title>
<path d='M.184 10.462c-.779 4.906 1.401 10.823 8.123 13.006.12.022.231.032.335.032.782 01.32-.582 1.32-1.3-.097-.523.383-2.642-.92-2.357-2.519.536-2.821-.871-3.205-1.607 1.086 1.394 2.718 1.359 3.949.819.683-.3.326-1.064.65-1.343a.75.75 0 00-.407-1.314c-2.314-.255-4.457-1.001-4.457-4.702 0-2.168 1.505-2.362 1.09-3.269-.015-.033-.333-.754-.045-1.849 1.419.262 2.072 1.28 2.753 1.097 1.687-.46 3.544-.46 5.23 0 .704.189 1.207-.801 2.738-1.103.441 1.654-.473 2.058.103 2.677.632.68.953 1.503.953 2.447 0 5.564-4.717 3.957-5.101 5.22a.748.748 0 00.235.792c.61.513.53 1.83.465 2.889-.067 1.098-.125 2.045.482 2.579.214.19.595.393 1.284.253 6.634-2.131 8.83-8.022 8.063-12.917C21.726-2.856 2.296-2.84.184 10.462zm8.27 10.978l.004.505a11.811 11.811 0 01-1.475-.623c.425.109.913.156 1.471.118zm.37-3.7l-.015.08c-.853.252-1.509.001-1.957-.752l-.001-.002c.68.364 1.381.56 1.973.674zM12 2c11.833 0 14.502 16.267 3.469 19.941-.038-.297-.003-.857.021-1.252.058-.951.126-2.059-.213-2.985 5.088-1.059 5.513-6.646 3.554-9.135.243-.952.145-3.189-.729-3.463-.206-.065-1.305-.304-3.437 1.037a11.657 11.657 0 00-5.361 0c-1.064-.667-3.462-1.752-3.922-.6-.534 1.342-.407 2.427-.248 3.03-1.739 2.204-1.218 5.894.534 7.626-.993-.475-2.361-.637-2.656.314-.323 1.037.912.911 1.679 2.804.073.236.208.513.415.788C-1.705 14.54 1.581 2 12 2z'></path>
</symbol>
and the HTML:
<div class="container__footer">
<a class="container__button" href="https://github.com/" target="_blank">
<svg class="container__icon">
<use xlink:href="../_src/sprites/defs.svg#icon-github"></use>
</svg>
</a>
</div>
Any possible mistake I might be making?
Does anyone know why this social icon in SVG format has slight curved radius border? I'd like a square icon. How do I edit this to be a square? Using CSS or just edit the actual code in the SVG? Thanks
<svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><rect height="512" rx="64" ry="64" width="512" fill="#0083be"/><g fill="#fff"><path d="M61.05316483 178.66808913h85.76013915v257.9625333H61.05316483zM104.5127998 54.28063176c-29.34185723 0-48.512575 19.29035996-48.512575 44.5737057 0 24.75194797 18.5880448 44.57370568 47.37675114 44.57370568h.55470467c29.9027771 0 48.5156826-19.8217577 48.5156826-44.5737057-.55470467-25.28334572-18.6113517-44.57370568-47.9345634-44.57370568zM357.27944394 172.60209055c-45.4904445 0-65.8669069 25.01764686-77.27642064 42.58951v-36.52349588h-85.73838603c1.13737765 24.1972433 0 257.9625333 0 257.9625333h85.73683224V292.56591023c0-7.7114826.55470468-15.4198576 2.82790618-20.93116706 6.1872101-15.39965828 20.30498783-31.35246744 43.9925865-31.35246744 31.01218643 0 43.43632805 23.66429176 43.43632805 58.3278955v138.02046672h85.74149362v-147.9305687c0-79.2373094-42.30516557-116.0979787-98.7203399-116.0979787z"/></g></svg>
Remove the rx and ry parameters from rect tag.
<svg height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><rect height="512" width="512" fill="#0083be"/><g fill="#fff"><path d="M61.05316483 178.66808913h85.76013915v257.9625333H61.05316483zM104.5127998 54.28063176c-29.34185723 0-48.512575 19.29035996-48.512575 44.5737057 0 24.75194797 18.5880448 44.57370568 47.37675114 44.57370568h.55470467c29.9027771 0 48.5156826-19.8217577 48.5156826-44.5737057-.55470467-25.28334572-18.6113517-44.57370568-47.9345634-44.57370568zM357.27944394 172.60209055c-45.4904445 0-65.8669069 25.01764686-77.27642064 42.58951v-36.52349588h-85.73838603c1.13737765 24.1972433 0 257.9625333 0 257.9625333h85.73683224V292.56591023c0-7.7114826.55470468-15.4198576 2.82790618-20.93116706 6.1872101-15.39965828 20.30498783-31.35246744 43.9925865-31.35246744 31.01218643 0 43.43632805 23.66429176 43.43632805 58.3278955v138.02046672h85.74149362v-147.9305687c0-79.2373094-42.30516557-116.0979787-98.7203399-116.0979787z"/></g></svg>
Intent is to scale svg image without using any css and image needs to be rendered in center of bounding box.
But when i changed width and height it only changes bounding box, In code pen i want image to be in center of red bounding box without any css. Thanks in advance.
https://codepen.io/rosn/pen/dybjVNX
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M11.917 11.019c0-.507-.41-.918-.916-.918s-.917.411-.917.918c0 .507.411.918.917.918s.916-.411.916-.918m1.751 0c0 1.473-1.196 2.671-2.667 2.671-1.47 0-2.667-1.198-2.667-2.671 0-1.473 1.197-2.671 2.667-2.671 1.471 0 2.667 1.198 2.667 2.671m5.125-2.679c-.827-2.397-2.722-4.29-5.117-5.113l-.118.936c1.981.741 3.553 2.313 4.299 4.293l.936-.116zm-1.858.232c-.652-1.58-1.913-2.843-3.491-3.494l-.12.955c1.166.548 2.109 1.491 2.656 2.659l.955-.12zm-2.267 2.447c0-2.028-1.643-3.673-3.667-3.673-2.025 0-3.667 1.645-3.667 3.673s1.642 3.673 3.667 3.673c2.024 0 3.667-1.645 3.667-3.673m-5.991 4.987c-1.166-.549-2.107-1.492-2.654-2.66l-.954.119c.65 1.582 1.911 2.844 3.49 3.496l.118-.955zm-.238 1.906c-1.989-.747-3.569-2.332-4.308-4.329l-.935.118c.822 2.412 2.721 4.318 5.126 5.147l.117-.936zm13.561-6.893c0 .264-.022.521-.04.78-.132-.033-.457-.114-.894-.021-.295-.486-.85-.799-1.503-.799-.685 0-1.27.351-1.548.885-.946-.17-2.098.418-2.098 1.593v2.761c-.687-.72-2.916-.376-2.916 1.41 0 .275.062.549.185.82.066.158 1.393 2.805 1.467 2.955-1.144.404-2.37.635-3.652.635-6.075 0-11.001-4.933-11.001-11.019 0-6.085 4.926-11.019 11-11.019s11 4.934 11 11.019m-6.302 6.286c.007.01.757 1.39.872 1.607.124.228.494.179.494-.12v-5.335c0-.839 1.348-.814 1.348 0v4.311c0 .234.453.23.453 0l.002-5.131c0-.441.355-.656.714-.656.363 0 .729.221.729.656v5.072c0 .235.437.244.437.006v-4.323c0-.862 1.475-.886 1.475 0v4.579c0 .233.472.234.472 0v-2.849c0-.778 1.304-.822 1.304.039l.002 6.499c0 1.489-.831 2.34-2.406 2.34h-2.935c-1.497 0-2.022-.846-2.438-1.696-.395-.808-2.001-3.976-2.125-4.272-.066-.144-.095-.28-.095-.404 0-.809 1.276-1.128 1.697-.323"/></svg>
use viewBox you can also check this link
svg{
border: 1px solid red
}
<svg align="center" width="100" height="100" viewBox="-50 -50 125 125" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"><path d="M11.917 11.019c0-.507-.41-.918-.916-.918s-.917.411-.917.918c0 .507.411.918.917.918s.916-.411.916-.918m1.751 0c0 1.473-1.196 2.671-2.667 2.671-1.47 0-2.667-1.198-2.667-2.671 0-1.473 1.197-2.671 2.667-2.671 1.471 0 2.667 1.198 2.667 2.671m5.125-2.679c-.827-2.397-2.722-4.29-5.117-5.113l-.118.936c1.981.741 3.553 2.313 4.299 4.293l.936-.116zm-1.858.232c-.652-1.58-1.913-2.843-3.491-3.494l-.12.955c1.166.548 2.109 1.491 2.656 2.659l.955-.12zm-2.267 2.447c0-2.028-1.643-3.673-3.667-3.673-2.025 0-3.667 1.645-3.667 3.673s1.642 3.673 3.667 3.673c2.024 0 3.667-1.645 3.667-3.673m-5.991 4.987c-1.166-.549-2.107-1.492-2.654-2.66l-.954.119c.65 1.582 1.911 2.844 3.49 3.496l.118-.955zm-.238 1.906c-1.989-.747-3.569-2.332-4.308-4.329l-.935.118c.822 2.412 2.721 4.318 5.126 5.147l.117-.936zm13.561-6.893c0 .264-.022.521-.04.78-.132-.033-.457-.114-.894-.021-.295-.486-.85-.799-1.503-.799-.685 0-1.27.351-1.548.885-.946-.17-2.098.418-2.098 1.593v2.761c-.687-.72-2.916-.376-2.916 1.41 0 .275.062.549.185.82.066.158 1.393 2.805 1.467 2.955-1.144.404-2.37.635-3.652.635-6.075 0-11.001-4.933-11.001-11.019 0-6.085 4.926-11.019 11-11.019s11 4.934 11 11.019m-6.302 6.286c.007.01.757 1.39.872 1.607.124.228.494.179.494-.12v-5.335c0-.839 1.348-.814 1.348 0v4.311c0 .234.453.23.453 0l.002-5.131c0-.441.355-.656.714-.656.363 0 .729.221.729.656v5.072c0 .235.437.244.437.006v-4.323c0-.862 1.475-.886 1.475 0v4.579c0 .233.472.234.472 0v-2.849c0-.778 1.304-.822 1.304.039l.002 6.499c0 1.489-.831 2.34-2.406 2.34h-2.935c-1.497 0-2.022-.846-2.438-1.696-.395-.808-2.001-3.976-2.125-4.272-.066-.144-.095-.28-.095-.404 0-.809 1.276-1.128 1.697-.323"/></svg>