SVGs are vectors so it should not matter if they are 1000px x 1000px or 500px x 500px…it’s the same file. However in webflow I need to size up my vector images in order to get them to be the right size on the page, and make them significantly larger for HiDPI. This makes my file sizes much, much larger.
Obviously I know why this is the case for raster images like jpegs. There are more pixels so the file size is bigger. But vector file sizes should be determined by the complexity of the illustration, not the # of pixels. It’s an equation, not a grid of dots.
Hi @tflavi2 The HiDPI option on the image setting doesn’t really matter when you are using SVG. The interface was most likely designed assuming most people would be using raster images, so the HiDPI was put in to help users out to know if there image would look right on Retina displays.
You are still using a image tag to render your SVG so it is still important to define your dimensions as mush as possible to help the browser out.
An .svg file CAN include a bitmap image. This depends, I think, on which program you are using to create the .svg. For example, in Inkscape, you can import a bitmap (raster) image, either by linking it, or embedding it. If you link it, the resulting file should not be significantly different, but if you then upload the .svg file to Webflow, the bitmap won’t show (if it was supposed to). If you embed the bitmap, then the .svg file may be significantly larger, depending on the size of the bitmap image.
This is based on my limited, general knowledge of Inkscape and resulting .svg files. I have not yet tried to use an .svg file in Webflow, but I thought this might help answer your question.