Vector Infographic - Why does it render differently in the web browser?

Question

I made an infographic in Adobe Illustrator, and saved it as a .svg file. But then when I tried to open it in the Google Chrome browser, some of the fonts and some italicized fonts were not even italicized. Why is this happening and what is the solution?

It was 600*1100 pixels because I had read somewhere that it is a good size to start with.

It actually turned out to be pretty ugly!

Answer 1

The best way around this is to expand your fonts/any other assets in your SVG that aren't rendering properly when you open it in the browser. What this means is, you need to highlight your text areas and turn them into Illustrator paths instead of leaving them as selectable text.

The easiest way to do this is:

1. Select all of your text
2. Go to Object >> Expand
3. Hit 'okay'
4. Resave your SVG.

Answer 2

I would save a backup with fonts active, and then save another version with fonts converted to outline, saved as .svg format for usage on the web.