Monday, December 26, 2011

Custom SVG Icons in Illustrator [Tutorial]

The default Adobe Illustrator Artwork file icon.
Usually when I want to get something done, I get it done right. In this case, it bothered me why Adobe Illustrator allows you to save files into SVG and SVGZ format, yet used the default Adobe Illustrator file icon. This makes them impossible to distinguish in Windows 7 since their properties and appearance is shared with standard Adobe Illustrator files. This is especially annoying if I want to download SVGs off Wikipedia or other sites (like here since I distributed some works as SVG) and the files are mislabeled. All the icon changing guides didn't help in this matter and after 2 days of dabbling with the registry, nothing was working.
However, I now have a solution.

I think the problem exists because Illustrator does not have a native handler in the registry for .SVG files. Something the other guides keep bringing up is telling you how to reassociate file types with programs. Normally this works since a default icon key has already been specified telling the program which icon from the executable to load. Even the Windows solution would work in this case.

The internal SVG file icon for Illustrator.
The main problem is that whenever .SVG files are told to open with Illustrator, it shares the properties of regular .AI files, meaning there is no distinction. I want the .SVG files to look different and open in Illustrator at the same time.

In order for this to work, I would have to make a registry key for Illustrator to handle .SVG files properly. To do this, open up the Windows Registry Editor (on Windows 7). In HKEY_CLASSES_ROOT\ make a new key and call it Adobe.Illustrator.SVG, just so it's in the same format as other file type handlers. With the new registry key made, a default value is made and can be edited on the right. This is the file type description used by Windows to tell you a brief description of the format. I typed Scalable Vector Graphics, since that's what they are.

With the new Adobe SVG key selected, right click and make a new key again. Call this one DefaultIcon. This key also has a default value. Here is where the icon goes. The SVG icon is internal so locate your Adobe Illustrator installation or enter this data: C:\Program Files (x86)\Adobe\Adobe Illustrator CS5.1\Support Files\Contents\Windows\Illustrator.exe,16
This basically means it gets the 16th icon from the Illustrator executable.

Now this next step is important since it serves as a loophole in opening the file in Illustrator. Make sure the SVG file isn't opening in any program right now. Click on the Adobe.Illustrator.SVG key and make another new key. This time call it shell. Click on the shell key and make another new key; call it open. With open selected, make another new key and call it command. On the default value for the command key, enter the location of the Illustrator installation such as "C:\Program Files (x86)\Adobe\Adobe Illustrator CS5.1\Support Files\Contents\Windows\Illustrator.exe" "%1"
It's very important the percent 1 and parentheses are in this one.

Finally, in HKEY_CLASSES_ROOT\ find the key for .svg. Change the value of default to the newly created Adobe.Illustrator.SVG key. If this was done correctly, SVG files should now have their own icon AND open in Illustrator by default.

Files Illustrator can save have their own icons now.
This really bothered me, but this seems to be working now. Let me know if this guide is absolutely correct since I'm almost certain there is no equivalent guide available.


Anonymous said...

Thanks, I needed this program.
I'm finding this site to the incredible work you do Thank you again!

Post a Comment