If you're embedding SVG using an tag just as a static illustration on your website, once you're done with your final edit on Illustrator, you should export your SVG with these settings: Styling: Internal CSS Width and height will be added into your SVG which you can still modify after export. You can always go through Nano once you're done with your edits, and Nano will ensure your SVG is well minified, even in tag mode. To be safe, uncheck the Minify box as it might reduce your SVG codes readability when exported, making it tough for you to dive into your SVG for editing purpose after export. Use Nano's visual comparison tool to tweak and reduce the decimal points after export, in order to get the lowest file size and making sure your image doesn't break. Set the decimal to be at least 4, as a rule of thumb to ease your work. Object IDs: Layer namesĪssuming that you're using descriptive names for your layers, keeping the Object IDs as Layer Names could help you to easily identify certain shapes in your SVG and style them using an external CSS. Great! But you'd have to change the link manually after exporting, as the current link is pointing to your local directory. Changing to “Link” saves file size by 40% in average, compared to embedding. This configuration only matters if there's an image (i.e., PNG, JPG) in your SVG. An alternative is to use Google Fonts, this way you can keep your fonts as SVG and style the fonts even after exporting SVG. You'll NOT be able to edit nor animate your fonts after exporting. Heads-up, your fonts will become non-identifiable numbers & coordinates after exporting. Fonts: Convert to OutlinesĬonverting fonts to outlines is the only sure-work way currently if you're using Adobe Typekit fonts due to its licensing limitations. Reason being presentation attributes are easier to override in CSS according to the CSS precedence rules. Having the styling set to presentation attributes will make it easier for you to animate or style your exported SVG using an external CSS. These settings would best fit in your case: Styling: Presentation Attributes
If you're using tags or inline svg, chances are you want to do some animations or create interactivity for your SVG. To ensure you export an SVG that is web-ready from Illustrator, refer to the diagram: Best way to export a web ready SVG from Illustrator 1.
We have experimented on what's the best settings for both approaches, and here's the results. We recommend sticking with tag, unless you're using SVGs for animations or to do some interactivity.
One being tag or Inline, and the other being tag. There are 2 main approaches in exporting a web-ready SVG from Illustrator, mainly based on how you're using it on your website:
0 kommentar(er)
