Ditch the Pixels: The Small and Vectorized Web
Tags: development, web, html, css
Published: 2024-06-06 04:44:23

---
title: Ditch the Pixels: The Small and Vectorized Web
published: true
description: If it were up to me, the small web would also be a vectorized web.
tags: Development, Web, html, css
cover_image: https://bear-images.sfo2.cdn.digitaloceanspaces.com/yordi-1717596969-0.png
# Use a ratio of 100:42 for best results.
# published_at: 2024-06-06 04:44 +0000
---

If it were up to me, the [small web](https://ar.al/2020/08/07/what-is-the-small-web/) would also be a vectorized web.

The homepage of [my personal website](https://yordi.me/) contains only scalable vector graphics (SVGs). These vectors are small by definition (essentially just lines stored as mathematical formulas) and they scale automatically. Gone are the days of pixelated header images.

When I first wrote this article, my website looked like this (*text continues below the picture*):

![The homepage of yordi.me on June 5th, 2024](https://bear-images.sfo2.cdn.digitaloceanspaces.com/yordi-1717596969-0.png)

Apart from the fact that the image above is not vectorized (shame on me), there are three sections:

1. A header with menu icons.
2. A body with the main content.
3. A footer with social media icons.

Let me explain how I managed to vectorize each section.

## Header
The header contains the menu for my website. I chose to make this icon-based rather than text-based to make it language-independent. Each icon originates from [Tabler Icons](https://tablericons.com/), a very useful website offering all kinds of vectorized icons. It lets you customize the size, stroke width, and color of each icon and then copy the SVG code by clicking it.

My full menu looks like this:

{% codepen https://codepen.io/Froodooo/pen/bGyRRoN %}

These icons all have an HTML anchor (`<a>`) element as their parent, and each anchor is a child of a navigation (`<nav>`) element. The structure looks like this:

```html
<nav>
  <a href="/home/">
    <svg></svg>
  </a>
  <a>
    ...
  </a>
</nav>
```

No images, just vectors.
## Body
Apart from plain text with some applied styles, the eye-catcher of the main content is the vectorized avatar. Since I'm not a digital artist, I outsourced the creation of it to some tools on the web. Here’s how I did it:

1. Create a [Bitmoji](https://www.bitmoji.com/) account.
2. Design an avatar that looks like me (I'd say it ended up pretty accurate).
3. Download the avatar (Bitmoji offers many different "stickers" based on your avatar design; you can pick the one you like most).
4. Convert the downloaded avatar to a vector. There are many tools for this; I used [Picsvg](https://picsvg.com/).
5. Download the vector.

The format of the vector you downloaded is exactly the same as the menu icons from the [header](#header), meaning you can put this vector right inside the HTML of your website:

```html
<body>
  ...
  <svg>...</svg>
  ...
</body>
```
## Footer
Not much new stuff here. My footer actually uses the same techniques as the [header](#header) of my website. The only differences here are the type of icon and the color of the icon.

For completeness, my footer looks like this:

{% codepen https://codepen.io/Froodooo/pen/eYaRRGW %}

## A last word on vectors
A vector (SVG file) is actually just a plain text file containing mathematical formulas to describe the vector path. Apart from this path, the file usually has some properties with values that you can change. Just open the vector file with a plain-text editor like Notepad to see what I mean.

The following properties are interesting:

- `fill`: defines the fill color (or inside) of the vector.
- `stroke`: defines the stroke color (or border) of the vector.

You can put any hex-formatted color code here, prefixed by a hashtag (`#`). However, if you want to be able to set this color via CSS, change the value of these properties to `currentColor`. Then, in the CSS, set the `color` property for the vector to whatever you want.

For example:

HTML:
```html
<svg class="my-vector" fill="currentColor" stroke="currentColor">
  ...
</svg>
```

CSS:
```css
.my-vector {
  color: #133337
}
```