Pixel has an interesting etymological history. It is a portmanteau for "picture element", from "pix" for "pics" for "pictures", and "el" for "element".
Raster vs Vector
Raster graphics represent an image by a two dimensional grid/matrix, with each cell in that grid being represented by a color. In computer graphics, that color is represented by bytes, resulting in a two dimensional byte array, which is a type of bitmap, which can be called a "pixmap".
Vector graphics represent images by first defining a variety of vectors, which can be points, lines, and more complicated shapes, and then indicating to the rendering engine where to draw those vectors. The definition of vectors and where they are rendered relative to other elements/vectors can be done in a variety of ways. In SVGs, for example, it is defined in an XML-like document that the browser rendering engine uses to "draw" the image
If an image is rasterized it is turned from a vector graphic into a raster graphic. Similarly, if an image is vectorized it is turned from raster graphic into a vector graphic. Rasterization occurs in rendering engines that support vector graphics (like the browser) because most displays are raster displays, and so the vector graphics need to be scaled and rasterized before display.
Vector graphics are ideal for environments of variable viewport size, or of variable resolution. You can rasterize "just in time" to get any desired resolution.
Only the raster format is a true image representation. The bitmap truly represents the image. The vector format is more like a specification for how to draw an image that an rendering engine will use to generate the image.
Raster formats: PNG .png, JPEG .jpeg .jpg, GIF .gif
Vector formats: SVG .svg
SVGs
A quick intro to path and d
A common element in SVG is the path element with a syntactically obscure d attribute.
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<path
fill="none"
stroke="red"
d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z"
/>
</svg>
The path element is drawing a shape. How to succinctly instruct a machine to draw an arbitrary shape, in a way that could be manually written, is difficult. The result is understandably esoteric. The d attribute is an ordered collection of draw and move commands. Moves (M or m) "lift the pen" and move it to a new point. The other commands draw a variety of lines. Straight lines (L, l, etc.), and different kinds of curves (C, c, etc.). stroke is the color of the "pen stroke" while fill is the color that gets "filled in" once the shape is fully drawn. The rabbit hole goes much deeper.
Security
SVGs are written in markup, an XML-based format that embeds in HTML. It is therefore more of a document than an image. Similar to HTML documents, it can contain JS and CSS, making it an attack vector for malicious code.
In general, inline SVG is to be preferred.
For web devs, this means not using svgs in img-tags, but instead rendering them as part of the greater markup (aka, inline).