How to make this chart with SVG shown in example?

Hello,

As I am new in SVG creation. Can anyone help me out how to make the chart with SVG, or how this chart is made? Please see the Image and links for reference. I want exactly the same chart

https://www.kofax.com/

Well if you right click on the chart and inspect the thing you’re interested in, it’ll show you what it’s made of.

In this case, the SVG in question is too large to be pasted into a forum post; i’d suggest looking at the elements inside it, and seeing what questions you have.

2 Likes

@m_hutley I have inspected the elements and checked that all the sub elements (each text and icons) converted into paths.

So I wanted to know that how that image is converted into such format ? Is there any tool or what ?

There are certainly tools that can translate a shape into its SVG path; alternatively, you can manually create them by writing the instructions yourself.

Paths - SVG: Scalable Vector Graphics | MDN (mozilla.org)

4 Likes

There’s an article here that may help with the basics.

4 Likes

Thanks a lot for the link, surely it will help me a lot …

1 Like

Adding to the complexity are all the rollover effects on the live site. The source code is packed full of javascript.

1 Like

Hey Guys ,

While surfing the stuffs on this topic I have came up with the fantastic solution , Hope you are aware of that too. In Adobe Illustrator it gives a option to extract the source code for image. I have tried for one the SVG image and works perfectly.

Here is the source link https://css-tricks.com/using-svg

1 Like

For those who do not have Adobe Illustrator, you can generate SVG files using the free Google Drawings:
https://docs.google.com/drawings
(you will need to sign into a Google account)

2 Likes