Render text as paths in SVG Files
A while back I updated this website and switched out some of the png files with their svg equivalent. What I forgot to do was render the fonts in my logo as paths before uploading the svg file.
Going Responsive with SVG
I replaced the png files with svg versions as part of a bigger move towards Responsive Design. I really thought it was as simple as that. Heh, I should know better.
As it turns out, my iPad wasn’t displaying the logo properly: it had substituted the fonts in the logo with some other Serif style font.
Uh oh…
How SVGs use Fonts
When I created the Caveena Solutions logo I did so in Inkscape so naturally the result was an svg. Prior to this hiccup, I’d always exported the logo as a png file for embedding in documents and for use on this website.
At it’s core, svg files simply contain text just like website html files. And like html files it links to external fonts it uses and can even specify a font stack. A quick search on iOS Fonts reveals that Century Gothic, one of the fonts used in the Caveena Solutions logo, is not available on iOS devices which means my iPad was probably using a default system font to render the text. The nature of svg files also means devices that did not have Century Gothic would also use their own system defaults.
Not good for a logo.
Solution: Convert Text to Paths
The solution is simple enough: convert all text used in svg files to paths. It is advisable, of course, to keep a copy of the file with the text that has yet to be rendered in the event you need to make changes. You can do this in Inkscape by selecting the text then going to (Shift + Ctrl + C). On Adobe Illustrator, select the text then go to (Shift + Ctrl + O)
More on using SVG in Responsive Design
To read more about using svg files in Responsive Design, check out Resolution Independence With SVG by Smashing Magazine. Heck, you should be reading articles on Smashing Magazine regardless.
Social Media Links