

The resulting PNG file was 82 KB (with dimensions of 1911 x 1387 pixels). The Sad Zebra design pictured above was created in Adobe illustrator and exported for use on a website first as an SVG file, and then as a PNG (note that the side-by-side image above is a jpg). You can increase the size of SVG files and resize them as many times as you want without losing clarity - a huge benefit over raster images, which can become blurry or look grainy if they aren’t sized properly.

There are four major benefits to using SVG files in particular. SVGs and other vector graphics are fundamentally different from raster graphics, such as jpegs or png files, which rely on pixels to communicate visual information. 4 benefits of using SVG files in web design Proposals from six different teams played a role in the development of SVG, along with a heavy influence by Chris Lilley (W3C) and Jon Ferraiolo (Adobe). The SVG markup language was developed starting in the 90s by the World Wide Web Consortium (W3C).

SVGs are essentially XML code explaining shapes that should be displayed, the colors that should be exhibited, and where each shape should appear in relation to other shapes within a file. SVG files use mathematical equations and sets of rules about shapes, lines, and elements to produce graphics. SVG stands for Scalable Vector Graphic and it’s a 2D image or graphic file type. In this quick guide, we’ll cover the basics of SVG files and when they’re likely to be your best image format option. SVGs can free up bandwidth, improve page speeds, and boost SEO performance - if you know when and how to leverage them.
