What Is SVG?

What Is SVG

Date First Published: 31st July 2023

Topic: Computer Systems

Subtopic: Computer Software

Article Type: Computer Terms & Definitions

Difficulty: Medium

Difficulty Level: 6/10

Learn about what SVG is in this article.

Stands for Scalar Vector Graphic. SVG is a vector image format used to store images as shapes and lines based on mathematical statements rather than pixels of colour. The benefit of this is that images can be zoomed and resized without becoming pixelated or blurry. It is most commonly used on the Web so that two-dimensional vector graphics, like logos, can be displayed on webpages without losing any quality.

SVG files are written in XML code, meaning that all the shapes and colours are stored as text rather than pixels. This enables search engines to read SVG graphics for their keywords and better understand their relevance to a search term, unlike JPEG and PNG images, where search engines can only rely on the alt text and metadata to understand it. This can also improve accessibility because screen readers can scan words found in SVG images and read them out loud, which is helpful for users with visual impairments.

How To Open An SVG File?

An SVG file can be opened and edited using Canva, Figma, Adobe Illustrator, CorelDRAW, Inkscape, and other graphics editors. An SVG file can be directly edited in a text editor, but this is impractical for changing most things other than colours. Instead, it is recommended to open an SVG file in a web browser or a graphics editor.

Advantages and Disadvantages Of SVG

The advantages of SVG are:
  • Compared to raster files, images can be zoomed and resized much more easily without losing quality or becoming blurry. No matter how small or large they are, they always maintain their resolution. This is important because the size of images depends on the viewport, which is based on browser window dimensions, device size, zoom ratio, and website layout. Overall, SVGs make it a lot easier for images to be properly rendered to all users.
  • They are more customisable than other image formats. SVG vector images can be easily edited in programs to change the shapes, text, colours, and other visual effects, giving users more control over the look, feel, and appearance.
  • They are often smaller in size than raster images. This helps them store information more efficiently and makes them more suitable for sharing on the Web since they will load more quickly and take up less server storage space.
  • Unlike other well-known vector types, like AI and EPS which are proprietary, SVG is an open standard file format. This means that it is highly compatible and will work with most graphics software.
  • They also support animation. Unlike JPEG and PNG, SVG is not limited to static images. Online tools exist to add moving elements to an SVG vector.
The disadvantages of SVG are:
  • Their lack of pixels makes it very difficult to display high-quality digital photos. JPEG and PNG files are more suited to detailed photos. Although vector graphics can be created by using a converter to change a photo into an SVG, the final image will be more blurry and pixelated.
  • It requires some knowledge of code. This makes this file format difficult and confusing for inexperienced users to create and understand.
  • Not all browsers support SVG files. Some older browsers, like Internet Explorer 8 do not support SVG files.

History

SVG started to be developed by the W3C in 1998 after six proposals for vector graphics languages had been submitted. The early SVG Working Group decided to not develop any of the commercial submissions. Instead, they decided to create a new markup language that was not based on any of them. SVG 1.0 became a W3C Recommendation on 4 September 2001, SVG 1.1 became a W3C Recommendation on 14 January 2003, and SVG 1.1 (Second Edition) became a W3C Recommendation on 16 August 2011.


Feedback

  • Is there anything that you disagree with on this page?
  • Are there any spelling, grammatical, or punctuation errors on this page?
  • Are there any broken links or design errors on this page?

If so, it is important that you tell me as soon as possible on this page.


Comments