Vectors, SVG, and Icon Fonts

Raster vs. Vector Graphics

The JPG, PNG, and GIF image formats that we use most often are raster image formats (the newer WebP, AVIF, and JPEG XL formats are as well). They are a grid of pixels and the file format determines the range of color values that can be stored (from 8-bit to 24-bit), as well as how the pixel data is compressed. Bitmaps (BMP) are uncompressed raster images.
The drawbacks with raster image formats are two-fold:
- Making an image's dimensions larger makes the file size grow, because you are storing more data.
- Displaying an image at a size greater than its actual dimensions causes visual anomalies, because the browser is guessing at the color values that do not exist.
The other major approach to handling images is to store them as vectors. Vectors are mathematical formulas that draw out a given shape. A graphic could be comprised of any number of vectors, representing circles, squares, rectangles, lines, polygons, etc.
The beauty of vectors is that you can scale the image dimensions as much as desired, and it always looks the same (thus handling concerns about Retina displays) and does not grow in file size. This happens because you are passing values to the vector formulas, not storing every single pixel's value.

Introducing SVG

SVG (Scalable Vector Graphics) is an XML language for describing two-dimensional graphics. These graphics are created entirely with tags and the browser renders the shapes and text. HTML is also an XML language.
Because SVG is tag-based, it can be styled with CSS.
The following is from the W3C concerning SVG capabilities:

SVG allows for three types of graphic objects: vector graphic shapes (e.g., paths consisting of straight lines and curves), images and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. Text can be in any XML namespace suitable to the application, which enhances searchability and accessibility of the SVG graphics. The feature set includes nested transformations, clipping paths, alpha masks, filter effects, template objects and extensibility.
Animations can be created when JavaScript is applied to SVG (for example, making a vector drawing of a heart "beat" by having it grow larger and smaller as JavaScript dynamically modifies attribute values in the SVG tags).
Due to its text-based nature, SVG can benefit from GZIP compression to greatly reduce load times. It is also indexed by search engines and provides a lot more data for assistive technology to speak/output than a standard image, which typically only provides an alt attribute.
There are many ways to implement SVG, from calling an external .svg file using an <img /> tag or another tag (<object>, <embed>, or <iframe>), putting the <svg> tag directly into HTML markup, or even calling an external SVG file as a CSS background image. Each method has its tradeoffs, both good and bad. You will need to decide which implementation options fits your particular needs the best.
Due to the complexity of hand-coding an SVG, one generally creates their drawing/graphic in a vector-based program such as Illustrator, and exports the SVG code/file from there. If a license for Illustrator is too expensive, you can use a free tool like Inkscape.
The output from those programs (Illustrator and Inkscape) is not the most efficient, so you can minify the SVG to reduce file size.

SVG Basics

Keep in mind that you can style SVG shapes with inline CSS as well as embedded or external CSS.

Rectangles: `<rect />`

Attribute	Usage and Effect	Values
x	x-coordinate (horizontal) for where the left edge of the rectangle begins	Number and sizing unit (if no unit provided, pixels are used)
y	y-coordinate (vertical) for where the top of the rectangle begins	Number and sizing unit (if no unit provided, pixels are used)
width	Width of the rectangle	Number and sizing unit (if no unit provided, pixels are used)
height	Height of the rectangle	Number and sizing unit (if no unit provided, pixels are used)
rx	Radius for the x-axis if you want a rounded edge rectangle	Number and sizing unit (if no unit provided, pixels are used)
ry	Radius for the y-axis if you want a rounded edge rectangle	Number and sizing unit (if no unit provided, pixels are used)

Circles: `<circle />`

Attribute	Usage and Effect	Values
cx	This is the x-axis (horizontal) coordinate of the center of the circle	Number and sizing unit (if no unit provided, pixels are used)
cy	This is the y-axis (vertical) coordinate of the center of the circle	Number and sizing unit (if no unit provided, pixels are used)
r	This is the radius of the circle	Number and sizing unit (if no unit provided, pixels are used)

Ellipses: `<ellipse />`

Attribute	Usage and Effect	Values
cx	This is the x-axis (horizontal) coordinate of the center of the ellipse	Number and sizing unit (if no unit provided, pixels are used)
cy	This is the y-axis (vertical) coordinate of the center of the ellipse	Number and sizing unit (if no unit provided, pixels are used)
rx	This is the x-axis radius of the ellipse	Number and sizing unit (if no unit provided, pixels are used)
ry	This is the y-axis radius of the ellipse	Number and sizing unit (if no unit provided, pixels are used)

Lines: `<line />`

Attribute	Usage and Effect	Values
x1	This is the x-axis (horizontal) coordinate where the line starts	Number and sizing unit (if no unit provided, pixels are used)
y1	This is the y-axis (vertical) coordinate where the line starts	Number and sizing unit (if no unit provided, pixels are used)
x2	This is the x-axis (horizontal) coordinate where the line ends	Number and sizing unit (if no unit provided, pixels are used)
y2	This is the y-axis (vertical) coordinate where the line ends	Number and sizing unit (if no unit provided, pixels are used)

Polylines: `<polyline />`

Attribute	Usage and Effect	Values
points	Accepts space-separated pairs of x,y coordinates	Number and sizing unit (if no unit provided, pixels are used)

Polygons: `<polygon />`

Attribute	Usage and Effect	Values
points	Accepts space-separated pairs of x,y coordinates	Number and sizing unit (if no unit provided, pixels are used)

Color and Stroke Attributes

The following attributes are a partial list of what is available in SVG.

Attribute	Usage and Effect	Values
fill	Background color for the shape	`none` A color for the background (color name or hexadecimal)
fill-opacity	Opacity of the background	`0.0` (totally transparent) to `1.0` (totally opaque)
stroke	Line color	`none` A color for the background (color name or hexadecimal)
stroke-width	Line thickness	Number and sizing unit (if no unit provided, pixels are used)
stroke-opacity	Opacity of the line	`0.0` (totally transparent) to `1.0` (totally opaque)
stroke-dasharray	Determines dash (line) length and gaps between segments	A list of numbers, separated by commas, with the first/third/fifth/etc. value for line length and second/fourth/sixth/etc. for gap length

SVG Text

Text is implemented using the <text></text> tags.
The starting location for the text is defined by x and y attributes.
Additional attributes include font-family and font-size. Inline CSS can also be used.
The article about different SVG implementation options explores the security protections with SVG that can block external fonts, such as Web Fonts, from being used in some circumstances.

SVG Examples

SVG Example 1: Circles

See the Pen SVG Example 1 by Jason Withrow (@jwithrow) on CodePen.

SVG Example 2: Rectangles

See the Pen SVG Example 2 by Jason Withrow (@jwithrow) on CodePen.

SVG Example 3: Polyline and Text

See the Pen SVG Example 3 by Jason Withrow (@jwithrow) on CodePen.

Icon Fonts

The inflexibility of image-based icons led to the creation of fonts that had icon forms rather than letter forms. They use generated CSS (the ::before pseudo-element) and unicode values, as unicode supports 65,536 characters (much more than ASCII, which is 128 characters).
Font formats can scale without losing visual quality, so they accomplished the desired outcome.
These required support for Web Fonts in order to really flourish, because the browser had to be able to easily accept them.
More recently, SVG icons have been supplementing or replacing icon fonts for various reasons, including improved visual quality (because fonts are text, they are anti-aliased by the browser rendering process, which makes them fuzzier).
One of the most popular icon sets that added SVG icon support, while still retaining its Web Font (Icon Font) option, is Font Awesome, which has a massive variety of icons available.
One should keep in mind that bringing in something like Font Awesome is going to increase load times, due to the sheer amount of code being added, but if you're able to meet all your icon needs with that one set, then at least you're gaining some efficiency there.
The example shown here uses the traditional Web Font (Icon Font) approach to Font Awesome; you can examine their JavaScript API documentation if you want to go down the SVG icon path.
The free set of icons can be used by using a free hosted kit:
```
<script src="https://kit.fontawesome.com/yourKitId.js"
 crossorigin="anonymous"></script>
```
Note: the emphasized yourKitId is a key that you will get when you set up your free kit; it is for your own personal use and has limits to page loads per month.
Then consult the Font Awesome icon gallery and select from the free icons.
For example, the address card icon is coded as:
```
<i class="far fa-address-card fa-3x"></i>
```
The icon renders as:
The fa-3x class is setting the dimensions of the icon; consult the documentation on sizing for other values.
You can add your own classes (or other selectors) to adjust colors as needed.