Creating an SVG file, or Scalable Vector Graphics file, to use for your website can be a 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. You can learn more about how SVG files can enhance web performance here, but this article will focus on how to create a file through Illustrator.
Examining the Code
Open any SVG file in any code editor in order to view the code. In this tutorial we will discuss the image width and height, which are both visible in the code:
Creating an SVG file in Illustrator
If you are looking to create an SVG file and use it on your website, then open up any logo/illustration in an .ai 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, or different 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.Click to tweet this tutorialClick To Tweet
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 alternate 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.
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 shown in an earlier photo. By turning on Responsive, it allows the file to be responsive to any screen size and ignore the image width and height properties.Click to tweet this tutorialClick To Tweet
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!
Once you have created your file, the only issue left is that the file won’t be fully optimized coming right out of whatever program you created it in. So, the next step is to properly optimize it. Click here to start optimizing your file.