Mobile app version of vmapp.org
Login or Join
Fox8063795

: Vector Infographic - Why does it render differently in the web browser? 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

@Fox8063795

Posted in: #AdobeIllustrator #Fonts #InformationGraphics #Svg #WebsiteDesign

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!

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Fox8063795

2 Comments

Sorted by latest first Latest Oldest Best

 

@Kristi927

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:


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

10% popularity Vote Up Vote Down


 

@Caterina889

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme