HISE Logo Forum
    • Categories
    • Register
    • Login

    SVG Help!

    Scheduled Pinned Locked Moved General Questions
    7 Posts 2 Posters 241 Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • CasmatC
      Casmat
      last edited by

      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!

      i make music

      1 Reply Last reply Reply Quote 0
      • d.healeyD
        d.healey
        last edited by

        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
        

        Libre Wave - Freedom respecting instruments and effects
        My Patreon - HISE tutorials
        YouTube Channel - Public HISE tutorials

        CasmatC 1 Reply Last reply Reply Quote 0
        • CasmatC
          Casmat @d.healey
          last edited by Casmat

          @d-healey This is what i'm getting in HISE:
          35d8e456-6d1c-48c2-8b46-7ac99a79daf2-image.png
          And on a web page:
          f9490535-2c7a-447b-970a-2c648a6d2708-image.png

          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?

          i make music

          d.healeyD 1 Reply Last reply Reply Quote 0
          • d.healeyD
            d.healey @Casmat
            last edited by

            @Casmat said in SVG Help!:

            The middle bar for some reason is twice

            I'm seeing the same thing.

            But why not just draw 3 lines instead of using an SVG?

            Libre Wave - Freedom respecting instruments and effects
            My Patreon - HISE tutorials
            YouTube Channel - Public HISE tutorials

            CasmatC 1 Reply Last reply Reply Quote 0
            • CasmatC
              Casmat @d.healey
              last edited by

              @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/

              i make music

              d.healeyD 1 Reply Last reply Reply Quote 0
              • d.healeyD
                d.healey @Casmat
                last edited by

                @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.

                Libre Wave - Freedom respecting instruments and effects
                My Patreon - HISE tutorials
                YouTube Channel - Public HISE tutorials

                CasmatC 1 Reply Last reply Reply Quote 0
                • CasmatC
                  Casmat @d.healey
                  last edited by Casmat

                  @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:

                  0772d786-b6b7-48bd-bcc1-b695c84414d8-image.png

                  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
                  

                  i make music

                  1 Reply Last reply Reply Quote 2
                  • First post
                    Last post

                  46

                  Online

                  1.7k

                  Users

                  11.7k

                  Topics

                  102.1k

                  Posts