Categories
News

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?

2 replies on “Delphi’s Big Day (with a little SVG fun!)”

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).

Comments are closed.