Is it a good idea to insert SVG inline files?

Asked

Viewed 399 times

5

I’ve been going through some websites and the ones that use SVG logos usually put them in a file separately. This brings the practicality of when you change the file, on all pages it changes, but you make an additional request.

Is it a good idea instead of calling the image, to insert it directly into HTML? About the practicality I quoted above, it could be easily bypassed with a file called logotipo-svg.php (or logotipo-svg.html) that generates the inline SVG code ready to be inserted on the page through a:

echo '<div class="logotipo">' . file_get_contents('logotipo-svg.php') . '</div>';

It is a lot of work to reduce the data transferred? The amount of data to be transferred is reduced?

html svg

  • If you already have the file, it is no longer simple a <img src='logotipo.svg'/> than to process on the server and insert on the page?

  • 1

    I want to know if it’s worth it not to do it that way, if the amount of data is reduced by cutting that request.

  • protip: if you are going to include the file in HTML, and it is a static file, copy and paste it directly into HTML. It is unnecessary to use file_get_contents, aka overenginering :)

1 answer

5


Cases where strongly NOT performing well do this

  1. The site already uses an Sprite, where many small images are loaded at once
  2. The logo is a text source (similar to what occurs with Sprite
  3. Your image is great

Cases where it tends to be interesting to do this

  1. Your image is small. (maybe 1~3kb) Any type of image.
  2. Size not too big (maybe 10~50kb? ), if the image does not repeat in more pages, and is not SVG (JPEG, PNG and GIF inline in Base64 greatly increase the size)
  3. Any size, if the image does not repeat on more pages and is SVG (SVG compression inside and outside HTML will be equivalent)

*Case Study: Web Site http://alligo.com.br/, single page, includes image in HTML with <img src="data:.. charges faster with PNG inline than if it were external. *

Where you must include an SVG in HTML

  1. Your SVG is created and handled by Javascript

Case study: graphs generated in http://atlas.sies.org.br/ are created with Javascript.

Disclaimer: The two sample websites were made by the author of this reply.

Browser other questions tagged html svg

You are not signed in. Login or sign up in order to post.