CODEWITHSUNDEEP
htmlcssimagesvg
Alex T
Alex T

Reputation: 3754

Loading large images into svg component

I created an svg pattern which I feel with image. The thing is that the image is quite large (over 2mb) and it takes long to load (I keep it in assets folder in my app). However I checked that it works similarly with images that are large and downloaded from the web. Is there a way to make big images load faster (so that this yellow svg pattern behind the image is not visible, while images did not finish loading) in svg?

    <pattern id="pattern0" patternContentUnits="userSpaceOnUse" width="100%" height="100%">
      <image xlink:href="https://images.hdqwalls.com/download/blue-light-buildings-architecture-8k-dv-7680x4320.jpg" x="0" y="0" width="100%" />
    </pattern>

Example provided here https://codepen.io/pokepim/pen/bGeMmNB

So as you can see the image laods slowly and the yellow black gradient is clearly visible at the beginning when page is loading.

Upvotes: 2

Views: 803

Answers (3)

Nord
Nord

Reputation: 31

https://css-tricks.com/illustrator-to-svg/ Here is a good website with some details. Saving the svg with the image "embedded" in the svg as data rather than referencing it like that in the svg will vastly improve your load times.

Upvotes: 0

Adriano Spadoni
Adriano Spadoni

Reputation: 4790

You can make the SVG hidden during the load and display it when finished loading with javascript.

You will need to add and reference ID to the SVG and make it hidden. Then on image loaded, change to display block.

Here and example (not elegant one, don't use in production)

    <svg
         id="image-bg"
         style="display: none;"
         ...
    >
     ...
        <pattern ...>
          <image 
            ...
            onload="document.getElementById('image-bg').style.display='block'"/>
        </pattern>
        ...
    </svg>

Upvotes: 0

Paul LeBeau
Paul LeBeau

Reputation: 101860

One or more things you could do:

  1. Reduce the resolution. 7680x4320 is way larger than you need for typical screen sizes.
  2. Approx 15-20% of the image at the bottom is never visible. It could be trimmed.
  3. Increase the compression ratio.

Just by reducing the size to 1600x700 (steps 1 & 2), I was able to reduce the file size to 250k, even with minimum JPEG compression.

Other things you could do:

  • Embed the image in the SVG as a Data URI (data://), so that the image loads as part of the SVG
  • Display a low resolution version of the image while the larger image is loading (eg BlurHash)

Upvotes: 3

Related Questions