0

I'm working on the graphic design on the website .so which is the best option for graphic design SVG files or images (PNG JPEG or any others img) I mean quick loading response in the HTML page.

Note: not compare as result quality both SVG and image files

like here on Moon

img

enter image description here

Moon SVG

<svg width="50" height="50" xmlns="http://www.w3.org/2000/svg"> 
<g> 
<circle stroke-width="3" stroke="#000" fill="#fff" r="16" cy="25" cx="25"/>
<path stroke-width="0" fill="#000" d="m25,9a16,16 0 0 1 0,32l0,-1.5a18,18 0 0 1 0,-29l0,-1.5z"/>
</g>
</svg>
Imran
  • 45
  • 1
  • 8

2 Answers2

3

Depends on your definition to the term "best".

  1. If best means vectorized, then SVG, see the advantages and disadvantages of SVG.

  2. If best means a compressed picture, then create an image.

  3. If best means something very interactive, like a game, then canvas and Javascript might be the best for you.

  4. If best means some consistent design, then solve the problem using HTML & CSS (which is not the case when we are talking about drawing the half-moon).

So, first of all, you will need to think about what your design is for and try to implement everything you can with HTML and CSS (using media queries) and make sure your pictures are implemented well. Note, that if you create an svg, you can export it into an image any time, so this might be a clue that you could temporarily choose svg while you are waiting for further specification for your job.

Lajos Arpad
  • 64,414
  • 37
  • 100
  • 175
1

I would say it depends on what the image should achieve. Look at this link for some comparison between some different approaches: SVG icons vs. PNG icons in modern web sites. The discussion takes up some pros and cons of the different approaches regarding file sizes, compatibility etc.

(The title is on icons, but it should apply to more than only icons on webpages.)

jwweiler
  • 244
  • 4
  • 18