SVG not converted correctly?
-
I've converted an SVG to a path, the SVG is just a simple rectangle, but when placed within the UI in Hise it doesn't display properly. Looks correct in the SVG to path converter. Am I doing something wrong here?
HiseSnippet 1563.3ocyXssbZaDFVxfxDSZSSZyzoWpgIWf63xHgM9PyzIXLVIDCwXCDm3LYRWjVPqQZWEoEiwYxqQet5iRdCR+WIvHrINTZpi4Bv6+gc+9Ouqq4yLwAALeI4TMF3gkj+Nk5Cnb6ssQDpT4RRx2UoJJfi8UiHUbfGJH.aIIKm3IBBxKlTJ7yGebQjChZhGSRR5ELhItBwkvGSsVgcINNFHKbChaLoWsPYSFcalCqGfmDJZRdHytnN3miDhsfhzSQA1Rx+phFtUKq1sVYSbNc8balWK+5sxAjVAahx0d8U00VO+541D.4s1whvY904HNNPRNYQl0f51r9znC3Ej.RKGrXgtTc3jiHavbrDlnfpz11DGqZibTARRxJ0F61RD41dfRUhE4b5ice2Kjg5XMh6.kWXR3kXB3oGGdZwf2TfjbLHkLBR2WotoOwiOli.O2QoLEhlsQPbJNThjUZgeJgx1LPBJOqKpK1vGVbtFYVSSaYU3qkdTpTPrJfqdBxW0CwsKg3H0+PMsdNsrzFqs6Faa2cipYyZ2pjwQYO7fl0N3nhAG09Tipuzfl+omo07IGkuDqeuyvafNwvfoUg6RNayRk2okwwkeV2A6m+cup0qbpt1AaYWhteddNySJxN1rw5q1vmd3Fs6QZwMJ1s5yd256uashAdU0FTLaqiON3nm4Xo2pTcKpV9iL1Cvw98yRqr8t9qn4WI8iFBdB7C.5QFroOFhC0.qICXfBlYcXHKvG3JLuLirywVuGF0sJF7NUPsuzFUgYhbpvXc2hZYfwNhMMtBY8wcHhRKidTSNgQyj1xG0uJh6SNs1HASurZ6Q76rrJq0wKk58oVTsS1.LOpXISzOAY6S31a43YiFSwlvwgZkUbzAuV6MKAvPndanHLzVEFZjHH.2.2OHLvXwWCvKvIzNMHNX8XlYGA.b8XTXQlzSHUZXKlff.sWxgD2arziFYlpL5yYb7dzLgVZpOjR8hrZ2dp7D.ym43f8mJaQ6F+qRwLzdtsv9KCVsSO74BBkTSVmp74qSi2FwLxOESPFsLkv2yCS+bMWjF5bg+pYYQxln3dHMPNOrOmHffbI7IPq0nR8EUJgC5xYdgxNLh.057g8lhJtiGOjHPU+OnLQHR5zy6EW33BCFu3OKLD.iZrbgTToVcF00dwaMpyOj24NlZylM+zjTyIHmNc5PxgF5BOTV48oTUSet+nrU5eWMcchqmCVULsQO8xBAJSsvmBr9M8vkP6ZGV+CY9cCfIFXfQajS.NjWcbGW.4UvV0ImIXokUKjQSuRvzhAhbBfptl1HFPOI5mgUy.bc.5lXn+NkhcBl7n5h6afLg7DgVCUoFxxBbvCO7QTEoDUQgdvXTGtqgVGVr2uFnppFxTUUG99Mo9fTehEGlBpH+.vwYiIcr4hU+U3n0KME.l+vr54f3SNTR3LGx.p.lXRfnaOMfvGDez9EmTkb1lTc0CRmU3dekZDto8zw6BSAuPMy+23c3b+uWYm1swl7wfMohwKuFFxe6yutVX0wSFecs3kKWw00fhNrCZBm1gQYViH7pBS4Bckom.sfpwbP9WzkmXlsS8q1NSNy4EBSR8+Rd7bGLl0b2eTIzMeSGjgg9a1f7dJ0PeqB1Gv5IFSFM2C5197dtSNHPzAdAwz6n0Zh0BPTGSsBW7I3yPl5h0xCYpOhYb2vcibC2Apko3v2iE5A94v0pGhNAJuwTruvAcU03+8r9jLuY9IY6YxgiugOhF3wBlXiqicIMfqdDDmHLxzvG+tCDgr3z2lg7mJqO9XCvHmpN0Q7d9gw9sbY8n7qp6SxYq6yW3kdIuw8RuquQ7eclSs3HLFMVZGX7gCbK1y6M1F0ygOh5j4xUYTlmMiRLiGnO.C0fc5f8ii8oZPaw4Hytio7fBGfcvn3IsOrPEHYC4C9I7b5Kz+W+v7oFu9EkH3pJJ.uY2H9JuNVhY55XeUv32fqfcsLH353LbQl9r2ZF8rWQd5sCo.1MM7e11hva7f0p5RgOENdrzE5x8VSyI2pKoXt4UwUlWEWcdUL+7p3ZyqhqOuJtwWVQwPns5wYtQklRRUqsS3yqkk2ghfr7vJBo+Qwl3vK
My SVG is just this:
<svg width="20" height="150" viewBox="0 0 20 150" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect width="20" height="150" fill="black"/> </svg>
-
@paper_lung You probably want drawPath instead of fillPath - but for a rectangle you don't need to use an svg.
g.drawRectangle()
is already built in. -
@paper_lung since it 's an SVG there's a proper function for this:
const var pathData = "120.nT6K8Chk8M..hbDFZ.WRUPRZBsZfxFMXFn5Hz0UGZ5Dowuze8avFFo0Ltmiz9DIEbFjIJkyQ5qYbYlM6RAhDnQ5t2cvBojcT74TrnW8fuibtFBkMJq7QKPBspM0yB.bjjsZJld1bDSdn05ZFOM..Qw.nLCKr30rL" const icon = Content.createSVG(pathData); const peakMeterLaf = Content.createLocalLookAndFeel(); peakMeterLaf.registerFunction("drawMatrixPeakMeter", function(g, obj) { g.drawSVG(icon, obj.area, obj.peaks[0]); });
But as @d-healey mentioned, if it's just for a rectangle the standard graphics will do...
Note that you can't change the colour of an SVG since it is embedded
-
Thanks guys, that's helped a lot!