Resize svg icon using path element - html
I'm using a predesigned menu which has been used svg for drawing icons.
For some reasons, I have to change icon size using path element.
Now, I want to change icon and I have my own custom icons; So, I downloaded some svg icon of web, BUT icons which has been used by me, have the same size that they had, even if I use large svg icons made by material design icons.
This is my Original path element:
<path class="Shape" d="M4.7 29.3a3.7 3.7 0 1 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.7zM4.4 8a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 0 1 0 7.3H4.4zm0 42a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.4z"/>
And this is my svg structure:
<svg class="menu" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 792 792">
<defs>
<path class="path-1" d="M45 67.9c0 2.3 1.9 4.1 4.2 4.1a4.1 4.1 0 1 0 0-8.3 4.1 4.1 0 0 0-4.1 4.2zm6 0c0 1-.8 1.7-1.8 1.7s-1.8-.7-1.8-1.7.8-1.8 1.8-1.8 1.8.7 1.8 1.8z"/>
</defs>
<g class="All-on" fill="none" fill-rule="evenodd" transform="translate(-571 -143)">
<g class="menu" transform="translate(571 143)">
<g class="outside-layer">
<circle class="outer-cirlce-background" cx="396" cy="396" r="396" fill="#000" fill-opacity=".4"/>
<g class="more-menu" transform="translate(654 229)">
<g class="writing-button" transform="translate(24 120)">
<title>My Posts</title>
<circle class="Oval-2-Copy-11" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M66.7 53.6l-.3.5-1.3 1.8-.3.4-.1.3V60l-.2.3v.1c-.3 1-1 1.4-2.3 1.4h-4.5l-.6.1a9 9 0 0 0-4 1.6l-1.7 1.1-.5.4-1.5 1a302.7 302.7 0 0 0-4 2.6c-.2 0-.3-.1-.5-.3L41.5 66l-1.7-1-.4-.4a141.7 141.7 0 0 1-3-1.8 9 9 0 0 0-2.6-.9h-.1a15.6 15.6 0 0 0-1.4 0h-3.7c-1.2 0-2-.6-2.3-1.5v-.1l-.1-.3V39c0-1.8.7-2.6 2.5-2.6h27.5l.7-2.1H28.7C25.8 34.3 24 36 24 39v21l.1.4a4.5 4.5 0 0 0 .4 1.4v.2l.4.5.2.1c0 .2.2.3.3.4l.2.2a3.4 3.4 0 0 0 .7.4 3.2 3.2 0 0 0 .8.3l.5.1.5.1h4.2l1 .1h.2a7.3 7.3 0 0 1 2.7 1l.3.2.9.6 2.6 1.7v.1l3.7 2.5a3 3 0 0 0 1.7.5 3 3 0 0 0 1.7-.5l3.6-2.5h.1l2.6-1.8 1-.6.2-.2.6-.3c.7-.4 1.4-.6 2.1-.7h5l.3-.1h.6l.5-.2h.3l.5-.3a2.8 2.8 0 0 0 .7-.4 5.3 5.3 0 0 0 .5-.6 3.9 3.9 0 0 0 .8-1.4l.2-.8v-6.9.1z"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M70 25.6l-4-1.2a3 3 0 0 0-1.9 0c-.9.3-1.6 1.1-2 2.1l-.4 1.4-.2.5-.2.7-6.7 20.6.1 8.5v.2c.3.8.7 1.4 1.4 1.7.5.3 1.2.4 1.8.1.4-.1.8-.4 1.2-.8 1.2-1.5 2.4-3 3.4-4.6l1.6-2.3.1-.1 6.3-19.2.6-1.6.6-1.8c.6-1.9-.2-3.6-1.8-4.2zM56.3 50l6.4-19.5.6.2.7.3-6.3 19.3c-.6.2-1 .2-1.4 0V50zm4.1 1.4c-1.5.2-2-.6-2.1-.8l6.3-19.4 2.3.8-6.5 19.4zm.9 2.4a62 62 0 0 1-3 4l-1.9-.7v-6l1.4-.1c.3.5 1 1.2 2.7 1 .1.4.5.8 1.4.9l-.6 1zm1.5-2.2l-.4.6c-1 0-1.3-.3-1.4-.5l6.5-19.5 1.5.5-6.2 19zm7.4-22.4l-.6 1.9-5.8-2-.6-.1.2-.6.4-1.3c.3-1 1-1.4 1.8-1.2l3.8 1.3c.8.3 1.1 1.1.8 2z"/>
</g>
<g class="new-button">
<title>New Posts</title>
<circle class="Oval-2-Copy-13" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M46.1 46.5H36c-.4 0-.8.3-.8.8v1.5c0 .4.4.7.8.7h10.1c.2 0 .4.2.4.4V60c0 .4.3.8.8.8h1.5c.4 0 .7-.4.7-.8V49.9c0-.2.2-.4.4-.4H60c.4 0 .8-.3.8-.8v-1.5c0-.4-.4-.7-.8-.7H49.9a.4.4 0 0 1-.4-.4V36c0-.4-.3-.8-.8-.8h-1.5c-.4 0-.7.4-.7.8v10.1c0 .2-.2.4-.4.4z"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M48 69a21 21 0 1 0 0-42 21 21 0 0 0 0 42zm0 3a24 24 0 1 1 0-48 24 24 0 0 1 0 48z"/>
</g>
<g class="bin-button" transform="translate(0 240)">
<title>Deleted Posts</title>
<circle class="Oval-2-Copy-12" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M57 28v-3.8H39.2V28h-10v8.2h4.4v35.5h29V36.3h4.3V28H57zm-15.7-1.8h13.6v1.9H41.3v-1.9zm19.2 43.6H35.7V36.3h24.8v33.5zM65 34.2H31.3v-4H65v4z"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M41 42.7h2v20.7h-2zm6.1 0h2v20.7h-2zm6.1 0h2.1v20.7h-2.1z"/>
</g>
</g>
<g class="home-menu" transform="translate(229 18)">
<g class="portfolio-button" transform="translate(119)">
<title>Portfolio</title>
<circle class="Oval-2-Copy-4" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M71.6 46v-5.6c0-3.5-2.9-6.4-6.4-6.4h-7l-1-3.5c-.6-1.8-2.3-3-4.1-3H42.9a4.3 4.3 0 0 0-4 3L37.8 34h-7a6.4 6.4 0 0 0-6.4 6.4V46c0 .5.3.9.7 1l1 .4v15.5c0 3.5 2.8 6.4 6.4 6.4h31c3.6 0 6.5-2.9 6.5-6.4V47.3l1-.4c.3-.1.6-.5.6-1zM40.9 31c.3-.9 1.1-1.5 2-1.5h10.2c.9 0 1.7.6 2 1.5l.9 3H40l1-3zm-14.3 9.3c0-2.3 1.9-4.2 4.2-4.2h34.4a4.3 4.3 0 0 1 4.2 4.2v4.8L48 53.5l-21.4-8.3v-4.8zm41.2 22.4a4.3 4.3 0 0 1-4.2 4.3H32.4c-2.3 0-4.2-2-4.2-4.3V48l19.4 7.5h.8L67.8 48v14.7z"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M52.5 45a4.5 4.5 0 1 0-9 0 4.5 4.5 0 0 0 9 0zm-6.8 0a2.3 2.3 0 1 1 2.3 2.3c-1.3 0-2.3-1-2.3-2.4z"/>
</g>
<g class="testimonials-button" transform="translate(0 23)">
<title>Testimonials</title>
<circle class="Oval-2-Copy-6" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M52.9 64.6c-.7 0-1.3-.1-1.8-.5-.5-.3-1.2-1-1.1-2.5 0-2 1.7-3 2.9-3.6l.4-.2c1.6-1 2.8-1.7 3.8-2.6 2-1.7 3-3.2 2.9-3.6l-.3-.1-1.1-.2-1-.1a8.9 8.9 0 0 1-7.7-9.1 10.8 10.8 0 0 1 21.6 0c0 7-3.6 16.9-13.7 21.1l-.3.1c-1.1.5-3 1.3-4.6 1.3zm7.8-31.3c-4.8 0-8.8 4-8.8 8.8 0 3.8 2.2 6.5 6 7.2h.8l1.6.3c1.2.4 1.5 1.2 1.6 1.7.3 1.8-2 4.2-3.6 5.4-1 1-2.4 1.8-4 2.8l-.5.2c-1.2.6-1.9 1-1.9 1.9 0 .5.1.8.3.9.6.4 2.1 0 4.6-1l.2-.1a20.8 20.8 0 0 0 12.6-19.3c0-5-4-8.8-8.9-8.8zM27.4 64.6c-.7 0-1.3-.1-1.8-.5-.5-.3-1.2-1-1.1-2.5 0-2 1.7-3 2.9-3.6l.4-.2c1.6-1 2.8-1.7 3.8-2.6 2-1.7 3-3.2 2.9-3.6l-.3-.1-1.1-.2-1-.1a8.9 8.9 0 0 1-7.6-9.1 10.8 10.8 0 0 1 21.5 0 23 23 0 0 1-13.7 21.1l-.2.1c-1.2.5-3 1.3-4.7 1.3zm7.8-31.3c-4.8 0-8.8 4-8.8 8.8 0 3.8 2.2 6.5 6 7.2h.8l1.6.3c1.2.4 1.5 1.2 1.6 1.7.4 1.8-2 4.2-3.5 5.4-1.2 1-2.5 1.8-4.2 2.8l-.4.2c-1.1.6-1.9 1-1.9 1.9 0 .5.1.8.3.9.9.6 3.7-.6 4.6-1l.2-.1a20.8 20.8 0 0 0 12.6-19.3c0-5-3.9-8.8-8.9-8.8z"/>
</g>
<g class="contact-button" transform="translate(239 23)">\
<title>Contact Us</title>
<circle class="Oval-2-Copy-5" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M40.4 42.7c1.4 0 1.4 2 0 2H29.1L36 56.3l7-7c1.1-1 2.5.4 1.6 1.4L37 58.2l3.4 6h21.5a290 290 0 0 0-6.5-10c-.7-1.3 1-2.4 1.8-1.2l2.5 3.8h9l-.4-4.7H57.9c-1.4 0-1.4-2 0-2h10.2l-.4-5.4h-5.8c-1.4 0-1.4-2 0-2h6.7c.6 0 1.1.3 1.1 1 .6 7 1.6 14.5 1.9 21.4a1 1 0 0 1-1.1 1H25.4a1 1 0 0 1-1-1l1.9-21.5c0-.4.5-1 1.1-1h13zM28.2 47l-1.6 17H38l-9.7-17zm36 17h5.2l-.5-5.3h-8l3.3 5.4zm-14-9.2c-2.7-3.3-8.7-11.7-8.7-16.1 0-5.4 4.4-9.4 9.6-9.4 5.1 0 9.7 4 9.7 9.4 0 4.4-6.1 12.8-9 16.1-.3.6-1 .5-1.5 0zm.9-2.2c2.3-2.8 7.5-10.5 7.5-14 0-4.2-3.5-7.1-7.5-7.1s-7.4 3-7.4 7.2c0 3.4 5.2 11.1 7.4 14zm0-19c2.3 0 4.2 2 4.2 4.3 0 2.2-1.9 4-4.2 4a4.1 4.1 0 0 1 0-8.2zm0 2.1c-1.1 0-2 1-2 2.2 0 1 .9 2 2 2a2 2 0 0 0 2.1-2c0-1.3-.9-2.2-2.1-2.2z"/>
</g>
</g>
<g class="settings-menu" transform="translate(228 654)">
<g class="security-button" transform="translate(120 24)">
<title>Secuirty Settings</title>
<circle class="Oval-2-Copy-8" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M48.2 64.6c.5 0 1-.5 1-1v-4.8A4 4 0 0 0 48 51a4 4 0 0 0-.9 8v4.6c0 .6.5 1 1 1zM46 55a2 2 0 1 1 3.9 0 2 2 0 0 1-4 0zm19.2-3.1c.5 0 1-.5 1-1v-4c0-2.2-1.9-4-4.2-4h-3.3v-8.3a10.6 10.6 0 0 0-21.3 0v8.2h-3.3A4.2 4.2 0 0 0 30 47v20.4c0 2.3 1.9 4.2 4.2 4.2h28c2.2 0 4.1-1.9 4.1-4.2V57.3a1 1 0 1 0-2 0v10.1c0 1.2-1 2.1-2.2 2.1h-28a2 2 0 0 1-2-2V47a2 2 0 0 1 2-2.1h28a2 2 0 0 1 2.1 2v4c0 .5.5 1 1 1zm-8.6-9h-17v-8.3a8.5 8.5 0 0 1 17 0v8.2z"/>
</g>
<g class="profile-button">
<title>Profile Settings</title>
<circle class="Oval-2-Copy-9" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M60.7 46.5a14.9 14.9 0 1 0-25.6 0A21.7 21.7 0 0 0 26.3 64v3.3c0 2.3 1.9 4.2 4.2 4.2h34.8c2.3 0 4.2-1.9 4.2-4.2V64c0-6.9-3.3-13.3-8.8-17.4zM48 26.4a12.6 12.6 0 0 1 10.3 19.8A12.6 12.6 0 1 1 48 26.4zm19.2 40.8c0 1-.8 1.8-1.8 1.8H30.6c-1 0-1.9-.8-1.9-1.8v-3.3c0-6.1 3-11.8 7.8-15.5a15 15 0 0 0 11.4 5.4c4.5 0 8.6-2 11.5-5.4A19 19 0 0 1 67 64v3.3z"/>
</g>
<g class="contact-button" transform="translate(240)">
<title>Contact Settings</title>
<circle class="Oval-2-Copy-10" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M56.5 71.5L40 58.2h-9.4c-3 0-5.4-2.4-5.4-5.4v-23c0-3 2.4-5.3 5.4-5.3h34.1c3 0 5.4 2.4 5.4 5.3v23c0 3-2.4 5.4-5.3 5.4h-8.2v13.3zm-26.7-45c-2 .2-3 2.2-3 3.1v23.2c0 2.1 1 3.3 3 3.6h10.7l14.9 12.4V56.4H65c.8 0 3 .4 3-2.8 0-3.2.3-22 0-24-.2-2 0-3-3-3s-33.1-.2-35.2 0z"/>
</g>
</g>
<g class="faq-menu" transform="translate(18 229)">
<g class="writing-button" transform="translate(0 120)">
<title>Writing FAQs</title>
<circle class="Oval-2-Copy-7" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M69.2 26.8a8.6 8.6 0 0 0-12.1 0L29.1 55h-.2v.2l-.1.2v.1l-.1.2L24.4 70c-.1.4 0 1 .4 1.4.3.2.6.4 1 .4h.4l14.3-4.3h.2l.2-.2h.1l.1-.1h.1l28-28.2a8.6 8.6 0 0 0 0-12.2zM27.9 68.1l2.8-9.6 6.7 6.7-9.5 3zm12.2-4L32 55.8l24-24 8 8.2-24 24zm27-27.2l-1 1-8.1-8 1-1a5.7 5.7 0 0 1 8.1 0 5.6 5.6 0 0 1 0 8z"/>
</g>
<g class="reading-button" transform="translate(24)">
<title>Reading FAQs</title>
<circle class="Oval-2-Copy-7" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M71.6 70.7h-2.9V37.9h-9v-9.6H27.5v42.4h-2.9V25.4h38V35h9z"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M69.4 36.9l-8.9-9.5 2.1-2 9 9.6zm-34.1 4.6h12.1v2.9H35.3zm0 11.7h25.5v3H35.3zm0 7.2h25.5v2.9H35.3z"/>
</g>
<g class="general-button" transform="translate(24 240)">
<title>General FAQs</title>
<circle class="Oval-2-Copy-7" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M54.3 68h-4V40.5a2 2 0 0 0-2-2h-6a2 2 0 1 0 0 4h4V68h-4a2 2 0 1 0 0 4h12a2 2 0 1 0 0-4zm-7.8-36a3.8 3.8 0 1 0 0-7.6 3.8 3.8 0 0 0 0 7.6z"/>
</g>
</g>
</g>
<g class="middle-layer" transform="translate(132 132)">
<circle class="middle-circle-backgroud" cx="264" cy="264" r="264" fill="#000" fill-opacity=".4"/>
<g class="button-group">
<g class="settings-button" transform="translate(216 408)">
<title>Settings Menu</title>
<circle class="Oval-2-Copy-3" cx="48" cy="48" r="48" fill="#F06" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M49.4 30.5a6.2 6.2 0 0 1 0 12.2v24.6a1.4 1.4 0 0 1-2.8 0V42.7a6.2 6.2 0 0 1 0-12.2V29a1.4 1.4 0 0 1 2.8 0v1.6zm-4.8 6.1a3.4 3.4 0 1 0 6.8 0 3.4 3.4 0 0 0-6.8 0zm-12.4 17a6.2 6.2 0 0 1 0 12.1v1.6a1.4 1.4 0 0 1-3 0v-1.6a6.2 6.2 0 0 1 0-12.1V28.9a1.4 1.4 0 0 1 3 0v24.7zm-4.8 6a3.4 3.4 0 1 0 6.7 0 3.4 3.4 0 0 0-6.7 0zM66.7 45a6.2 6.2 0 0 1 0 12v10.3a1.4 1.4 0 0 1-2.9 0V57.1a6.2 6.2 0 0 1 0-12.2V29a1.4 1.4 0 0 1 3 0v16zM62 51a3.4 3.4 0 1 0 6.7 0 3.4 3.4 0 0 0-6.7 0z"/>
</g>
<g class="faq-button" transform="translate(24 217)">
<title>FAQ Menu</title>
<circle class="Oval-2-Copy" cx="48" cy="48" r="48" fill="#F06" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" stroke="#fff" d="M36.5 38.8c.6 0 1.2-.5 1.2-1.2a11 11 0 0 1 11.8-11 11 11 0 0 1 10 11.3c-.1 5.2-3.8 9.7-8.9 10.5a3.4 3.4 0 0 0-2.6 3.4v6a1.2 1.2 0 0 0 2.4 0v-6c0-1 .5-1 .7-1a13 13 0 0 0 10.8-12.9 13.3 13.3 0 1 0-26.6-.3c0 .7.5 1.2 1.2 1.2z"/>
<g class="Shape" fill-rule="nonzero">
<use fill="#fff" fill-rule="evenodd" xlink:href="#path-1"/>
<path stroke="#fff" d="M45.6 67.9a3.6 3.6 0 1 0 7.3 0c0-2-1.7-3.7-3.7-3.7s-3.6 1.6-3.6 3.7zm5.9 0c0 1.2-1 2.2-2.3 2.2-1.3 0-2.3-1-2.3-2.2 0-1.3 1-2.3 2.3-2.3 1.3 0 2.3 1 2.3 2.3z"/>
</g>
</g>
<g class="home-button" transform="translate(216 24)">
<title>Home Menu</title>
<circle class="Oval-2-Copy-2" cx="48" cy="48" r="48" fill="#F06" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M64.2 46.8c-.7 0-1.3.6-1.3 1.3v20.7h-7.3v-8a7.1 7.1 0 0 0-14.3 0v8H34V48.1a1.3 1.3 0 0 0-2.7 0v22c0 .8.6 1.4 1.4 1.4h10c.7 0 1.3-.6 1.3-1.3v-9.3a4.5 4.5 0 0 1 9 0v9.3c0 .7.5 1.3 1.2 1.3h10c.7 0 1.3-.6 1.3-1.3v-22c0-.8-.6-1.4-1.3-1.4zm6-1.2L49.3 25c-.5-.5-1.4-.5-2 0L26.8 45.6a1.3 1.3 0 1 0 2 2l19.7-19.9 19.9 19.8a1.3 1.3 0 1 0 1.8-1.9z"/>
</g>
<g class="more-button" transform="translate(408 217)">
<title>More Menu</title>
<circle class="Oval-2" cx="48" cy="48" r="48" fill="#F06" opacity=".6"/>
<path class="Shape" fill="#fff" fill-rule="nonzero" d="M29.8 42a5.9 5.9 0 0 0-5.8 5.8c0 3.2 2.6 5.9 5.8 5.9 3.2 0 5.9-2.7 5.9-5.9S33 42 29.8 42zM48 42a5.9 5.9 0 0 0-5.8 5.8c0 3.2 2.6 5.9 5.8 5.9A5.9 5.9 0 1 0 48 42zm18.2 0a5.9 5.9 0 0 0-5.9 5.8c0 3.2 2.7 5.9 5.9 5.9S72 51 72 47.8 69.4 42 66.2 42zm-36.4 2.6c1.8 0 3.3 1.4 3.3 3.2 0 1.8-1.5 3.3-3.3 3.3a3.2 3.2 0 0 1-3.2-3.3c0-1.8 1.4-3.2 3.2-3.2zm18.2 0c1.8 0 3.2 1.4 3.2 3.2 0 1.8-1.4 3.3-3.2 3.3a3.2 3.2 0 0 1-3.2-3.3c0-1.8 1.4-3.2 3.2-3.2zm18.2 0c1.8 0 3.2 1.4 3.2 3.2 0 1.8-1.4 3.3-3.2 3.3a3.2 3.2 0 0 1-3.3-3.3c0-1.8 1.5-3.2 3.3-3.2z"/>
</g>
</g>
</g>
<g class="main-menu" transform="translate(276 276)">
<title>Main Menu</title>
<circle class="inner-circle-background" cx="120" cy="120" r="120" fill="#000" opacity=".4"/>
<g class="menu-button" fill="#fff" fill-rule="nonzero" transform="translate(84 95)">
{{--<path class="Shape" d="M4.7 29.3a3.7 3.7 0 1 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.7zM4.4 8a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 0 1 0 7.3H4.4zm0 42a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.4z"/>--}}
<path class="Shape" d="M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
</g>
</g>
</g>
</g>
</svg>
I'm completely newbie to use svg, is there any way that I can use my custom icon with custom size just using path element?
Next I'm using your original path element instead of the icon already there. You can use any icon you want and of any size if you put it inside a <symbol> element.
How did I do it: the <symbol> element has a viewBox="0 -11 72 72" Please note that the symbol is a square pf 72/72 units.
When you use a symbol you can give the <use> element a x and a y attributes to position the icon where you need. You also can give the <use> element a width and a height attributes to size it to your needs.
In order to get the value for the <symbol> element you may use the .getBBox() method for the content of the symbol. In this case I did: Shape.getBBox(). I hope it helps.
<use xlink:href="#test" x="28" y="28" width="40" height="40" fill="white" />
<svg class="menu" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 792 792">
<defs>
<symbol id="test" viewBox="0 -11 72 72">
<path id="Shape" d="M4.7 29.3a3.7 3.7 0 1 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.7zM4.4 8a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 0 1 0 7.3H4.4zm0 42a3.7 3.7 0 0 1 0-7.3h63.2a3.7 3.7 0 1 1 0 7.3H4.4z"/>
</symbol>
</defs>
<g class="All-on" fill="none" fill-rule="evenodd" transform="translate(-571 -143)">
<g class="menu" transform="translate(571 143)">
<g class="outside-layer">
<circle class="outer-cirlce-background" cx="396" cy="396" r="396" fill="#000" fill-opacity=".4"/>
<g class="more-menu" transform="translate(654 229)">
<g class="writing-button" transform="translate(24 120)">
<title>My Posts</title>
<circle class="Oval-2-Copy-11" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
<use xlink:href="#test" x="28" y="28" width="40" height="40" fill="white" />
</g>
</g>
</g>
</g>
</g>
</svg>
Related
SVG two paths in a single one axis
I have been new to SVG and trying to figure out how can I make different paths in an SVG in a single axis/single line. Now what I want is that these words align to one single line like UNFO (Their Y-axis should be same) Now this is the code to generate these words. HTML Code <svg style="background:black;" viewBox="0 0 1900 1400"> <path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M214.066,479.666q-14.21,29.444-20.508,53.613-5.128,19.484-5.127,29.3a11.726,11.726,0,0,0,2.344,7.324,9.709,9.709,0,0,0,7.764,3.955,4.257,4.257,0,0,0,4.248-2.636q0.73-1.758,1.025-9.522,0.879-21.677,19.776-66.5,19.04-45.263,52.441-95.361,6.591-9.812,6.592-13.476a6.047,6.047,0,0,0-1.9-4.395,6.408,6.408,0,0,0-4.834-2.2,10.365,10.365,0,0,0-7.177,2.783,92.63,92.63,0,0,0-8.35,8.643q-19.335,21.972-34.717,42.187-61.083,79.98-88.037,110.889-10.693,12.161-16.406,12.158a5.448,5.448,0,0,1-4.834-2.783,10.56,10.56,0,0,1-1.318-5.274q0-6.883,3.516-18.6a226.082,226.082,0,0,1,13.769-35.3q20.655-42.479,47.9-74.414,21.238-24.9,22.852-26.513,7.03-7.032,7.031-11.28a6.794,6.794,0,0,0-2.637-5.42,5.925,5.925,0,0,0-3.808-1.611q-6.009,0-21.24,17.578-36.771,42.334-59.619,87.012Q99.368,526.1,99.369,552.762a28.884,28.884,0,0,0,3.369,14.355q4.978,8.645,12.891,8.643,11.569,0,28.711-18.018a431.678,431.678,0,0,0,32.666-39.7q41.748-56.541,54.931-72.07-16.994,32.081-17.871,33.691h0Z"/> <path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M508.564,250.1q4.248-6,4.248-9.228a6.46,6.46,0,0,0-2.05-4.688,5.189,5.189,0,0,0-3.662-1.757q-3.956,0-9.522,8.056-5.568,8.205-15.234,26.367Q464.326,302.4,464.326,310.3a7.142,7.142,0,0,0,2.051,5.274,5.323,5.323,0,0,0,4.1,1.758q4.982,0,9.375-7.764,17.137-32.372,37.06-45.117-14.942,24.026-14.941,43.8,0,10.254,3.955,17.431,4.1,7.615,10.107,7.617a5.993,5.993,0,0,0,4.541-2.05,4.615,4.615,0,0,0,1.758-3.37q0-1.9-2.051-5.273a29.441,29.441,0,0,1-4.394-15.381q0-24.9,27.978-57.568,5.126-6,5.127-10.4,0-6.3-5.713-6.3-10.4,0-41.015,29.883-1.758,1.757-3.663,3.515a156.849,156.849,0,0,1,9.961-16.26h0Z"/> <path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M77.51,958.75q0,4.395,3.955,4.395a9.069,9.069,0,0,0,2.2-.293Q81.317,969,78.828,974.424q-9.668,21.828-11.719,27.1-16.4,43.515-16.406,65.19,0,10.11,3.662,15.97,4.542,7.02,11.865,7.03,9.668,0,18.9-9.52,8.641-8.79,17.871-25.79,21.385-39.84,21.387-75.728,0-13.916-4.981-23.438-3.663-6.735-12.451-10.839,20.506-13.329,35.156-13.33a11.828,11.828,0,0,1,5.274,1.025q7.323,4.1,9.814,4.1a6.938,6.938,0,0,0,5.713-2.783,6.416,6.416,0,0,0,1.611-4.248q0-4.539-4.541-8.056a17.77,17.77,0,0,0-11.132-3.37q-9.23,0-32.666,8.936,26.218-51.559,58.593-88.476,5.126-6.006,5.127-9.229a4.618,4.618,0,0,0-2.051-3.955,4.491,4.491,0,0,0-3.076-1.172q-4.689,0-11.279,6.592-9.524,9.377-24.023,29.883-21.39,30.323-43.8,78.662Q77.509,950.987,77.51,958.75h0Zm30.615,4.688q4.246,5.568,4.248,16.552,0,28.274-16.7,62.26-14.8,30.465-23.877,30.46c-1.854,0-3.465-.97-4.834-2.93a12.086,12.086,0,0,1-1.9-6.73q0-19.485,13.916-54.79,13.475-34.566,21.679-50.1,5.858,3.077,7.471,5.274h0Z"/> <path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M824.762,560.3q-16.26,11.282-28.272,31.64Q783.6,613.912,783.6,632.662a20.468,20.468,0,0,0,2.05,9.521q3.956,7.911,12.452,7.91,18.309,0,37.939-32.373,18.018-29.882,18.017-49.365,0-14.646-12.011-14.648-7.767,0-17.285,6.592h0Zm0,53.613a45.37,45.37,0,0,1-5.713,9.082q-8.058,10.546-15.088,10.547a5.744,5.744,0,0,1-4.834-2.637,7.524,7.524,0,0,1-1.318-4.395q0-9.372,7.177-23.583a92.43,92.43,0,0,1,17.871-24.17q9.081-9.081,13.77-9.082a3.881,3.881,0,0,1,3.662,2.2,4.408,4.408,0,0,1,.732,2.344q0,9.084-13.183,23.877-4.69,5.272-4.688,6.445,0,1.614,3.662,4.541,0.145,0.147-2.05,4.834h0Z"/> </svg> Can anyone tell me how to align each path?
Your first move command in each path specifies the starting y position. Each path shows a different y position. All four paths should probably have their first y value be the same say 150; however, some of the commands that follow are using absolute positioning. Changing the Y value will distort your shapes. If you are using an editor see if you can change it to use relative values rather than absolute. You can see them in the paths. Where ever there is an uppercase letter it is a absolute position. If it's a lower case letter then it is a relative position. The first M command in each svg is probably fine but the remaining commands in your SVG should probably be relative. That way you could just change the y value in each to be the same. You could change the first svg paths first M command to read something like M214.066,250 the second path to read M508.564,250 and the last two to use 250 as the second parameter also. I used Inkscape and imported your path using its XML editor. Once I created a new svg:path element and pasted your path data in I just moved it a little and Inkscape automatically converted the data to be relative. Then I just copied it back out and made adjustments to the first M command's x an y parameters for each svg path. <svg style="background:black;" viewBox="0 0 1900 1400"> <path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M214.066,150 q -14.21,29.444 -20.508,53.613 -5.128,19.484 -5.127,29.3 a 11.726,11.726 0 0 0 2.344,7.324 9.709,9.709 0 0 0 7.764,3.955 4.257,4.257 0 0 0 4.248,-2.636 q 0.73,-1.758 1.025,-9.522 0.879,-21.677 19.776,-66.5 19.04,-45.263006 52.441,-95.361006 6.591,-9.812 6.592,-13.476 a 6.047,6.047 0 0 0 -1.9,-4.395 6.408,6.408 0 0 0 -4.834,-2.2 10.365,10.365 0 0 0 -7.177,2.783 92.63,92.63 0 0 0 -8.35,8.643 q -19.335,21.972 -34.717,42.187 -61.082996,79.980006 -88.036996,110.889006 -10.693,12.161 -16.406,12.158 a 5.448,5.448 0 0 1 -4.834,-2.783 10.56,10.56 0 0 1 -1.318,-5.274 q 0,-6.883 3.516,-18.6 a 226.082,226.082 0 0 1 13.769,-35.3 q 20.655,-42.479006 47.9,-74.414006 21.237996,-24.9 22.851996,-26.513 7.03,-7.032 7.031,-11.28 a 6.794,6.794 0 0 0 -2.637,-5.42 5.925,5.925 0 0 0 -3.808,-1.611 q -6.009,0 -21.239996,17.578 -36.771,42.334 -59.619,87.012006 -23.444001,46.277 -23.443001,72.939 a 28.884,28.884 0 0 0 3.369001,14.355 q 4.978,8.645 12.891,8.643 11.569,0 28.711,-18.018 a 431.678,431.678 0 0 0 32.666,-39.7 q 41.747996,-56.541 54.930996,-72.070006 -16.994,32.081006 -17.871,33.691006 v 0 z"/> <path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M300,150 q 4.248,-6 4.248,-9.228 a 6.46,6.46 0 0 0 -2.05,-4.688 5.189,5.189 0 0 0 -3.662,-1.757 q -3.956,0 -9.522,8.056 -5.568,8.205 -15.234,26.367 -18.018,33.55 -18.018,41.45 a 7.142,7.142 0 0 0 2.051,5.274 5.323,5.323 0 0 0 4.1,1.758 q 4.982,0 9.375,-7.764 17.137,-32.372 37.06,-45.117 -14.942,24.026 -14.941,43.8 0,10.254 3.955,17.431 4.1,7.615 10.107,7.617 a 5.993,5.993 0 0 0 4.541,-2.05 4.615,4.615 0 0 0 1.758,-3.37 q 0,-1.9 -2.051,-5.273 a 29.441,29.441 0 0 1 -4.394,-15.381 q 0,-24.9 27.978,-57.568 5.126,-6 5.127,-10.4 0,-6.3 -5.713,-6.3 -10.4,0 -41.015,29.883 -1.758,1.757 -3.663,3.515 a 156.849,156.849 0 0 1 9.961,-16.26 v 0 z"/> <path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M360,150 q 0,4.395 3.955,4.395 a 9.069,9.069 0 0 0 2.2,-0.293 q -2.348,6.148 -4.837,11.572 -9.668,21.828 -11.719,27.1 -16.4,43.515 -16.406,65.18998 0,10.11 3.662,15.97 4.542,7.02 11.865,7.03 9.668,0 18.9,-9.52 8.641004,-8.79 17.871004,-25.78998 21.385,-39.84 21.387,-75.728 0,-13.916 -4.981,-23.438 -3.663,-6.735 -12.451,-10.839 20.506,-13.329 35.156,-13.33 a 11.828,11.828 0 0 1 5.274,1.025 q 7.323,4.1 9.814,4.1 a 6.938,6.938 0 0 0 5.713,-2.783 6.416,6.416 0 0 0 1.611,-4.248 q 0,-4.539 -4.541,-8.056 a 17.77,17.77 0 0 0 -11.132,-3.37 q -9.23,0 -32.666,8.936 26.218,-51.559 58.593,-88.476 5.126,-6.006 5.127,-9.229 a 4.618,4.618 0 0 0 -2.051,-3.955 4.491,4.491 0 0 0 -3.076,-1.172 q -4.689,0 -11.279,6.592 -9.524,9.377 -24.023,29.883 -21.39,30.323 -43.8,78.662 -18.167004,12.009 -18.166004,19.772 z m 30.615004,4.688 q 4.246,5.568 4.248,16.552 0,28.274 -16.7,62.26 -14.800004,30.46498 -23.877004,30.45998 c -1.854,0 -3.465,-0.97 -4.834,-2.93 a 12.086,12.086 0 0 1 -1.9,-6.73 q 0,-19.48498 13.916,-54.78998 13.475004,-34.566 21.679004,-50.1 5.858,3.077 7.471,5.274 v 0 z"/> <path stroke="white" fill="none" stroke-width="1" id="Color_Fill_2" data-name="Color Fill 2" class="cls-2" d="M460,150 q -16.26,11.282 -28.272,31.64 -12.89,21.972 -12.89,40.722 a 20.468,20.468 0 0 0 2.05,9.521 q 3.956,7.911 12.452,7.91 18.309,0 37.939,-32.373 18.018,-29.882 18.017,-49.365 0,-14.646 -12.011,-14.648 -7.767,0 -17.285,6.592 v 0 z m 0,53.613 a 45.37,45.37 0 0 1 -5.713,9.082 q -8.058,10.546 -15.088,10.547 a 5.744,5.744 0 0 1 -4.834,-2.637 7.524,7.524 0 0 1 -1.318,-4.395 q 0,-9.372 7.177,-23.583 a 92.43,92.43 0 0 1 17.871,-24.17 q 9.081,-9.081 13.77,-9.082 a 3.881,3.881 0 0 1 3.662,2.2 4.408,4.408 0 0 1 0.732,2.344 q 0,9.084 -13.183,23.877 -4.69,5.272 -4.688,6.445 0,1.614 3.662,4.541 0.145,0.147 -2.05,4.834 v 0 z"/> </svg> Give it a try. Or you may want to just move each path like in this answer: https://stackoverflow.com/a/62637147/2218425
How do I centre an svg path in an svg circle?
I have an svg of the GitHub logo (taken from Simple Icons).
I would like to centre this svg in a circle so it looks something like this:
I've tried taking the path from the svg and creating another svg with that path and a circle, like:
svg {
padding: 5px;
fill: none;
stroke: black;
stroke-width: 1px;
stroke-linejoin: round;
}
svg:hover {
stroke: red;
}
<svg height="90" width="90">
<circle cx="48%" cy="48%" r="48%" />
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
But I don't know how to centre the path in the circle, how would I do that?
The moment you start with translate you will continue to stack <g> groups and translates like empty sushi plates at a party of 10 Instead, learn to edit MDN: SVG paths Tool of choice: SVG Path Editor https://yqnn.github.io/svg-path-editor/ Copy/paste d-path reduced presicion to 0 (for explanation purposes, but its always good to lower precision) The path is: M12 0c-7 0-12 5-12 12c0 5 3 10 8 11c1 0 1 0 1-1c0 0 0-1 0-2c-3 1-4-2-4-2C4 18 4 18 4 18 c-1-1 0-1 0-1c1 0 2 1 2 1c1 2 3 1 4 1c0-1 0-1 1-2c-3 0-6-1-6-6c0-1 1-2 1-3c0 0-1-2 0-3 c0 0 1 0 3 1c1 0 2 0 3 0c1 0 2 0 3 0c2-2 3-1 3-1c1 2 0 3 0 3c1 1 1 2 1 3c0 5-3 6-6 6 c0 0 1 1 1 2c0 2 0 3 0 3c0 0 0 1 1 1C21 22 24 18 24 12c0-7-5-12-12-12 Learn SVG: M and m are moves C and c are curves capital M and C are absolute positioned points, we don't want those when we alter the path, because they would always stay at the absolute position Convert to relative in the path editor The path is: m12 0c-7 0-12 5-12 12c0 5 3 10 8 11c1 0 1 0 1-1c0 0 0-1 0-2c-3 1-4-2-4-2c-1 0-1 0-1 0 c-1-1 0-1 0-1c1 0 2 1 2 1c1 2 3 1 4 1c0-1 0-1 1-2c-3 0-6-1-6-6c0-1 1-2 1-3c0 0-1-2 0-3 c0 0 1 0 3 1c1 0 2 0 3 0c1 0 2 0 3 0c2-2 3-1 3-1c1 2 0 3 0 3c1 1 1 2 1 3c0 5-3 6-6 6 c0 0 1 1 1 2c0 2 0 3 0 3c0 0 0 1 1 1c6-1 9-5 9-11c0-7-5-12-12-12 That first m12 0 is the start DRAWING position In the editor we see: the top-left is 0,0 the (square) image is 24 units wide (SVG is a vector format, they are not pixels) to add space for a circle the image needs to be moved 6 units right and 6 units down That changes the viewBox="0 0 24 24" to: viewBox="0 0 30 30" A viewBox="0 0 W H" is the most comfortable for your future SVG adventures. A viewBox="-15 -15 15 15" is great when you do a lot of drawing around a (0,0) center point. Now instead of using transform="translate(x y)", you change the d-path start position from M12 0 to: M15 3 new x = x + 6/2 = 12 + 3 = 15 new y = y + 6/2 = 0 + 3 = 3 since it is the first path move, it doesn't matter if its m15 3 or M15 3 use an extra <rect> to always see the viewBox size <svg height="90" width="90" viewBox="0 0 30 30"> <rect width="100%" height="100%" fill="pink"/> <circle r="48%" cx="50%" cy="50%" fill="none" stroke-width="1" stroke="red" /> <path d="M15 3c-7 0-12 5-12 12c0 5 3 10 8 11c1 0 1 0 1-1c0 0 0-1 0-2c-3 1-4-2-4-2c-1 0-1 0-1 0 c-1-1 0-1 0-1c1 0 2 1 2 1c1 2 3 1 4 1c0-1 0-1 1-2c-3 0-6-1-6-6c0-1 1-2 1-3c0 0-1-2 0-3 c0 0 1 0 3 1c1 0 2 0 3 0c1 0 2 0 3 0c2-2 3-1 3-1c1 2 0 3 0 3c1 1 1 2 1 3c0 5-3 6-6 6 c0 0 1 1 1 2c0 2 0 3 0 3c0 0 0 1 1 1c6-1 9-5 9-11c0-7-5-12-12-12"/> </svg> End result: One step (or giant leap) further is to write the <circle> as (part of) the d-path using: http://complexdan.com/svg-circleellipse-to-path-converter/
The easier way would be drawing the circle and the path around the origin {x:0,y:0}. For this I've added a viewBox to the svg element whete the the first 2 paramaters (from x and from y) are negative. Now the center of the svg canvas is in the origin.
Next in order to center the circle around the origin I'm removing the cx and cy attributes (dhe default = 0)
In order to center the oath around the origin I'm calculating the bounding box and transtate the shape half width and half height to the left: transform="translate(-12,-12)"
console.log(pth.getBBox())
svg {
fill: none;
stroke: black;
stroke-width: 1px;
stroke-linejoin: round;
}
svg:hover {
stroke: red;
}
<svg height="90" width="90" viewBox="-20 -20 40 40">
<circle r="48%" />
<path id="pth" transform="translate(-12,-12)" d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
I used Illustrator to center the path and the circle
svg {
padding: 5px;
fill: none;
stroke: black;
stroke-width: 8;
stroke-linejoin: round;
}
svg:hover {
stroke: red;
}
<svg width="90" height="90" viewBox="0 0 600 600">
<circle cx="258.96" cy="258.96" r="257.88"/>
<path d="M258.96 81.73a181.74 181.74 0 00-57.47 354.15c9.09 1.71 12.42-3.91 12.42-8.74 0-4.32-.15-15.75-.23-30.89-50.55 11-61.21-24.38-61.21-24.38-8.27-21-20.22-26.58-20.22-26.58-16.46-11.27 1.27-11 1.27-11 18.25 1.27 27.84 18.72 27.84 18.72 16.2 27.79 42.54 19.76 52.93 15.11 1.64-11.75 6.32-19.76 11.51-24.31-40.36-4.54-82.78-20.17-82.78-89.81 0-19.84 7-36 18.7-48.76-2-4.59-8.18-23.06 1.59-48.1 0 0 15.22-4.88 50 18.63a171.34 171.34 0 0190.87 0c34.53-23.5 49.75-18.63 49.75-18.63 9.77 25 3.63 43.51 1.82 48.1 11.55 12.72 18.6 28.89 18.6 48.72 0 69.82-42.48 85.19-82.92 89.65 6.36 5.45 12.27 16.6 12.27 33.62 0 24.32-.23 43.86-.23 49.76 0 4.77 3.18 10.45 12.49 8.63a181.1 181.1 0 00124.73-172.16c0-100.36-81.37-181.73-181.73-181.73"/>
</svg>
Edit: An alternative way, numbers needed to be fine-tuned though, using a div instead of the circle:
div {
width: 90px;
height: 90px;
border: 3px solid black;
border-radius: 50%;
position: relative;
}
svg {
fill: none;
stroke: black;
stroke-width: 1;
stroke-linejoin: round;
}
svg path {
transform: translate(11px, 10.5px) scale(2.8);
}
.svg-container:hover {
border-color: red;
}
.svg-container:hover svg {
stroke: red;
}
<div class="svg-container">
<svg height="90" width="90">
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
</svg>
</div>
Put your circle in group and use transform="translate(x, y)". <svg viewBox="0 0 400 400"> <g transform="translate(200, 200)"> <circle cx="0" cy="0" r="200" style="" fill="darkOrange"></circle> </g> </svg>
How to render string as SVG dynamically in Angular 8
I have list of items with icon as SVG string given below
steps=[
{
"id": 1,
"code": "ABC",
"dname": "abc",
"conveyStep": null,
"sequence": 1,
"fqcn": null,
"status": "A",
"icon": `<svg xmlns="http://www.w3.org/2000/svg" width="24.148" height="31.393" viewBox="0 0 24.148 31.393">
<defs>
</defs>
<g id="noun_Document_188541" transform="translate(-15 -5)">
<g id="Group_1821" data-name="Group 1821" transform="translate(15 5)">
<path id="Path_1051" d="M31.55 5H15v31.393h24.148V12.6zm.35 2.061l5.183 5.183H31.9V7.061zM16.2 35.185V6.208h14.5v7.244h7.244v21.733H16.208z" class="cls-1" data-name="Path 1051" transform="translate(-15 -5)"/>
<path id="Rectangle_8" d="M0 0h14.489v.604H0z" class="cls-1" data-name="Rectangle 8" transform="translate(4.83 25.355)"/>
<path id="Rectangle_9" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 9" transform="translate(4.83 18.111)"/>
<path id="Rectangle_10" d="M0 0h14.489v.604H0z" class="cls-1" data-name="Rectangle 10" transform="translate(4.83 15.696)"/>
<path id="Rectangle_11" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 11" transform="translate(13.282 13.282)"/>
<path id="Rectangle_12" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 12" transform="translate(13.282 10.867)"/>
<path id="Rectangle_13" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 13" transform="translate(4.83 20.526)"/>
<path id="Rectangle_14" d="M0 0h6.037v.604H0z" class="cls-1" data-name="Rectangle 14" transform="translate(4.83 22.941)"/>
<g id="Group_1819" data-name="Group 1819" transform="translate(13.282 18.715)">
<path id="Path_1052" d="M53.144 62.452a3.348 3.348 0 0 0 1.07-.771 1.835 1.835 0 0 0 .447-1.066h-.338a1.838 1.838 0 0 1-.61-.084.971.971 0 0 1-.381-.235.832.832 0 0 1-.2-.319 1.147 1.147 0 0 1-.057-.361.894.894 0 0 1 .311-.674 1.042 1.042 0 0 1 .733-.289 1.237 1.237 0 0 1 1.02.439 1.881 1.881 0 0 1 .356 1.216 2.287 2.287 0 0 1-.613 1.457 3.989 3.989 0 0 1-1.475 1.114z" class="cls-1" data-name="Path 1052" transform="translate(-53.078 -58.653)"/>
<path id="Path_1053" d="M61.8 62.452a3.348 3.348 0 0 0 1.07-.771 1.835 1.835 0 0 0 .447-1.066h-.338a1.838 1.838 0 0 1-.61-.084.971.971 0 0 1-.381-.235.832.832 0 0 1-.2-.319 1.147 1.147 0 0 1-.057-.361.894.894 0 0 1 .311-.674 1.042 1.042 0 0 1 .733-.289 1.237 1.237 0 0 1 1.02.439 1.881 1.881 0 0 1 .356 1.216 2.287 2.287 0 0 1-.613 1.457 3.989 3.989 0 0 1-1.475 1.114z" class="cls-1" data-name="Path 1053" transform="translate(-58.713 -58.653)"/>
</g>
<g id="Group_1820" data-name="Group 1820" transform="translate(5.428 9.056)">
<path id="Path_1054" d="M41.569 31.389a3.348 3.348 0 0 0-1.07.771 1.835 1.835 0 0 0-.447 1.066h.338a1.838 1.838 0 0 1 .61.084.971.971 0 0 1 .381.235.832.832 0 0 1 .2.319 1.147 1.147 0 0 1 .057.361.894.894 0 0 1-.311.674 1.042 1.042 0 0 1-.733.289 1.237 1.237 0 0 1-1.02-.439 1.881 1.881 0 0 1-.356-1.216 2.287 2.287 0 0 1 .613-1.457 3.989 3.989 0 0 1 1.469-1.114z" class="cls-1" data-name="Path 1054" transform="translate(-36.196 -30.962)"/>
<path id="Path_1055" d="M32.915 31.389a3.348 3.348 0 0 0-1.07.771 1.835 1.835 0 0 0-.447 1.066h.338a1.838 1.838 0 0 1 .61.084.971.971 0 0 1 .381.235.832.832 0 0 1 .2.319 1.147 1.147 0 0 1 .057.361.894.894 0 0 1-.311.674 1.042 1.042 0 0 1-.733.289 1.237 1.237 0 0 1-1.02-.439 1.881 1.881 0 0 1-.356-1.216 2.287 2.287 0 0 1 .613-1.457 3.989 3.989 0 0 1 1.475-1.114z" class="cls-1" data-name="Path 1055" transform="translate(-30.561 -30.962)"/>
</g>
</g>
</g>
</svg>`
},
{
...
}
];
...
now I want to show these SVG string as SVG in my HTML
but its not showing my SVG
<div class="scrollmenu" id="scroll_menu">
<div class="steps" *ngFor="let step of newSteps">
<p class="completed"></p>
<p style="width:5px;margin-top:-13px;margin-left: 18px;margin-left: 37px;"><i class="fa fa-check-circle"
aria-hidden="true"></i></p>
<div class="step-image">
\\here I want to show my svg
</div>
</div>
</div>
and I want to give style to some of the svg depending upon some condition so is there any way to also give style to dynamically added avg?
any help would be appreciated.
So basically I was getting security issues after ignoring DomSanitizer so I went to https://angular.io/guide/security#xss and concluded and made changes in my code to get what I wanted.
I imported DomSanitizer
import { DomSanitizer} from '#angular/platform-browser';
....
newSteps=[];
constructor(private sanitizer: DomSanitizer) { }
ngOnInit() {
for (let i = 0; i < this.steps.length; i++) {
this.newSteps.push(this.sanitizer.bypassSecurityTrustHtml(this.steps[i].icon));
}
}
and then simply user [innerHTML] tagin html file
<div id="steps" class="step-image" [innerHTML]="step">
</div>
You could create a directive that takes the svg string and adds it to the innerHTML of its host element. Then use the directive to dynamically apply styles to the inner svg.
NOTE: This bypasses Angular's DomSanitizer and leaves you open to XSS vulnerabilities. Only use this approach if you trust the source of the svg string.
#Directive({
selector: '[svgIcon]',
})
export class SvgIconDirective implements OnChanges {
#Input()
svg?: string;
constructor(
private _elementRef: ElementRef,
) {}
ngOnChanges(changes: SimpleChanges) {
if (changes.svg) {
this._elementRef.nativeElement.innerHTML = '';
if (this.svg) {
this._elementRef.nativeElement.innerHTML = this.svg;
}
}
}
}
How to render Arabic text in svg with span elements?
I am trying to display Arabic text by replacing English words in span elements. But it interchanged by its words. I have tried by adding direction, xml: lang, unicode-bidi to svg attributes. It changes to RTL but it did not changes order Please refer this fiddles: Expected output with english words modelOutput. <!DOCTYPE html> <html> <head> <title>SVG with english words</title> </head> <body> <svg id="container_svg" width="117.5" height="71.5" opacity="1"> <g id="container_group" opacity="1"> <path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path> <text id="container_text" x="10" y="20" fill="null" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start" transform="" opacity="undefined" dominant-baseline="undefined"><tspan x="19" fill="#dbdbdb">Browsers</tspan><tspan x="25" dy="27" fill="#dbdbdb">Opera : </tspan><tspan fill="#ffffff" style="font-weight:bold">37%</tspan></text> <path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path> <defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs> <g id="container_trackball_group"> <ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse> </g> </g> </svg> </body> </html> Actual output actual. <!DOCTYPE html> <html> <head> <title>SVG with Arabic words</title> </head> <body> <svg id="container_svg" width="117.5" height="71.5" opacity="1"> <g id="container_group" opacity="1"> <path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path> <text id="container_text" x="10" y="20" fill="null" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start" transform="" opacity="undefined" dominant-baseline="undefined"><tspan x="19" fill="#dbdbdb">ذكي متصفح</tspan><tspan x="25" dy="27" fill="#dbdbdb">كروم : </tspan><tspan fill="#ffffff" style="font-weight:bold">37%</tspan></text> <path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path> <defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs> <g id="container_trackball_group"> <ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse> </g> </g> </svg> </body> </html> I expect that Browsers will be replaced with متصفح ذكي. Similarly opera with ايفون. Actual output image actual. Expected output expect. Can anyone help me to acheive this?
The problem arises because the sequence " : " has no defined direction. Unicode has a group of bidirectional control characters that help with the interpretation of such situations. If you insert a left-to-right mark between the كروم and the following interpunction, it is made clear everything that follows goes left-to-right. While in HTML the mark could be written as , this does not work inside the SVG namespace, which is pure XML. There you have to use the numeric entity instead. The extra <tspan> I introduced is not strictly neccesary, but it makes reading of the code a bit easier - otherwise the apparent order on the screen would be a bit confusing. <svg id="container_svg" width="117.5" height="71.5" opacity="1"> <g id="container_group" opacity="1"> <path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path> <text id="container_text" x="10" y="20" fill="#dbdbdb" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start" dominant-baseline="undefined"><tspan x="19">ذكي متصفح</tspan><tspan x="25" dy="27">كروم</tspan><tspan> : </tspan><tspan fill="#ffffff" style="font-weight:bold">37%</tspan></text> <path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path> <defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs> <g id="container_trackball_group"> <ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse> </g> </g> </svg> Wouldn't live be easier without bugs? Theoretically, that should be the solution, and in Chrome in fact it is. In Firefox, the width of a rtl <tspan> is computed wrong, and the following ltr part disappears to the right. The best workaround I can find is to change the layout a bit so that the percentage number appears right-aligned at the end of the second line: <svg id="container_svg" width="117.5" height="71.5" opacity="1"> <g id="container_group" opacity="1"> <path id="container_path" stroke-width="0.5" fill="rgba(0, 8, 22, 0.75)" opacity="0.75" stroke="#cccccc" d="M 0.25 2.25 Q 0.25 0.25 2.25 0.25 L 115 0.25 Q 117 0.25 117 2.25 L 117 57 Q 117 59 115 59 L 64.5 59 L 59.5 70 Q 58.5 71 57.5 70 L 52.5 59 L 2.25 59 Q 0.25 59 0.25 57 z" filter="url(#shadow)"></path> <text id="container_text" x="10" y="20" fill="#dbdbdb" font-size="13px" font-style="Normal" font-family="Segoe UI" font-weight="Normal" text-anchor="start" dominant-baseline="undefined"><tspan x="19">ذكي متصفح</tspan><tspan x="25" dy="27">كروم</tspan><tspan text-anchor="end" x="107"> : </tspan><tspan fill="#ffffff" style="font-weight:bold">37%</tspan></text> <path id="container_header_path" stroke-width="1" fill="null" opacity="0.8" stroke="#ffffff" d="M 15 27L 107 27"></path> <defs id="SVG_tooltip_definition"><filter id="shadow" height="130%"><feGaussianBlur in="SourceAlpha" stdDeviation="3"></feGaussianBlur><feOffset dx="3" dy="3" result="offsetblur"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.5"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs> <g id="container_trackball_group"> <ellipse id="container_Trackball_0" opacity="1" fill="#00bdae" stroke="#cccccc" stroke-width="1" stroke-dasharray="null" d="undefined" rx="5" ry="5" cx="15" cy="42" aria-label="null"></ellipse> </g> </g> </svg>
Svg Balloon thread animation
I am trying to achieve animation for a balloon. I want the thread to move a bit as if the balloon is floating in the air. I am able to get the movement but for some reason the position of the thread has gone wrong. I understand the positioning values of thread is wrong but how do i match it with the balloon? <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="595.28" height="841.89" viewPort="0 0 595.28 841.89"> <g> <path id="thread" fill="none" stroke="#010101" d="M 302 540 l 1 -150"> <animate attributeType="XML" attributeName="d" values="M60 302 c0 10 -10 90 0 131; M60 302 c0 10 3 90 0 136; M60 302 c0 10 10 90 0 138; M60 302 c0 10 -3 90 0 136; M60 302 c0 10 -10 90 0 131" keyTimes="0; 0.25; 0.5; 0.75; 1" dur="5s" repeatCount="indefinite" /> </path> <path fill="none" stroke="#EF393C" stroke-width="1.028" stroke-miterlimit="10" d="M318.682 354.28c-25.82-22.654-68.935 16.096-49.36 46.686 15.468 24.175 49.806 30.21 66.513 5.493 8.354-12.358 9.695-25.44 1.834-39.134-6.35-11.054-20.36-19.99-30.232-19.99"></path> <path fill="#EF393C" d="M338.955 371.226c-.933-2.055-1.78-4.726-3.24-6.524-.73-.903-1.504-1.738-2.353-2.547-.828-.783-1.63-1.45-2.41-2.053-3.12-2.377-4.55-5.104-7.417-6.565-.697-.35-.936-.977-1.63-1.302-1.694-2.052-4.723-1.792-7.653-3.91-2.03-.31-3.71-1.208-6.188-1.303-1.238-.044-2.98-.385-4.36-.29-.675.046-1.396.12-2.223.233-.79.116-1.867-.505-2.638-.317-1.222.11-1.923.284-3.247.465-1.267.175-2.32.325-3.94.694-1.524.362-2.95.867-4.406 1.392-2.9 1.084-6.554 2.604-8.812 4.636-1.528 1.367-2.778 1.75-3.876 3.456-.605.43-1.726 1.653-2.28 2.117-1.227 1.016-1.982 2.665-2.78 3.54-1.71 1.882-2.156 3.628-3.393 6.304-.48 1.042-1.71 3.7-2.046 4.91-.918 2.237-1.293 6.39-1.637 8.8-.43 2.94.146 5.817.52 8.548.374 2.736 1.067 5.28 1.936 7.616 1.75 4.68 3.137 7.178 5.728 10.64 2.608 3.458 5.764 6.442 8.8 9.208 1.323 1.27 2.26 2.32 3.48 2.66 1.355 2.065 3.347 1.8 5.576 3.446.28.206.564.41.857.61.433.29.875.576 1.324.853.897.555 1.82 1.077 2.767 1.557 1.892.962 3.866 1.757 5.875 2.264.417.103.837.188 1.258.268-1.608 1.887-1.022 2.784-.944 2.887.19.247.51.385.886.384.03 0 .06.006.09-.002.297-.068.606-.03 1.06-.642.246.35 1.366.53 2.106.633.47.063.914-.22 1.104-.707.11-.283.305-1.128-.653-2.262.395-.017.788-.036 1.183-.092 2.018-.298 3.92-1.01 5.77-1.93 1.846-.922 3.622-2.02 5.37-3.138l1.308-.846.62-.405.425-.248c.56-.33.896-.708 1.457-1.004l1.092-.836c2.068-1.81 3.067-2.996 3.746-3.257 2.39-2.125 2.548-2.06 4.785-4.49 1.12-1.222 1.73-2.037 2.865-3.478.568-.727 1.566-2.566 2.17-3.447.3-.44.603-.908.943-1.462.273-.46.52-.893.755-1.325 1.876-3.475 2.75-6.212 3.664-9.858.896-3.645 1.266-7.83 1.16-11.826-.118-3.973-.685-7.924-2.555-12.054zm-47.22 1.378c.04-.043.075-.096.114-.14-.003.045-.036.093-.116.14zm10.388 2.03c.03.008.063.02.094.027l.01.003.11.032c-.08.038-.156.082-.24.12 0-.068.016-.122.026-.18zm2.568 3.93H304.7h-.01zm.345-.048c.035-.004.074-.012.107-.015l.08-.004h.03c-.072.002-.145.012-.217.02z"></path> </g> </svg>
A translate transform can move the path. <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="595.28" height="841.89" viewPort="0 0 595.28 841.89"> <g> <path id="thread" transform="translate(242, 130)" fill="none" stroke="#010101" d="M 302 540 l 1 -150"> <animate attributeType="XML" attributeName="d" values="M60 302 c0 10 -10 90 0 131; M60 302 c0 10 3 90 0 136; M60 302 c0 10 10 90 0 138; M60 302 c0 10 -3 90 0 136; M60 302 c0 10 -10 90 0 131" keyTimes="0; 0.25; 0.5; 0.75; 1" dur="5s" repeatCount="indefinite" /> </path> <path fill="none" stroke="#EF393C" stroke-width="1.028" stroke-miterlimit="10" d="M318.682 354.28c-25.82-22.654-68.935 16.096-49.36 46.686 15.468 24.175 49.806 30.21 66.513 5.493 8.354-12.358 9.695-25.44 1.834-39.134-6.35-11.054-20.36-19.99-30.232-19.99"></path> <path fill="#EF393C" d="M338.955 371.226c-.933-2.055-1.78-4.726-3.24-6.524-.73-.903-1.504-1.738-2.353-2.547-.828-.783-1.63-1.45-2.41-2.053-3.12-2.377-4.55-5.104-7.417-6.565-.697-.35-.936-.977-1.63-1.302-1.694-2.052-4.723-1.792-7.653-3.91-2.03-.31-3.71-1.208-6.188-1.303-1.238-.044-2.98-.385-4.36-.29-.675.046-1.396.12-2.223.233-.79.116-1.867-.505-2.638-.317-1.222.11-1.923.284-3.247.465-1.267.175-2.32.325-3.94.694-1.524.362-2.95.867-4.406 1.392-2.9 1.084-6.554 2.604-8.812 4.636-1.528 1.367-2.778 1.75-3.876 3.456-.605.43-1.726 1.653-2.28 2.117-1.227 1.016-1.982 2.665-2.78 3.54-1.71 1.882-2.156 3.628-3.393 6.304-.48 1.042-1.71 3.7-2.046 4.91-.918 2.237-1.293 6.39-1.637 8.8-.43 2.94.146 5.817.52 8.548.374 2.736 1.067 5.28 1.936 7.616 1.75 4.68 3.137 7.178 5.728 10.64 2.608 3.458 5.764 6.442 8.8 9.208 1.323 1.27 2.26 2.32 3.48 2.66 1.355 2.065 3.347 1.8 5.576 3.446.28.206.564.41.857.61.433.29.875.576 1.324.853.897.555 1.82 1.077 2.767 1.557 1.892.962 3.866 1.757 5.875 2.264.417.103.837.188 1.258.268-1.608 1.887-1.022 2.784-.944 2.887.19.247.51.385.886.384.03 0 .06.006.09-.002.297-.068.606-.03 1.06-.642.246.35 1.366.53 2.106.633.47.063.914-.22 1.104-.707.11-.283.305-1.128-.653-2.262.395-.017.788-.036 1.183-.092 2.018-.298 3.92-1.01 5.77-1.93 1.846-.922 3.622-2.02 5.37-3.138l1.308-.846.62-.405.425-.248c.56-.33.896-.708 1.457-1.004l1.092-.836c2.068-1.81 3.067-2.996 3.746-3.257 2.39-2.125 2.548-2.06 4.785-4.49 1.12-1.222 1.73-2.037 2.865-3.478.568-.727 1.566-2.566 2.17-3.447.3-.44.603-.908.943-1.462.273-.46.52-.893.755-1.325 1.876-3.475 2.75-6.212 3.664-9.858.896-3.645 1.266-7.83 1.16-11.826-.118-3.973-.685-7.924-2.555-12.054zm-47.22 1.378c.04-.043.075-.096.114-.14-.003.045-.036.093-.116.14zm10.388 2.03c.03.008.063.02.094.027l.01.003.11.032c-.08.038-.156.082-.24.12 0-.068.016-.122.026-.18zm2.568 3.93H304.7h-.01zm.345-.048c.035-.004.074-.012.107-.015l.08-.004h.03c-.072.002-.145.012-.217.02z"></path> </g> </svg>