When one is to add images to his website, there are two basic types of images to choose: rasterizadas images and vectorial images.
A rasterizada image, typically a photography, is formed by pixels and has an established resolution. When it is extended, it will lose quality and it can appear pixelada or granulated.
A vectorial image is created using points, lines and forms. It can scale vectorial images to any size without losing quality. The images of vectors are limited as far as the amount of details that can represent, reason why they are used better for elements as typography, logos, icons or illustrations.
The support for vector graphics in the Web has crossed a long way. Traditionally, the vector graphics were rasterizaron and they kept as archives JPG, png or GIF for its use in a website. Now that the devices of greater resolution have become popular, as the devices of Apple with screen Retina, no longer it is guaranteed that the plot images are a level of high quality for all the users. With a receptive design, the images often must be used in a variety of dimensions for different sizes from screen. Although numerous approaches exist to explain these problems with the plot images, a simple solution for the graphs based on vectors exists still more: to use SVG.
SVG means escalables Vector graphics, and is a file format that allows to show vectorial images him in its website. This means that a SVG image can climb upwards and downwards according to is necessary without losing no quality, reason why is an excellent option for a design sensible Web.
In this article, we will analyze how to use SVG and how they are beneficial for its website.
WAYS TO USE SVG
There are two main forms to implement SVG in his website:
- As a file .svg. The SVG archives can be used as other archives of image, showing them in a page with the label <img> or as bottom in CSS.
- Using the SVG code in line. Where SVG differs is that the code within the file can be copied and be beaten directly in a page to show the image. This method allows a greater control on the manipulation of the image.
BENEFITS DE SVG
One of the main benefits of SVG is that they are independent of the resolution. This means that, unlike the types of archives as JPG or png, SVG they conserve the same quality without mattering in what resolution of screen or size is. Therefore, in a retina screen where a JPG can appear blurred if he is not sufficiently great, a SVG still will be seen of high quality.
The previous image shows the difference between a SVG and png when it is extended. The SVG image is clear and clear, whereas version png begins to appear pixelada.
Size of the file
The use of SVG can be in sizes of file smaller than other types of archives when they are optimized correctly. This is useful when it is screens of greater resolution, since SVG does not need to be created in greater sizes to adapt to the difference since the rasterizadas images do it. If it is using SVG archives in his website, the smaller sizes of file mean that their images will be loaded faster.
The SVG archives are unique, since they can be published in graphical edition programs (as Illustrator or Sketch) as other images, but also in a text editor where the marked one can be fit directly.
To the left there is a SVG opened in Sketch.To the right it is the same file opened in a text editor, that shows the code contained in the image file.
The use of SVG in line is beneficial for the yield of a website because it eliminates the necessity to load request HTTP in an image file. As it is not necessary to unload any file, this is translated in smaller times of load for a page. This makes that its website is seen faster for the visitors, improving the experience of the user.
Control of style
Another benefit to use the SVG method in line is that it allows him to control the styles within his image. It can control properties as the color of filling, the color of the outline, the size and more through CSS. This is especially useful to add differential control rod worths to an image, being eliminated the necessity of sprites of image.