I'm having issues converting an SVG

[VirtualVirgin]

Just trying to use an SVG info icon from Bootstrap (https://icons.getbootstrap.com/icons/info-circle/)
and I'm getting this in HISE:

I copied everything over that is in quotes, but I can't seem to get the "i" body in the right place.

[d.healey]

@VirtualVirgin Sometimes for a composite SVG like that you need to download the SVG, open it in Inkscape and combine the two items into a single object.

However I think there is a better approach. For icons I've stopped using converted SVGs and instead I use the font.

Once the font is loaded you can use the regular drawText commands along with the codepoints for the different icons which they give alongside the SVG data on the bootstrap website - \uF431 for the info icon.

You can download the bootstrap font here - https://github.com/twbs/icons/releases/

[ustk]

@VirtualVirgin but that can make a nice knob

[DabDab]

@ustk Can please you make a minimal snippet ? I never tried SVG for Knob.

[DabDab]

@ustk said in I'm having issues converting an SVG:

that can make a nice knob

Or maybe SVG with LAF.

[ustk]

@DabDab here you go:

HiseSnippet 2003.3ocsWssaiabFlZ2UM0FsAMn8AfvW4ckCWQcVXQQWJQQchTmnNGDDLjbH4PQxQd3PpCE4cJu.8lbUeb5aP6PI4X63sIEKZDfA7+4u4e9mgeyHB1DFEgIbYtd5gsPtL+gr5GBotMcAnPttxbY9xrZfHJjveVUiCaAQQPKtLYdc6TEYt5Mbm98u9aM.9fPS3ip33liQlPUT.h9n1QerOx2WAXAmhBdh2k9XWSbXSrONlgmWmMO2Vf4FfCb.H0sWkkqCHxkKy6xlubEHrZQaKKPwhVUpTods5kpKBryWBXHVodoBkpVnVUatL+tVVHJlnSATXDKoMvVGzcw6BOWf4nHjgOLUPjSmU4yp4Z5h7sF8PyIhiKyaF8Xq50maU+krZHKzOo+wV1e5jA9Gi3oMsLu5WBRhOER4+kgTlm.o2bFReUVcSBZK8QKo34OeQ6iHR7YP5rUtW8O9hrMwgTXHUH.rApPXBcYxDafI71J4yeWo74e6Gt95qY6SQT9D.gOBEr0G1ODav+W4uoVwpBgSqzuVSwDkilJBKQqqq0nSz3CtyatbwJs5gCFKuuwtkyaoz9X6v4Kr87lRWXswaeyNRBByya2VPTZjofQfMYag1s6To03I5ym0WrT8J41NXLZT9V8cblHUS.5Lexj3JQaGMctwlJVBC8HqjGInsTM1dSa8xJzYylEQHBMZ0RVpdK2CGrbUaNPtEcezhdAUl1X.pq.RXsQxjfE4AyaWZ4gASAv7IyKJ0Yd91qHyx4EWuLfNS69cUv2KObx58RpSbNLd4zR2O0qczgA6puNReP4N9T8pFNV0mEMAXZKNacXssSjZMGFPE6ZJGaXOybRaLjNzvlXLWQad8bvjd82DUSsk0HmVaATSSCnuaXgnM01RWF.FGdPy.Y2wov8kmsuatvn911QkMk129PokIExwV54nCJqamacRqEc0KXZ2u7xkqmTX2l3Jf0CwSLTfZI9nca1uLRVzPt1QWfR6wfcsJz8n9TPSihirLyIz20MYv77.4VSAc50tCn8h9Hk90ON0K.zZY2pxs6tsRsgkIcKudsKoWjF5du3kGJXLpmcrrBXXaiYAUqFFuzndTgs8v4mMxQ+3f861ssW2nsUDDzr5rJdpzlxU6zb.TUYy.S0E0s7g0GsPsdDVWYCDz.NYMpr6nxDGQ2IVsHEKjXzo+9oq8mFOd0jZEQiqO0JWMsEd6q5plLGo2sQtg6qt.WZLLGolkZN15GSZ4zKtaUyC9FkGTbVhmZgZVd61cr350SZsVUvdl6ZCGUkCi1aKKKHHIIKnpzrnwbM6PbCIIo0i6gW0HrqvTAOkx1Jilz2KHTXi281MxWbozAERUfeTqPYHUxesfWhpIXkZiv7k0pPlLrrRh7noUChbNF3P1UqiURbxBqt2WwaZnrctMMhGeTrXksIlZjo5BTwikXa9GFnqtvYo2w5XTU8p0ZLIu4LiZHBlnVPifmG6tSne8BpBc51wc07xp6zDKOZ2dmcC0.Aq77PqOz63FcIR28tMK0gHCjCVW6P+.QuYK7o2iF2zyLu0tI0VFua4J+NUr6P6HrX9xndC0NdzKmhX+vFDOIoZfokNVxQeIyIYhC9XkCkiizQXst6EssEr2kXLpT8hSPU6.kWlriZKmf1z.I2olViMMDlUXuVxtnlZ95IqLryKr7XMRP68w0IaaNMbpG0nPuF9Qcq6UxWZeypqWIp059MvdxgUFpFfGbyG9z28nOuM65mGt7xj.Y2sxzc6id7yt1JUk3SBwARahC1hCYB2dyIq271mUrMgFpRJunJpXSfuJFuQJzRAB8ukE0ovEhfzWX7bRNgkqO++BDnCJ86qJwglTDN71arHfcSvT.4ftOxBRt4Nd6GL5bGO1v6sW+2u9pSc.lWToPGeHCXecQg7uSCPcEF088kDx+gqd+64sI3.dpKjmh2d2Y+4AT9uVrX4e7G3ukhOYzGZSe64TZgh15ytuOfsFYI8o4rvkblFALzhGEklpyY5RhHHGWJeDlGvzPA9OOcXa9BUy+i+v0WctVfKH+IKib72xVfBI.+X3.LI.3iNBs3e2yRDqAxx.CIDb5WQOUYSPXB35qbDNq61S49N9uIMa.1V02T3aeegScuyhEYhe64D4Hj1xe97BS5QmuiWTH8CeeO6uG1J3wgCvT3vvaOsab82eM+O2js8mzV5.DA66CIeRyojhH+RAdaXbfAjbG+olzO4HiDvyYVj8+NyhmR1w7777SbDG1MDQGtEdQ9kbO3tbHHkExETwbkdhCxWdgsw4gWNDihwWj8zQBtS.9oLF4l0UFPAOjFVFYUYKjPQoKfLxvDF8wyTatJqLLZCaJ9juWNpxH38qVz8OVPzGO7nvpOtCYQY7Iyl4exDcgoitOHw8RtULVcXqXe.84T8RIAew.aW5Y7pR4NEFgnGd5R9+a7+9eEheU1QHpo6mFiu5SfQ1twuEX7Bq4+X1V11PS5i.7MYUV9aCEYtI3XJJzgcAFAwlCxNHNPm85BSHq5ggP+zSIYdU577Y47oxoc.c18amD92reWLJlJm4hQwGLxE.LI3uy77ofTd4+9SZXXJ7z6Vth8.JlL+KF+43BXOS36LMedpdQfE9bCr3mafk9bCr7mafU9bCr5maf090CL8UbRwTbv4iMbbZiZc55pLYZEBXSfmlV49Oz+cRtM

[DabDab]

@ustk Thank you. Got the fundamentals. one last question. How can I do tracking circle?. Increase /decrease just like regular knobman things.

[ustk]

@DabDab Sorry but what do you mean by tracking circle?

[DabDab]

@ustk said in I'm having issues converting an SVG:

@DabDab Sorry but what do you mean by tracking circle?

I mean something like this...

[ustk]

@DabDab Ah ok, you can't do this with an SVG, which is a fixed shape.
You need to draw it procedurally.

you can check the doc for examples:
https://docs.hise.dev/tutorials/ui/index.html#laf-tutorial-toolkit

[DabDab]

@ustk Oo oo/... gotcha.

[VirtualVirgin]

@DabDab said in I'm having issues converting an SVG:

@ustk Thank you. Got the fundamentals. one last question. How can I do tracking circle?. Increase /decrease just like regular knobman things.

With

Content.createPath()

and

Path.addArc(var area, var fromRadians, var toRadians)

Multiply your arc endpoint (var toRadians) by obj.valueNormalized.