Native SVG import?

d.healey

Christoph Hart

You can parse SVG images and draw them in JUCE (in fact the shiny scriptnode logo in the HISE workspace is a SVG), but I haven't added a wrapper for HiseScript yet. It will probably look like this to be consistent with the path handling:

const var svg = Content.createSVG("sjdlfkjhsldfg8798275345");

panel.setPaintRoutine(function(g)
{
    g.drawSVG(svg, this.getLocalBounds(0));
}

Given that SVG is a XML file which is always annoying to use inside a Javascript-like context, we would have to wrap it in a Base64 String (I would add this to the Path converter window in HISE).

d.healey

@Christoph-Hart Excellent!

Dan Korneff

That would be great!

Straticah

@Christoph-Hart

Christoph Hart

Alright, here we go:

Use the converter window (Tools -> Convert SVG to Path).
Select "Base64 SVG" as output format (this is important, otherwise it will just extract the first shape from the SVG as monochromatic path)
Drag a SVG file in the window.
It should preview the file on the right. This is WYSIWYG: if the SVG is not shown correctly here, it will not be shown correctly later. There are a few known issues with the JUCE SVG parser, but it should work with most SVG images quite OK.
Click on copy to clipboard, and paste the line in the onInit callback of your script (or whatever).
Use the API to create a SVG object and render it on a Panel.

Below is an example that shows all new API calls (they do not show up in the autocomplete yet because I'm not on Windows but I'll add this on Monday).

With some tricks you can create SVG animations too by using the provided Graphics functions:

Content.makeFrontInterface(600, 600);

const var atom = "243.nT6K8CF9.zzA.HQSp7AXGQO9msCBhJy1H+SMHfvbQbEcQ+2dyntPJAvIbmX.DL.gppGBqWQIsVp8DKFr162FctP0i0NLnwubgFWZVLTVHC3bIAdqhcRa+.c1TeTnVl4.gg8pt0ZOAkaW6QTtURRPbt.Z+qHhR4+3+Y9ztTFaX3iAvPWztikIdS+ASpsx8ZwXiiDWbjZOZVv8iPbCgpp0ZUnfzYAiag68pTDfvZcZu9HODwPn5KPFf.mRTo0Atn.7GvH.epfHf4tEuaMyPlj.CLYAhfW1KvVQ.pG9DiBrfFaaa.lrDIfMHEgpFwlRQzHLq2d."

const var svg = Content.createSVG(atom);

const var Panel1 = Content.getComponent("Panel1");



Panel1.setPaintRoutine(function(g)
{
	var center = [this.get("width") / 2, this.get("height")/2];
	
	// offset the center (the SVG is not perfectly centered)
	center[1] += 9;

	g.rotate(this.data.rotation, center);
	g.drawSVG(svg, this.getLocalBounds(20), this.data.alpha);	
});

Panel1.setTimerCallback(function()
{
	this.data.rotation += 0.01;
	this.repaint();
	
	this.data.alpha = Math.sin(this.data.rotation * 12.0) * 0.5 + 0.5;
});

Panel1.startTimer(30);

HiseSnippet 1261.3ocsVstbZaDEVx1pSf1LSyL8APC+BJtxRXGa73IS4tgXrs3hwNjIS5hzJoMVrqrzBDbm7t1Gg9FzdVIrARHY53ogeHz41te62dtHyPlENJhEJImp+7.rj7OozaNk6U0CQnRspA5UB7B5ii3RUlGfhhv1Rxxaepvrbpcjh+82+dEjOhZgWpRRZ.iXgaSFS3K0ZV5LhueCjMtOY7JdePoVVLZUlOaB.ksUzkBPV2hbwWfDtskhj7OT2lvYg83HNNRRdmJL6487XynI9OfDQF4iEBFR8fEJQcClus.wBsRU8H91lObjijfUwbIArcBA7KJmSrIOpeIQ7ywFTWFwp7g7VqCusWCdFqBO8Uf2Ffj7JPZmDH8BkdVgj.9RKB77iJsnbbnCBn8UgRhuRac1NJUYfGTt1Xzs3FgfviQj8Pc8cUgG4NIcZf5i3pSQgpHNar5qTyT3f80n8O7rhUabr182WVqYmdAGU9lS6b4wiipVw60yMZlu24MclNpyn5VcxWvFRaLec4osFM9FsZs0bCBNsxcW2oUzffh0NqQnwgEZXwM0I5WzlNaxH2FWObP69CZVc+QsJaemmUWTdMKi939zA9Gn45VLfqO7xx2ht9vN84W0sq4Ht1v720zq6A42O+aN9dd+Fna1mTdp402yI21xtW9x8Bh9XwgytgPpc8nOL7xgClVjXNpJ.H8gWQct+MkIH2CKFzulyzgVCmbbyKqMyj9xyLa3nMtaeldYNU6nSm1TCG3zz4.d8Inyma5+AspseSYOmqMNa5fNZAmdbMRkPmFHDRyOrVKmyaV2MnwL+tctuY66JXqkYUxMZpKvsObmXEhgTkdCNMqfzW+ZvDQw9Fq3rKlWkMNfQAgrYRLmQDS5zIBZQXtIjox6xlvITbVmITKNgQy5lK8elNkXUsvhaeXUeK2iDIVyrYlQr4dYxotmZgcUWp1CSb83YxsWg2cR5ToSs2dpLGGXO.evOrPYEuCG.URjJkwUCfTKrE2e9BGv14RmJ402Z7N07uR8X.wob0BYhpjrwamMhiRT.fc2EQBmLvM6PzLA+.71Rr0lYg7qvlPsixVPO2BCwqBxOvCk6jTo+jfYVxKhVMgUQ99ifdJKIlXd4Kwf.m5Z5FmrvXHNPvqYyESDe1tAj44HtmVDgtgii5upZTPSOG7ut1KUyKddx5niiBSvW18gRwGvlJidAiiubAHS+ozpetIGmMZSjvDx78gEbSlS1puQfYoSFOBGtKjF5OA+niPqn06uo706usZ6Wqj72UbjQaQI7KCvzuVSYoEI8vaW0pFvmhlhKzA9AYYbh.Bx0vSgILIsHSoTCGcKmED66hJEXnAO15yenApf0kHPaxmojbCH8wGGBUBWZ9iB+0nRwkFOp3OhJkTTrbnEsjzW1qFlRvrm3C0zqM5PLubgAfuWqesnmLMhvmu57z+2lm7eEhuPwjvs71LF2ZCXDtU9dfwESgetRcGQyjk.bGkF278YjqTROSWnRNj.4CJWLYbO3CQrvvtSgrDQ9t7VhLyDYcgrfA5go1wB+C7agQCgr7BiFOXTZLxJj8dqjpLwb9mEqAvDM9SbRobtPV0PJtxChSA5BIMF9ji2aYIN9+FTrr4XJ7DhY+mPLG7Dh4kOgXN7IDyQOgXJ9MiQ70dkm.ylSJG.El0iaGIKWmhfLq3rPo+EF5ALq.

orange

@Christoph-Hart Perfect, Thank you!!

A Former User

@Christoph-Hart that's amazing thanks a lot <3

BTW if I understand correctly, we have only draw path option in the Hise SVG to Path converter.

Could you add also Fill Path and Close sub-path options too? Because in most cases just filling the path is the way to go especially for icons, personally I don't use draw path way too much.

If you add these options, I hope it will be available for this current .createSVG method too.

d.healey

That was quick!

d.healey

@Steve-Mohican said in Native SVG import?:

@Christoph-Hart that's amazing thanks a lot <3

BTW if I understand correctly, we have only draw path option in the Hise SVG to Path converter.

Could you add also Fill Path and Close sub-path options too? Because in most cases just filling the path is the way to go especially for icons, personally I don't use draw path way too much.

If you add these options, I hope it will be available for this current .createSVG method too.

You can do this from within HISE. Use the function g.fillPath() instead of g.drawPath()

Native SVG import?

33

1.7k

11.7k

102.3k