SVG path help

[schmittyd]

Hi Mariusthvdb told me to contact you for help with SVG paths. I am trying to create SVG mdi icons to add to Mariusthvdb/custom-icons repo. I have created light-recessed-group-2, light-recessed-group-3, and light-recessed-group-4 icons based on mdi:light-recessed. Mariusthvdb said the paths are not appearing correctly in HA, only showing the original single icon. I have edited/created them in Affinity Designer.

[arallsopp]

I don't think you want to use transform matrix in there. That's likely why you're just seeing the same icon throughout.

[arallsopp]

That's a guess, mind. Try this one, and see if that works.

<?xml version="1.0" encoding="utf-8"?> <svg version="1.1" id="Layer_1" xmlns:serif="http://www.serif.com/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve"> <path d="M158,234.8c-72.8,0-132.4,32.6-132.4,72.8s59.6,72.8,132.4,72.8s132.4-32.6,132.4-72.8S230.8,234.8,158,234.8 M217.6,274.5 c0,5.3-21.2,20.4-59.6,20.4s-59.6-15.1-59.6-20.4c0-1.2,2-3.4,5.3-6c15.4-4.5,33.6-7.3,54.3-7.3s38.9,2.8,54.3,7.3 C215.6,271,217.6,273.3,217.6,274.5 M158,353.9c-64.6,0-105.9-27.4-105.9-46.3c0-9.1,9.7-19.9,26.9-29.2c3.6,20.4,37.6,36.4,79,36.4 s75.5-16,79-36.4c17.2,9.4,26.9,20.1,26.9,29.2C263.9,326.5,222.6,353.9,158,353.9z"/> <path d="M440.5,234.6c-72.8,0-132.4,32.6-132.4,72.8s59.6,72.8,132.4,72.8s132.4-32.6,132.4-72.8S513.3,234.6,440.5,234.6 M500.1,274.3c0,5.3-21.2,20.4-59.6,20.4s-59.6-15.1-59.6-20.4c0-1.2,2-3.4,5.3-6c15.4-4.5,33.6-7.3,54.3-7.3s38.9,2.8,54.3,7.3 C498.1,270.8,500.1,273.1,500.1,274.3 M440.5,353.7c-64.6,0-105.9-27.4-105.9-46.3c0-9.1,9.7-19.9,26.9-29.2 c3.6,20.4,37.6,36.4,79,36.4s75.5-16,79-36.4c17.2,9.4,26.9,20.1,26.9,29.2C546.4,326.3,505.1,353.7,440.5,353.7z"/> <path d="M299.5,392.6c-72.8,0-132.4,32.6-132.4,72.8s59.6,72.8,132.4,72.8s132.4-32.6,132.4-72.8S372.3,392.6,299.5,392.6 M359.1,432.3c0,5.3-21.2,20.4-59.6,20.4s-59.6-15.1-59.6-20.4c0-1.2,2-3.4,5.3-6c15.4-4.5,33.6-7.3,54.3-7.3s38.9,2.8,54.3,7.3 C357.1,428.8,359.1,431.1,359.1,432.3 M299.5,511.7c-64.6,0-105.9-27.4-105.9-46.3c0-9.1,9.7-19.9,26.9-29.2 c3.6,20.4,37.6,36.4,79,36.4s75.5-16,79-36.4c17.2,9.4,26.9,20.1,26.9,29.2C405.4,484.3,364.1,511.7,299.5,511.7z"/> </svg>

[schmittyd]

Thanks, I'll give that a try. How can I get the path information from an SVG?

[arallsopp]

How can I get the path information from an SVG?

If you load the svg file into a text editor, you'll see the groups (tagged between <g> blocks) and the matrix transforms applied at the top of each group. If you remove the opening <g> and end </g>, you remove the element from a group. If you delete the transform, all of the cloned objects within the icon will likely appear on top of each other. Each element is described in the text above as an opening <path tag, ending with a />

If you're happier via an image editor, select all your elements and ungroup them. Then remove the 'move' or 'transform' property from each (if it still exists). If that moves your elements back on top of each other, you can normally just select a single element and walk it back across the screen with the cursor keys or drag it with the mouse until its in the right place.