Changing SVGs d="" path with material icons

Question

want to use this attractive plugin: SVG radial menu but i am not able to find out how to change that svgs d="" path. I want to insert e.g social icons instead of default ones. When i put there paths of these codepen social (which are different = bigger - it displays awfully). Where/ how can i find the way they use their types of SVGs...? I am newbie in SVG.

Thanks

Load that SVG into a vector editor that won't mess with the `class` attributes. I would suggest Inkscape. Update your icons there. Then save it out, and use the new one. — Paul LeBeau, Sep 04 '18 at 11:58

enxaneta · Answer 1 · 2018-09-04T21:48:48.193

The codepen SVG Social Media Icons are bigger but this shouldn't matter. Since they are square it's perfect. In order to be able to use those icons you need to transform then into symbols and scale them down to the needed size: 96 in this case.

I've put the symbol id="codepen" in the <defs>, and I'm using the symbol with <use>like this: <use xlink:href ="#codepen" width="96" height="96"/>

Next come the code where I'm using only one icon. In order to simplify I've deleted everything else:

svg{height:100vh;}

<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="codepen" viewBox="0 0 512 512" ><path fill="black" d="M427 201.9c-0.6-4.2-2.9-8-6.4-10.3L264.2 87.3c-4.9-3.3-11.4-3.3-16.3 0L91.4 191.6c-4 2.7-6.5 7.4-6.5 12.2v104.3c0 4.8 2.5 9.6 6.5 12.2l156.4 104.3c4.9 3.3 11.4 3.3 16.3 0L420.6 320.4c4-2.6 6.6-7.4 6.6-12.2V203.9C427.1 203.2 427.1 202.6 427 201.9 427 201.7 427.1 202.6 427 201.9zM270.7 127.1l115.2 76.8 -51.5 34.4 -63.8-42.7V127.1zM241.3 127.1v68.6l-63.8 42.7 -51.5-34.4L241.3 127.1zM114.3 231.4l36.8 24.6 -36.8 24.6V231.4zM241.3 384.9L126.1 308.1l51.5-34.4 63.8 42.6V384.9zM256 290.8l-52-34.8 52-34.8 52 34.8L256 290.8zM270.7 384.9V316.3l63.8-42.6 51.5 34.4L270.7 384.9zM397.7 280.6l-36.8-24.6 36.8-24.6V280.6z"/></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-7" cx="48" cy="48" r="48" fill="#00F7FF" opacity=".6"/>
            <use xlink:href ="#codepen"  width="96" height="96"/>
          </g>
          
        </g>
      </g>
    </g>
  </g>
</svg>

I hope it helps.

UPDATE:

I've taken the code for the <symbol>from the codepen you've linked above. I've added an id so that I can <use>it, and I've putted the <symbol> in the <defs>

In the SVG radial menu you've linked above there is a <g class="writting-button"> Inside this <g>I'm replacing the <path class="Shape">with the <use xlink:href ="#codepen" width="96" height="96"/>. In this case "#codepen" id the id of the <symbol>. Is important to set the width and the height for the <use>. In this case width="96" height="96"since the BBox of the replaced <path>is 96/96.

I hope this is clear enough.

Before i am going to use your solution i just ask: Isn't there a way that u can change icons(change them e.g for social media icons, or whatever else) somehow... with Material Icons since it links their icons in plugin: — Marek Cmarko, Sep 04 '18 at 18:43
I'm not very sure I understand your question Marek Cmarko. If you want to use Google's icons, of course you can. You can get those icons as SVG with a `viewBox='0 0 24 24'` which is perfect since they are square. — enxaneta, Sep 04 '18 at 19:30
Ok, since i wasn't able to find out how to do that, i wanna ask you about your solution: tags you used are there, cos' it's linked from external page ? How is that id="codepen" solved it ? Is it just link link to page in svg right ? — Marek Cmarko, Sep 04 '18 at 21:04
Ok, thanks for this solution enxaneta. Though it's a little bit messy - (I just think there is a way, to find out what to do with material icons so that i don't have to use "external" - like from codepen ) ,it works !!! :) Is there any documentation or link to the SVG tags like symbol etc. which i could study to better understand svgs ? — Marek Cmarko, Sep 05 '18 at 12:15
I recommend this book: [Using SVG with CSS3 and HTML5: Vector Graphics for Web Design](https://www.amazon.com/Using-SVG-CSS3-HTML5-Graphics/dp/1491921978) — enxaneta, Sep 05 '18 at 12:55

Changing SVGs d="" path with material icons

1 Answers1