Graphics Reference
In-Depth Information
Disadvantages include alignment headaches when you are trying to center
symbols at different scales, and wasted bandwidth and load time if only a
few icons are used. Fonts also do not support more than one fill color per
character, which can present a challenge when it comes to achieving clarity
at small sizes. Sometimes that constraint can be a good forcing function for
better design, but, in reality, plenty of poor results still happen.
The third icon library option is the most obvious one, which is to supply
the icons as images. In addition to traditional image formats like JPEG
or PNG, which define the image as a grid of pixels, modern web browsers
support images in Scalable Vector Graphics (SVG) format, which, similarly
to fonts, describes shapes in vector form. SVG images perfectly scale to any
size but differ from fonts in that they can include more than one color and
transparency, which can help to disambiguate similar shapes.
The Aperture JS icons used in Chapter 12, “Flows,” and shown in
Figure
16-7
are examples of SVG format icons. Like fonts, any image-based set
of icons can also be provided as one file for efficient loading in a web
environment, using Cascading Style Sheets (CSS) to draw from the correct
area of the image. They can also be embedded directly in the source for a
web page. The downside of image-based icons is difficulty in mapping color
dynamically from data. If required, it is easier and more optimal to do that
with font-based icons.
Figure 16-7:
SVG image icons like the Aperture JS icons shown here
provide support for subtle use of color to complement differentiation by
shape but can still scale to any size. Colors can be styled through CSS.
Tip
Symbol fonts provide a fast and efficient source of icon shapes for
coloring dynamically from data. SVG icons provide a source for icons
that use shading or color to enhance the use of shapes in clearly
distinguishing types.
