How to Create an SVG infographic

5 min readOct 3, 2021

With SVG (Scalable Vector Graphics) in a design, you have lots of opportunities: SVG is a resolution-independent graphical format which means that you don’t have to serve up multiple versions of a given graphic to all of the different screens. And that is a huge time saver. Because SVG is recently being supported by all major and modern browsers, people will explore the world of SVG and will start to use it for more and more artwork. SVG is an open W3C standard and SVG allows for three types of graphic objects: vector graphic shapes, images and text.

In this tutorial, I’m experimenting with creating infographic elements that are scalable and styled with CSS.

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.

Try to represent your idea or topic in a clear and attractive way. For this tutorial, I first created my infographic in Adobe Illustrator to have a good preparation before starting the code.

Try to visualize the message and write a title. Try to simplify the information as much as possible.

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.

For this purpose, I download the HTML5 Boilerplate to start from. If you have your own boilerplate, that’s okay too. The boilerplate contains every bit of code to have your project smoothly run in all major modern browsers. To get you up and running with this document, I recommend reading this excellent blogpost: An Introduction to HTML5 Boilerplate. Download the HTML5 Boilerplate here.

Creating the Infographic

Step 1

The layout is divided in 6 parts:

What is SVG?
Why use SVG?
How to create SVG
When to use SVG?
SVG gradients
Future Proof

For each of the 6 sections, I created a different SVG background gradient. I exported the gradient as SVG image and placed it as a background-image with the property width set to 100% and let the gradient image repeat itself.

Before creating the graphics, make sure you have vector based software like Adobe Illustrator, Sketch or Inkscape to prepare your vector based artwork and export it to SVG. I recommend reading Dan Mall’s: SVG workflow for Designers.

You can export the elements from the software and save it as SVG. In case the code is not clean, use the online SVG optimiser by Peter Collingridge to clean your code before pasting it into the HTML.

Make sure to place your inline SVG code inside a block level element like a DIV. In case you want to make your SVG scalable, it’s important to have the code inside a DIV-tag so you can position the inline SVG inside this block.

I created a collection on Codepen.io with snippets of the code used for this tutorial:

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.

I tried different sizes and effects for the headlines as they are a prominent element in the overall layout.

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.

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.

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.

The decision process whether to use a SVG or bitmap format is not so easy but some rules help decide when to go for SVG. Bitmaps and photographs are mostly too large to present in SVG. I like the potential the format gives for visualizing graphical elements. My advice is to try to keep up with written articles about the subject and experiment with the code as much as possible to see and judge the results.

References

Note: published in 2014