SVG Help!
-
Hey!
I've been fiddling with this menu svg from Heroicons:
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6"> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /> </svg>
and trying to put it into hise, but just won't budge.. I tried using the juce converter and found it worked when @d-healey's video from a while back, but it looks wonky... The proportions seem off and not right. Tried putting it into the hise tool, but don't know how to use the resulting output, tried many different ways throughout the forum but don't know which one goes with which. The preview in hise tool and juce tool looks right, but it just wont appear on panel, can anyone point me in the right direction or share some code that presents it? I was trying to use rounded caps method in the api, on the generated svg path but it doesnt seem to work, how do i correctly use this. The color i was trying to use was 0xFFA3A3A3 (light grey color).
Thanks!
-
HiseSnippet 847.3ocsUstaSCCE1taAsVtHlDO.Q6WYRSQsC1.oIDvZWQUvFYzwf+gLNtMVKwNxwYkJzdo3Ii2.3bhSW6XSCnRjezdt5ymO2bjQyEEEZCg17jo4BB8ddCmprIcSXREYPOB8AdGxJrBiuSz9SyYEEhXBktxqQAzlqRp99wK1mkxTbwbQDxoZIW7VYlzNWZzKeiLMsOKVbhLaAqexKGv0pt5TcIfmU7ZSxY7yXiEGwPyZ3Qn24fXoUaFZYVQAXy953oCSzSTN6OUVH+Rp.Y5PFBGjSLoahLMNZ1csfPnqFM+luh6l+HuCkwxKkOOC7vJE9y8Xwb.swsAoN+CPht.jV0Ao08FxMxb6bMHdtq2.ETPFwfT8hPwYKowiZ30UCVnrgYryD8M.ykdDra61a4C+r4dsZAo6Bqet+y8m4.2Hf6QDylD.FTqG35wrLvrM1Y2Pa69ggwgG2meLq6Df9zdN5Z4ggixlIuhtVN+3ONYl7J5Ozei8ZkGlpYw.FyvPDLKVyQ24LieDSIR6r.LGKrc0Y4ZEvDrgS8FnONxvBgMBJe12qKsRkHXTohakZUv3Ma8sVMwyDuN1DYAdVuUyYo6qKUwEAUIlliwiv0JF39qHLUNNwN1HlBV.FDaXSpRT4a4y1xeGP5EaNKP9Z0QZq3cpfp.15hV9+tpQitQc3UznSSElaTMNxXtMGCTkYeQX1BRbokhKMD5otZi5c96ZT4tL9BFpUCTR66xE0780owXCHRe81ZRcICn9v.rxhc50x.6xEFqDgCsm3bXUgquuoWOQwYVcdks00Y.x1Js2e1TAVqIRHzq44p6juRndzuCwZJRrMPLQFaSPlcoDRh.KgH2Cn3hnqMvAi553xTl8py+3htZEPt9JCc3fkpPZmt3hv+gkBsu0kB+sPbcuHokmbyXrwMfQnJ7+.i0qRuu2AiFI314.bUu9eZY2a9GBuaFe7gLqQh0+iJyFByqbADcEzUTf06FXmniuMxiYfgBUbEyOguZkcPdZsxNyTRxXbi9yb2DFtrdsJI.lTUuM0DdjD386Ppl5VLOmAuc7YN+pG00bb6k0wGurN9jk0wcVVG2cYc7oKqiO6O6H9z9qJs5L2XCgbXzAUqonzCTLnCrpak7KqOsivB
-
@d-healey This is what i'm getting in HISE:
And on a web page:
The middle bar for some reason is twice ish the height of the others and I couldn't get
p.roundCorners()
to work properly.. Any ideas why this is happening? -
-
@d-healey I was just using a simple example svg for this that could be drawn but I would also eventually be needing to use more complex svgs in the heroicons library: https://heroicons.com/
-
@Casmat Well I'm not sure why the lines aren't working but I tried a few of those hero icons and they seem to work fine.
-
@d-healey For anyone else with general hise svgs looking wonky, after fiddling around basically to get the svg to properly display, all the render data has to be specified in the path data for hise to correctly render it. Since the svg im using above stores many of its render properties in attributes when taking the path data, those attribute data will be lost.
To fix this, I saved the svg data in a .svg file and opened it within inkscape. Clicked the path on the canvas and went to Path -> Stroke to Path which basically took all those attributes/what we see and generated a new path that outlines the stroke, then save as optimized svg and take the path out of that svg file and use that within hise to get:
also had to change area to match size of svg path dimensions in inkscape. And used fillPath instead of drawPath in hise
HiseSnippet 3608.3ocsYu1ihikdG.mZltVscmrQ6Jk88klWUiXjE2unUqRar4NFrAiASTzFiswXvXSgMWi1uq4iP9Fj7+uouT8L8NIpU1Qyr6Od34b7wmyy4.3R8PjsabbzgLO7V8q6cy7v+3iStFlrVZskeXltxYd3e5QEq3D2COcOTiq6shiccx7vCeeaF3g29lLo+y+0+RCq.qPa2OGJSFiHea2A967S9bT0222OHnkkiqt+tWkco220NJTJJH5HFOe+i4xr2xdqkm6PKl128XlG9MMc7ShNLIwJwMNyCuoQjy0IqiNGdOeC+X+kAt7E4yLAcz8vshBb3HlQyHs1OvQ8i22wYPun94Ygu+9rv+7iJ9N9eJ9mmM98ouwSetEud93gu6KGde+WL7x+5gWtWM79JCoGd0P5M2GR+gGmXeveexmeGNd9GdraHVbVYgo8WOTtmalu6c+wGkhPFgIB6r1515.dwmZwyUxk6mdB+O+3e5cuCS8wIOs+o+7SerA1Gbw8gpUx5mQB2e+SVGdZOhHakXgT+ghUpTSHIWfiRnfVwKSVHc9Kr4gcBZ4aqCaX0GVs.cqn8ABZUELX7N8furYFiWOZqfl6ZS11Q8fOUxhwa7xFAsA6cnWL.d9UO37KS7EztpukdnFbYkHlStaqEzjbho0Mg2HegWqS08DzRDJv9WYKsVU5SCfOlWzBdYtUXLmzFN+TW3NkTXb2dvA55vF0x6JnMRvBt0kMvUK6w7EzgijhX7Cxv8MOw1lOuCFykKv1tdObifrL9YW3pKZuDdqA7sYifaILBdg0LXiFco23x3wxvaNuiwEa.uR7DimU.t73hz6DY7MB1nOKJw9+VG37WaCWpgF8LENFTLYN95vsF6AaXXCeRMhwS1Q29Liu+JGa4Jx11VD2WIlBN3Z0TEV8Ra37tqnqOjwmdAdc0ozqah4srurDNPZA7l99L+7GgGrHh4TrEl+KYbD1PxMcMJWZ+TD9jQYFOZLVG6MOK6mJwvsjkcga2Cq6EL6.muyN3j4CnKKi5DYAU549v5ilv7saf5pJMMfMjWC63OmtSCTGtd2Blu+Z3qZKY7wRntUXsMbqgafqLyg4n0D04KuReulue9etac5Ze4ulyoOPVSvK0WyAu3bZ+u0PQVa0NdcCZV.1QxhdzrgxZaaZxbpmGtSBG+A8MFg7qMIsetA24lZ50Zrpr15wJLmZGgUM6xwrw.MYspcZx6qB6fUWKv3KZLFw2Vgy40rfunmmyyl2fCOdhqWG5OQVadg8LmqdvUOrg4DlGdllCWi50SG4ucFyWeI7k8pLmwQvcF1+WyUKBunhDaa61Sk0NsrJq8tLA135M3VkcfWJDSaGBq0bK8hSvsjrY9GyCOnhN8xJvESFvbVUG1wUNsexBqNrJ22smNn5U37mpAe4kWXbkxv8r8oEyA2XrE2eoj.iICF+7V1m86y8imrfCGKwb5qBastB2iKIwwV0qzV2v8XwUG34CFafqpskmIjaL7RUGFuZVLe5YOiN9EX0xpLmAFvurqW5YTYw5xs.YZucbMpXcdNl6PXAmRomSdCqu4mciwmZBWO3HiaTC0CsF7BiuZEb8163YikZ.Oxxm4rcCpkbZsh4D1DdXOaFua.p8pErf42uErr8blyssnVs7AdddqdMguXLkVaCpsKtfm4GLTB1nD+bg66ERt7yrhgU4bqZHWp5s4Ck+Bu8rSCrCHG8KwKaH60n.s29EMjM0KQuLbNhunJ8ocFLtfI7kP8Fx1hMoK7xXzmq5QO4rZC4ymUomWZH5+qynsjUZHKtwkNYbeXoPZ+McQ9COSOnba3lUnKMoUC4nflKfqdVFWqipzazkPbmkzBUEaH28RHscnPC4lg4n6sHqnrY8FVvi0pKJKdUkVZXMQ4sRtzaUqJJWJNlV1rhnbzwpz61UFss0fkb7Wsjnb7QK5kyfEidgtbwhnsGqPmeEbj3.a3oinsVRaJCaV4.cSAXEmZzBoVPv4Ww5RvZ9pziTXeJ4QexF9ryY5q23X3rnKrwXL11VViVOOb27dzAqv8h35yzs0v834JBqfiay6cAUZMYLmHdzgNpUcdsho2ODygQUKS2cIlaOOqiGWWRvbdtwSoiag0hyu3QO2GqQaWESGIi0NyiEoGuGqolFRqgani05ZSTniDQMfYfActKCZHOcfKs9NVyHui9hCpkDURnqOG0XlauQ6OE0ddCJSOTG0jZhYoeQeNqqj7YchApgap0hdqIpsEeoCsoMq4U6Q+hG1KbVnu+G2W3I8KrvHbR+Ww5nPWtqYZ+LX1UU4ZkR6e8E4P7fzqqwxBvNoim5KKwO8HcbVzphpr40zwexbbxQ2w4nGLIKhmM89Ununlb2poyC4y1PSNp6JZqyX1QLZFssaKD2ZX58d2NHtuL8sicQbgxb9OPqulrY9D5qI3SpJ0zmdP6gH+yFzqWLRSNWotoqcgpH+0UWktWVSSN9PBcusiQ7q9+Z9h+Dz+JSocVpiwfZK5NilpIeFe8Nt+pBr37cz27LPNdyRqUEmgSSsaSWcArmRgzZ9X3R2BnyVBVzvfNLKbz0lotNaqZNt+pQAFOYCctPXSMcZYc3tUjnuTDWWujqb+q7LXwDeZgiXrMs5D58Bv0rjoGL.2KSGkimObPi2iyCr938dzfkexw+ReYElCsEGRmy.ysQiEncai47sMtld91EEL9mDPuvDqQwsVP2pROL1bGROdNVSKYKkd91413doYIdNYiVnFvy3HcmYn1vaR.84MnlwqlMsxQgz4M5S4qqJK5Lh9PkppxmM5RaTuLpOwQVbdHaQXmr7L+F0yiZ9jJzwUtoJGcoH87hWPc6K4oMtcB4OO8yQR2ir89mu7YeadbzLodpxpcuUA+ZqWYyVU5ptoPe5b4uzUU9pFs198HtfEcy0q6pp6ti1ycAxQo.cI+wvs6kiwO0C42aUpaIg35knU1Uoi5F2o4gimbqipd3MZMkXDOxn.r3z.X6JzMO31QUN65hbrMwDtsRI3tCl.erTpmo.eJrLrct1vMVTgimcMfcTpBO8Xs1p2J2nFGOCJ0VciZYZEgbsUkMtVmW29mQ7FIY4bRbLhOXuPU0CaC2i3Q6DgMqtisMnAczV3BakfEO4CqGHy7UWCubWSXs9dvMiZAOc0JzmMeoM74QqX+D2g1jwsO1EtacFe04dv0ph1JqdsO8Tz+5d2F.WpCtt25lSgWqoX7Hm81P3nJQvEtNhwKe.8ytyprs3m3ntoE9cfX7HdC4zOZLi2tH7Kqmv3aqh92dgNr2bQLuYpNkWqUsvZwTYC33Z8g6kmVLQCqcm1NCN2oYcTuUe7b1OMc35RM5o62.WdqI6GmWfWzeAs2E3NIzJWJw0WEK1+CEQMSo8zJ46.eUdImm2oBGZQ2zadW0a5GS85UnNLWV5ZggvsUr489sSndq6LZOoRnsEsos0E6g0HO5zZ9M6+EVrZ0FZeEqozTh69oOuTQB+Zayz3QSQ7binMwuiDmLIQW55V3fqbr4cLVRSe+J5RqyAusG84A0P+r3LueEOHKqsQYJsYV7sE2HkmyOwMmvOgQOcdqlIh2+HmOw2qEwiZSqkM.dkMmyMwueVStvIttnU4B9Fz2DmkNlKh15ox0Nk80PbYat9FstQS7466zSW6Z2TSW8DqGL05i38JLNsOGAaWk0OQ9iapsYr.sW3zln+avZLO84HGE4QoqWKP7sxrlza0RjeGYVqdNqMxQPJsFV1EdlHqsiNBuYVVV+KJrBwGTi6Kxki4jsL2unoQWsH2GoM1A4On.2e0rD6+J439tRMsfmjSJMNFOabxw8okFav6w7b+a7jIvEJx80cqh6qMyqlteev.DepXp06g3iBp+q3tRsvb05XdFxTKQ3c444L0rqxe0hH849EvbdzPdVTzV7ME1TvlmQYd3E34GSO6xaKVuzknijcQ7yl7rttymi9I+EdFn2R74Qa1OL87vI8P7ww7LybUw2cZysgzhVUjztoekmwdN4JbgEzlkdA0XdMoEq5CO8JOqtaQKXiMomymLA0p6lmddtWeXrEisUSB4Tq2sJeXuf7nt+L6Os0O7md2dgfHKmVGh1wGZ1ye7om8i7cvpaniTzgP2CwOm+0OHN9f1TsBcCx+pmHmmahTzt8Qg3EO+C2e6efs4NEhcSTs7CSFGcLwOz84UGCsS7iBe16Ge2+w6dK6S9T6RV6Gy9ZPjsUPCNDheN8R+VO1E2eBrOe++KVHv2ach2A2qHCjvJ+ffzmI39e5o+0749I9u0v+UH2+FR3u9ie7Z9TT3vnD2QgOmdse2e8cO8yeqUq9puGuaODED3d3q917gFe3WqgOGdb2R2C+DlCCN59oDy7va9xGO6i+se7ru9oGaeex+UIFE1MzOYzd2v+VOS4LeXECZZWtZymo6Ghg716dHwmCgGjcO4a6d+I791Gkci2lDsOM2OrLm4geSR569693y+kK0Y7cx7vu8w6K6Yt7omg96W89qe9Ap288m8cRV+o.+6wuesKWM+Tj+y8uOyu7QM+6eTIx4XfUxW9ju4i6+CuAlu+hG2Lejxgw9IWe8eNf+e6wg++0g3e3QU+D60e8w328UFiXU4uGiwO7GQ328XyUqbsS97.7MO1Z9ee9KFj49VdOEqjC9nd3wgG2MAaescwUODUIrd+guiUl2ecN9ZNCLwMzI8E+23e9valmu9gO7l4+3alYmk8gn+h88cY7OSwuMMBFSgo+EZd6iJ70OkOS5NuWOOuy2w+uXa+kc0ungE9VaXwu0FV5asgk+VaXku0FV8asg09eug7Opk3wjnc221jIihZyzisd3gl3qVFbuZMy+CXZD9FJ