On the foreground of vector graphics

Vector Graphics for the design we are not unfamiliar, most designers have different degrees of contact with illustrator, CorelDRAW and other vector graphics software, but in the Web application is rarely touched, if you have to say some words should be counted Flash SWF vector animation. We've had more contact with bitmap-format graphics in the past, but in the past few years, with external factors such as hardware and technology, bitmap applications have challenged the efficiency and development costs of designers, for example:

An icon to adapt to the PC, mobile or retina screen to design two or more, the front-end development of the time to determine the device to make a decision to call which picture. If the picture changes to the former latter is a nightmare ah.

Therefore, the characteristics of vector graphics and the application of the future has become a designer and the front is eager to understand the content. This article is Ali mother Mux team through two years of technical practice, from the technology, design trends, hardware, application environment, and so on to all of us to analyze the application of vector graphics perspective.

　　Flattening trend of

It is undeniable that flat compact design is now the most popular design style, the personal view of flat design for vectorization graphics application opened a door. Flat minimalist design is no longer so realistic graphic design, highlights, textures and other elements are removed, this and vector graphics can be practical application is very critical. First, the high light and texture elements are a nightmare for the production of vector graphics, designers need to spend a lot of time in vector graphics software to achieve these effects can be applied to the actual product, the efficiency is far from the bitmap software to achieve the fast, and also the high light, texture and other elements will make the vector file become larger, Strictly speaking, a graphic file that adds a projection, texture, and high light effect to the AI is dozens of times times larger than a flat, solid-colored graphic file, which is not acceptable; Therefore, the flat design plays a very important role in promoting the application of the vector technology in the present technology background.

　　The innovation of display technology

From a long-term perspective, the popularity of flat design, and then to the vector technology is used to match the display equipment to upgrade the rapid replacement of the preparation.

Now it should be the most confusing time to display devices, from ordinary liquid crystal displays (96ppi) to Apple's Retina screen (Iphone326ppi) to the recently heated 4k TVs, where there is a huge PPI span between these devices, and in today's cross-platform design, The concept of multi-screen design has become the mainstream, designers can not also like the previous only focus on the end of the page. Vector Graphics technology is the best solution to the multiple terminal display, and it can keep the clarity of the graph well.

　Efficiency first

Also introduced in front of the cross-platform application of the problem, vector technology can solve the designer in different display equipment graphics clear problem, no longer for different devices to design different sizes of pictures, so save the designer a lot of work.

At the same time, the front-end can also be improved from the vector technology; front-end engineers are now more using CSS sprites (sprite) Form, in the production of Sprite map when involved in Photoshop Richetu (the front-end is not good at using Photoshop, such as graphics and other tools), In the application of the time also to find the image of the sprite map coordinates information. The process itself, the workload is relatively large, if you encounter a picture or icon changes that front end need to go through the above process, sprite image for vector graphics is very inflexible. The advantage of vector graphics is that you can control graphics size, color, or some special effects in the form of code, such as relief, gradients, and so on (certainly not recommended).

Response-Type Design

Responsive design is considered to be the best cross-platform solution for small and medium web sites, and has been widely admired by designers at home and abroad. The popularity of response has also played a role in the promotion of vector graphics;

　　A rich animation and interactive experience

On the PC side has begun to have a full-station SVG application, to provide users with a rich interactive and animation experience.

The graph has been very mature in the application of vector technology, and SVG, canvas drawing technology has basically replaced the flash technology.

　Improvement of application environment and technology

Previous vector Graphics (Iconfont) were always so unsatisfactory in IE's low version browsers, and some of the more advanced vector formats (SVG) could not be displayed under IE6~IE7. Also considering the low version of the browser market share at home and abroad occupies a large, browser performance has been the vector graphics in the practical application of the designer's most concerned about a problem. But with the support of the advanced browser to the vector format and increasing market share has eaten up the market share of IE low version browser, slowly eliminating the browser performance of vector technology to promote the application of the barrier. Let's look at a set of browser statistics; (home page user browser version distribution of a large domestic website)

From the data we see that the IE6+IE7 market share has been very low, accounted for only 6.4%, and this part of the user is really concerned about the display of vector graphics is also worth our research.

The big website has played a exemplary role

For the application of vector technology in the product slowly began to become common, Twitter, Microsoft, Ali, Sina, Tencent and other well-known websites at home and abroad have begun to their own sites and applications to varying degrees of the use of vector technology. This is a good indicator of the impact of vector technology in the industry