SVG Introduction

SVG is a language used to describe two-dimensional graphics and drawing programs using XML

Basic knowledge required before learning:

Before continuing to learn, you should have a basic understanding of the following:

  • HTML
  • XML Basics

If you wish to learn this content first, please visitHome PageChoose the corresponding tutorial.

What is SVG?

  • SVG stands for Scalable Vector Graphics
  • SVG is used to define vector graphics for use on the web
  • SVG uses XML format to define graphics
  • SVG images do not lose graphic quality when zoomed in or resized
  • SVG is a standard of the World Wide Web Consortium
  • SVG, along with W3C standards such as DOM and XSL, is an integrated whole

SVG is a W3C Recommendation Standard

SVG became a W3C Recommendation Standard on January 14, 2003.

For more information about W3C SVG activities, please visit our W3C Tutorial.

The History and Advantages of SVG

In January 2003, SVG 1.1 was established as a W3C standard.

Organizations involved in defining SVG include: Sun Microsystems, Adobe, Apple Inc., IBM, and Kodak.

The advantages of using SVG over other image formats include:

  • SVG can be read and modified by a very large number of tools (such as Notepad)
  • Compared to JPEG and GIF images, SVG has smaller size and stronger compressibility
  • SVG is scalable
  • SVG images can be printed at any resolution in high quality
  • SVG can be scaled without loss of image quality
  • Text in SVG images is optional and also searchable (very suitable for making maps)
  • SVG can run with Java technology
  • SVG is an open standard
  • SVG files are pure XML

SVG's main competitor is Flash.

Compared to Flash, the biggest advantage of SVG is its compatibility with other standards (such as XSL and DOM), while Flash is a non-open-source proprietary technology.

View SVG Files

Today, all browsers support SVG files, except for Internet Explorer that requires a plugin. The plugin is free, such as Adobe SVG Viewer.