I’m not entirely sure what you’re asking here, but I’ll try to answer nonetheless.
First, there is no “export to code” option in Illustrator (at least not that I’m aware of)—it wouldn’t make any sense. When you export to SVG, there’s an “SVG Code…” button that will generate a preview of the code the SVG image will consist of with the settings as they currently are, but that option does not export anything; it just creates a temporary file that is opened in a text editor or browser.
What I think you’ve failed to understand is that SVG images are just code. You can take any SVG image and open it in a text editor, and you’ll see a bunch of code—or rather, a bunch of markup. SVG is an XML-based markup language just like HTML is—it even supports CSS like HTML does.
When you use SVG images in your website, you can either embed that code directly into your HTML by adding the individual tags and their content as pure text; or you can take all the markup and put it into a document which you save as an SVG file, and then include that file. This is similar to how you can embed CSS directly by typing it inside
<style> tags, or you can put the CSS code into a separate file, which you include by specifying a
src attribute for your
Either way will yield the exact same result, and the only difference in size is the irrelevantly minimal overhead a file included (a few bytes at most), which you can safely ignore. Embedding the code directly is certainly not “way lighter” in any way.
A more relevant difference may be that including a separate SVG file will add an extra HTTP request to loading the page. This is not likely to be an issue on most servers if you only have a few images on a page; but if you rely heavily on SVG images and have several hundred different one on each page, you may see longer loading times as the browser has to send separate HTTP requests for each image. Using the same image many times does not have this effect, though: the browser only sends one request per image file, regardless of how many times that file is used on the page. (See DA01’s answer for more on this.)
Unless you do have a large number of SVG images on each page and reducing loading times is crucial, I would suggest saving the code in a separate SVG file and including that in your HTML markup, for all the same reasons that you would take the same approach with your CSS:
- it separates structure and layout
- it makes your HTML easier to read
- it makes it much, much easier to reuse the SVG, especially if you later have to manually edit its code