Images on the Web

The img Element

Responsive Images

The picture element

Image Formats & Performance

• weight of images on web (statistics?)

Raster vs. Vector Images

SVG

With a syntax not unlike HTML, Scalable Vector Graphics is an XML-based open standard for vector images, also maintained by the W3C. When embedded in web applications, SVGs are similarly parsed into a DOM, providing the ability to be styled using CSS as well as dynamically scripted through the DOM API. This is the foundation for popular graphing and visualization libraries such as D3.¹

By no means are the applications and uses for vector graphics limited to graphs. As a resolution-independent format, SVGs are well suited for use in responsive, cross-device functionality, and often come with much smaller filesizes than a visually-equivalent bitmap image. They are commonly used in contexts such as interface icons, diagrams, or even purely decorative illustrations. As with any artistic medium, their use is limited only by your imagination.