CODEWITHSUNDEEP
htmlcssperformancesvg
Organic Heart
Organic Heart

Reputation: 555

which is faster to load? svg as image or svg code

I have a lengthy web page that shows lots of typography designs. Will it be faster to simply load them in images or to use the svg code?

Other than the speed concern, I will choose svg in code simply because I can use css transition and animation to spice up the design.

What other things I need to consider in choosing between the two?

Upvotes: 6

Views: 8003

Answers (1)

sachin
sachin

Reputation: 827

It is better to use SVG element to display typographic designs if your design is not complex.

  1. Quality of SVG element does not depend on resolution of your screen.It looks pretty sharp on any device whereas in image, it's sharpness is dependent on its size.
  2. since simple SVG files is defined by the colors, layers, gradients, effects, and masks that it contains, the size of SVG code is small when compared to size of the image which is defined by the number of pixels that it consists of.
  3. SVG code is loaded faster because there is no need for an HTTP request to load in an image file. The time taken for SVG code is only rendering time.
  4. There can be numerous editing and animating opportunities for SVG code like you said.
  5. Say if you use the same design throughout the website but in different colours and in different sizes, you can use a single SVG code and change its parameters accordingly.You do not have to create multiple copies of it as in the case of image.

However it is difficult to display the design in SVG code if your design has complex details.At this time, there is no other option but to go for image.

Upvotes: 8

Related Questions