Before we create SVG file, let’s review the use case!
What is an SVG file, and how to use it?
SVG files, which stand for Scalable Vector Graphics, are essential for website design as they provide high-quality, scalable images that can be resized without losing quality. This format is handy for your website’s logos, icons, and illustrations.
SVG files also have a smaller file size than other image formats, resulting in faster loading times for your web pages.
Additionally, using SVG files can improve your website’s accessibility and search engine optimization (SEO) by following the guidelines provided by the search engines.
What Tools do I need?
Creating an SVG file for your website can be done with vector graphic software like:
- Adobe Illustrator
- Photoshop
- Corel Draw
If you are comfortable and experienced with coding, you can code it yourself through your preferred code editor software.
Okay, let’s get to Illustrator and create SVG file like a pro!
Tutorial: Create SVG file in Adobe Illustrator
Step 1:
If you are looking to create SVG file and use it on your website, then open up any logo/illustration in a .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 various options.
Click on the button in the lower left-hand corner labeled “More Options” to see the entire range of options to set up the file.
Ensure 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 several choices you can decide on.
If you want to, you can select the default to System Fonts, which will provide you with replacement fonts 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,” this will take the fonts that you have used and put them within the SVG file (however, this won’t always work).
To try to 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 to 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 want 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.
Turning on Responsive 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, 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 is that it won’t be fully optimized, coming right out of whatever program you created.
So, the next step is to optimize it properly.
To do that, read our step-by-step tutorial on optimizing an SVG file to load your file faster.
