You've created a great website with a sleek design, vibrant colours and binge-worthy content, but your images are either too pixelated or take forever to load! In this blog, we will explain: the different types of image formats, what an SVG File is, and how SVGs could improve your website's look and performance.
What type of image are you using?
To understand the power of SVGs (or scalable vector graphic), we need to understand the difference between the types of images you may have on your website; Rasterised Images and Vector Images:
Rasterised Images
The Rasterised images category consist mainly of common image files such as JPG, PNG or GIF. These image files will mainly be used for things like photos, digital paintings and memes. A rasterised image is made of pixels with a set width, height and resolution. A Full HD image will have a minimum resolution of 1920x1080 pixels and a standard web resolution of 72 dpi (Dots per inch). This means that for every square inch of the 1920x1080 image, there are 72 pixels. The more pixels there are, the higher the quality of the image.
Bitmaps
This pixel resolution forms a bitmap. Bitmaps are like paint-by-numbers of an image, where the map tells each pixel what colour it should be to form an image, but it doesn't know what the image is. Herein lies the problem of having such limited information. When a rasterised image is scaled up, there is no information between the existing pixels, so the bitmap will try to create new pixels to form smooth transitions between the original colours. The result, depending on how far you stretch the image, is a grainy image with a halo effect.
Vector Images
Vector images are made using mathematical points and values on a graph to form a complete picture. Common examples of vector images you may come across include logos and illustrations. When vector images are made, instructions are produced on how the image, in its entirety, should be rendered by setting parameters in the software via code.
Simply put, an algorithm says that a line will start at position "x,y" and ends on position "2x,2y". The thickness of the line is 2 points. Because these are set values, the algorithm will adjust the image accordingly so you can zoom into the line and not lose any quality.
Another example of vector images you'll find in media, such as posters or print design, is text. Text is another form of vector image, where each character is made of a series of paths and a fill colour, which is why text set to either 15pt (point size) remains crisp when scaled to 500pt.
What are SVGs?
Now that you know what a vector is, the file format to contain vectors is called an SVG. Scalable Vector Graphic, or SVG, is a format that houses the data of the vectors such as paths, thickness and fills.
How to make SVG files
There are a few ways you can make an SVG file. Create the element with a vector designer, manually type the code or convert an image into SVG via a converter. Let's explore these options.
Vector Software
The simplest way for you to achieve the images and vector elements you want, first and foremost, is to design them yourself. You can design vector images in any software that can create paths, such as Adobe Illustrator, Adobe Photoshop, Gimp, Inkscape, Sketch etc. If you're just starting out, freeware alternatives such as Gimp and Inkscape are useful with many guides and tutorials to choose from.
Artboards
When you create a vector element with no artboard, the farthest point on the vector will determine the bounding box. This tells the software that the collection of vectors is x pixels wide, by x pixels high. When a vector is inserted into your website via your media uploader, it will take up the available space dedicated to the image container. This could provide some difficulty if your website builder isn't too customisable, as you'll have to play around with either the vector or the container's dimensions.
To get a consistent result when uploading multiple different images, place your vector on an artboard and position it with enough padding between the element and the frame of the artboard when exporting. This way, the element will take on the dimensions of the artboard instead of the element itself, providing a lot less guesswork when it comes to adjusting the element on your site.
For example: If the images on your website are 1200x800 pixels, but you would like to add a mascot that you created, you can use an artboard to scale the mascot to the right size so that it integrates into your layout without having to adjust the image manually in the editor.
Text
Due to SVG being code, if you have custom fonts as text elements in your designs, they could be overwritten by your website to be web optimised fonts. A simple solution would be to convert your text into objects in your vector software. This will define the text borders so that the code will populate the text as paths.
Coding the Element
If you're more on the coding side and want to include vectors locally in your website, then writing out the code is also possible. Additionally, if coding is not your thing, most website builders will do this automatically behind the scenes, as you are creating the object within HTML code.
There are a few ways to apply an SVG file to your website. Depending on how you insert the file, whether it's written out manually or inserting the SVG file into the website body, you can style the element with CSS and enable scripts with Javascript. So if you are a coder or developer, you can set parameters and styles, allowing you to manipulate the code however you see fit within a text editor.
Convert an image to SVG
The final option to create an SVG would be to use an online tool to convert a rasterised image. There are plenty of free and paid options, such as Vector Magic or PNG to SVG, that will convert an image to vector with ease and decent accuracy.
A straightforward way to explain how this works is that the software will find the edges of shapes through colour and create a path. From there, it fills the path with the colour it used to define the shape and presto!
Bear in mind that images like photographs are very complicated and might not produce adequate results. That's why you should prepare your images to be as simple as possible for the program to read. This could mean cropping the image, removing the background, or simplifying the colours or shapes.
Another approach would be to convert PNGs of existing vectors from sources like FreePik and World Vector Logo. Converting PNGs of vector images like logos or simple illustrations produces the best results from online converters. Their colour palette is simplified and usually outlined with black, making for more defined paths the software can create.
How to open an SVG file?
If you're wondering how to open SVG files, SVG's are a text format written in code like HTML, so you'll be able to open the element in your browser (most browsers will support this). When in your file explorer, SVG files will generally take the display icon of our default browser, or the app you've prioritised, if you want to open them. If you'd like to know if your browser supports SVG files, click here to check via javascript.
Why should you use SVGs on your website?
Since websites are available on a multitude of devices with different screen sizes and orientations, the use of responsive design has never been more crucial. We've talked about how SVGs work and how they're made, but here's why you should consider adding SVGs to your website:
Scalability
You've probably noticed when a rasterised image is scaled up, it gets pixelated and blurry, but scaling down has its own challenges. The same halo effect will occur because instead of creating more pixels on the bitmap, pixels are being deleted, leaving the existing pixels at the same value. This can lead to harsh, blocky lines and an all-around blurred image.
SVG elements are inherently scalable because they don't have set dimensions and always look good no matter what size they are; for this reason, they are perfect for responsive design.
Improved Page Load Time
Nothing is more painful than waiting for a website to load. Especially if all you're looking for is a quick answer to your question. If your page is full of multiple HD photos on every section, those large files will need to be rendered before the rest of the text can be loaded. SVGs can help slash your webpage's loading time considerably due to their smaller file size.
Simple shapes and iconography are the best elements looking to utilise SVGs. However, if the illustration is too complex with hundreds of paths and gradients, the file may become too large and you might want to consider using a PNG instead because there will be too much code to generate.
Transparency
The default file to load when an element needs a transparent background is PNG; however, SVGs are equally, if not more convenient. Because they are made of paths and nodes, SVGs don't populate anything in empty space, making it the perfect element for any screen and a great alternative to PNG files.
In this blog, we've learned that SVGs are vector images made up of paths and translated in your website's code and that the best SVG elements aren't photographs with lots of details but vector images with simplified components. Smaller file sizes are always a plus in web design, but sometimes the best visuals require larger images. You may not be able to convert all of your website's images into SVG, but converting a few will be very beneficial to both your website's loading times and responsiveness!
For more information on the topic of web design, you can visit our web design service page here. Plus, if you were interested in working with us on a new project, feel free to get in touch with the team here.
