search

arallsopp / hass-hue-icons

Additional vector icons for home assistant to model Philips Hue bulbs and fixtures.
Other
295 stars 26 forks source link

SVG path help #246

Open schmittyd opened 1 month ago

schmittyd commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

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

<?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 commented 1 month ago

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

arallsopp commented 1 month ago

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.