SVG Slideshow

This site’s homepage is now sporting a slideshow that uses only scalable vector graphics (SVG). The benefit of SVG is obviously the small file size and scalability. My goal is to focus on color and typography for the slideshow to jazz up the homepage as well as to show off client works. I also would like to play around with SVG because I am loving Adobe Illustrator.

After doing my research on how to best use SVG, I decided to support only modern browsers. That way I don’t have to create a PNG fallback for all the graphics. I am all about doing less work, not more. Since this is an enhancement feature, it is ok if legacy browsers don’t get it. Users can still access the blog. I have a dilemma about this whole approach. I am not sure if users on IE and below are lucky that they don’t have to these big graphics or users on modern browsers are being punished with these rich visual. I don’t know.

On the technical side, the slideshow is based off Nivo Slider, the jQuery version. After testing out many sliders, I find Nivo to be the simplest. I also purchased the WordPress plug-in license for a client, but than he decided not to use it so I implemented on the Lancaster Education Foundation.

The WordPress plug-in is very easy to set up, but my main issue is that the plug-in injects quite a bit of unnecessary JavaScripts and CSS into the page. On the other hand, the jQuery version is highly customizable. I was battling if I should use the WordPress plug-in or jQuery for the client and I decided on the former. The main reason is that the client can update the slider herself. As for my own site, I do the updates manually; therefore, I chose the jQuery version, which is free.