Contents
Is SVG higher resolution?
This means that unlike file types such as JPG or PNG, SVGs retain the same quality no matter what screen resolution or size they are being at. So, on a retina display where a JPG might appear blurry if it’s not large enough, an SVG will still look high-quality.
Does size matter in SVG?
SVGs are Resolution-Independent From the point of view of file size, it doesn’t really matter at what size the image is rendered, simply because those instructions remain unchanged.
How can I reduce the size of my SVG file?
You can correct this manually in an SVG editor by first scaling your image to the desired size, and then zooming in and manually adjusting the lines so that they fall exactly on pixel boundaries. (If you’re doing this in Inkscape, I recommend setting up a 0.5px grid with every second line emphasized in document preferences.)
Why is my SVG image blurry when scaling down?
As others have noted, the blurriness is caused by anti-aliasing, when the vertical line in your scale image doesn’t fall exactly on a pixel boundary. You can correct this manually in an SVG editor by first scaling your image to the desired size, and then zooming in and manually adjusting the lines so that they fall exactly on pixel boundaries.
How are SVG images independent of pixel size?
SVGs are made of geometrical drawing instructions, e.g., shapes, paths, lines, etc., which are independent from pixel size. From the point of view of file size, it doesn’t really matter at what size the image is rendered, simply because those instructions remain unchanged.
Is the SVG image good for your website’s performance?
SVG graphics are an awesome choice for the web. Used for simple icons, logos, etc., are often more performant than their raster counterparts, especially if you take the few precautions listed in this article. The tips I mention above are by no means exhaustive. You can push the envelope even more.