Convert complex SVG in HISE

Lumi283

Hi, do you know how it would be possible to convert a complex SVG in Path Array?

For example, the in hise converter doesn't work for this svg:

This is to preview midi files in my VST midi browser.

d.healey

@Lumi283 Post the svg

You could draw that quite easily in a paint routine too since it's just rectangles

aaronventure

@d-healey the issue is that separate paths need separate variables and then you need to map them out within bounds manually.

Also, in order to draw this manually, op would need to pull out data from the midi file and write an algorithm that draws this.

This way the worklow is just to capture a screenshot, trace it in illustrator or something and upload an svg.

d.healey

This post is deleted!

oskarsh

@Lumi283 yes you need to use regex to get all paths from that svg and combine them. I wrote a svg parser for this which works that way.

I might be able to post this later here but behind the scenes it’s just using regex

Christoph Hart

The SVG must be a single shape. In most vector design apps you can coallascate the shapes into one thingie, then select this and convert it / export it. But this looks like something that can and should be fully automated.

I've added an example to the Snippet browser that will programmatically create thumbnail path strings that you can use in HISE from all your MIDI files in the current project.

https://docs.hise.dev/tutorials/ui/index.html#create-thumbnails-of-your-midi-files

d.healey

@Christoph-Hart said in Convert complex SVG in HISE:

The SVG must be a single shape.

You can combine multiple shapes within the path converter. You have to paste them in one after another.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="1000"
   height="1000"
   viewBox="0 0 264.58333 264.58334"
   version="1.1"
   id="svg5"
   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
   sodipodi:docname="test.svg"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <sodipodi:namedview
     id="namedview7"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:document-units="px"
     showgrid="false"
     units="px"
     inkscape:showpageshadow="false"
     inkscape:zoom="0.69397447"
     inkscape:cx="359.52331"
     inkscape:cy="530.99936"
     inkscape:current-layer="layer1"
     inkscape:deskcolor="#d1d1d1" />
  <defs
     id="defs2" />
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <path
       id="rect231"
       style="opacity:1;fill:#957f77;stroke-width:2.64583;stroke-linecap:round;stroke-linejoin:bevel;stop-color:#000000"
       d="m 55.765279,57.537357 h 63.757831 c 1.17263,0 2.11667,0.944034 2.11667,2.116667 v 22.488307 c 0,1.172633 -0.94404,2.116666 -2.11667,2.116666 H 55.765279 c -1.172633,0 -2.116666,-0.944033 -2.116666,-2.116666 V 59.654024 c 0,-1.172633 0.944033,-2.116667 2.116666,-2.116667 z" />
    <path
       id="rect233"
       style="opacity:1;fill:#800000;stroke-width:2.64583;stroke-linecap:round;stroke-linejoin:bevel;stop-color:#000000"
       d="m 117.36963,118.56291 h 73.29874 c 1.17263,0 2.11666,0.94404 2.11666,2.11667 v 23.70573 c 0,1.17263 -0.94403,2.11667 -2.11666,2.11667 h -73.29874 c -1.17263,0 -2.11666,-0.94404 -2.11666,-2.11667 v -23.70573 c 0,-1.17263 0.94403,-2.11667 2.11666,-2.11667 z" />
  </g>
</svg>

Convert complex SVG in HISE

19

1.8k

10.4k

90.9k