Case Study: Implementing SVG for flyweb.at v.9

Replacing Animations & Icons with SVG

SVG Logo

My personal website flyweb.at uses the animation library Greensock in conjunction with Scrollmagic — to realise animations as you scroll along.

SVG is getting a lot of deserved attention lately. After reading a few tutorials and blog posts I decided to jump the bandwagon and join the party. IMHO now that Adobe's Flash is finally dying, it is time for a open webstandard technology to step in.
Since SVG is a vector based format which can scale lossless, it is also a great replacement for Icon-Fonts. SVG Icons can be used as sprite as well — there are grunt & gulp plugins which can help here.

Reading List

Here is a list of websites which helped me understand SVG. Especially Sara Soueidan does a great job to get SVG into the spotlight.

The tutorials and examples on the greensock and scrollmagic sites are also great places to find help.

SVG Basics

First we need some SVG files to work with. When designing websites I normally use Photoshop I often use vector shapes in my compositions. My Problem was, how to export the vector graphics from Photoshop to SVG.
Luckily I had an old Version of Fireworks CS4 which I could use to open psd files with vector shapes. Inkscape or Adobe's Illustrator (Illustrator CS2 is freely available) also have the ability to export SVG.

If you dont have any SVG at hand try a google search or use services like icomoon.io, they offer to save your Icons-Selection in a jSON file like fontello does and so you can easily edit your Icon-List later.

I used a graphic of three gears to spin around themselves as the user scrolls my website. At first I had used three background graphics for the animation but now it's time to replace them with an SVG graphic.

<svg viewBox="0 0 450 470" x="0" y="0" width="100%">
<g>
<path fill="none" stroke="#a4bf9e" stroke-width="1" d="M 275.0426 332.0184 C 275.6177 328.3928 276.0378 324.7178 276.2841 320.9875 C 276.5302 317.2573 276.5969 313.555 276.503 309.8893 L 257.2346 307.1754 C 256.9505 302.1414 256.3043 297.1987 255.3071 292.3746 L 273.244 284.7734 C 271.5064 277.5138 269.1007 270.4905 266.1095 263.7803 L 247.2617 268.6503 C 245.0802 264.1553 242.583 259.8369 239.7914 255.7323 L 253.4444 241.8533 C 249.0892 235.8632 244.1977 230.2804 238.8282 225.176 L 223.2791 236.8871 C 219.5733 233.5795 215.6246 230.5368 211.4509 227.7876 L 218.7594 209.7395 C 212.4969 205.8922 205.8547 202.5847 198.8825 199.9072 L 188.9941 216.6865 C 184.3388 215.0673 179.5237 213.7775 174.5708 212.8339 L 174.4129 193.3725 C 170.7911 192.8016 167.1157 192.381 163.3819 192.1346 C 159.6517 191.8884 155.9529 191.8224 152.2878 191.9123 L 149.5733 211.1842 C 144.5394 211.4686 139.5967 212.1145 134.769 213.112 L 127.1714 195.1748 C 119.9077 196.9127 112.8885 199.3186 106.1782 202.3098 L 111.048 221.1616 C 106.5492 223.3385 102.2351 225.8317 98.1265 228.6276 L 84.2512 214.9748 C 78.2612 219.3297 72.6748 224.2209 67.5702 229.5866 L 79.285 245.1397 C 75.9741 248.8417 72.931 252.7945 70.1817 256.9641 L 52.1334 249.6592 C 48.2863 255.918 44.9826 262.5645 42.3055 269.5327 L 59.0848 279.4251 C 57.4655 284.0764 56.1757 288.8915 55.2325 293.8445 L 35.7706 294.0024 C 35.1998 297.6241 34.7753 301.3028 34.5291 305.0331 C 34.283 308.7633 34.2206 312.462 34.3062 316.1311 L 53.5826 318.8459 C 53.8629 323.875 54.5128 328.8185 55.5065 333.646 L 37.5729 341.2439 C 39.3108 348.5075 41.7127 355.5265 44.7039 362.2363 L 63.5557 357.367 C 65.733 361.8658 68.2304 366.1801 71.0259 370.2887 L 57.369 384.1638 C 61.724 390.1574 66.6155 395.7402 71.9849 400.8449 L 87.534 389.1341 C 91.2399 392.441 95.1886 395.4839 99.3622 398.2336 L 92.0574 416.2818 C 98.3163 420.129 104.9587 423.4324 111.931 426.1094 L 121.8198 409.3302 C 126.4745 410.9533 131.2895 412.2436 136.2426 413.1827 L 136.4009 432.6447 C 140.0223 433.2155 143.6975 433.6396 147.4277 433.8858 C 151.1615 434.1322 154.8606 434.1946 158.526 434.1047 L 161.2401 414.8325 C 166.2737 414.5523 171.2166 413.9061 176.0446 412.9086 L 183.6421 430.8419 C 190.9057 429.1043 197.9247 426.7025 204.6385 423.7115 L 199.7652 404.8595 C 204.264 402.6823 208.5783 400.1848 212.6909 397.3895 L 226.5659 411.0464 C 232.5556 406.6913 238.1384 401.7997 243.2472 396.4306 L 231.5325 380.8772 C 234.8394 377.1754 237.8864 373.2228 240.6357 369.0533 L 258.6841 376.3576 C 262.5271 370.099 265.8346 363.4567 268.5116 356.4844 L 251.7288 346.5955 C 253.3516 341.9408 254.6418 337.1253 255.5847 332.1768 L 275.0426 332.0184 ZM 168.509 237.0521 C 168.7456 233.4678 171.7708 231.3102 175.2349 232.266 C 175.2349 232.266 191.4676 236.7179 201.6755 243.5427 C 211.8851 250.3714 222.1989 263.6748 222.1989 263.6748 C 224.4005 266.5172 223.5667 270.1373 220.342 271.7225 L 208.4533 277.5812 C 205.2284 279.1703 200.7075 278.2119 198.4099 275.4501 C 198.4099 275.4501 193.4044 269.443 187.1519 265.26 C 180.9033 261.0777 173.4361 258.7453 173.4361 258.7453 C 170.0071 257.6733 167.3955 253.8633 167.636 250.2808 L 168.509 237.0521 ZM 94.833 255.2693 C 94.833 255.2693 106.8095 243.4372 117.8241 238.0089 C 128.8383 232.5848 145.5176 230.3049 145.5176 230.3049 C 149.0773 229.8126 151.7964 232.3493 151.5598 235.9336 L 150.6888 249.1625 C 150.4522 252.7491 147.3607 256.1787 143.8231 256.791 C 143.8231 256.791 136.1121 258.1218 129.368 261.4466 C 122.6203 264.7677 116.8704 270.0649 116.8704 270.0649 C 114.2257 272.5009 109.6201 272.8565 106.6337 270.8615 L 95.6161 263.4914 C 92.632 261.4924 92.2776 257.7938 94.833 255.2693 ZM 74.5524 336.4009 C 74.5524 336.4009 70.296 320.1147 71.1046 307.8621 C 71.9134 295.6072 78.2753 280.0198 78.2753 280.0198 C 79.633 276.6948 83.1901 275.6099 86.1764 277.6049 L 97.1941 284.9751 C 100.1804 286.9703 101.6095 291.3641 100.3692 294.7366 C 100.3692 294.7366 97.6657 302.0803 97.1707 309.5822 C 96.6755 317.0858 98.3906 324.7174 98.3906 324.7174 C 99.177 328.2232 97.1831 332.3893 93.9582 333.9764 L 82.0656 339.8347 C 78.8451 341.4185 75.4635 339.8753 74.5524 336.4009 ZM 141.4095 389.7393 C 141.175 393.3239 138.146 395.4777 134.6799 394.5278 C 134.6799 394.5278 118.4448 390.0753 108.2393 383.2446 C 98.0333 376.422 87.7155 363.119 87.7155 363.119 C 85.5144 360.2762 86.3518 356.6563 89.5724 355.0707 L 101.4631 349.2124 C 104.6861 347.621 109.2046 348.5853 111.5066 351.3414 C 111.5066 351.3414 116.5141 357.3546 122.763 361.5332 C 129.0119 365.7096 136.4811 368.0442 136.4811 368.0442 C 139.9072 369.1201 142.5213 372.924 142.2823 376.5148 L 141.4095 389.7393 ZM 152.9622 343.6147 C 136.2729 342.5133 123.6343 328.0886 124.7355 311.4013 C 125.8368 294.7141 140.2614 282.0755 156.9507 283.177 C 173.64 284.2783 186.2746 298.7027 185.1733 315.39 C 184.0721 332.0772 169.6514 344.7162 152.9622 343.6147 ZM 215.0816 371.5204 C 215.0816 371.5204 203.1089 383.3564 192.0908 388.7784 C 181.0741 394.2084 164.3952 396.4887 164.3952 396.4887 C 160.8379 396.9751 158.1181 394.442 158.3547 390.8577 L 159.2277 377.629 C 159.4644 374.0424 162.5537 370.6147 166.0939 369.9985 C 166.0939 369.9985 173.8031 368.6656 180.5447 365.3466 C 187.2945 362.0257 193.0464 356.7224 193.0464 356.7224 C 195.691 354.289 200.2947 353.9306 203.2827 355.9319 L 214.2986 363.2979 C 217.2867 365.2971 217.6375 368.9955 215.0816 371.5204 ZM 231.6416 346.7679 C 230.2822 350.0926 226.7265 351.1819 223.7383 349.1844 L 212.719 341.814 C 209.7348 339.817 208.3035 335.425 209.5455 332.0531 C 209.5455 332.0531 212.2431 324.7126 212.7382 317.209 C 213.2333 309.7071 211.5238 302.0758 211.5238 302.0758 C 210.736 298.5659 212.7322 294.3981 215.9528 292.8125 L 227.8451 286.9542 C 231.0677 285.369 234.4497 286.9119 235.3548 290.3862 C 235.3548 290.3862 239.6146 306.6746 238.8058 318.9294 C 237.9972 331.1821 231.6416 346.7679 231.6416 346.7679 Z" />
<path fill="none" stroke="#a4bf9e" stroke-width="1" d="M 351.5198 280.9572 C 353.916 280.5981 356.3151 280.131 358.713 279.5436 C 361.111 278.9565 363.4542 278.2615 365.7451 277.4724 L 363.6194 264.7993 C 366.731 263.6187 369.7152 262.2282 372.5554 260.6396 L 380.9119 270.4218 C 385.1376 267.8825 389.08 264.9701 392.7111 261.7508 L 385.8936 250.8517 C 388.2899 248.5836 390.5109 246.1519 392.541 243.5767 L 403.9968 249.4119 C 406.903 245.4773 409.4449 241.2859 411.5906 236.8887 L 401.1216 229.4282 C 402.4665 226.4365 403.5966 223.3444 404.4974 220.1692 L 417.3168 221.1793 C 418.493 216.4697 419.2525 211.6292 419.5504 206.7061 L 407.0167 203.819 C 407.111 200.5649 406.9651 197.2762 406.572 193.9699 L 418.7956 189.997 C 418.4355 187.6025 417.9687 185.2047 417.3807 182.8043 C 416.7933 180.4064 416.099 178.0643 415.3116 175.7744 L 402.6356 177.9008 C 401.4562 174.7875 400.0655 171.8033 398.4766 168.9619 L 408.2581 160.6082 C 405.7184 156.3802 402.8076 152.4384 399.5887 148.8087 L 388.6869 155.6269 C 386.4205 153.2274 383.9905 151.0074 381.4138 148.9762 L 387.2494 137.5219 C 383.3148 134.6169 379.1229 132.0724 374.7281 129.9263 L 367.266 140.3981 C 364.2748 139.0503 361.1815 137.9205 358.0088 137.0195 L 359.0163 124.2007 C 354.3083 123.0239 349.4668 122.2661 344.5459 121.9675 L 341.6562 134.502 C 338.4041 134.4084 335.115 134.5543 331.81 134.9459 L 327.8369 122.7222 C 325.4413 123.084 323.0416 123.5485 320.6437 124.1359 C 318.2458 124.7233 315.9031 125.4205 313.6111 126.2046 L 315.7383 138.8829 C 312.627 140.0607 309.6437 141.4537 306.8014 143.0401 L 298.4481 133.2598 C 294.22 135.7994 290.2783 138.7089 286.6469 141.9285 L 293.4664 152.83 C 291.0671 155.0961 288.8474 157.5273 286.8166 160.1054 L 275.3603 154.2679 C 272.4538 158.2025 269.9119 162.3937 267.7664 166.7911 L 278.2353 174.2512 C 276.8901 177.243 275.76 180.3352 274.8596 183.5104 L 262.0408 182.5029 C 260.8639 187.2095 260.1045 192.0504 259.8063 196.9736 L 272.3401 199.8608 C 272.2457 203.1145 272.3919 206.4036 272.7847 209.7095 L 260.5627 213.6822 C 260.924 216.0765 261.3881 218.4749 261.9755 220.8728 C 262.5635 223.2734 263.2606 225.6148 264.0467 227.9049 L 276.7211 225.7786 C 277.9008 228.8923 279.2913 231.8761 280.8789 234.718 L 271.0986 243.0715 C 273.6385 247.2994 276.5493 251.241 279.769 254.8736 L 290.6702 248.0527 C 292.9362 250.4521 295.3675 252.6718 297.9462 254.7052 L 292.1082 266.1602 C 296.0426 269.0653 300.2339 271.6074 304.6318 273.7554 L 312.0927 263.2836 C 315.0834 264.6289 318.1775 265.7614 321.3512 266.6622 L 320.3424 279.4813 C 325.0499 280.6552 329.8908 281.416 334.8141 281.7143 L 337.7006 269.1778 C 340.9549 269.2735 344.2437 269.1272 347.5477 268.7363 L 351.5198 280.9572 ZM 295.6479 212.6243 C 289.6913 188.3082 304.575 163.7652 328.8922 157.8084 C 353.2111 151.8512 377.7542 166.7359 383.7108 191.052 C 389.6681 215.3709 374.7834 239.914 350.4645 245.8714 C 326.1472 251.8282 301.6051 236.9432 295.6479 212.6243 Z" />
<path fill="none" stroke="#a4bf9e" stroke-width="1" d="M 217.4129 205.623 L 237.8019 200.1599 L 234.6006 182.7649 C 237.7926 181.2509 240.8224 179.5049 243.674 177.5396 L 257.1299 189.0032 L 272.0533 174.0781 L 260.5764 160.6052 C 262.5558 157.7254 264.303 154.6992 265.8056 151.5497 L 283.2117 154.7512 L 288.675 134.3619 L 272.0191 128.4407 C 272.2926 124.9891 272.2898 121.4923 272.0052 117.9708 L 288.6721 112.0428 L 283.2096 91.6562 L 265.8122 94.858 C 264.2978 91.666 262.5512 88.6337 260.5894 85.7843 L 272.0504 72.3289 L 257.127 57.402 L 243.6537 68.8776 C 240.7769 66.8988 237.7508 65.1518 234.5974 63.6503 L 237.7982 46.2469 L 217.4116 40.7831 L 211.4922 57.4355 C 208.04 57.1595 204.5413 57.1656 201.02 57.4503 L 195.0943 40.7827 L 174.7084 46.2478 L 177.9071 63.6433 C 174.7164 65.1572 171.6846 66.901 168.8358 68.8652 L 155.3784 57.4076 L 140.4577 72.3321 L 151.928 85.8016 C 149.9505 88.6778 148.2015 91.7071 146.6996 94.8592 L 129.2969 91.6597 L 123.8353 112.0458 L 140.4842 117.9663 C 140.2112 121.4146 140.2145 124.9141 140.498 128.4359 L 123.8318 134.3612 L 129.295 154.7501 L 146.691 151.5486 C 148.2064 154.7403 149.9526 157.7699 151.9163 160.622 L 140.4566 174.0769 L 155.3802 189.0037 L 168.8535 177.528 C 171.7295 179.5042 174.7561 181.2538 177.9096 182.7556 L 174.7094 200.1614 L 195.096 205.625 L 201.0183 188.9721 C 204.4696 189.2457 207.9651 189.2431 211.4852 188.9587 L 217.4129 205.623 ZM 253.4475 137.216 L 229.8982 126.0966 C 230.6415 119.9892 228.9809 113.7919 225.2838 108.8758 L 240.1185 87.4716 C 253.5455 100.1758 258.7231 119.4989 253.4475 137.216 ZM 209.1531 134.0293 C 203.1752 135.6312 197.0278 132.0819 195.426 126.1041 C 193.8239 120.125 197.373 113.9775 203.3511 112.3757 C 209.3304 110.7735 215.4764 114.3232 217.0786 120.3023 C 218.6803 126.2801 215.1324 132.4272 209.1531 134.0293 ZM 170.5191 89.3375 C 183.2249 75.9098 202.5478 70.7323 220.265 76.0082 L 209.1456 99.5574 C 203.0386 98.8152 196.8414 100.4756 191.9237 104.1721 L 170.5191 89.3375 ZM 159.0587 109.1914 L 182.6067 120.3111 C 181.8628 126.4171 183.5233 132.6146 187.2211 137.532 L 172.3864 158.9362 C 158.959 146.2307 153.7827 126.907 159.0587 109.1914 ZM 192.2394 170.3985 L 203.3591 146.8492 C 209.4663 147.5926 215.6635 145.9319 220.5808 142.2346 L 241.9852 157.0692 C 229.2796 170.4965 209.9563 175.6728 192.2394 170.3985 Z" />
</g>
</svg>

Layout & Animation

The SVG Tag is an Inline HTML-Element, try not to position it with position: absolute; this might reduce the FPS in your browser.

To draw the path like in the animation above, we can change the value of the stroke-dasharray attribute from the <path> element. To achieve this we need to know the total length from the path, with javascript the getTotalLength() method returns the total length of the path - SVGPathElement.getTotalLength().

Javascript Animations

For interactive Animations I would use one of the following Javascript Libraries. These can help to bind animations to browser events, mouse movement or the scrollbar.

Example Animation with greensock

The greensock TimelineMax object, with the option onUpdate: gearsDrawLine will call the gearsDrawLine() function on every change of the animation, thus changing the value of the stroke-dasharray attribute.

( function ( ) {

'use strict';

var gear_1 = document.getElementById('gear_1'),
gear_2 = document.getElementById('gear_2'),
gear_3 = document.getElementById('gear_3'),
gear1Path = { length: 0, pathLength: gear_1.getTotalLength() },
gear2Path = { length: 0, pathLength: gear_2.getTotalLength() },
gear3Path = { length: 0, pathLength: gear_3.getTotalLength() };

function gearsDrawLine( ) {

gear_1.style.strokeDasharray = [ gear1Path.length, gear1Path.pathLength ].join(' ');
gear_2.style.strokeDasharray = [ gear2Path.length, gear2Path.pathLength ].join(' ');
gear_3.style.strokeDasharray = [ gear3Path.length, gear3Path.pathLength ].join(' ');

}

var gearsDrawTween = new TimelineMax ({ repeat:-1, yoyo:true, onUpdate : gearsDrawLine })
.to( gear1Path, 3, { length: gear1Path.pathLength, ease: Power3.easeIn, }, 'gearsDraw' )
.to( gear2Path, 3, { length: gear2Path.pathLength, ease: Power3.easeIn, }, 'gearsDraw+=0.5' )
.to( gear3Path, 3, { length: gear3Path.pathLength, ease: Power3.easeIn, }, 'gearsDraw+=1' );

}( ));

CSS Animation

If no interactivity is needed the simplest way to animate SVG would be to use CSS animations. The Example animation above manipulates the CSS attribute stroke-dasharray to create the effect of drawing the SVG path.

#gear_1 {
stroke-dasharray: 1216;
stroke-dashoffset: 1216;
animation: gear 3s linear infinite alternate;
}
#gear_2 {
stroke-dasharray: 803;
stroke-dashoffset: 803;
animation: gear 3s linear infinite alternate;
}
#gear_3 {
stroke-dasharray: 804;
stroke-dashoffset: 804;
animation: gear 3s linear infinite alternate;
}

@keyframes gear {

to { stroke-dashoffset: 0; }

}