How to Create an SVG infographic

Using SVG for creating a infographic
Using SVG for creating a infographic

Find a Topic and Create a Static Version First

Creating an infographic is doing research at the very start. An infographic is great at explaining bits of information in a rapid and structured manner. They are everywhere on the internet and useful to explain key elements in information streams.

Start the Code with a HTML5 Boilerplate

Infographics are used everywhere on the internet. An infographic is very helpful in explaining bits of information that are not always easy to comprehend into graphics that explain the key points of the information blocks in a simple and easy way.

Creating the Infographic

Step 1

The layout is divided in 6 parts:

  1. What is SVG?
  2. Why use SVG?
  3. How to create SVG
  4. When to use SVG?
  5. SVG gradients
  6. Future Proof

Step 2

The next step is to provide each section of an appropriate title. I used 3 different font faces: Novecento Wide with a font-face import and 2 Google Library Fonts: Open Sans and Oswald.

Step 3

The first section is a definition block where I explain what a SVG is, and I placed the SVG logo. The definition block worked with a darker background. I recreated the SVG logo as the initial code was too complex.

Step 4

The second section is the part where I explain why to use SVG images. I colored + exported these as SVG to use in Responsive Design part. On the Clipboard, I placed the text list also in the SVG to have it positioned right. In the background, I used a curved path.

Step 5

The third section about the tools to create SVG, I had to redraw these logo’s except for the InkScape one which I extracted in Illustrator and exported as SVG code. The Sketch logo was too complex and resulted in bloated code so I redrew the logo using combined basic shapes, this resulted in clean and simple code.

Step 6

The fourth section about When to use SVG. Editing and saving as SVG results in readable code and can be used directly as inline SVG in your HTML code. TIP: use PHP instead of HTML, that way the SVG could be used as an embed link, the code remains readable and clean. SVG can be used for logo’s that are not too complex, icons, basic shapes and text.

essential shapes

Step 7

The fifth section is a look at SVG Gradients. These are really powerful in scalable content. The code is different from the Gradient CSS 3 code. Some beautiful color gradients that were an inspiration are iOS 7 Style Gradients.

iOS 7 gradient styles

Step 8

The sixth section is a collection of Resource URL’s that I collected for writing this tutorial. In the HTML code, I place a unordered list with links to the sections. Future Proof.

Conclusion

The resolution-independent SVG format is an excellent way to present crisp vector elements. The fact that the elements are scalable for different screen dimensions are a big advantage and should result in a smoother workflow. SVG also has clipping and masking tools to experiment with.

References

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Bene

Bene

I’m a web- & graphic designer living in Belgium with over ten years of expertise in creating web & print experiences for institutes and companies