18
Blend Modes, Filter eFFects,
and MaskingThe majority of today’s browsers— desktop
and mobile—support the Scalable Vector
Graphics (SVG) format. SVG differs from imageformats such as GIF, JPEG, and PNG (known as bitmap
images), as SVG is made up of a markup language
(similar to HTML) that describes points, or vectors, rather than the grids
of pixels that make up bitmap images. One advantage that SVG has over
bitmap images is that, as a vector format, it scales well to fit screens of any
resolution. In addition to this, the SVG format offers a built-in array of rich
graphical effects previously available only in image-editing software such as
Photoshop, GIMP, and Sketch.
Until recently, however, using those graphical effects in browsers wasn’t
practical; live image effects are computationally intensive, and using them
on the Web would have negatively affected performance. Today, however,
browsers have become much faster and more capable, with almost all
rendering graphics directly on the device’s GPU. This advance allows for
the hardware-accelerated display of transformations and animations and
unlocks the potential to use the rich graphical effects of SVG.
PX3024