What is a SVG File?

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

SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed. As XML files, Scalable Vector Graphics images can be created and edited with any text editor, as well as with drawing software.

All major modern web browsers—including Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari, and Microsoft Edge—have Scalable Vector Graphics rendering support.

SVG has been in development within the World Wide Web Consortium (W3C) since 1999 after six competing proposals for vector graphics languages had been submitted to the consortium during 1998. The early SVG Working Group decided not to develop any of the commercial submissions, but to create a new markup language that was informed by but not really based on any of them.

SVG allows three types of graphic objects: vector graphic shapes such as paths and outlines consisting of straight lines and curves, bitmap images, and text. Graphical objects can be grouped, styled, transformed and composited into previously rendered objects. The feature set includes nested transformations, clipping paths, alpha masks, filter effects and template objects.

Scalable Vector Graphics drawings can be interactive and can include animation, defined in the SVG XML elements or via scripting that accesses the SVG Document Object Model (DOM). SVG uses CSS for styling and JavaScript for scripting. Text, including internationalization and localization, appearing in plain text within the SVG DOM enhances the accessibility of SVG graphics.

The SVG specification was updated to version 1.1 in 2011. There are two ‘Mobile SVG Profiles,’ SVG Tiny and SVG Basic, meant for mobile devices with reduced computational and display capabilities. Scalable Vector Graphics 2 became a W3C Candidate Recommendation on 15 September 2016. Scalable Vector Graphics 2 incorporates several new features in addition to those of Scalable Vector Graphics 1.1 and Scalable Vector Graphics Tiny 1.2.


  • Though the Scalable Vector Graphics Specification primarily focuses on vector graphics markup language, its design includes the basic capabilities of a page description language like Adobe’s PDF. It contains provisions for rich graphics, and is compatible with CSS for styling purposes. Scalable Vector Graphics has the information needed to place each glyph and image in a chosen location on a printed page.
    Scripting and animation
    Main article: Scalable Vector Graphics animation
  • SVG drawings can be dynamic and interactive. Time-based modifications to the elements can be described in SMIL, or can be programmed in a scripting language (e.g. ECMAScript or JavaScript). The W3C explicitly recommends SMIL as the standard for animation in Scalable Vector Graphics.
  • A rich set of event handlers such as onmouseover and onclick can be assigned to any Scalable Vector Graphics graphical object.


  • Scalable Vector Graphics images, being XML, contain many repeated fragments of text, so they are well suited for lossless data compression algorithms.
  • When an SVG image has been compressed with the industry standard gzip algorithm, it is referred to as an “SVGZ” image and uses the corresponding svgz filename extension.
  • Conforming Scalable Vector Graphics 1.1 viewers will display compressed images. An SVGZ file is typically 20 to 50 percent of the original size. W3C provides SVGZ files to test for conformance.

Find some Scalable Vector Graphics Files here: https://www.flaticon.com/

Get more tips here: https://krdesign.co.za/category/tips/