Kt SvgCanvas

var panel = new FlowLayoutPanel
{
    Width = 500,
    Height = 500,
    Padding = new Padding(25),
    BackColor = Color.Transparent,
    AutoScroll = false,
    FlowDirection = FlowDirection.LeftToRight
};
	
string[] icons = { IconHome, IconUser, IconHeart, IconHeart };
KtColor[] colors = { KtColor.PRIMARY, KtColor.INFO, KtColor.ERROR, KtColor.WARNING };
	
for (int i = 0; i < icons.Length; i++)
{
    int dim = 100;
	
    var canvas = new KtSvgCanvas
    {
        Width = dim,
        Height = dim,
        Margin = new Padding(8),
        BackColor = Color.Transparent,
        Color = colors[i]
    };
	
    canvas.Templates.Add(new KtSvgTemplate(canvas.Templates)
    {
        Name = $"icon-{i}",
        Svg = icons[i]
    });
	
    panel.Controls.Add(canvas);
}

var panel = new FlowLayoutPanel
{
    Width = 420,
    Height = 200,
    Padding = new Padding(20),
    BackColor = Color.Transparent,
    AutoScroll = false,
    FlowDirection = FlowDirection.LeftToRight
};
	
int dim = 100;
	
var canvasSearch = new KtSvgCanvas
{
    Width = dim,
    Height = dim,
    Margin = new Padding(8),
    BackColor = KtColor.SUCCESS % 20,
    Color = KtColor.SUCCESS
};
	
canvasSearch.Templates.Add(new KtSvgTemplate(canvasSearch.Templates)
{
    Name = "search",
    Svg = IconSearch
});
	
var canvasCheck = new KtSvgCanvas
{
    Width = dim,
    Height = dim,
    Margin = new Padding(8),
    BackColor = KtColor.WARNING % 20,
    Color = KtColor.WARNING
};
	
canvasCheck.Templates.Add(new KtSvgTemplate(canvasCheck.Templates)
{
    Name = "check",
    Svg = IconCheck
});
	
var canvasHeart = new KtSvgCanvas
{
    Width = dim,
    Height = dim,
    Margin = new Padding(8),
    BackColor = KtColor.ERROR % 20,
    Color = KtColor.ERROR
};
	
canvasHeart.Templates.Add(new KtSvgTemplate(canvasHeart.Templates)
{
    Name = "heart",
    Svg = IconHeart
});
	
panel.Controls.Add(canvasSearch);
panel.Controls.Add(canvasCheck);
panel.Controls.Add(canvasHeart);

var canvas = new KtSvgCanvas
{
    Width = 400,
    Height = 400,
    BackColor = Color.Transparent,
    Color = KtColor.PRIMARY,
    Dock = DockStyle.Fill
};
	
canvas.Templates.Add(new KtSvgTemplate(canvas.Templates)
{
    Name = "status",
    Svg = """
          <svg width="100%" height="100%" viewBox="0 0 100 100" fill="none" >
              <!-- Top-Left Text -->
              <text x="5" y="45" dominant-baseline="hanging" font-size="10" font-weight="bold" fill="currentColor">{status}</text>
	
              <!-- Progress Track Background -->
              <rect x="5" y="55" width="90" height="20" rx="4" fill="currentColor" opacity="0.2" />
	
              <!-- Active Progress Fill -->
              <rect x="5" y="55" width="{progress}" height="20" rx="4" fill="currentColor" />
          </svg>
          """
});
	
canvas.Model["status"] = "Uploading...";
canvas.Model["progress"] = 60; // 0 to 90 scale to fit the track width
canvas.Render();

var canvas = new KtSvgCanvas
{
    Width = 400,
    Height = 400,
    BackColor = Color.Transparent,
};
	
canvas.Templates.Add(new KtSvgTemplate(canvas.Templates)
{
    Name = "toggle",
    // preserveAspectRatio="xMidYMid meet" centers and fills the 400x400 space uniformly
    Svg = """
          <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
             <circle cx="50" cy="50" r="40" fill="currentColor" opacity="0.2"/>
              <g x-if="isActive">
                  <!-- Centered 100x100 relative geometry -->
                  <polyline points="30,52 42,64 70,36" stroke="currentColor" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
              </g>
          </svg>
          """
});
	
canvas.Model["isActive"] = true;
canvas.Color = canvas.Model["isActive"].ToObject<bool>()
    ? KtColor.SUCCESS
    : KtColor.NEUTRAL;
	
canvas.Render();

var canvas = new KtSvgCanvas
{
    Width = 400,
    Height = 400,
    BackColor = Color.Transparent,
    Color = KtColor.WARNING
};
	
canvas.Templates.Add(new KtSvgTemplate(canvas.Templates)
{
    Name = "rating",
    Svg = """
        <svg width="100%" height="100%" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
          <script>
           { 
             "dots":[ 
                {"x":10,"a":1},
                {"x":30,"a":1}, 
                {"x":50,"a":1}, 
                {"x":70,"a":0.2}, 
                {"x":90,"a":0.2}] 
            }
          </script>
          <g x-for="dots">
             <circle cx="{x}%" cy="50%" r="8%" fill="currentColor" opacity="{a}"/>
          </g> 
        </svg>
        """
});

var canvas = new KtSvgCanvas
{
    Width = 400,
    Height = 400,
    BackColor = Color.Transparent,
    Color = KtColor.WARNING
};
	
canvas.Templates.Add(new KtSvgTemplate(canvas.Templates)
{
    Name = "visibility",
    Svg = """
        <svg width="100%" height="100%" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="5%" y="10%" width="90%" height="80%" rx="8"
                  fill="currentColor" opacity="0.08"/>
	
            <rect x-show="{visible}"
                  x="10%" y="20%" width="35%" height="60%" rx="6"
                  fill="currentColor" opacity="0.9"/>
	
            <circle x-show="{visible}"
                    cx="27.5%" cy="50%" r="12%"
                    fill="white" opacity="0.25"/>
	
            <rect x-hide="{hidden}"
                  x="55%" y="20%" width="35%" height="60%" rx="6"
                  fill="currentColor" opacity="0.35"/>
	
            <circle x-hide="{hidden}"
                    cx="72.5%" cy="50%" r="12%"
                    fill="currentColor" opacity="0.9"/>
        </svg>
        """
});
	
canvas.Model["visible"] = true;
canvas.Model["hidden"] = false;
canvas.Render();

var canvas = new KtSvgCanvas
{
    Width = 400,
    Height = 400,
    BackColor = Color.Transparent,
    Color = KtColor.WARNING
};
	
	
// Background template - injected by processing instruction
canvas.Templates.Add(new KtSvgTemplate(canvas.Templates)
{
    Name = "bg",
    Svg = """
             <circle cx="50%" cy="50%" r="50%" fill="currentColor" opacity="0.5"/> 
        """
});
	
// Foreground template - consumes bg via <?bg?> then draws the icon
canvas.Templates.Add(new KtSvgTemplate(canvas.Templates)
{
    Name = "main",
    Svg = """
        <svg width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
           <x-bg/>
            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
            <path d="M3 7a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-10z" />
            <path d="M3 7l9 6l9 -6" />
        </svg>
        """
});

var canvas = new KtSvgCanvas
{
    Width = 400,
    Height = 400,
    BackColor = Color.Transparent,
    Color = KtColor.WARNING,
    Dock = DockStyle.Fill
};
	
	
canvas.Templates.Add(new KtSvgTemplate(canvas.Templates)
{
    Name = "cssvar",
    Svg = """
        <svg width="100%" height="100%" viewBox="0 0 100 100"  fill="none" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
            <style>
              .box { 
                 fill: var(accent); 
                 stroke: var(accent);
                 stroke-width: 2; 
              }
            </style>
            <rect class="box" x="10" y="10" width="80" height="80" rx="8"/>
            <text x="20" y="50" dominant-baseline="central" text-anchor="middle" font-size="14" fill="white">{label}</text>
        </svg>
        """
});
	
canvas.Model["accent"] = "#8b5cf6";
canvas.Model["label"] = "KimTools";
canvas.Render();

var canvas = new KtSvgCanvas
{
    Width = 400,
    Height = 400,
    BackColor = Color.Transparent,
    Color = KtColor.WARNING
};
	
	
canvas.Templates.Add(new KtSvgTemplate(canvas.Templates)
{
    Name = "dashboard",
    Svg = """
        <svg width="100%" height="100%" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
            <g _:width="2">
                <circle cx="20" cy="20" r="20"
                    stroke="currentColor"
                    stroke-width="{width}"/>                                     
            </g>
        </svg>
        """
});