When you open a public number text and text, found only a sentence or a picture, perhaps you will be a face of doubt: such a simple text and text can also be pushed, but also read 100 thousand +?

Until your cute little finger clicks on an animation that constantly suggests you “poke it,” you’ve discovered something new: this form of text still exists.

► Vivo Originos in Vivo

What is SVG Interactive Graphic

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

  • An image format
  • Vector graphics, in the case of enlarging or changing the size, the quality of the graphics will not be lost
  • Interaction and animation, can achieve a variety of interactive effects

So what is SVG interactive graphics?

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

SVG interactive graphics is not a new technology, as early as 2016 there have been related applications, but with the emergence of a hot style case, major brands began to discover the brand marketing value of SVG interactive graphics, and have tried this new graphics play.

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 and text, SVG interactive graphics and text are more interactive and interesting, which can bring readers a different reading experience. It can not only reduce readers’ withdrawal from graphics and text due to reading fatigue, but also deepen readers’ impression on the content. 2) Compared with H5, SVG interactive graphics and texts are lighter and more suitable for use in public accounts. 3) SVG interactive graphic pays more attention to creativity and style, which can integrate the brand image and product concept of the enterprise, and deliver it to users in a way that hits the hearts of the people, so as to achieve unexpected brand marketing effects.

disadvantage

1) The production of an SVG interactive graphic and text requires the collaboration of planners, editors, designers and developers. The communication cost and production cost are high and the production cycle is long.

The interactive form of SVG interactive graphics

SVG interactive graphics can be divided into vertical and horizontal versions of the long chart, the common form of interaction are click, long press, slide.

01 click

When the reader clicks on an area or element, changes will take place in the picture, such as switching images, enlarging images, stretching long images, etc. “Click” is a common form of interaction, usually through the guidance to let the reader to complete the click action, but too much copy will affect the visual effect, so you can try to use “symbol” instead of text guidance.

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

Case study:

  • Click to switch pictures: the reader can click on the flashing “symbol” to see the next content, a simple picture to take the reader into the scene step by step.
  • Click Stretch: After the reader has developed their interest, click on the stretch to expand more content. This way of presenting content can avoid boredom and stimulate the reader’s more intense interest.

02 long-press

When the reader presses on an area or element for a long time, corresponding changes will occur in the picture, such as long pressing to switch, long pressing to achieve 360° rotation of the image (similar to 3D animation effect), and drawing lots. The cookie-cutter “click” interaction is easy to lack characteristics, with the “long press”, “release trigger” interactive form, will make the text and text more interesting.

👉 case show: “Tencent Xiaoma’s QQ number is how much?”

Case study:

  • Long press toggle, let go and return to the original state: the case is a question and answer class, through the long press the answer prompt, you can better guide the reader to the next step.

03 sliding

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

  • Double Slide: The background does not move and the top transparent image slides
  • Sliding through: The foreground is still and the underlying background is sliding
  • Interlayer sliding: the foreground and background are not moving, and the middle contents are sliding

Sliding is often used in scenes such as story scene image replacement or uncovering the answer in question and answer, to add a sense of mystery to the original content. Sliding is also often used in horizontal story promotion.

👉 case show: “do you think we use” Apple whole family bucket “is for flaunt wealth?”

Case study:

  • Double-layer sliding: the product is combined with multiple application scenarios, and the story of users of different professions is changed through sliding pictures, which shows the value of the product in an interesting way.

Key factors for implementing a high quality SVG interactive graphic

Creativity, style and interaction are indispensable

Planning a creative content that is highly consistent with the brand is the most important part of SVG interactive graphics, but design style and smooth interaction are also indispensable. To catch the eye of the creative entry point, let all the interactive actions naturally, let all the content presented in an orderly way, can really arouse the attention of readers, resonance. When companies push SVG interactive graphics, they need to focus not only on the content, but also on the creativity and experience that matches the reader.

02 Team work ability

SVG interactive graphic is the need for the brand, planning, editing, design, development of the entire team to cooperate to complete, effective demand communication, standard work process, in order to effectively complete an interactive graphic, to achieve the desired marketing effect.

The team of ifan and know cloud has helped brands such as Apple, OPPO, huawei, GAC Trumpchi and didi to create multiple customized SVG interactive graphics, creating many amazing interactive graphic effects. These are the needs of the enterprise and planning and development teams to invest time and energy to complete. Basic SVG interaction styles, such as inserting “click for image, picture rotation, click display, click jump” into traditional graphics and text, can also be implemented by using SVG graphic typesetting tools.

If you have any questions or ideas, please share them with us.