I recently created a video about including SVGs on your Squarespace website. A YouTube viewer commented and asked, “By chance, do you know how to find the code of a personal design created in Adobe Illustrator?”
The answer, is “Yes. Yes, I do, and here’s how.” Thank you for asking, Morgan.
So here, we go. Watch or read how below.
How to view an SVG’s code in Illustrator
If you are using Save As > Format: SVG (svg) then you will be able to view (and copy and paste) the generated code via the SVG Option window’s prompts.
If the SVG Code... button is grayed out, you likely selected the “use Artboards” checkbox on the earlier screen. Go back and uncheck the ‘Use Artboards’ option, and your SVG Code... view button will become accessible. (Bottom of screen, between Less Options and Cancel buttons.)
The viewer will display your SVG in a text file called content.txt, and on a Mac that will open in TextEdit by default. The code will start with <?xml>
Which Illustrator SVG Profile do I choose?
Like most answers, it depends, but your best all-around option is SVG 1.1.
Should I save an Illustrator file, too?
As designers, our source files or “designer files” should be Adobe native files, so I always save an Illustrator file (.ai file extension). I consider the SVG my exported image or usable/shareable file; I do not use it as my source file.
Should I use an online SVG Optimizer?
Sure! There are many great ones that will easily decrease and simply your SVG code and file size. Simply search “Svg optimizer” in Google search and choose the online app of your choice.
What are some ways I can see the underlying code of an SVG file to copy and paste it?
There are many ways and here are a few.
- You can open an SVG file in coding application, such as Visual Studio.
- You can open an SVG in a text editor such as Notepad or TextEdit.
- You can open SVG in a browser and then choose View Source (typically a right click option).
Other SVG Tips and Thoughts
Struggling to upload your SVG file to your WordPress site? A simple update to your function.php will do the trick.
Curious how to add your SVG file or one from online, such as from Font Awesome, on your Squarespace website? Hint: use the code block.
Have you tried using vector images (SVGs) in PowerPoint? Converting to shapes lets you adjust colors from within PPT, which is perfect for logos and icon sets.
Need to scale up or scale down your SVG? Don’t forget that you can set the reference point of your vector image to scale from whatever corner or anchor your prefer.
