Creating an SVG file, or Scalable Vector Graphics file, to use for your website can be done with fairly simple design tools like Adobe Illustrator, Photoshop, or Corel Draw.
If you are comfortable and experienced with coding, you can choose to instead code it yourself through your preferred code editor.
Either way, there are a handful of things to keep in mind and look out for when you are creating an SVG file and, later on, how to optimize it for speed.
If you want to learn about why the optimization process is a good idea, read our article on how the SVG file can enhancing web performance.
Ok, now let’s get to Illustrator and create an SVG file like a pro!
Create an SVG file in Adobe Illustrator
Step 1:
If you are looking to create an SVG file and use it on your website, then open up any logo/illustration in an .ai or .eps file
Keep in mind, just because you can do something on Illustrator or even Photoshop, doesn’t mean that the SVG file will also be able to do it. If you’re working with a wide variety of blend modes, gradients, or highly unusual fonts, it may not work in SVG.
The first thing to do is click on File > Save As. Decide where you want to save it on your computer, and give it whatever name you choose.
Next, in the “Format” box, choose SVG. Then, click Save.
Step 2:
After you save it, a dialog box will pop up to give you a variety of options.
Click on the button in the lower left-hand corner labeled “More Options” in order to see the entire range of options to set up the file.
Make sure that your SVG Profiles say “SVG 1.1” and under Fonts > Type, the default will always be SVG, since that is what you are creating.
The next option, Fonts > Subsetting, has a number of choices you can decide on.
If you want to, you can select the default to System Fonts, which will provide you with replacement fonts that are in the system.
In the above screenshot, you can see that there are other choices as well for Fonts > Subsetting.
If you choose “Only Glyphs Used” or “All Glyphs” and this will take the fonts that you have used and put them within the SVG file (however, this won’t always work).
To try and combat that, you can go back to the “Type” section, and instead of selecting the default, you can choose “Convert to Outline.”
This is an alternative choice instead of embedding the font. However, it does make the file less accessible because it will no longer be in a text form.
It can also make it into a larger file size.
Note: If you are looking to make your SVG file more accessible read our tutorial on How to Make Your SVG File Accessible for Screen Readers.
Step 3:
Next, to keep it simple, in the Advanced Options > CSS properties, choose “Presentation Attributes.”
Also, check the Responsive option.
This is hugely important because this selection deletes the width and height in the XML code of your SVG file.
By turning on Responsive, it allows the file to be responsive to any screen size and ignore the image width and height properties.
Step 4:
Click “OK” in the lower right-hand corner to create a size-responsive, SVG file.
After finalizing, it’s a good practice to go back and double check. So, just open the file and double check that it’s how you want it to be.
And that’s all there is to it!
Don’t Forget to Optimize Your Files for Speed
Once you have created an SVG file, the only issue left is that it won’t be fully optimized coming right out of whatever program you created it in.
So, the next step is to properly optimize it.
To do that, read our tutorial on How to Optimize an SVG File Step-by-Step and please share your thoughts in the comments section!
