When you open a public account text and text, found only a sentence or a picture, maybe you will be a face of confusion: such a simple text and text can push, but also read 100,000 +?

Until your cute little finger clicks on an animation that keeps telling you to “poke it,” it’s like you’ve discovered something new: graphics exist in this way.

► Vivo OriginOS effect exhibition

What are SVG interactive graphics

Before getting into SVG interactive graphics, let’s take a quick look at what SVG is. Scalable Vector Graphics (SVG) is an image file format and Scalable Vector Graphics. It has the following three characteristics:

  • A picture format
  • Vector graphics, in the case of enlargement or change of size, the graphics quality will not be lost
  • Interaction and animation, you can achieve a variety of interactive effects

What is SVG interactive graphics?

SVG interactive graphics is an advanced typesetting method realized by SVG+HTML code. By embedding animation elements in SVG files, graphics with various interactive effects can be realized. SVG interactive graphic features: creative, ultra – clear, interactive, dynamic.

In fact, SVG interactive graphics is not a new technology, there were related applications as early as 2016, but with the emergence of a series of popular cases, major brands began to find the brand marketing value of SVG interactive graphics, and have tried this new style of graphics.

Through creative content, with brand fit all kinds of interaction effects, stunning visual effects, in the form of science and technology feeling “story telling” (introduction to enterprise or products and services) or “play”, the user step by step into the context, resonate with users, improve the users’ awareness of brand and product, to shape a deeply rooted in the hearts of the people for the enterprise’s brand image.

Advantages and disadvantages of SVG interactive graphics

advantage

1) Compared with traditional graphics, SVG interactive graphics are more interactive and interesting, which can bring readers a different reading experience. It can not only reduce readers’ withdrawal from graphics due to reading fatigue, but also deepen their impression of the content. 2) Compared with H5, SVG interactive text forms are lighter and more suitable for application in the text of public accounts. 3) SVG interactive graphics pay more attention to creativity and style. It can integrate the brand image and product concept of an enterprise and deliver them to users in a way that directly hits people’s hearts, achieving unexpected brand marketing effects.

disadvantage

1) The production of an SVG interactive graphic requires the cooperation of planners, editors, designers and developers, resulting in high communication and production costs and long production cycle.

The interactive form of SVG interactive graphics

SVG interactive graphics can be divided into vertical long pictures and horizontal long pictures. Common interactive forms include clicking, long pressing and sliding.

01 click

When the reader clicks on an area or element, changes occur in the screen, such as switching between images, zooming in, or stretching out longer images. “Click” is a common form of interaction, which usually requires guidance for readers to complete the click action. However, too much copy will affect the visual effect, so we can try to use “symbols” instead of text guidance.

👉 case show: “I, found a small yellow house in the iPhone…”

Case Study:

  • Click to switch pictures: readers can click the flashing “symbol” to view the next content. Simple pictures lead readers step by step into the scene.
  • Click on the stretch long picture: when the reader has his interest, click on the stretch long picture to expand more content. This way of content presentation can avoid boredom and stimulate the reader’s interest more strongly.

02 long-press

When the reader holds down an area or element, changes occur in the screen, such as holding down to switch, holding down to rotate the image 360° (similar to 3d animation), and drawing lots. Stereotyped “click” interaction is easy to lack characteristics, with “long press”, “release trigger” interaction form, will make the text and text more interesting.

👉 case show: “Tencent Pony brother QQ number is how much?”

Case Study:

  • Long press to switch, let go and return to the initial state: The case is a question and answer type. Long press to show the answer prompt, which can better guide the reader to the next step.

03 sliding

As the reader slides the image left, right, up and down, some elements of the image move with them. Common sliding styles are:

  • Double slide: the background does not move, and the top transparent picture slides
  • Penetrating slide: the foreground does not move and the underlying background slides
  • Sandwich slide: the foreground and background are not moving, and the middle content is sliding

Sliding is often used in scenes such as story scene picture replacement or revealing the answer in question and answer to make the original content more mysterious. Sliding is also often used in horizontal version of the story.

👉 case show: “Do you think we use” Apple family barrel “is to show off wealth?”

Case Study:

  • Double-layer sliding: the product is combined with multiple application scenarios, and users’ stories of different professions are replaced by sliding pictures, which shows the value of the product in an interesting way.

Key factors for implementing high quality SVG interactive graphics

Creativity + style + interaction is indispensable

Planning a creative content with a high degree of brand fit is the top priority for SVG interactive graphics, but design style and smooth interaction are also indispensable. To catch the attention of the creative entry point, so that all the interactive actions are natural, so that all the content is presented in an orderly way, can really attract readers’ attention and resonance. When enterprises push SVG interactive graphics, they should not only pay attention to the content, but also pay attention to the matching creativity and experience of readers.

02 Team work ability

SVG interactive graphics requires the cooperation of the brand, planning, editing, design and development teams, effective demand communication and standardized workflow, so as to efficiently complete an interactive graphics and achieve the expected marketing effect.

Our team has helped Apple, OPPO, Huawei, GAC Trumpchi, Didi and other brands to create a number of customized SVG interactive graphics, creating a number of amazing graphic interactive effects. These require the enterprise and the planning and development team to invest time and energy to complete. Basic SVG interaction styles, such as “click for image, image rotation, click to show, click to jump”, can also be implemented using SVG typesetting tools.

If you have questions, ideas, welcome to exchange and study together.