skip to Main Content

I am migrating from using the standard JPG and PNG to using SVG files for images to maintain a high quality. I am creating images in Photoshop, saving them as PSD opening them in Illustrator and saving them as SVG and finally uploading them to my website, pure vector images seem to work fine, however I am having a problem with text being rendered correctly. Does anyone know what might be causing this?

I have a link with an example here http://liamhodnett.com//img/case-study/wags-whiskers/banner.svg

Thanks guys!

2

Answers


  1. You’ll need to convert the SVG files into a workable webfont.

    You can use a free web-service such as http://www.icomoon.io and upload/convert the files as needed, and download a working/converted zip file with all you need.

    If your running a WordPress site, I’ve developed a plugin that will allow you to upload SVG files to icomoon, download the .zip and then upload the .zip to the plugin. From there all the icons you’ve included in the .zip will be useable on your site with no code on your end required.

    http://wordpress.org/plugins/svg-vector-icon-plugin/

    Good luck!

    Login or Signup to reply.
  2. Convert the text to paths in Illustrator.

    If the font is not installed on the user’s machine its rendering gets weird. If you have a logo or similar you should convert all text to paths to be safe, except it is of semantic importance to you.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search