When creating a website, the web designer has to take into account four main points thinking about the layout and visual design of the web, the text, images, colors and fonts employees.
Of these four points, the one that we are going to give the most importance in this post is the images, since we are going to talk about how to create svg files since it is very important to take into account the quality of the images with which you work.
Treatments with SVG files, has been increasing by professionals and not so professionals in the world of design.
What is an SVG file?
SVG is the abbreviation in English for Scalabe Vector Graphics, in Spanish, Scalable Vector Graphics. It's about a open and free format with which to create 2D graphics, two dimensions.
Unlike other image formats, such as JPG or PNG, SVG is a scalable format, no matter how much you want to increase its size, since the quality of the image will be maintained. It is one of the most used formats in web pages to place graphics or vector images.
Why should we use SVG?
With this type of format, vector images will maintain high quality, regardless of their size and resolution. On the contrary, images made up of bitmaps, made up of pixels, lose quality if they are resized. The SVG format is defined by its lightness and versatility.
Another point in favor of using this format is its small size, that is, thanks to this increases the loading speed of the pages where they are. These images are built by the browser, which helps to reduce the load and consumption on the server.
In addition, they can create animated SVG images with which to give our website an air of closeness and draw the attention of the viewers who visit it.
SVG is an open format, that is, may undergo improvements and updates. In addition, SVG files can be edited with vector editing programs, for example Adobe Illustartor without losing quality in its display, it can be viewed on any device. It also allows us to print it without losing quality.
How to easily create SVG files
Perhaps the easiest way to create SVG files, if you are familiar with them, is through a graphic design program, such as Illustrator, Corel Draw, among others.
Focusing on the Illustrator program, when we are going to use the SVG format, we have to take into account if we have used gradients or other effects, such as the artistic effect, blur, brushes, pixels, etc. as they are rasterized when saved in SVG file format. It is recommended to use SVG filter effects, to add effects so that they cannot be rasterized later.
Another piece of advice we give you is to use simple symbols and paths in illustrations for better performance of said format. Avoid using brushes with a lot of tracing as this generates a higher data load.
To create an SVG file in this program, The first thing we have to have open is a blank canvas where we will work on our idea.
Once our work is finished, what we are going to do is go to the toolbar that is shown above the program, and we will select the option of file, save as, and a pop-up screen will appear where it tells us to give our file a name and indicate the format in which we want to save it. It is in this last section where we must mark the SVG option.
When selecting the SVG type, a dialog box appears showing us different options that must be taken into account.
As a general rule, in the first field that appears in the table, the SVG 1.1 profile appears. In the following it gives us the option to choose the sources, in which they give us defaults to text marked up in SVG and subset as none. In our case, this work does not have fonts, if it did, the subsets option would have to be changed from none to all pictograms.
The following section is very important, if we point out the embed option, the images of the composition will be incorporated into the file, which will cause it to gain weight if we use a lot of bitmap images. If, on the other hand, we mark the option to link, we must be careful with the images if we are going to use them on a website, since we must include the files of our images, and also, very importantly, maintain their path. The advantage of this option is that the files will weigh much less.
In the advanced options section we find the option to SVG code, this option will indicate how the file is inside, that is, the code behind our work. This option is essential if you want to add your SVG file, for example to your personal WordPress, you just have to copy the code and add it directly in your WordPress HTML editor.
The last piece of advice we give you is that when saving in SVG format, keep in mind that if you are working with different artboards, only the active artboard will be kept.
If we want to go further and apply SVG effects to our illustration, Illustrator offers us a set of effects. To do this, we will have to select an object or group. To apply an effect we must select the effects window, SVG filters and apply it.
When applying an SVG filter, the design program shows us a window where A list of filters that can be applied appears., once we select one, Illustrator shows us how it looks, but in a rasterized version.
As you have seen, the SVG format has been a revolution. Thanks to its potential and the quality that it offers, makes the web pages that we find much more attractive without sacrificing performance, as long as they make correct use of said format. SVG has become the perfect marriage between the world of web design and development.