What the designer needs to know about SVG: Pros and Cons

Earlier in our blog, we raised the topic of creating high-quality web interfaces, in particular, in one of the previous topics the issue of the proper use of animations was considered . In today's article we will talk about technology SVG, the principles of working with this technology, its pros and cons. In addition, we asked local designers whether they use SVG, and if not, why.

Very briefly: what is SVG

SVG (Scalable Vector Graphics) is a vector-based markup language created by the W3C, a subset of the XML language. Designed to describe vector and mixed (vector-raster) two-dimensional graphics, supports animation and interactivity. In 2001, version 1.0 was released, in 2011 - version 1.1 , currently relevant. Browser support is good , but there are nuances in IE , pixelation with an increase in Opera Mini and Opera Mobile 12.1.
')

Advantages and difficulties of using SVG

Before you start to consider how designers can use SVG in their work, you should make a small logical digression and talk about this profession in more detail. In our opinion, the division in web designers and web designers that has developed in the IT industry does not always correspond to the realities of creating web projects.

It’s simply not possible to create not just beautiful, but really good web page design without an understanding of how this page will load, display in the browser, adapt to the size of the viewport, and change when modifying the content. Based on this, we can say that a web designer is a technical specialty (perhaps the essence of this work is better conveyed by the term “web engineer”), for the most part implying the use of logic and knowledge, and only a little bit of artistic creativity. In other words, the bad web designer who does not know how to impose.

Having dealt with who the modern designer really is, we can proceed to discuss the advantages that such experts can derive from using SVG technology. In short, its use helps to increase the speed and quality of work: the designer has to perform fewer actions himself, which reduces the time spent at different stages of the project.

Consider the list of SVG advantages in more detail:

SVG is easily modified (moreover, both in the graphic editor and on the page itself by means of CSS). Changing the location, shape, size, proportions, color, fill, and all the other properties of the image components are simpler than in the case of raster graphics. When working with a raster, you will have to keep the “source” in a format with layers, make all changes in it, export it. With SVG, there is usually no need for a source code.

For screens with higher pixel density, one image is enough. In the case of raster graphics at the moment (spring 2015), you need at least three (!) Versions of the image: 100% layout size, 200% and 300%. In the case of using SVG, one version is enough - as for any vector format, the pixels needed to display the image “appear” immediately before the show, based on the pixel size required.

SVG loads quickly. Yes, yes, because, as we found out above, designers should also think about the page loading speed, because the more time passes from sending a request to showing the page, the lower the conversion of the project. Firstly, SVG files, as a rule, have a smaller file size than their raster versions (exceptions are images of small pixel size and complex vector images with many forms). Secondly, in one SVG-file you can add several versions of the image and show them on certain conditions (reducing the number of requests to the server). Thirdly, “cloning” can be used in SVG - once to prescribe the form (gradient, texture) and reuse it, referring to the original. There is, however, a minus: rendering SVG in the browser is slightly slower than displaying a bitmap image, but to notice this difference, you need to compare large and complex images.

SVG is easy to make adaptive. In the case when it is necessary to show the site logo in a simplified version on narrow viewports, SVG allows you to achieve this in just one request to the server.

SVG can be interactive. Inside the image can be links, scripts, interactive parts can respond to guidance and other user actions, you can add animation .

Free software. To work with SVG it is not necessary to use Adobe Illustrator (as a standard in the world of vector graphics), which is quite freely distributed by Inkscape . There are a number of other tools .

Despite the listed advantages of the SVG format, not all designers use it in their projects. We asked the well-known Russian experts in the field of interface design and design about the reasons for this situation:

Yury Vetrov, Head of Mail.Ru Design and Design

The simple answer is that it’s not enough for a designer to learn how to prepare SVG, it’s necessary that developers can use it in a product, and it’s not so easy, you need to change a lot in technological solutions. Secondly, the process of working with the vector itself needs to be optimized so that SVG can be comfortably exported from the used graphic editors. Those. There are no prejudices, just need to significantly restructure the process of work, and this does not give any special exhaust for the business. Those. This is an infrastructure task, which is always in lower priority. All, of course, will switch to it over time, but the problems are approximately as described above.

---

Denis Kortunov, Acronis UX Director

This is not a question entirely for designers, but for web technologists or front-end developers. Now many designers initially do design in a vector, and there is no problem to represent graphics in the form of SVG. The main problem is compatibility with different browsers. Such pictures are often simply not displayed and you need a lot of “dances with tambourines”. A common alternative to SVG is the use of fonts. This is a “hack” that allows you to use vector images on the web.

In general, in the modern web there is a problem - we need a simple and universal format for displaying vector images on the pages. It is possible that SVG will soon become the standard. Really looking forward to it.

---

Dmitry Zimin, Project Manager, Kinokhod

As for “why not use SVG”, I can only speak for our project. We have a feature: most of the content is photos (posters, stills from the film, preview of the video).

The interface in the mobile application we want to translate into a vector, because cutting the pictures in three resolutions (x.png, @ 2x.png, @ 3x.png) is tiring and provokes errors. But, while banal hands did not reach.

---

Artem Geller, the main developer of the site Kremlin.ru

We actively use SVG in our projects, however this technology has certain limitations. For us, of course, they overlap with the benefits that SVG carries in us - we don’t need complex animation in the elements, and we don’t need to paint something in them as often.

In this case, we replace the elements in the SVG with PNG, in the event that the specific version of the browser is not friendly with this format.

---

Nikita Mikheenkov, Development Director, Nimax Design

It seems to us that the matter here is not at all in the designers, but in the whole team doing the project. The power of habits pulls back to the raster graphics - it's easier and more familiar. In our projects we constantly work with SVG and especially love to do all sorts of animated and flying things.

Here are some examples of vector graphics: one , two , three .

Instead of a conclusion: how to make SVG

Of course, the designer does not need to keep in mind all the possible technical details of the development of the project, but the observance of a few simple principles is still necessary:

1. It is better to try to manage as few points as possible. The smaller the dots, the easier it is to edit the file, as a rule, and the smaller it will be. If forms drawn by other specialists are used, it makes sense to simplify them - to reduce the number of both control and control points. In Adobe Illustrator, the most optimal (from the technical side) contours are obtained when drawing with the pen tool with a proper choice of the type of points. The least optimal ones are usually the result of the transformation of the lines drawn by the brush into vector areas, or mindless tracing.
   
   

   Image 1 (Received from designer) 83 Kb	Image 2 (optimized number of points) 28 Kb	Image 2 (optimized markup) 10 Kb

2. You should use a pixel grid and try to position the contours so that their edges are exactly on the border of pixels or 1/2 pixel. If you plan to resize elements (for example, icons), then you need to check how the resized size will fall on the pixel grid. It is important to remember that the screen is a medium with serious limitations, it is impossible to get into pixels at any size, but for the most frequent sizes you need to try.
   
   

   Forms aligned pixel grid (400%)	Forms are not aligned on a pixel grid. (400%)

3. It is necessary to create and save SVG in the form in which further use of these elements in the design is planned. Sometimes there is a situation in which the used SVGs are attached to the PSD layout, but the layout itself uses a vector form with some additions (a text layer, something drawn with a raster, some effect applied). Such an approach may exclude the possibility of using vector graphics for such a design element.
4. It is necessary to use as few shapes as possible, group only what is necessary. You should delete the figures that are not part of the image or are invisible (covered by other figures).
5. It is better to convert all symbols, textures and drawings with a brush into ordinary vector areas without applying raster effects (Adobe Illustrator) and blending modes.

useful links

• Inkscape
• Svg editor