What is an SVG file?

Scalable Vector Graphics (SVG) is a web-friendly vector file format. As opposed to pixel-based raster files like JPEGs, vector files store images via mathematical formulas based on points and lines on a grid. This means that vector files like SVG can be significantly resized without losing any of their quality, which makes them ideal for logos and complex online graphics.

It’s not just their resizing abilities that make SVGs hugely popular with web designers. SVGs are written in XML code, meaning they store any text information as literal text rather than shapes. This allows search engines like Google to read SVG graphics for their keywords, which can potentially help a website move up in search rankings.

You can easily spot an SVG file by its .svg extension.

Scalable Vector Graphics (SVG) is an XML-based vector image format for defining two-dimensional graphics, having support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium since 1999.

SVG images are defined in a vector graphics format and stored in XML text files. SVG images can thus be scaled in size without loss of quality, and SVG files can be searched, indexed, scripted, and compressed. The XML text files can be created and edited with text editors or vector graphics editors, and are rendered by most web browsers. If used for images, SVG can host scripts or CSS, potentially leading to cross-site scripting attacks or other security vulnerabilities.

History of the SVG file.

The history of the SVG file goes back to the late 1990s when the World Wide Web Consortium (W3C) invited proposals from developers for a new type of vector graphic format. Six competing proposals were submitted and helped inform what eventually became the W3C’s SVG format.

SVGs took some time to grow in popularity. There was relatively little support for them until 2017, when people began to see the benefits of using SVGs in modern web browsers. SVG files are now widely used for 2D website images because most browsers and drawing apps for vector files can easily handle them.

Pros and cons of SVG files.

It’s worth researching SVG advantages and disadvantages before saving your images in this file format.

Advantages of SVG files.

Unlike raster files, which are made up of pixels, vector graphics like SVGs always maintain their resolution — no matter how large or small you make them. You don’t have to worry about SVG images losing their quality in certain browsers or when you resize them to appear in different places.
Basic SVG files are often smaller than raster images, which are built from lots of colored pixels rather than using mathematical algorithms.
Because SVG files treat text as text (and not as design), screen readers can scan any words contained in SVG images. This is very useful for people who need help reading webpages. Search engines can also read and index SVG image text.

Disadvantages of SVG files.

SVG files are great for web graphics like logos, illustrations, and charts. But their lack of pixels makes displaying high-quality digital photos difficult. JPEG files are generally better for detailed photographs.
Only modern browsers can support SVG images. You may find it a challenge to use SVG files with Internet Explorer 8 and other older browsers.
The code contained in SVG images can be hard to understand if you’re new to its file format.