Delphi’s Big Day (with a little SVG fun!)

A lot going on today for Delphi. Celebrating 24 years as being our favorite development tool, and also got the 10.3.1 Rio release! I wanted to do something fun for today, but I keep getting all wrapped up with webinars and other things, so this is a bit last minute, but still fun I think . .. .

I’ve been playing with SVG and the TPath shape component. If you are not familiar with SVG it stands for Scalable Vector Graphic and is a vector graphic format based on XML. I’ve always liked SVG, and am glad that it is finally catching on (in Oct 2018 they recommended a candidate for SVG2!) TPath on the other hand is a FireMonkey shape component that complex draws 2D shapes. Turns out the Path Data used by TPath is compatible with SVG path data.

There are a few full blown SVG components [RiverSoftAVG, BVerhue, M. Walter’s, Ekot1, and probably more…] for Delphi, but for fun I’ve been experimenting with building my own: having Delphi read the SVG XML file, and then render it with shapes, layouts, paths, etc. Not sure if it will ever get to a usable state, but I thought I would share a little TPath fun with you.

Create a new FireMonkey application and copy and paste this component onto your form.

object HappyBirthdayDelphi: TPath
  Data.Path = {
    D6000000000000007DFFF9435CAF3943020000002556FA43C71B8D4302000000
    93A8CD4387F69D430200000068D1B043D172B2430200000042709643142EC543
    0200000004B67F432180DF43020000001F457A43F42DEA4302000000BAE97343
    3148DF4302000000A05A4B43FAAEC54302000000B85E124352F8B24302000000
    2731AF4250AD9F430200000083C02ABF6FA28D43020000006F12833BEEBC3A43
    020000005A649B3F9A992F410200000027B13943CF7716C202000000F6687A43
    54A3E34202000000B6139C43E3A5FCC1020000005463F9430AD7174102000000
    7DFFF9435CAF3943030000007DFFF9435CAF394300000000F2925343C510BB43
    02000000E3656043C510BB430200000052F86F4344FBBB4302000000DFAF8043
    42D0BD430100000039448543CB91B54301000000A03A8043D793AA4302000000
    4C77754358A9A94302000000D7636B431934A94302000000602563431934A943
    020000003B3F4C431934A943020000003F95484314DEAC43020000003F954843
    14DEAC4301000000CFD73A43C3E5BC43020000004A6C3F4344FBBB4302000000
    C1AA4743C510BB4302000000F2925343C510BB4303000000F2925343C510BB43
    0000000077FE4E4314DEAC4302000000E9E65A431709AB430200000096036743
    58B9AA4302000000D5386D4396F3AB4302000000DDE46543D793AA4302000000
    73A8524393C8AD430200000073A8524393C8AD430100000044EB4443C966B743
    0300000077FE4E4314DEAC4300000000B87E2F436FC29E4301000000E9260C43
    1BEFA2430200000019040E43F46DA5430200000000800F43F648A74302000000
    A09A10430080A8430200000081B511430AB7A9430200000093781343566EAB43
    020000005AE4154304A6AD430100000023BB3643CBE1A44303000000B87E2F43
    6FC29E430000000046B629439EBF954301000000BC14044389D1914302000000
    4C9704435E1A944302000000140E0543AAD1954302000000D57805438DF79643
    02000000D7E30543711D9843020000009AB9064373F89943020000001DFA0743
    73889C4301000000088C2D4348619C4302000000F8932C43BA099B4302000000
    04D62B43C3059A43020000002D522B431F5599430200000056CE2A439CA49843
    020000001F452A43D17297430200000046B629439EBF95430300000046B62943
    9EBF954300000000F8B327431FC58743010000007FEA04439CE4794302000000
    960304431273804302000000FE740343080C834302000000FA3E03430EBD8443
    02000000F6080343146E864302000000F60803438DD7884302000000FA3E0343
    79F98B43010000008F4228430060924302000000C1CA27436616904302000000
    968327431B5F8E4302000000CD6C2743FC398D430200000004562743FE148C43
    02000000916D274354438A4302000000F8B327431FC5874303000000F8B32743
    1FC5874300000000088C2D437FAA77430100000037291143FC89514302000000
    B6930E437969574302000000D5B80C43FEF45B430200000052980B430E2D5F43
    02000000CF770A43DD64624302000000B61309434220674302000000C76B0743
    775E6D4301000000BA892843854B85430200000027712943A2F5824302000000
    1B2F2A43353E81430200000096C32A43812580430200000052582B439A197E43
    02000000E3452C439A397B4302000000088C2D437FAA774303000000088C2D43
    7FAA774300000000B83E3E4389815D4301000000AA7131437B74244302000000
    58F92A4352182B4302000000353E26433D4A304302000000004023433D0A3443
    02000000CB412043FCC9374302000000088C1C43852B3D4302000000351E1843
    562E444301000000B87E2F438736734302000000E9663243CBE16D4302000000
    C5A0344339146A4302000000CD2C364391CD67430200000093B837432B876543
    0200000037693A435218624302000000B83E3E4389815D4303000000B83E3E43
    89815D4300000000BE3F5E436085474301000000B87E6A433FD5004302000000
    75F35E43F8D3054302000000F2525643B4E8094302000000EE9C5043F8130D43
    02000000E9E64A433B3F104302000000E5504443649B144302000000A0DA3C43
    73281A430100000019244243FE54594302000000587948436F32544302000000
    4A4C4D433994504302000000EE9C50435E7A4E430200000091ED534383604C43
    0200000058795843D90E4A4302000000BE3F5E436085474303000000BE3F5E43
    6085474300000000029B8243E365414301000000D9CE9543D94EF44202000000
    10289043AC9CF2420200000000C08B43713DF24202000000C9968843AA31F342
    02000000916D8543E325F44202000000FE3481435C8FF642020000005EDA7743
    146EFA420100000066A66443EEBC44430200000017796C4373E8424302000000
    2751724385CB414302000000D92E7643E3654143020000008B0C7A4383004143
    02000000D90E7F438300414302000000029B8243E365414303000000029B8243
    E36541430000000027C19543C9964D4301000000DD74B8437533134302000000
    AE77B443ECD10D4302000000B062B043F45D0943020000000436AC438DD70543
    020000005809A843275102430200000017B9A343CBE1FE42020000003F459F43
    146EFA4201000000273187434AEC42430200000033438943858B434302000000
    AEE78B43C500454302000000B81E8F43084C47430300000027C19543C9964D43
    00000000A02A9C4344FBBB430200000060B59B434626BA4302000000640B9843
    981EAA4302000000B4D88943440BA043020000007563894304969F4302000000
    DD8482430A179A430200000042A07E43CFF7954301000000CD8C74434EE29643
    010000002D429043D783C64302000000AA0193435899C5430200000060B59B43
    1D7AC14302000000A02A9C4344FBBB4303000000A02A9C4344FBBB4300000000
    B29DA743DD248943010000003709A3433B7F594301000000DDE46543982E8E43
    010000005AA468435238934303000000B29DA743DD2489430000000054236F43
    500D9543010000005EFA6543CFF79543010000006250624319448D4301000000
    5E0A9E4337295D4302000000E7CB95430A974D4302000000F4CD8A4354834343
    0200000060458043548343430200000075D351435483434302000000E15A2B43
    29FC694302000000E15A2B439A598C4302000000E15A2B430C42984302000000
    566E35431FB5A34302000000C3D54643567EAB4302000000C1AA4843981EAA43
    02000000BA294E43DBE9A64302000000DF0F6543DBE9A64302000000564E6D43
    DBE9A643020000004C7776431B5FA74302000000A0BA80439A49A84303000000
    54236F43500D954300000000C5004443DF3FA34302000000F83316439AB97743
    0200000060256343442B524302000000D5386D4348814E4302000000DF0F6443
    442B524302000000F2B21B4312237E43020000003D6A4A4321E0A14302000000
    C1AA4743A0CAA24302000000C50044431FB5A34302000000C5004443DF3FA343
    03000000C5004443DF3FA343}
  Fill.Color = xFFD18C8C
  Size.Width = 500.000000000000000000
  Size.Height = 500.000000000000000000
  Size.PlatformDefault = False
end

Or if you would rather just paste the path data into a new TPath component of your own you can do that too (just make sure it is square for the right aspect ratio and set the Fill color):

M 499.996 185.685 C 500.673 282.217 411.317 315.926 353.636 356.897 C 300.877 394.36 255.711 447.001 250.27 468.359 C 243.913 446.564 203.354 395.367 146.37 357.94 C 87.596 319.354 -0.667 283.269 0.004 186.738 C 1.214 10.975 185.692 -37.617 250.41 113.819 C 312.154 -31.581 498.776 9.49 499.996 185.685 Z M 211.574 374.131 C 224.398 374.131 239.97 375.963 257.374 379.627 L 266.533 363.139 L 256.458 341.155 C 245.466 339.323 235.39 338.407 227.146 338.407 C 204.247 338.407 200.583 345.735 200.583 345.735 L 186.843 377.795 C 191.423 375.963 199.667 374.131 211.574 374.131 Z M 206.994 345.735 C 218.902 342.071 231.014 341.448 237.222 343.903 C 229.894 341.155 210.658 347.567 210.658 347.567 L 196.919 366.803 Z M 175.495 317.519 L 140.152 325.868 C 142.016 330.859 143.5 334.57 144.604 337 
C 145.709 339.43 147.471 342.862 149.892 347.297 L 182.731 329.764 Z M 169.712 299.497 L 132.081 291.637 C 132.591 296.206 133.055 299.638 133.472 301.934 C 133.89 304.23 134.725 307.941 135.977 313.066 L 173.547 312.76 C 172.578 310.076 171.836 308.045 171.321 306.665 C 170.806 305.286 170.27 302.897 169.712 299.497 Z M 167.703 271.54 L 132.916 249.893 C 132.014 256.899 131.457 262.094 131.246 265.477 C 131.035 268.86 131.035 273.684 131.246 279.949 L 168.26 292.75 C 167.792 288.175 167.514 284.743 167.425 282.453 C 167.336 280.164 167.428 276.526 167.703 271.54 Z M 173.547 247.666 L 145.161 209.539 C 142.577 215.412 140.722 219.957 139.595 223.176 
C 138.468 226.394 137.077 231.126 135.421 237.369 L 168.538 266.59 C 169.442 261.919 170.184 258.486 170.764 256.293 C 171.345 254.1 172.273 251.225 173.547 247.666 Z M 190.245 221.506 L 177.444 164.455 C 170.974 171.095 166.243 176.29 163.25 180.04 C 160.257 183.789 156.547 189.17 152.118 196.181 L 175.495 243.213 C 178.402 237.882 180.628 234.079 182.175 231.803 C 183.721 229.528 186.411 226.095 190.245 221.506 Z M 222.249 199.521 L 234.495 128.833 C 222.951 133.828 214.324 137.909 208.613 141.078 C 202.902 144.247 196.316 148.607 188.854 154.158 L 194.141 217.332 C 200.474 212.197 205.298 208.579 208.613 206.478 C 211.928 204.377 216.474 202.058 222.249 199.521 Z M 261.211 193.398 L 299.616 122.154 C 288.313 121.306 279.5 121.12 273.178 121.597 C 266.856 122.074 258.414 123.28 247.853 125.215 L 228.65 196.738 C 236.473 194.908 242.317 193.795 246.183 193.398 C 250.049 193.002 255.058 193.002 261.211 193.398 Z M 299.509 205.589 L 368.913 147.201 C 360.935 141.82 352.771 137.367 344.422 133.842 
C 336.073 130.317 327.446 127.441 318.541 125.215 L 270.384 194.923 C 274.525 195.545 279.81 197.003 286.24 199.297 Z M 312.333 375.963 C 311.417 372.299 304.089 340.239 275.693 320.088 C 274.777 319.172 261.038 308.18 254.626 299.936 L 244.55 301.768 L 288.517 397.03 C 294.013 395.198 311.417 386.954 312.333 375.963 Z M 335.232 274.288 L 326.072 217.497 L 229.894 284.364 L 232.642 294.44 Z M 239.138 298.104 L 229.978 299.936 L 226.314 282.532 L 316.081 221.161 C 299.593 205.59 277.609 195.513 256.542 195.513 C 209.826 195.513 171.355 233.985 171.355 280.7 C 171.355 304.516 181.431 327.415 198.835 342.987 C 200.667 340.239 206.163 333.827 229.062 333.827 C 237.306 333.827 246.466 334.743 257.458 336.575 Z M 196.003 326.499 C 150.203 247.725 227.146 210.169 237.222 206.505 C 228.062 210.169 155.699 254.137 202.415 323.751 C 199.667 325.583 196.003 327.415 196.003 326.499 Z

If you are curious what the whole SVG file looks like, here it is:

<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
  <path id="Delphi" d="M 499.996 185.685 C 500.673 282.217 411.317 315.926 353.636 356.897 C 300.877 394.36 255.711 447.001 250.27 468.359 C 243.913 446.564 203.354 395.367 146.37 357.94 C 87.596 319.354 -0.667 283.269 0.004 186.738 C 1.214 10.975 185.692 -37.617 250.41 113.819 C 312.154 -31.581 498.776 9.49 499.996 185.685 Z M 211.574 374.131 C 224.398 374.131 239.97 375.963 257.374 379.627 L 266.533 363.139 L 256.458 341.155 C 245.466 339.323 235.39 338.407 227.146 338.407 C 204.247 338.407 200.583 345.735 200.583 345.735 L 186.843 377.795 C 191.423 375.963 199.667 374.131 211.574 374.131 Z M 206.994 345.735 C 218.902 342.071 231.014 341.448 237.222 343.903 C 229.894 341.155 210.658 347.567 210.658 347.567 L 196.919 366.803 
Z M 175.495 317.519 L 140.152 325.868 C 142.016 330.859 143.5 334.57 144.604 337 C 145.709 339.43 147.471 342.862 149.892 347.297 L 182.731 329.764 Z M 169.712 299.497 L 132.081 291.637 C 132.591 296.206 133.055 299.638 133.472 301.934 C 133.89 304.23 134.725 307.941 135.977 313.066 L 173.547 312.76 C 172.578 310.076 171.836 308.045 171.321 306.665 C 170.806 305.286 170.27 302.897 169.712 299.497 Z M 167.703 271.54 L 132.916 249.893 C 132.014 256.899 131.457 262.094 131.246 265.477 C 131.035 268.86 131.035 273.684 131.246 279.949 L 168.26 292.75 C 167.792 288.175 167.514 284.743 167.425 282.453 C 167.336 280.164 167.428 276.526 167.703 271.54 Z M 173.547 247.666 L 145.161 209.539 C 142.577 215.412 140.722 219.957 139.595 223.176 C 138.468 226.394 137.077 231.126 135.421 237.369 L 168.538 266.59 
C 169.442 261.919 170.184 258.486 170.764 256.293 C 171.345 254.1 172.273 251.225 173.547 247.666 Z M 190.245 221.506 L 177.444 164.455 C 170.974 171.095 166.243 176.29 163.25 180.04 C 160.257 183.789 156.547 189.17 152.118 196.181 L 175.495 243.213 C 178.402 237.882 180.628 234.079 182.175 231.803 C 183.721 229.528 186.411 226.095 190.245 221.506 Z M 222.249 199.521 L 234.495 128.833 C 222.951 133.828 214.324 137.909 208.613 141.078 C 202.902 144.247 196.316 148.607 188.854 154.158 L 194.141 217.332 C 200.474 212.197 205.298 208.579 208.613 206.478 C 211.928 204.377 216.474 202.058 222.249 199.521 Z M 261.211 193.398 L 299.616 122.154 C 288.313 121.306 279.5 121.12 273.178 121.597 C 266.856 122.074 258.414 123.28 247.853 125.215 L 228.65 196.738 C 236.473 194.908 242.317 193.795 246.183 193.398 C 250.049 193.002 255.058 193.002 261.211 193.398 Z M 299.509 205.589 L 368.913 147.201 C 360.935 141.82 352.771 137.367 344.422 133.842 
C 336.073 130.317 327.446 127.441 318.541 125.215 L 270.384 194.923 C 274.525 195.545 279.81 197.003 286.24 199.297 Z M 312.333 375.963 C 311.417 372.299 304.089 340.239 275.693 320.088 C 274.777 319.172 261.038 308.18 254.626 299.936 L 244.55 301.768 L 288.517 397.03 C 294.013 395.198 311.417 386.954 312.333 375.963 Z M 335.232 274.288 L 326.072 217.497 L 229.894 284.364 L 232.642 294.44 Z M 239.138 298.104 L 229.978 299.936 L 226.314 282.532 L 316.081 221.161 C 299.593 205.59 277.609 195.513 256.542 195.513 C 209.826 195.513 171.355 233.985 171.355 280.7 C 171.355 304.516 181.431 327.415 198.835 342.987 C 200.667 340.239 206.163 333.827 229.062 333.827 C 237.306 333.827 246.466 334.743 257.458 336.575 Z M 196.003 326.499 C 150.203 247.725 227.146 210.169 237.222 206.505 C 228.062 210.169 155.699 254.137 202.415 323.751 C 199.667 325.583 196.003 327.415 196.003 326.499 Z" fill="#d40000"/>
</svg>

And for those of you who are impatient, here is the output:

The path data rendered in Delphi with a TPath component 
(The strokes default to black, but you can tweak that)
Rendered in Delphi with a TPath component
(The strokes default to black, but you can tweak that)
The default SVG
And as an SVG

And since it is a vector graphic it will look great at any resolution, as long as you maintain a 1:1 aspect ratio.

What fun Delphi side projects are you working on? What did you do to celebrate the birthday of your favorite programming language?

This entry was posted in News. Bookmark the permalink.

2 Responses to Delphi’s Big Day (with a little SVG fun!)

  1. punctuation says:

    How on EARTH do you find the time to do these things Jim? This is epic!!!!

  2. fabienfert says:

    I’m using 10.3. And i failed having colors in TPath (even if i copy your code, i get an error : “Fill.Color” property doesn’t exist). So i am wondering how can i change colors of TPath ? (fill and stroke).

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.