2

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 have two options I can use both. I can save the image and I can export to code.

But when do I use what? Is is smarter to use the image in my website or do I use the code. With all the current knowledge I have I should use the code because that is way lighter (kb's). Or should I use the image as a fallback?

I have no idea... I hope somebody can shine some light in to the darkness

M.

  • An SVG image is code*. That illustrator gives you two options is weird and likely what's causing the confusion. (* well, technically it's markup, as its XML based, but I digress...point is it's a human readable text file) – DA01 Nov 13 '15 at 16:15
  • Some semi-older browsers don't support inline SVG code, however all newer browsers do. – Dom Nov 13 '15 at 16:16
4

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
  • 1
    These are certainly valid arguments, but there are also arguments for not using it as a separate file...namely performance. Limiting server requests is often a key way in speeding up the performance of a site. So it's something that has to be weighed on a case-by-case basis. – DA01 Nov 13 '15 at 16:17
  • @DA01 Good point—not necessarily an issue, but it can be. Added a section to take that into account. (Edit: Oops, just saw you gave a more detailed version in your answer below, hadn’t seen that before.) – Janus Bahs Jacquet Nov 13 '15 at 17:32
  • If the downvoter would like to leave a reason for the downvote, I’d be happy to improve my answer as best I can. – Janus Bahs Jacquet Nov 13 '15 at 17:33
4

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.
  • As for the one server call point, with HTTP 2 separate files may actually be favorable because it handles parallelism better. But we're not quite there yet – Zach Saucier Nov 13 '15 at 18:03
2

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.

  • I've never actually tried, but wouldn't it be just as easy to target elements in an embedded SVG file as in inline SVG code? Is there an actual difference? – Janus Bahs Jacquet Nov 13 '15 at 15:47
  • 1
    You can't target items when it is embedded in an img tag, but it is possible when an object tag is used.. However due to some same-origin policy, I believe, only scripts inside the actual object-svg will be working, and they will be limited to the items inside. Likewise, an outside script won't be able to target items inside the object either. Anyone please correct me. – Silly-V Nov 14 '15 at 16:33
  • 1
    A quick Google search seems to confirm that you’re quite right. Even external CSS cannot target elements inside the object-svg unless the CSS file itself is linked to inside the SVG file, and not at all img-svg. I don’t think I was aware of that (or if I was, I’d clean forgotten about it); +1 for teaching me something useful. – Janus Bahs Jacquet Nov 14 '15 at 17:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.