Friday, March 23, 2018

SVG - What is it, and how to save it

Sounds like a bug that you can catch, but SVG is Scalable Vector Graphics. It does exactly what is says, allows for vector graphics to be scalable in an online environment, which is really nice when it comes to math or science images that need to be clear at any size.

So how to take your Adobe AI file and save out a SVG version of the file for courses. Daniel has written up an explanation of why and how to do so. Go David!


Most SVG saving processes will preserve design integrity (including fonts). This will not be the case if you use the “save as” function, select “svg” under “fonts” in the SVG Options box, and save. Using the aforementioned save option, the font title will be saved in the SVG coding under its’ postscript name. This postscript name will not match up with the accurate name of the font in the system, so the font will be replaced with a generic font like myriad pro or times when viewed. The only way to fix the file would be to access the SVG’s coding, and to change the postscript font name to the name in your computer system. 

This can be avoided and font edit-ability can be preserved by using the “export as” or “export for web”, and selecting “svg” rather than “convert to outlines” under “font” in the SVG Options box. Saving in this way will include the font’s real name in the SVG coding, rather than the postscript name. Converting to outlines in the SVG Options box when saving will also preserve font integrity, but the SVG file will lose font edit-ability. 

To avoid issues, use the suggested save path:
File>Export>ExportAs>SVG (Use Artboards)>Export>(SVG Options box- Font: SVG)> OK

This should work fine for everyone, but double checking to make sure your files are saving properly is always a good idea. 

More information can be found here if needed: