'how to edit the icon of youtube?
I'm new in the field of web designing. When I hear the inspect option in the browser, I think to change the youtube icon into mytube. Then, when I check the code of the icon I got a long data which I never see anywhere in my studying period. I attach that code with this. There are anyone who know to convert the letters y, o, u into m, y??
<svg>
<path d="M41.4697 18.1937C40.9053 17.8127 40.5031 17.22 40.2632 16.4157C40.0257 15.6114 39.9058 14.5437 39.9058 13.2078V11.3898C39.9058 10.0422 40.0422 8.95805 40.315 8.14196C40.5878 7.32588 41.0135 6.72851 41.592 6.35457C42.1706 5.98063 42.9302 5.79248 43.871 5.79248C44.7976 5.79248 45.5384 5.98298 46.0981 6.36398C46.6555 6.74497 47.0647 7.34234 47.3234 8.15137C47.5821 8.96275 47.7115 10.0422 47.7115 11.3898V13.2078C47.7115 14.5437 47.5845 15.6161 47.3329 16.4251C47.0812 17.2365 46.672 17.8292 46.1075 18.2031C45.5431 18.5771 44.7764 18.7652 43.8098 18.7652C42.8126 18.7675 42.0342 18.5747 41.4697 18.1937ZM44.6353 16.2323C44.7905 15.8231 44.8705 15.1575 44.8705 14.2309V10.3292C44.8705 9.43077 44.7929 8.77225 44.6353 8.35833C44.4777 7.94206 44.2026 7.7351 43.8074 7.7351C43.4265 7.7351 43.156 7.94206 43.0008 8.35833C42.8432 8.77461 42.7656 9.43077 42.7656 10.3292V14.2309C42.7656 15.1575 42.8408 15.8254 42.9914 16.2323C43.1419 16.6415 43.4123 16.8461 43.8074 16.8461C44.2026 16.8461 44.4777 16.6415 44.6353 16.2323Z" class="style-scope yt-icon"></path>
</svg>
Solution 1:[1]
The long string is a list of path commands. Each letter followed by numbers decides how the path is drawn. You picked the letter "o" in YouTube.
You can edit an SVG document or element in an desktop editor like Illustrator or InkScape. For editing paths I often use an online editor like SvgPathEditor.
In the below example I copied the code for the YouTube icon. Using SvgPathEditor I scaled up and rounded all numbers to make the sting shorter.
<svg viewBox="0 0 290 200" width="300">
<path d="M 280 31 C 276 19 267 9 254 6 C 232 0 143 0 143 0
C 143 0 54 0 31 6 C 19 9 9 19 6 31 C 0 54 0 100 0 100
C 0 100 0 146 6 169 C 9 181 19 191 31 194 C 54 200 143 200 143 200
C 143 200 232 200 254 194 C 267 191 276 181 280 169
C 286 146 286 100 286 100 C 286 100 286 54 280 31 Z" fill="#FF0000" />
<path d="M 114 143 L 188 100 L 114 57 V 143 Z" fill="white"/>
</svg>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | chrwahl |