To complement the metadata on my photo pages, I wanted accurate but minimal vector representations of my cameras (currently a Fujifilm X-E2 and an iPhone 5S), so I had to design my own. Although generic representations of cameras are appropriate for many circumstances (such as indicating a photo gallery on a navigation menu), something more defined was needed for this circumstance. Part of what I am communicating here is “how this photo was created”, so I designed something recognizable as a unique object. After completing the initial work, I realized I would need something even more minimal for smaller sizes (20% of a screen width or much smaller), so I abstracted the icon even further.
As a format, SVG has plenty of advantages:
- It is tiny: it typically takes up only a few hundred bytes up to a few kilobytes. This is typically a fraction of what a large
.pngfile might take up. My icons typically take less than 1 KB, but these camera vectors are more like 2.5 KB each.
- It is sharp: lines and shapes scale infinitely, never losing sharpness.
- It is robust: it works even without specialized software – its source can be edited in a text editor. It is implemented in XML, so the source can be viewed and edited very easily. Browser support for it is pretty good as well.
- It is flexible: it can be served as a background image with CSS, in an HTML
<img>tag, or even inline as an
I use SVG for all of the graphics on this site, with all three of these methods depending on performance and semantic context.