Published on

What is an SVG file?


What is an SVG file?

A file with the SVG file extension is most likely a Scalable Vector Graphics file. Files in this format use an XML-based text format to describe how the image should appear (XML, or Extensible Markup Language, is a markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable). And, since text is used to describe the graphic, an SVG file can be scaled to different sizes without losing quality, in other words, the format is resolution-independent.

The SVG format is perfect for non-photographic imagery on websites, and they are something of a magic trick in website design because not only do they generate crisp graphics at any scale, but they’re also optimized for search engines, programmable, often smaller than other formats, and capable of dynamic animations.

As an example, this is what an SVG code looks like for the shape of a star:

<svg height="210" width="500">  <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;"/>

As you can see, SVG documents are nothing more than simple plain text files that describe lines, curves, shapes, colors, and text. And, as it’s human-readable, easily understandable and modifiable, when embedded in an HTML document as an inline SVG, SVG code can be manipulated via CSS or JavaScript. This gives SVG a flexibility and versatility that can’t be matched by traditional PNG, GIF or JPG graphic formats.

SVGs are basically text files, which makes them readable by humans and enables developers to make edits to XML files directly.

How do you open an SVG file?

The easiest and quickest way to open an SVG file to view it (not to edit it) is with a modern web browser like Chrome, Firefox, Edge, or Internet Explorer (nearly all of them should provide some sort of rendering support for the SVG format). This means you can open online SVG files without having to download them first.

But, if you do already have an SVG file on your computer, the web browser can also be used as an offline SVG viewer. To do this, open those SVG files through the web browser's “Open” option (the Ctrl+O keyboard shortcut). And, as I said before, since a Scalable Vector Graphics file is really a text file in its details, you can view the text version of the file in any text editor.

Scalable vector graphics come in handy in many different scenarios. They’re versatile, interactive, have infinite scalability, and they give designers and developers a lot of control over their appearance. With SVGs in your web design tool belt, you won’t need to worry about blurry graphics again (at least not for your basic images, for photos, stick to PNGs and JPEGs).

As a next step, I recommend you check out Piio’s article on The (best) Image Format for any website and Why You Should Always Optimize Your Images for SEO.

Wanna know more? Read this articles!