: SVG: What to use when I'm starting with svg files in my websites and I'm really wondering when to use the svg code or the svg image. i.g. When I save a file from Illustrator as svg I

@Shelley591

An SVG image is, at it's core, an XML file. So whether you link to an .svg file or you embed the XML in your HTML file directly, it's the same "code".

As to when you should embed the XML in your HTML vs. link to an SVG file, it all depends on what your goals and objectives are.

Most of the time, you'd just link to the svg file. This gives you all the benefits of linking to any particular file:


file could be served via a Contend Delivery Network
file can be cached by the end-user's browser (for reuse elsewhere)
easier to organize files


But there are times when you may prefer to embed the XML write on the HTML page:


as Silly-V points out, if you're scripting animations, it might be easier to have it embedded.
embedded in HTML means you only have one server call to get both the HTML and SVG rather than two. Reducing server calls is a common way to optimize the performance of web sites.

Vote Up Vote Down

@Alves566

Embedding the SVG code inline into the HTML of your website provides the easiest way to script it for animations and interactivity.
Otherwise, embedding as an image is the way to go, as Janus said, keeps the code simpler.

Vote Up Vote Down

@Margaret771

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 <style> tag.

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

Vote Up Vote Down