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
}
Top comments (9)
Did you check if your site is still functional if rendered in a text web browser (like lynx, links, or w3m), which do not render images?
Did not check this, and I would doubt that my website works 100% in a text-based web browser. Also, as most of the web users (that visit my blog) use a browser that do support SVG, I probably won't spend the time now to fix any issues in those text-based browsers.
If you are using icon fonts, and if the font is constructed well, then you have plain text representation for free.
With the IMG element, you can provide ALT attribute for text browsers.
Is there equivalent to ALT attribute (or NOSCRIPT) for SVG images embedded in HTML (as opposed to using SVG images in IMG)?
you can always save the svg image as a separate file and load it through an img tag. At that point you will have the alt tag available.
If you are coding the svg file within the svg tag, you can use a title tag within the svg tag group:
The SVG-images on my websites are wrapped in a link-element. That link element has a title attribute describing what it is. That's also an option, I think.
That should work as well.
shrug. I'm sure there's a nice way to just use alt tags just like you would if you were using conventional images, if there was any good reason to.
I don't understand why some developers continue to use raster images for anything other than photos. It's baffling. SVG allows you to create one image and have it scale with all resolutions indefinitely and without the need for media queries; definitely a time saver. Good read. Thank you.
Great article.
I plan to do similar approach to my site as well, but because I’ll have photographs, I’ll be using .webp files as well. Been switching to .webp for all my jpg and png needs. Frankly, I’ve only been using jog and pngs on email ls due to a lack of compatibility across the different email clients.