SVG Introduction

SVG, Scalable Vector Graphics, is an XML markup language used to describe two-dimensional graphics.

Unlike bitmap images, SVG images are stored as text and can be scaled to any size without distortion, because they are based on mathematical descriptions rather than pixels.

Prerequisites before learning:

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

  • HTML
  • XML basics

If you wish to learn these first, please visit this site'shomepageand choose the corresponding tutorial.

What is SVG?

  • SVG stands for Scalable Vector Graphics
  • SVG is used to define vector-based graphics for the web
  • SVG defines graphics using the XML format
  • SVG images do not lose quality when enlarged or resized
  • SVG is a standard of the World Wide Web Consortium
  • SVG is an integral part of W3C standards such as DOM and XSL

SVG is a W3C Recommendation

SVG became a W3C Recommendation on January 14, 2003.

For more information about the W3C SVG activity, visit ourW3C Tutorial。

SVG History and Advantages

SVG History:

The development of SVG was initiated by the W3C SVG Working Group, established in 1998, and it came into being along with six standard proposals submitted to the W3C that year:

  • On September 4, 2001, SVG 1.0 was released.
  • On January 4, 2003, SVG 1.1 was released.
  • On January 14, 2003, the SVG mobile sub-versions: SVG Tiny and SVG Basic were launched.
  • On December 22, 2008, SVG Tiny 1.2 was released.
  • On August 16, 2011, SVG 1.1 (2nd Edition) was released, becoming the current W3C Recommendation.
  • W3C is currently still researching and developing SVG 2. The latest draft release can be found atClick here to view 。

SVG Advantages:

  • Scalability: SVG images can be losslessly scaled to any size without distortion. This is because SVG is based on vector descriptions rather than pixel images, so it remains clear on screens of different resolutions and sizes.

  • Text nature: SVG files are XML-based text files that are easy to edit and maintain. You can directly edit SVG files to adjust graphics, or use a text editor or code editor to create and modify SVG images.

  • Interactivity: SVG allows adding interactive elements such as links, animations, and event handlers. This allows SVG images to interact with users, creating a richer user experience.

  • Animation support: SVG supports creating animations with CSS and JavaScript, making graphics more vivid. You can use CSS animations or JavaScript scripts to achieve dynamic effects for SVG graphics, such as transitions, rotation, scaling, etc.

  • Embeddability: SVG images can be directly embedded into HTML documents, or linked as external files in HTML documents. This allows SVG images to integrate seamlessly with other web technologies, such as CSS, JavaScript, etc.

Viewing SVG Files

SVG is widely supported in modern web browsers, including Chrome, Firefox, Safari, etc.

SVG images can be embedded in HTML documents via inline SVG code or external SVG files.

  • Google Chrome: Google Chrome is a popular modern web browser with good support for the SVG format and rich developer tools.

  • Mozilla Firefox: Mozilla Firefox is also a widely used web browser that supports the display and rendering of SVG images, and supports most SVG features.

  • Apple Safari: Safari is a web browser developed by Apple, with good support for SVG, suitable for Mac, iOS and other devices.

  • Microsoft Edge: Microsoft Edge is a web browser from Microsoft, supports the SVG format, and is continuously improving SVG support.

  • Opera: Opera is a fast and secure web browser, with good support for SVG and many modern web technologies.

  • Brave: Brave is a privacy-focused web browser based on Chromium, so it also supports SVG images.

  • Vivaldi: Vivaldi is a highly customizable web browser, also based on Chromium, and supports the SVG format.

Creating SVG Files

Here are the basic steps to create an SVG file:

  1. Open a text editor: Use your preferred text editor, such as Visual Studio Code, refer toVScode Tutorial。

  2. Write SVG code: Write SVG code in a text editor. SVG code consists of XML markup that describes graphic elements, attributes, and styles.

  3. Save the file: Save the written SVG code as.svga file ending with the extension, such asexample.svg。

  4. Preview SVG files: Open the SVG file with a web browser, or embed the SVG file in an HTML document to preview the SVG image in the browser.

The following is a simple SVG file example that creates an SVG image containing a circle:
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" fill="blue" />
</svg>

This code describes an SVG canvas with a width of 200 units and a height of 200 units. A circle is drawn on the canvas, with center coordinates (100, 100), a radius of 80 units, and a fill color of blue.

Other Extensions