Hi friends, Today we are going to discuss most common issue that are faced by most of the web developers i.e how we can insert another svg image to another svg image. Therefore, We will modify one svg image in easy way. Let’s start without any delay.
- First of all , we need two svg image. Therefore I request you to visit icons8.com and type “google” in search box. You can open this direct link in your browser.
- Then click any google icon and click on download button.
- A popup will be appeared in which you will have to choose svg embed code and then copy the code and paste into your text editor and save it.
- Now, again go to icons8.com website and search another svg image and save the SVG embed code in your text editor and save it.
- Now, Copy the code between svg tag from google.svg file.
- Create a <g> tag at last of the another svg file before end tag of the svg tag. Then paste your previous copied code from google.svg file and paste into <g> tag. Now save the another file and run it in browser.
- Both svg images will be appeared. But it might be possible that google.svg image position and size are not accurate. Then you just need to add one attribute i.e transform.
- In this attribute, transform has two values one is for translate and second is for scale.
Let us see the example.
|
1 2 3 |
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 30 30"> <path d="M 15.003906 3 C 8.3749062 3 3 8.373 3 15 C 3 21.627 8.3749062 27 15.003906 27 C 25.013906 27 27.269078 17.707 26.330078 13 L 25 13 L 22.732422 13 L 15 13 L 15 17 L 22.738281 17 C 21.848702 20.448251 18.725955 23 15 23 C 10.582 23 7 19.418 7 15 C 7 10.582 10.582 7 15 7 C 17.009 7 18.839141 7.74575 20.244141 8.96875 L 23.085938 6.1289062 C 20.951937 4.1849063 18.116906 3 15.003906 3 z"></path> </svg> |
<g id=”g-icon” transform=”translate(“25,255″) scale(2.25)”></g>
|
1 2 3 4 |
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="30" height="30" viewBox="0 0 30 30"> <path d="M 15.003906 3 C 8.3749062 3 3 8.373 3 15 C 3 21.627 8.3749062 27 15.003906 27 C 25.013906 27 27.269078 17.707 26.330078 13 L 25 13 L 22.732422 13 L 15 13 L 15 17 L 22.738281 17 C 21.848702 20.448251 18.725955 23 15 23 C 10.582 23 7 19.418 7 15 C 7 10.582 10.582 7 15 7 C 17.009 7 18.839141 7.74575 20.244141 8.96875 L 23.085938 6.1289062 C 20.951937 4.1849063 18.116906 3 15.003906 3 z"></path> <g id="g-icon" transform="translate(" 25,255")="" scale(2.25)"=""></g> </svg> |
Hope this article will help you while editing any svg file.
Also check out– http://learnwill.net/share-files-through-google-drive-link/