If it were up to me, the small web would also be a vectorized web.
The homepage of my personal website 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):
Apart from the fact that the image above is not vectorized (shame on me), there are three sections:
- A header with menu icons.
- A body with the main content.
- 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, 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:
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:
<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:
- Create a Bitmoji account.
- Design an avatar that looks like me (I’d say it ended up pretty accurate).
- Download the avatar (Bitmoji offers many different “stickers” based on your avatar design; you can pick the one you like most).
- Convert the downloaded avatar to a vector. There are many tools for this; I used Picsvg.
- Download the vector.
The format of the vector you downloaded is exactly the same as the menu icons from the header, meaning you can put this vector right inside the HTML of your website:
<body> ... <svg>...</svg> ...
</body>
Footer
Not much new stuff here. My footer actually uses the same techniques as the 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:
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:
<svg class="my-vector" fill="currentColor" stroke="currentColor"> ...
</svg>
CSS:
.my-vector { color: #133337
}