Illustration

In a comparison with raster image formats, the advantages of SVG include lossless scaling, reduced file sizes, and support for CSS animations. However, most usage of SVG remains limited to iconography, simple illustrations, and other basic graphics. Photography can be reconstructed from a vast amount of different vector shapes, but the process is tedious and the resulting SVG is too large and performance-intensive for use on the web. The halftone process can instead be used to simulate a continuous-tone photo. An SVG constructed this way would only require circles of four different fill colors, set on a transparent background.

In the example below, I converted the original RGB photo into CMYK, separated its color channels into individual files, and then ran each file through Photoshop's halftone screen. I then used Illustrator's image trace to convert the files into vectors, and exported them as SVG's. The four resulting files can be stacked in browser with absolute positioning, or recombined into one SVG.

Below I test several methods for layering several raster images on top of a vector background shape, to create one raster/vector hybrid halftone image.

Although this technique produces a less accurate reproduction of the original photo, it creates new opportunities. Opacity, position, and angle, among other properties, can be animated with CSS to create visual effects such as an image moving in and out of alignment/focus. The layers can also be lazy-loaded one at a time, progressively adding visual information as each constituent file is downloaded, rather than forcing viewers to wait for a single large file.