Occasionally you may create the media content vector for the website for your client. I normally create the logo, icon, or vector image for the website. In order to use the exported SVG file, you need to set the SVG option correctly to avoid the rendering issue on the web.
Export as
In Illustrator, I prefer to export the SVG file using the Export option. Below are the steps on how to export the SVG file from Illustrator.
- navigate to the File menu
- choose Export>Export As…
- name your file and choose “Use Artboards” if you have more than one Artboard. Then choose All or Range artboard. This setting depends on how many artboards you want to export.
- next, click on the Export button.
SVG Options
Now it is an import option. You will see the SVG Options popup. Choose the options below.
- Styling: Inline Style
- Font: Convert To Outlines
- Images: Embed
- Object IDs: Unique
- Decimal: 2
- tick on Minify
- tick on Responsive
Styling option
For styling, choose “Inline Style” which is my preferred way.
Font option
For the font, choose “Convert To Outlines“. This option will convert all fonts to vectors. If your artwork already converts the font to outline, you can choose “Embed” option. If your artwork contains the fonts and doesn’t be converted to the outline when the SVG file renders on the web, the SVG file will look for the font file from the OS. If the browsers don’t have the font file, the browsers will render the SVG with the random font that exists in your OS.
Object IDs option
For object Ids, I normally choose “Unique“. Because often I need to set the hover style or add the animation for the SVG file. So having the unique Id for the SVG file is useful.
Decimal option
For decimal, by the research 2 is usually the best choice. A smaller number is less precision of your vectors while a bigger number is adding precision but is also adding the file size.
Minify option
For minify, yes, you definitely want to choose this option.
Responsive option
For responsive, this is up to you. If you tick on Responsive, your SVG won’t have any width and height settings. Meaning you will need to add the width and height via CSS when you use the SVG file. For example, if you add the SVG file on WordPress, you will need to set the width and height via CSS from your WordPress. If you won’t tick on Responsive, your SVG will have the width and height settings. However, the CSS setting will override the SVG width and height as well. That’s why I say the Responsive setting is up to you.
Wrap up
An SVG file is a vector file and it renders without blurry to compare with a raster in terms of responsiveness. Plus, you can style or add the animation to the SVG file which makes the media looks more attractive. You can create the SVG file from other tools apart from Illustrator as well but I use Illustrator as my main tool. Hopefully, this small trip is helpful for web developers like me.
