Optimization in SVG image loading

Asked

Viewed 315 times

1

I’m creating a site that contains several SVG images. I’ve tried creating a Sprite with some images and embedding them directly into CSS (background-image).

After searching for several days I could not find any solution to improve the image loading that works in all browsers (IE10+) and that does not need to download dozens of files.

How to optimize image loading in SVG?

html5 image svg

  • Nope, is a SPA, all images should be loaded when the page is accessed. In addition several images are already displayed on the home screen

1 answer

1


There are some techniques, but the basis is to eliminate unnecessary codes from within the SVG and make the minification of the final file.

This option is to treat the file . svg before it is required ok. It does not handle the server request, but rather the size of the file that will be downloaded from the server.

There are online services like SVGOMG that help you clean up SVG. You get about 60% reduction in the final file size. https://jakearchibald.github.io/svgomg/

Example of use. Note the list of attributes that you can change and remove on the right.

inserir a descrição da imagem aqui

This is their Git project: https://github.com/jakearchibald/svgomg/blob/master/README.md

  • 1

    I’m already optimizing all Svgs using a desktop program (SVG Cleaner => https://github.com/RazrFalcon/svgcleaner-gui).

  • 1

    I have used this site before and I find it very useful.

  • 1

    @Pilati if you are already optimizing the files now doesn’t have much else to do in . svg itself. The best way you could do that would be to inject his code into the document when it’s time to go up to the client. So you leave the files separate only in the development environment, but when you go up to the server you put the svg code right on the page, it would save you a lot of requests by the way.

  • Yes, but it would not be possible to cache, I would like a solution where at least I could put the SVG code in CSS or JS, because they are files that are used only once. I tried to put in the bacground-image: url('Codigo svg') but would have to set the size of each image in hand, this would complicate the responsiveness of the site, because a background image does not adjust the size of the div as a normal image

  • I couldn’t find any way that I could actually "replace" the image content via CSS using the url

  • 1

    @Pilati would not be in the cache even not... At the moment I can not think of another solution... :(but if I remember something I comment here

  • And for this question I am accepting any kind of answer that would help decrease the "fetch" time of the page. I did a lot of research on HTTP/2, but my server is not supported yet. I researched about using Cachemanifest, but I could not successfully test

Show 2 more comments

Browser other questions tagged html5 image svg

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