Multi-shape and multi-colour SVG

[dannytaurus]

How do I draw complex mutli-shape and multi-colour SVGs, like logos or rich icons?

Example:

I've converted the SUBLIME text to SVG but I also want to draw the waves logo/icon as SVG too.

It's 8 filled shapes, 4 in black and 4 in various shades of grey.

I saw @David-Healey mentioned we can stack multiple SVG shapes in one path object, but how would I register the different colours?

[dannytaurus]

Might be easier to see the shapes on a lighter background:

[David Healey]

@dannytaurus send me the svg and I'll see what's possible. Sometimes it's easier to load the font and just draw the text

[dannytaurus]

@David-Healey Thanks. The text isn't a problem. I converted that to SVG and it's fine.

It's the multiple shapes that I'm struggling with.

I found that if I change the option from Base64 Path to Base64 SVG in the SVG tool, I do see the SVG in full in the preview. But when I paste that path code into HISE it doesn't draw the shapes.

const var pathData = "260.nT6K8CVlCT8A.H0Rk3ATIQOIYSfkMRTT9Afpx.lLtHfB6Z6ksFSUJT0vlJK.EbVJpUguquLTnXHEtqrJPciLg4S+NLGZRXbYf3.Szf9aHlOUJ2NiU7kuPTra3JBT3UJIvAhWP+M7qx3rDPg1YonTJoPtm4w5dbuWDZ.mZ80OUFQHA2M4T1eLBOfSXbhS8mXZ31fVu+5yAaOtSX8+pMvK6rzks.ZPxHJP4cLWy.j0LDpC.fgMhoviJeqv3pQkNdIFRQnm5.0HlJenz.QWMr7cPLCSLfexWqQroCgOsDH8UiH+Fv72EP+kAabjNmZAIYNHjb.xa1hrLd7DvYgazbTtKX1AfTA"

[dannytaurus]

@David-Healey Here's the SVG code:

<svg width="48" height="18" viewBox="0 0 48 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16.5003 9C21.5003 -1 26.5003 -1 31.5003 9C36.5003 19 41.5003 19 46.5003 9" stroke="black" stroke-width="3" stroke-linecap="round"/>
<path d="M16.5003 9C21.5003 -1 26.5003 -1 31.5003 9C36.5003 19 41.5003 19 46.5003 9" stroke="#393939" stroke-linecap="round"/>
<path d="M11.5003 9C16.5003 -1 21.5003 -1 26.5003 9C31.5003 19 36.5003 19 41.5003 9" stroke="black" stroke-width="3" stroke-linecap="round"/>
<path d="M11.5003 9C16.5003 -1 21.5003 -1 26.5003 9C31.5003 19 36.5003 19 41.5003 9" stroke="#666666" stroke-linecap="round"/>
<path d="M6.50034 9C11.5003 -1 16.5003 -1 21.5003 9C26.5003 19 31.5003 19 36.5003 9" stroke="black" stroke-width="3" stroke-linecap="round"/>
<path d="M6.50034 9C11.5003 -1 16.5003 -1 21.5003 9C26.5003 19 31.5003 19 36.5003 9" stroke="#B3B3B3" stroke-linecap="round"/>
<path d="M1.50034 9C6.50033 -1 11.5003 -1 16.5003 9C21.5003 19 26.5003 19 31.5003 9" stroke="black" stroke-width="3" stroke-linecap="round"/>
<path d="M1.50034 9C6.50033 -1 11.5003 -1 16.5003 9C21.5003 19 26.5003 19 31.5003 9" stroke="white" stroke-linecap="round"/>
</svg>

[Christoph Hart]

@dannytaurus You need to use this method instead of createPath():

https://docs.hise.audio/scripting/scripting-api/content/index.html#createsvg

[dannytaurus]

@Christoph-Hart Awesome! Thanks!

Got it working with the help of Claude once I knew which method to use.

[dannytaurus]

Snippet for my own future reference, and anyone else that might need it.

️ Don't use the icon as-is though. That's my design!

HiseSnippet 1227.3ocsVstaiZDEFRBQMtcq5J0G.TT+g2lHViuGsppqut1N9BIfSb7e1NFFfIFlg.CNwoZe15qTeCZmAeMMQ6EKU9gEmqymOmy7cPKjXBihHgBhoLlG.ED+AI84XpaMW.BKzttf3OJ0CDQggxKTUcd.HJBZIHJt+G3JDO5.gjm+92qB7.XS3FUBBWQPlvtHeDciVs2eNxyqIvBZf72x67uusIAWi3QhY3YeoLBA.yo.GXe.2s8jDZAhbED+UoL4MAkyZWHWtyNqTAqIPSaU3jRlfLE.1E.Ls4A4KnlWP7vFVHJITmBnvHVRqRrlq6RtGu3.tBEgl3A4BpB5rSdgZgZtHOKsUEmHAAwCz1Tp1eQo5mk5grPq0uoj8SIFj2Dw1EMw89bPR8a.RhaAoCV.oWKoaFhBnarvwy2K0Fy5f1.VuYanrvWg89q8kpQXdfoJ9fovlgLg0QjVMSlSkY+7l2kJ0aeqbsPHC3xTWnr9UeP1i3PRMCDJG.nt0ATf7uIeb1hYTvFEOubsq7pYTthRqLWNMWEi1WLn8M51S6cogwYUrCdPwqKskc0hiKNMpo9vNFYl404bkFStpSvPm36h6ZfG0pA8tvNZlntN40Ooe2OL9xQStwNmh9i1mAZ4MXXmr8QCKMMVyHDjqSUibC6zdVE2q0NoWo6dHWXcMG0aHXiNDMpe96YSLwWWerh+3xYFLr4EspjsWdCUX2pCr0GMwUur+nw4TsuJ9jByq.FP0GU9jfdyNuX3iSiTFq8PqNZ4M6d8bkayzsdPMEamdtjYnNv6lkK3ho8sZ27xKv9ETxzxqCD+nxEW2KrjoV2Z5csgOb8cWDRp4LHpdqxCQsNo4rRYancxzJfI212ebk12zu0sSTd.n5F10pT8Y23.dbhA87QpUrMpbLqSvtoDQkSJ7dwNHbWVefU5W0GMS5RrFT5U8km19.r9EF5IaSBSZkIswM4jKpk3vlTBrrRTk930VO9T4rmJmKKK2q0oDAooO9djE0kY9rhO2lKD43RYFy8BFi.yfswZgPlDyEafWDbIzqGBteCXeRbZrqdzKIwTDFl1NFaRQDbZm2j5OSIyd3+k3ClTWTjhCj1kXB7pRhwVQo4y0bebTrX4OohstfdpLfM5qvc4Su4cqxqLA2mPgCvo44+nTeJk7+0js8KZiWJCIddvvWzLmNL7yEXZbr+DX3or+Pdwv0Nxt9+TNkC+53TLWzY2xQBtMFQGD.WJ2j3Yw4J3u+bFHgkiFr2F1lOiwIkVpi4W.Ljh3vQrNbFaMvBJpijpCilRIAI95GPv7LHdHMw5qVQfw6rBHKN405NsvCBhRh6wNt47WjYujLmwR5g+wxENKFt3Z9kU6fdNMIiflXE6AnOk0luOaoAVY+ITkb5PbDhNe68ceCT4Y9rT4esP70RZHpo6Kiw8dALxZH+efwkK.ekTCaanIcC.OPp4ncca2W33Wb61oGfFh3yA8i80YenfIjc5X1vQzpYikxY3x7JfNDakH7OrmkFU4xhKMptxnfOvLj7QyEW13qX+tDMLLgS9DjiXeKDSVVUH4B310Ye1F+OZZ9zT8r.ytqAlaWCL+tFXgcMvh6Zfk10.K+kCj+AYUhoD+EWaDD5o0HgwRTrAFvl.SlVE9WPzFjRm

Here's the script on its own - it creates a panel and draws the logo inside:

Content.makeFrontInterface(100, 100);

// Create the SVG path using SVG tool on 'Base64 SVG' setting
var pathData = "260.nT6K8CVlCT8A.H0Rk3ATIQOIYSfkMRTT9Afpx.lLtHfB6Z6ksFSUJT0vlJK.EbVJpUguquLTnXHEtqrJPciLg4S+NLGZRXbYf3.Szf9aHlOUJ2NiU7kuPTra3JBT3UJIvAhWP+M7qx3rDPg1YonTJoPtm4w5dbuWDZ.mZ80OUFQHA2M4T1eLBOfSXbhS8mXZ31fVu+5yAaOtSX8+pMvK6rzks.ZPxHJP4cLWy.j0LDpC.fgMhoviJeqv3pQkNdIFRQnm5.0HlJenz.QWMr7cPLCSLfexWqQroCgOsDH8UiH+Fv72EP+kAabjNmZAIYNHjb.xa1hrLd7DvYgazbTtKX1AfTA";
const var pluginLogo = Content.createSVG(pathData);

// Create a panel for the logo
const var logoPanel = Content.addPanel("logoPanel", 2, 32);
logoPanel.set("width", 96);
logoPanel.set("height", 36);
logoPanel.set("saveInPreset", false);

// Draw the logo
logoPanel.setPaintRoutine(function(g)
{
    var a = this.getLocalBounds(0);
    g.drawSVG(pluginLogo, a, 1.0);
});

[dannytaurus]

I'll add that the beauty of using the 'Bas64 SVG' mode of the SVG tool is that your source SVG can be a mix of fills and stroked paths and they will all convert nicely to HISE format.

Using the 'Base64 Path' mode expects filled paths only. Stroked paths are converted to fills and often look weird because the ends of the stroked path are considered to be joined as a fill.

[Chazrox]

@dannytaurus crazy. So you can access these different layers colours individually in laf? (yes im being lazy and not opening the snip ha)

[ustk]

@dannytaurus said in Multi-shape and multi-colour SVG:

Using the 'Base64 Path' mode expects filled paths only. Stroked paths are converted to fills and often look weird because the ends of the stroked path are considered to be joined as a fill.

Well it depends on how you create your SVG. If the origin is a stroke path then you need to draw in Hise, and if it's plain shape then you'll want to fill.

Both methods have their pros & cons.

• Base64 can have only one colour, but the colour can be dynamic
• SVGs can have multiple colours, but they are fixed (this answers @Chazrox as well). I also had bad experiences if your SVG has gradients, they don't translate well unfortunately.

In order to limit importation issues, I always save my SVGs as flat combined paths. (except if I need the SVG method in Hise of course...)

[dannytaurus]

@ustk Yes, both have their advantages.

For things like logos or complex icons, I think I'll always use Base64 SVG from now on because it has the flexibility of allowing a mix of stroked paths and solid fills, along with multiple colours.

If I need to use simpler vector that require a dynamic colour, like knob markers, I'll use Base64 Path.

[Felix W]

This is an interesting approach, but Base64 SVG doesn't seem to work on the Button component. I've tried a few methods, but they haven't worked. Does anyone have a solution?

[David Healey]

@Felix-W said in Multi-shape and multi-colour SVG:

This is an interesting approach, but Base64 SVG doesn't seem to work on the Button component. I've tried a few methods, but they haven't worked. Does anyone have a solution?

Got a snippet?

[Chazrox]

@Felix-W It does work for me. Post a snip.

[dannytaurus]

@Felix-W Try this (put a button in the UI with name 'btn1'):

Content.makeFrontInterface(100, 100);

const pathData = "260.nT6K8CVlCT8A.H0Rk3ATIQOIYSfkMRTT9Afpx.lLtHfB6Z6ksFSUJT0vlJK.EbVJpUguquLTnXHEtqrJPciLg4S+NLGZRXbYf3.Szf9aHlOUJ2NiU7kuPTra3JBT3UJIvAhWP+M7qx3rDPg1YonTJoPtm4w5dbuWDZ.mZ80OUFQHA2M4T1eLBOfSXbhS8mXZ31fVu+5yAaOtSX8+pMvK6rzks.ZPxHJP4cLWy.j0LDpC.fgMhoviJeqv3pQkNdIFRQnm5.0HlJenz.QWMr7cPLCSLfexWqQroCgOsDH8UiH+Fv72EP+kAabjNmZAIYNHjb.xa1hrLd7DvYgazbTtKX1AfTA";
const logoPath = Content.createSVG(pathData);

const laf = Content.createLocalLookAndFeel();

laf.registerFunction("drawToggleButton", function(g, obj)
{
    var a = obj.area;
    g.drawSVG(logoPath, a, 1);
});

Content.getComponent("btn1").setLocalLookAndFeel(laf);