Understanding SVG Path for custom icons

Configuration Frontend
1

I’m getting into Android TV Remote cards and one thing I’m trying to figure out is how to get custom icons into it for apps not currently listed.

I was able to find the logo for an app, convert it to SVG and shrink it down to 24 x 24 but having trouble understanding how to get the correct path to paste into that card’s SVG Path section.

Here is where the code for the SVG file I got looks like:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<path d="M0 0 C13.53 0 27.06 0 41 0 C48.875 16.875 48.875 16.875 52 24 C52.53109375 22.9378125 53.0621875 21.875625 53.609375 20.78125 C58.8046875 10.390625 58.8046875 10.390625 64 0 C67.96 0 71.92 0 76 0 C68.66242045 17.15966684 60.92591709 34.10646317 53 51 C50.75534298 48.94105388 49.41181606 47.13894062 48.19067383 44.35473633 C47.87056839 43.63421585 47.55046295 42.91369537 47.22065735 42.17134094 C46.88616074 41.39936874 46.55166412 40.62739655 46.20703125 39.83203125 C45.85613937 39.03721848 45.5052475 38.2424057 45.14372253 37.42350769 C44.02673899 34.88933815 42.91952126 32.35103498 41.8125 29.8125 C41.05597875 28.0915153 40.29882465 26.37080865 39.54101562 24.65039062 C37.68665697 20.43678254 35.84104411 16.21944158 34 12 C28.555 11.505 28.555 11.505 23 11 C23 24.2 23 37.4 23 51 C19.37 51 15.74 51 12 51 C12 37.8 12 24.6 12 11 C8.04 11 4.08 11 0 11 C0 7.37 0 3.74 0 0 Z " fill="#E8E9EA" transform="translate(0,24)"/>
<path d="M0 0 C3.06458538 2.04305692 3.82153128 3.44079802 4.9375 6.9375 C5.01327396 10.65042412 4.3135507 12.12800603 2 15 C-0.99348295 17.09543806 -3.40048059 17.1999733 -7 17 C-6.67 17.66 -6.34 18.32 -6 19 C-5.278125 18.855625 -4.55625 18.71125 -3.8125 18.5625 C-1.9375 18.1875 -0.0625 17.8125 1.8125 17.4375 C2.534375 17.293125 3.25625 17.14875 4 17 C4.33 18.65 4.66 20.3 5 22 C1.1376591 24.9901994 -2.08844282 25.59244303 -6.84375 25.41015625 C-10.51609906 24.71161159 -11.94493949 23.01837013 -14 20 C-15.8371789 14.14399225 -14.64014864 8.45185929 -12 3 C-8.28717481 -0.52601637 -4.91767919 -0.89871344 0 0 Z M-6 5 C-7.29633621 6.06645115 -7.29633621 6.06645115 -7.0625 8.5625 C-7.041875 9.366875 -7.02125 10.17125 -7 11 C-5.35 10.67 -3.7 10.34 -2 10 C-2.33 8.35 -2.66 6.7 -3 5 C-3.99 5 -4.98 5 -6 5 Z " fill="#D7D7D7" transform="translate(75,52)"/>
<path d="M0 0 C3.875 1.875 3.875 1.875 5 3 C6.093125 2.938125 7.18625 2.87625 8.3125 2.8125 C12 3 12 3 14.5 4.75 C16 7 16 7 15.75 9.25 C15.5025 9.8275 15.255 10.405 15 11 C12.33333333 10.33333333 9.66666667 9.66666667 7 9 C4.65335601 12.51996598 4.81169298 13.92093303 4.9375 18.0625 C5.09758898 23.80482204 5.09758898 23.80482204 4 26 C2.33388095 26.042721 0.66617115 26.04063832 -1 26 C-3.45573406 23.54426594 -2.5796448 17.43653894 -2.75 14.125 C-2.81832031 13.10535156 -2.88664062 12.08570313 -2.95703125 11.03515625 C-3.00730469 10.05675781 -3.05757813 9.07835937 -3.109375 8.0703125 C-3.16061523 7.17070801 -3.21185547 6.27110352 -3.26464844 5.34423828 C-3 3 -3 3 -1.49316406 1.18310547 C-1.00041992 0.79268066 -0.50767578 0.40225586 0 0 Z " fill="#DADADA" transform="translate(84,51)"/>
</svg>

Without knowing much about SVGs, my assumption is to copy the path in between the " " but it gets confusing when there is what seems to be like 3 different elements, and they don’t necessary work by pasting 1 path after the other.

Any education on this topic would be greatly appreciated!

2

It’s been 20 years since I wrote SVG by hand, but M is moveto, C to curveto, and Z closes the curve (to be a closed shape). So your path is doing a move (ie. not drawing) and then doing curves which are then closed - three lots of them. However they all also have transforms, where they’re being translated (ie. moved). So for the second one, for example, it’s moving to 0,0 but that is being translated (+75,+52). Given the first path is all straight lines it’s a bit odd that the converted SVG uses curves, but never mind.

You can use this online SVG editor to paste your current code and try edits.

3

@michaelblight thanks for your input here! I’m quite new to anything graphical so I’m not quite sure how to translate what appears to be coordinates for the vectors to one single path to draw this 24 x 24 icon. Can you explain what part of that code I should copy and paste and how to make edits with that tool? Please excuse the lack of experience and knowledge in this area :pray:

4

You also need to understand encoding SVGs for URL use. This allows you to add the SVG to the pseudo element via content: or background-image: 

content:
              url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpath d='M0 0 C13.53 0 27.06 0 41 0 C48.875 16.875 48.875 16.875 52 24 C52.53109375 22.9378125 53.0621875 21.875625 53.609375 20.78125 C58.8046875 10.390625 58.8046875 10.390625 64 0 C67.96 0 71.92 0 76 0 C68.66242045 17.15966684 60.92591709 34.10646317 53 51 C50.75534298 48.94105388 49.41181606 47.13894062 48.19067383 44.35473633 C47.87056839 43.63421585 47.55046295 42.91369537 47.22065735 42.17134094 C46.88616074 41.39936874 46.55166412 40.62739655 46.20703125 39.83203125 C45.85613937 39.03721848 45.5052475 38.2424057 45.14372253 37.42350769 C44.02673899 34.88933815 42.91952126 32.35103498 41.8125 29.8125 C41.05597875 28.0915153 40.29882465 26.37080865 39.54101562 24.65039062 C37.68665697 20.43678254 35.84104411 16.21944158 34 12 C28.555 11.505 28.555 11.505 23 11 C23 24.2 23 37.4 23 51 C19.37 51 15.74 51 12 51 C12 37.8 12 24.6 12 11 C8.04 11 4.08 11 0 11 C0 7.37 0 3.74 0 0 Z ' fill='blue' transform='translate(0,24)'/%3E%3Cpath d='M0 0 C3.06458538 2.04305692 3.82153128 3.44079802 4.9375 6.9375 C5.01327396 10.65042412 4.3135507 12.12800603 2 15 C-0.99348295 17.09543806 -3.40048059 17.1999733 -7 17 C-6.67 17.66 -6.34 18.32 -6 19 C-5.278125 18.855625 -4.55625 18.71125 -3.8125 18.5625 C-1.9375 18.1875 -0.0625 17.8125 1.8125 17.4375 C2.534375 17.293125 3.25625 17.14875 4 17 C4.33 18.65 4.66 20.3 5 22 C1.1376591 24.9901994 -2.08844282 25.59244303 -6.84375 25.41015625 C-10.51609906 24.71161159 -11.94493949 23.01837013 -14 20 C-15.8371789 14.14399225 -14.64014864 8.45185929 -12 3 C-8.28717481 -0.52601637 -4.91767919 -0.89871344 0 0 Z M-6 5 C-7.29633621 6.06645115 -7.29633621 6.06645115 -7.0625 8.5625 C-7.041875 9.366875 -7.02125 10.17125 -7 11 C-5.35 10.67 -3.7 10.34 -2 10 C-2.33 8.35 -2.66 6.7 -3 5 C-3.99 5 -4.98 5 -6 5 Z ' fill='yellow' transform='translate(75,52)'/%3E%3Cpath d='M0 0 C3.875 1.875 3.875 1.875 5 3 C6.093125 2.938125 7.18625 2.87625 8.3125 2.8125 C12 3 12 3 14.5 4.75 C16 7 16 7 15.75 9.25 C15.5025 9.8275 15.255 10.405 15 11 C12.33333333 10.33333333 9.66666667 9.66666667 7 9 C4.65335601 12.51996598 4.81169298 13.92093303 4.9375 18.0625 C5.09758898 23.80482204 5.09758898 23.80482204 4 26 C2.33388095 26.042721 0.66617115 26.04063832 -1 26 C-3.45573406 23.54426594 -2.5796448 17.43653894 -2.75 14.125 C-2.81832031 13.10535156 -2.88664062 12.08570313 -2.95703125 11.03515625 C-3.00730469 10.05675781 -3.05757813 9.07835937 -3.109375 8.0703125 C-3.16061523 7.17070801 -3.21185547 6.27110352 -3.26464844 5.34423828 C-3 3 -3 3 -1.49316406 1.18310547 C-1.00041992 0.79268066 -0.50767578 0.40225586 0 0 Z ' fill='red' transform='translate(84,51)'/%3E%3C/svg%3E");

image
image784×350 10.3 KB

5

To see what it’s doing you can just paste all of the SVG you posted at the top. ie.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100" height="100">
<path d="M0 0 C13.53 0 27.06 0 41 0 C48.875 16.875 48.875 16.875 52 24 C52.53109375 22.9378125 53.0621875 21.875625 53.609375 20.78125 C58.8046875 10.390625 58.8046875 10.390625 64 0 C67.96 0 71.92 0 76 0 C68.66242045 17.15966684 60.92591709 34.10646317 53 51 C50.75534298 48.94105388 49.41181606 47.13894062 48.19067383 44.35473633 C47.87056839 43.63421585 47.55046295 42.91369537 47.22065735 42.17134094 C46.88616074 41.39936874 46.55166412 40.62739655 46.20703125 39.83203125 C45.85613937 39.03721848 45.5052475 38.2424057 45.14372253 37.42350769 C44.02673899 34.88933815 42.91952126 32.35103498 41.8125 29.8125 C41.05597875 28.0915153 40.29882465 26.37080865 39.54101562 24.65039062 C37.68665697 20.43678254 35.84104411 16.21944158 34 12 C28.555 11.505 28.555 11.505 23 11 C23 24.2 23 37.4 23 51 C19.37 51 15.74 51 12 51 C12 37.8 12 24.6 12 11 C8.04 11 4.08 11 0 11 C0 7.37 0 3.74 0 0 Z " fill="#E8E9EA" transform="translate(0,24)"/>
<path d="M0 0 C3.06458538 2.04305692 3.82153128 3.44079802 4.9375 6.9375 C5.01327396 10.65042412 4.3135507 12.12800603 2 15 C-0.99348295 17.09543806 -3.40048059 17.1999733 -7 17 C-6.67 17.66 -6.34 18.32 -6 19 C-5.278125 18.855625 -4.55625 18.71125 -3.8125 18.5625 C-1.9375 18.1875 -0.0625 17.8125 1.8125 17.4375 C2.534375 17.293125 3.25625 17.14875 4 17 C4.33 18.65 4.66 20.3 5 22 C1.1376591 24.9901994 -2.08844282 25.59244303 -6.84375 25.41015625 C-10.51609906 24.71161159 -11.94493949 23.01837013 -14 20 C-15.8371789 14.14399225 -14.64014864 8.45185929 -12 3 C-8.28717481 -0.52601637 -4.91767919 -0.89871344 0 0 Z M-6 5 C-7.29633621 6.06645115 -7.29633621 6.06645115 -7.0625 8.5625 C-7.041875 9.366875 -7.02125 10.17125 -7 11 C-5.35 10.67 -3.7 10.34 -2 10 C-2.33 8.35 -2.66 6.7 -3 5 C-3.99 5 -4.98 5 -6 5 Z " fill="#D7D7D7" transform="translate(75,52)"/>
<path d="M0 0 C3.875 1.875 3.875 1.875 5 3 C6.093125 2.938125 7.18625 2.87625 8.3125 2.8125 C12 3 12 3 14.5 4.75 C16 7 16 7 15.75 9.25 C15.5025 9.8275 15.255 10.405 15 11 C12.33333333 10.33333333 9.66666667 9.66666667 7 9 C4.65335601 12.51996598 4.81169298 13.92093303 4.9375 18.0625 C5.09758898 23.80482204 5.09758898 23.80482204 4 26 C2.33388095 26.042721 0.66617115 26.04063832 -1 26 C-3.45573406 23.54426594 -2.5796448 17.43653894 -2.75 14.125 C-2.81832031 13.10535156 -2.88664062 12.08570313 -2.95703125 11.03515625 C-3.00730469 10.05675781 -3.05757813 9.07835937 -3.109375 8.0703125 C-3.16061523 7.17070801 -3.21185547 6.27110352 -3.26464844 5.34423828 C-3 3 -3 3 -1.49316406 1.18310547 C-1.00041992 0.79268066 -0.50767578 0.40225586 0 0 Z " fill="#DADADA" transform="translate(84,51)"/>
</svg>

I assume you’re using the android-tv-card (which I have not used), and it looks like you can only give it a single path (and no color). Therefore to reproduce the icon in a format that will work with it, you would have to join all three paths together AFTER manually doing the translates yourself - so the first path needs (0,24) added to each pair of values, the second needs (75,52) and the third needs (84,51) - yes it will be tedious.

So M0 0 C13.53 0 27.06 0 41 0... becomes M0 24 C13.53 24 27.06 24 41 24...

Then you’d do the same for the second and third paths and append them to the first.

1 Like
6

Thinking about this further - you might like to try editing the colors to all be identical before converting it to SVG - the three different colors might be the only thing causing it to give you three paths. Then if you’re lucky it might not do the transform either.

1 Like
7

The first path is the TV, the second path is the e and the third is the r

They can be written consecutively, but the e and r are not connected to the TV thus 3 total paths.

image
image210×158 3 KB

1 Like
8

SVG doesn’t require a path to be continuous - you can move to a position, draw, move to another position, draw. The two drawings might intersect but they don’t have to. The complication comes from filling overlapping shapes, but none overlap here. Separate paths are only required when you want different styling for each (eg. colors or line width). So it is drawable with one path, as long as you take the time to “undo” the transforms.

1 Like
9

I am aware and should have been clearer. I was stating how this one was written. I agree with you that its all color based and that is why I posted the color pic.

1 Like
10

If you are using the Universal Remote Card you can use this as an icon

M20.367528,8.81817c-.116186.141901-.228963.279605-.341716.417309-.344852.640867-.344852.640867-.405405,1.467726.012083.326941.023823.644253.03554.961565.011854.355547.023343.700654.034854,1.04576.016111.370538.031741.730212.047372,1.089851.038996,1.16805-.161498,3.322426.400485,4.188614.381307.014321.762958.015061,1.144242,0c.251184-.774303.251184-.774303.214545-2.799758-.028789-1.460847-.065016-1.95498.472-3.196574.61027.235162,1.220517.470289,1.830787.705451.058356-.209872.114996-.413571.171636-.617269.057212-.793632.057212-.793632-.28606-1.587264-.572121-.617269-.572121-.617269-1.415999-.683405-.257729.022504-.507906.044302-.75806.066136-.257454-.396816-.257454-.396816-1.144242-1.058176l.000023.000035Zm-3.890445,1.763592c.233425,0,.459985,0,.686545,0c.077808.599633.153328,1.18163.228848,1.763627-.389042.119927-.766642.236326-1.144242.352725-.004874-.292304-.009589-.576036-.014303-.859768-.053505-.880403-.053505-.880403.243151-1.256584Zm1.37309-1.763627c-1.125408-.316994-2.059635,0-2.74618,1.058176-.604183,1.923024-.878137,3.930772-.333661,6.276748.34627.78425.562509,1.130485,1.513649,1.627898c1.088266.064267,1.566193-.497413,2.710434-1.202864-.077808-.599633-.153328-1.18163-.228848-1.763627-.170195.05245-.3354.103384-.500606.154317-.429091.132272-.858181.264544-1.287272.396816-.170217.05245-.3354.103384-.500606.154317-.077808-.239853-.153328-.472652-.228848-.705451.82374.070545,1.374578.03365,2.059635-.705451.529464-1.013027.689589-1.534214.672242-2.843848-.255395-1.233375-.42861-1.726379-1.129939-2.447032ZM0,0C0,1.319193,0,2.599586,0,3.879979c.933701,0,1.839941,0,2.74618,0c0,4.797065,0,9.45304,0,14.109015.855893,0,1.686613,0,2.517332,0c0-4.797065,0-9.45304,0-14.109015c1.271253.178126,1.271253.178126,2.517332.352725.42131,1.488289.843695,2.975874,1.268049,4.462117.173421.606829.346705,1.213763.519829,1.820804.253335.895393.506716,1.790716.76234,2.684593.082729.288847.163032.569193.243334.849539.078884.280558.155434.552862.231984.82513.075474.261863.148729.516002.221983.770141.279447.982058.586905,1.61774,1.1006,2.343966C13.942793,12.030228,15.713279,6.052662,17.392476,0c-.933701,0-1.839941,0-2.74618,0-1.188936,3.665028-1.188936,3.665028-2.377872,7.330092-.125226.385987-.246767.760652-.368309,1.135317C11.184964,5.952241,11.184964,5.952241,9.382783,0C6.192637,0,3.096319,0,0,0Z

image
image780×380 14.8 KB

The color is adjustable via the card settings

1 Like
11

Thanks so much for that! I actually spent a good bit of time learning about how to use the translate functions for SVGs by adding to the x and y coordinates, but then I saw @michaelblight 's comment about changing the colour to the same one. I first tried changing them all to white and while it did give me one path, when pasted into an SVG editor it didn’t look right.
Instead I tried again by changing the colour to black and this time it gave me 3 paths again, however there were no translate functions so I paste them one after another and it produced the correct shape:

M 13.25 12.429688 C 12.941406 13.097656 12.636719 13.757812 12.332031 14.414062 C 12.253906 14.414062 12.226562 14.363281 12.191406 14.328125 C 11.929688 14.0625 11.808594 13.71875 11.660156 13.386719 C 11.285156 12.527344 10.90625 11.671875 10.535156 10.8125 C 10.492188 10.71875 10.433594 10.683594 10.339844 10.675781 C 10.097656 10.65625 9.859375 10.636719 9.617188 10.621094 C 9.457031 10.609375 9.449219 10.621094 9.449219 10.777344 C 9.449219 11.941406 9.449219 13.105469 9.449219 14.269531 C 9.449219 14.441406 9.449219 14.441406 9.273438 14.441406 C 9.015625 14.441406 8.757812 14.4375 8.5 14.441406 C 8.390625 14.445312 8.359375 14.40625 8.359375 14.296875 C 8.363281 13.132812 8.359375 11.964844 8.359375 10.796875 C 8.359375 10.601562 8.359375 10.597656 8.167969 10.597656 C 7.894531 10.597656 7.621094 10.597656 7.347656 10.601562 C 7.25 10.601562 7.207031 10.578125 7.207031 10.46875 C 7.214844 10.191406 7.214844 9.914062 7.210938 9.636719 C 7.207031 9.546875 7.238281 9.511719 7.328125 9.511719 C 8.574219 9.515625 9.820312 9.515625 11.066406 9.511719 C 11.148438 9.511719 11.1875 9.546875 11.214844 9.613281 C 11.519531 10.273438 11.820312 10.933594 12.121094 11.59375 C 12.144531 11.644531 12.160156 11.703125 12.210938 11.75 C 12.273438 11.714844 12.289062 11.644531 12.316406 11.589844 C 12.644531 10.941406 12.972656 10.292969 13.292969 9.640625 C 13.339844 9.542969 13.402344 9.507812 13.507812 9.511719 C 13.800781 9.519531 14.09375 9.511719 14.386719 9.511719 C 14.53125 9.511719 14.535156 9.523438 14.476562 9.660156 C 14.082031 10.585938 13.667969 11.503906 13.25 12.429688 Z M 13.25 12.429688 M 14.695312 14.484375 C 14.394531 14.644531 14.082031 14.710938 13.757812 14.664062 C 13.382812 14.609375 13 14.273438 12.980469 13.714844 C 12.964844 13.296875 13.046875 12.898438 13.242188 12.53125 C 13.320312 12.382812 13.476562 12.292969 13.628906 12.238281 C 13.957031 12.128906 14.285156 12.082031 14.585938 12.320312 C 14.800781 12.492188 14.996094 12.902344 14.871094 13.261719 C 14.742188 13.621094 14.480469 13.835938 14.101562 13.863281 C 14.003906 13.867188 13.902344 13.871094 13.796875 13.859375 C 13.816406 13.980469 13.859375 14.023438 13.972656 13.996094 C 14.210938 13.941406 14.449219 13.902344 14.683594 13.855469 C 14.777344 13.835938 14.835938 13.851562 14.84375 13.957031 C 14.847656 14.007812 14.863281 14.058594 14.871094 14.109375 C 14.917969 14.351562 14.917969 14.351562 14.695312 14.484375 M 14.132812 12.761719 C 14.050781 12.660156 13.945312 12.710938 13.855469 12.722656 C 13.785156 12.734375 13.742188 12.800781 13.746094 12.871094 C 13.75 12.996094 13.765625 13.117188 13.773438 13.25 C 13.898438 13.226562 14.007812 13.207031 14.117188 13.183594 C 14.144531 13.175781 14.171875 13.160156 14.203125 13.148438 C 14.199219 13.019531 14.15625 12.902344 14.132812 12.761719 Z M 14.132812 12.761719 M 14.976562 12.957031 C 14.972656 12.839844 14.972656 12.734375 14.96875 12.628906 C 14.960938 12.421875 15.0625 12.273438 15.21875 12.152344 C 15.257812 12.121094 15.296875 12.109375 15.347656 12.132812 C 15.480469 12.203125 15.617188 12.253906 15.734375 12.351562 C 15.8125 12.421875 15.910156 12.386719 16.003906 12.382812 C 16.222656 12.371094 16.4375 12.378906 16.628906 12.519531 C 16.8125 12.65625 16.875 12.894531 16.773438 13.101562 C 16.742188 13.167969 16.703125 13.183594 16.632812 13.167969 C 16.449219 13.117188 16.261719 13.078125 16.078125 13.027344 C 15.996094 13.003906 15.949219 13.023438 15.902344 13.097656 C 15.816406 13.234375 15.769531 13.386719 15.773438 13.550781 C 15.777344 13.773438 15.777344 13.996094 15.78125 14.21875 C 15.78125 14.265625 15.78125 14.3125 15.773438 14.359375 C 15.742188 14.59375 15.699219 14.632812 15.464844 14.632812 C 15.445312 14.632812 15.425781 14.632812 15.40625 14.632812 C 15.144531 14.632812 15.113281 14.609375 15.050781 14.355469 C 15.027344 14.257812 15.011719 14.164062 15.015625 14.066406 C 15.023438 13.699219 15.011719 13.332031 14.976562 12.957031 Z M 14.976562 12.957031

image
image1168×400 73.1 KB

Thanks both for your suggestions and teaching me another thing or two about SVGs this time! There are still some things I should play around with it seems like (colouring etc) so more homework for me later! :nerd_face:

12

I had to adjust the height and width from the original code as well. You generally want them to be 24x24 for HA use.

13

In my case it fit well as 24 x 24 when I testing the icon on the card’s icon visual editor. In the end, I was able to apply what I learned here and made another icon within a couple mins, so now I have a lot of text files with paths saved and backed up on Drive just in case :slight_smile:

1 Like
14

I saw that when I looked at your code. It looks great!

1 Like