Raster vs SVG: Part 2 (with bonuses)!
Hello again guys! As promised, in today’s blog I will be covering scalable vector graphics, SVG, as well as offer you a little extra something: an insight on GZIP compression for your webserver. The reason of this addition: the advantages of GZIP compression, one of which to save you at least 50% on your bandwidth usage.
Raster vs Scalable Vector Graphics (SVG)
Hello scalable vector graphics!
We discussed before about the image degradation issues you will come across when using Raster graphics. Well, with scalable vector graphics (SVG), you can forget all about that, simply because, no matter how much you scale your up or down a vector, the image will remain crisp and cool!
Don’t believe me?
Let’s borrow Mr.Kitty from our product Convert2SQL to show you the difference.
We start by exporting both images 50x50px and then scaling them up 6 times with CSS for display.
Raster
Vector
Notice the difference? When we scale them up, the Raster might look blurry and unfocused, while the vector keeps its crisp and focused vibe. Nice, isn’t it!
So, after seeing this, imagine the quality graphics and animations could get if you only chose to do this little switch to vector!
Bonus: SVGO – Optimize your SVG files from your terminal!
SVG often contains a lot of meta data which is not necessarily needed for your rendering. More data brings along unnecessarily bigger size files. Some vector graphic programs, such as InkScape and Illustrator will have the option to “Save as optimized” which strips out this unnecessary data. However, from our experience, they still leave the problem of junk data unsolved.
At Triangela we use the awesome CLI tool SVGO, that makes SVG optimization a breeze:
Install it via node (globally):
$ (sudo) npm install -g svgo
Then, go to your file location
$ svgo unoptimized.svg Done in 261 ms! 116.567 KiB - 47.8% = 60.863 KiB
Almost 50% file reduction, do we need to add more? 🙂
For the extra geeky, SVGO has a lot of configuration argument options you can dig into in order to further optimize the file. Standard settings though, will surly do the job on their own anyway!
When handling a lot of smaller SVG images, you should consider in-line embedding. (This together with GZIP, which we will later cover on, will really speed things up!).
For example, to embed you do the following:
<img src='data:image/svg+xml;utf8,<svg ... > ... </svg>'>
In case you would rather want it as a CSS class for re-use, try this:
.image {
background: url('data:image/svg+xml;utf8,<svg ...> ... </svg>');
}
Now you can display the SVG on your website easy and efficient!
Bonus: Turbo up your web application with GZIP!
GZIP compression, meant to save you at least 50% on your bandwidth usage, bundles (zipps) pages on a web server before they are sent to the visitor. Most of the VPS nowadays have a set limit on the bandwidth you are allowed to use on monthly basis. Going over this bandwidth limit can come at a higher cost. Furthermore, this will also help you for SEO, as Google nowadays looks into many factors when ranking your website. One of these factors is based on how fast the application loads as well as the overall speed of your application.
So, if you are still not using GZIP compression on your web server, consider the possibility to do so right away. It will definitely make your web application fly like a blazing eagle!
Let’s go through how you activate GZIP on your server!
Here at Triangela, Linode is our primary VPS supplier. Ubuntu is our server operating system of choice. The backend is based on the LEMP stack (Linux, Nginx, MariaDB and PHP). So, on this occasion we will do it on Nginx. Take into account however, that there are a lot of articles on how you activate this on other http servers like Apache. Just Google around!
Enabling GZIP compression on Nginx is pretty straight-forward.
First, let’s backup the nginx config, just to be safe
$ cp /etc/nginx/nginx.conf /etc/nginx/nginx.backup
Next open and edit /etc/nginx/nginx.conf (I like nano)
$ nano /etc/nginx/nginx.conf
The following is taken from the H5BP Nginx configuration repository. It gives you a very modern setup and besides GZIP contains other cool settings you should have a look at). Add it to your config:
# Enable gzip compression.
gzip on;
# Compression level (1-9).
# 5 is a perfect compromise between size and CPU usage, offering about
# 75% reduction for most ASCII files (almost identical to level 9).
gzip_comp_level 5;
# Don't compress anything that's already small and unlikely to shrink much
# if at all (the default is 20 bytes, which is bad as that usually leads to
# larger files after gzipping).
gzip_min_length 256;
# Compress data even for clients that are connecting to us via proxies,
# identified by the "Via" header (required for CloudFront).
gzip_proxied any;
# Tell proxies to cache both the gzipped and regular version of a resource
# whenever the client's Accept-Encoding capabilities header varies;
# Avoids the issue where a non-gzip capable client (which is extremely rare
# today) would display gibberish if their proxy gave them the gzipped version.
gzip_vary on;
# Compress all output labeled with one of the following MIME-types.
gzip_types
application/atom+xml
application/javascript
application/json
application/ld+json
application/manifest+json
application/rss+xml
application/vnd.geo+json
application/vnd.ms-fontobject
application/x-font-ttf
application/x-web-app-manifest+json
application/xhtml+xml
application/xml
font/opentype
image/bmp
image/svg+xml
image/x-icon
text/cache-manifest
text/css
text/plain
text/vcard
text/vnd.rim.location.xloc
text/vtt
text/x-component
text/x-cross-domain-policy;
# text/html is always compressed by gzip module
# This should be turned on if you are going to have pre-compressed copies (.gz) of
# static files available. If not it should be left off as it will cause extra I/O
# for the check. It is best if you enable this in a location{} block for
# a specific directory, or on an individual server{} level.
# gzip_static on;
Finally, restart nginx
$ sudo service nginx restart
You can now check if the GZIP is active by using http://checkgzipcompression.com/
That’s from me for today. Hope you found this post interesting. Have a great day! 🙂