Using SVG

Nico Wouterse's demonstration in the Smart Pascal forum was a good stating point for this example. We show a rectangle, circle, line and two paths. One path (the spanner) is taken from file (downloaded from Freepik from www.flaticon.com, licensed by CC 3.0). The other is based on a Blockly block tab. For meanings of the path symbols see this w3.org page. We use a view box for scaling all of the elements together. See the excellent tutorial for an explanation.

In the demonstration below the SVG element in the left div scales with aspect ratio preserved when you move the slider for changing the size of the view box. (You can use the other slider to change the x2 coordinate of the line). In the SVG element on the right, the code SVGElement2.setAttribute('preserveAspectRatio', 'none'); allows the graphic to be squashed or stretched by the sliders.

Demonstration

If the demo does not work in your current browser, try another such as Chrome, Opera, Safari or Edge. If you see no display at school, the security system might have blocked it. You can try instead this direct link to the program running on its own page.

SVGDemo.html

Smart Pascal Code

unit Form1;

interface

uses
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms,
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application,
  SmartCL.Controls.Elements, SmartCL.Controls.Memo, W3C.HTML5, SmartCL.Slider,
  SmartCL.Controls.Label;

type
  TForm1 = class(TW3Form)
    procedure sldrVBHeightChange(Sender: TObject);
    procedure sldrVBWidthChange(Sender: TObject);
    procedure sldrLineChange(Sender: TObject);
    procedure sldrVBSizeChange(Sender: TObject);
  private
    {$I 'Form1:intf'}
  protected
    procedure InitializeObject; override;
  end;

implementation

procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  // Create SVG element
  var SVGElement1 := Document.createElement('svg');
  SVGElement1.setAttribute('version', '1.1');
  SVGElement1.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
  SVGElement1.setAttribute('width', '224');
  SVGElement1.setAttribute('height', '224');
  // Create viewBox
  SVGElement1.setAttribute("viewBox", "0 0 650 650");
  SVGElement1.id := 'svg_el1';
  // Create SVG rect element
  var SVGrect := document.createElement('rect');
  SVGrect.id := 'rect1';
  SVGrect.setAttribute('x', '310');
  SVGrect.setAttribute('y', '10');
  SVGrect.setAttribute('width', '180');
  SVGrect.setAttribute('height', '150');
  SVGrect.setAttribute('fill', 'blue');
  SVGElement1.appendChild(SVGrect);
  // Create circle
  var SVGcirc := document.createElement('circle');
  SVGcirc.id := 'circle1';
  SVGcirc.setAttribute('cx', '150');
  SVGcirc.setAttribute('cy', '400');
  SVGcirc.setAttribute('r', '100');
  SVGcirc.setAttribute('fill', 'orange');
  SVGElement1.appendChild(SVGcirc);
  // Create line
  var SVGline := document.createElement('line');
  SVGline.id := 'line1';
  SVGline.setAttribute('x1', '550');
  SVGline.setAttribute('y1', '100');
  SVGline.setAttribute('x2', '550');
  SVGline.setAttribute('y2', '350');
  SVGline.setAttribute('stroke', 'green');
  SVGline.setAttribute('stroke-width', '10');
  SVGElement1.appendChild(SVGline);

  var SVGpath1 := document.createElement('path');
  SVGpath1.id := 'path1';
  SVGpath1.setAttribute('d', "M474.076,329.142c-27.289-27.286-66.602-37.668-103.637-27.681l-21.287-21.288c-0.03-0.031-0.062-0.063-0.093-0.094
  	L214.293,145.31c4.311-11.537,6.673-24.019,6.673-37.04c0-0.558-0.058-1.102-0.165-1.628
  	c-0.059-14.806-3.166-29.596-9.324-43.356c-1.81-4.048-6.561-5.86-10.607-4.048c-4.046,1.81-5.861,6.56-4.049,10.607
  	c10.466,23.39,10.574,50.284,0.295,73.782c-0.371,0.848-0.57,1.736-0.636,2.626c-10.3,22.054-29.271,39.26-52.507,47.23
  	c-0.852-0.012-1.712,0.095-2.55,0.363c-32.651,10.406-67.96,1.848-92.148-22.341c-16.555-16.554-25.966-38.864-26.622-61.944
  	l36.362,36.364c1.838,1.837,4.444,2.671,7.009,2.242l60.413-10.159c3.408-0.574,6.066-3.264,6.6-6.678l9.31-59.563
  	c0.396-2.533-0.442-5.104-2.254-6.917L93.54,18.296c30.203-6.836,62.282,2.13,84.545,24.397c2.387,2.386,4.658,4.92,6.753,7.533
  	c2.773,3.461,7.826,4.021,11.285,1.245c3.46-2.772,4.018-7.826,1.245-11.285c-2.461-3.071-5.128-6.047-7.927-8.847
  	C159.657,1.553,114.948-7.998,75.538,7.001c-2.544,0.969-4.425,3.161-4.995,5.823c-0.57,2.661,0.248,5.432,2.173,7.357
  	l53.137,53.136l-7.786,49.813l-50.623,8.513L21.503,85.701c-2.135-2.135-5.284-2.892-8.153-1.961
  	c-2.871,0.93-4.976,3.391-5.453,6.37c-5.411,33.864,5.813,68.535,30.024,92.748c20.402,20.401,47.523,31.347,75.395,31.401
  	c0.49,0.093,0.994,0.147,1.51,0.147c9.359,0,18.438-1.224,27.088-3.508l20.977,20.976c0.021,0.021,0.042,0.043,0.064,0.064
  	l134.807,134.809c-1.394,3.716-2.597,7.52-3.569,11.414c-0.199,0.8-0.271,1.6-0.229,2.383
  	c-5.797,24.643-2.704,50.605,9.141,73.539c1.427,2.762,4.233,4.346,7.14,4.346c1.241,0,2.5-0.289,3.678-0.897
  	c3.94-2.035,5.484-6.879,3.45-10.817c-12.463-24.129-13.395-53.415-2.491-78.341c0.349-0.797,0.551-1.629,0.629-2.465
  	c10.363-22.162,29.536-39.522,53.055-47.396c0.671-0.035,1.345-0.147,2.004-0.356c32.652-10.411,67.964-1.849,92.154,22.341
  	c16.554,16.555,25.965,38.862,26.621,61.94l-36.36-36.362c-1.837-1.836-4.449-2.667-7.008-2.24l-60.415,10.158
  	c-3.409,0.573-6.067,3.264-6.602,6.678l-9.31,59.564c-0.396,2.533,0.442,5.104,2.255,6.917l46.55,46.55
  	c-30.198,6.834-62.279-2.136-84.544-24.397c-0.868-0.868-1.741-1.775-2.589-2.695c-3.007-3.256-8.085-3.46-11.346-0.455
  	c-3.258,3.008-3.461,8.087-0.455,11.346c0.994,1.077,2.016,2.14,3.036,3.16c20.432,20.429,47.88,31.338,75.827,31.338
  	c12.794,0,25.7-2.29,38.073-6.998c2.546-0.968,4.426-3.16,4.996-5.822c0.57-2.662-0.248-5.433-2.173-7.358l-53.137-53.137
  	l7.784-49.815l50.625-8.512l45.94,45.941c2.134,2.132,5.283,2.889,8.153,1.96c2.871-0.93,4.977-3.391,5.453-6.37
  	C509.511,388.025,498.288,353.355,474.076,329.142z M305.03,351.305L174.29,220.563c-0.001,0-0.001-0.001-0.002-0.001
  	c-0.006-0.006-0.012-0.012-0.018-0.018l-15.616-15.615c20.386-9.28,37.34-24.823,48.39-44.158l130.612,130.612
  	c0.025,0.025,0.049,0.05,0.074,0.075l15.753,15.755C333.055,316.466,316.092,332.019,305.03,351.305z");

  SVGElement1.appendChild(SVGpath1);
  var SVGpath2 := document.createElement('path');
  SVGpath2.id := 'path2';
  SVGpath2.setAttribute('fill', 'blue');
  // Path based on Blockly tab
 	SVGpath2.setAttribute('d', 'M 310 -40 v 50 c 0, 100, -80, -80, -80, 75 s 80, -25 80, 75' );
  SVGElement1.appendChild(SVGpath2);

  var tmp := document.createElement("div");
  tmp.appendChild(SVGElement1);
  div1.InnerHTML := tmp.innerHTML;

  var SVGElement2 := Document.createElement('svg');
  SVGElement2.setAttribute('version', '1.1');
  SVGElement2.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
  SVGElement2.setAttribute('width', '88');
  SVGElement2.setAttribute('height', '184');

  SVGElement2.setAttribute('preserveAspectRatio', 'none');
  // Create viewBox
  SVGElement2.setAttribute("viewBox", "0 0 570 570");
  SVGElement2.id := 'svg_el2';

  SVGElement2.appendChild(SVGrect);
  SVGElement2.appendChild(SVGcirc);
  SVGElement2.appendChild(SVGline);
  SVGElement2.appendChild(SVGpath1);
  SVGElement2.appendChild(SVGpath2);

  tmp := document.createElement("div");
  tmp.appendChild(SVGElement2);
  div2.InnerHTML := tmp.innerHTML;

end;

procedure TForm1.sldrLineChange(Sender: TObject);
begin
  document.getElementById("line1").setAttribute("x2", inttostr(round(sldrLine.Value)));
end;

procedure TForm1.sldrVBSizeChange(Sender: TObject);
begin
  var VBSetting := '0 0 ' +  inttostr(round(sldrVBSize.Value)) +  ' ' +
                             inttostr(round(sldrVBSize.Value));
  document.getElementById("svg_el1").setAttribute("viewBox", VBSetting);
end;

procedure TForm1.sldrVBWidthChange(Sender: TObject);
begin
  var VBSetting := '0 0 ' +  inttostr(round(sldrVBWidth.Value)) +  ' ' +
                             inttostr(round(sldrVBHeight.Value));
  document.getElementById("svg_el2").setAttribute("viewBox", VBSetting);
end;

procedure TForm1.sldrVBHeightChange(Sender: TObject);
  sldrVBWidthChange(nil);
end;

initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.
    

XML Code of Form

<SMART>
  <Form version="2" subversion="2">
    <Created>2017-04-30T20:55:32.000</Created>
    <Modified>2017-05-16T12:19:00.033</Modified>
    <object type="TW3Form">
      <Caption>W3Form</Caption>
      <Name>Form1</Name>
      <object type="TW3DIVHtmlElement">
        <Width>224</Width>
        <Left>8</Left>
        <Height>224</Height>
        <Color>16513463</Color>
        <Name>div1</Name>
      </object>
      <object type="TW3Slider">
        <Value>570</Value>
        <Minimum>570</Minimum>
        <Maximum>3000</Maximum>
        <Width>112</Width>
        <Top>232</Top>
        <Left>120</Left>
        <Height>32</Height>
        <Name>sldrVBSize</Name>
        <OnChange>sldrVBSizeChange</OnChange>
        <object type="TW3Slider">
          <Value>570</Value>
          <Minimum>570</Minimum>
          <Maximum>3000</Maximum>
          <Width>112</Width>
          <Top>232</Top>
          <Left>128</Left>
          <Height>32</Height>
          <Name>W3Slider1</Name>
          <OnChange>sldrVBSizeChange</OnChange>
        </object>
      </object>
      <object type="TW3Slider">
        <Value>550</Value>
        <Maximum>550</Maximum>
        <Width>104</Width>
        <Top>232</Top>
        <Left>8</Left>
        <Height>32</Height>
        <Name>sldrLine</Name>
        <OnChange>sldrLineChange</OnChange>
      </object>
      <object type="TW3Label">
        <Caption>Line x2</Caption>
        <Width>72</Width>
        <Top>264</Top>
        <Left>32</Left>
        <Height>16</Height>
        <Name>W3Label1</Name>
      </object>
      <object type="TW3Label">
        <Caption>VB  Size</Caption>
        <Width>88</Width>
        <Top>264</Top>
        <Left>144</Left>
        <Height>16</Height>
        <Name>W3Label2</Name>
      </object>
      <object type="TW3DIVHtmlElement">
        <Width>88</Width>
        <Left>240</Left>
        <Height>184</Height>
        <Color>16513463</Color>
        <Name>div2</Name>
      </object>
      <object type="TW3Slider">
        <Value>570</Value>
        <Minimum>570</Minimum>
        <Maximum>3000</Maximum>
        <Width>88</Width>
        <Top>184</Top>
        <Left>240</Left>
        <Height>32</Height>
        <Name>sldrVBWidth</Name>
        <OnChange>sldrVBWidthChange</OnChange>
      </object>
      <object type="TW3Slider">
        <Value>570</Value>
        <Minimum>570</Minimum>
        <Maximum>3000</Maximum>
        <Width>88</Width>
        <Top>232</Top>
        <Left>240</Left>
        <Height>32</Height>
        <Name>sldrVBHeight</Name>
        <OnChange>sldrVBHeightChange</OnChange>
      </object>
      <object type="TW3Label">
        <Caption>VB Width</Caption>
        <Width>73</Width>
        <Top>216</Top>
        <Left>251</Left>
        <Height>16</Height>
        <Name>W3Label3</Name>
      </object>
      <object type="TW3Label">
        <Caption>VB Height</Caption>
        <Width>74</Width>
        <Top>264</Top>
        <Left>248</Left>
        <Height>16</Height>
        <Name>W3Label4</Name>
      </object>
    </object>
  </Form>
</SMART>
Programming - a skill for life!

How to use a range of visual components such as edit boxes, combo boxes, grids and charts on one or multiple forms (including a modal form)