SVG Tutorial

SVG refers to Scalable Vector Graphics (Scalable Vector Graphics).

SVG With XML Format defines vector-based graphics.

Examples in each chapter

By using our 'Try It Yourself' editor, you can edit SVG and then click the button to view the results.

SVG Examples

<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>

Try it yourself

Basic knowledge should be possessed

Before you continue learning, you should have some basic understanding of the following:

  • HTML
  • Basic XML

If you want to learn these contents first, please visit the relevant tutorials on our homepage.

What is SVG?

  • SVG refers to Scalable Vector Graphics
  • SVG Used to define vector-based web graphics
  • SVG Define graphics in XML format
  • SVG Each element and each attribute in the file can be animated
  • SVG is a W3C Recommendation Standard
  • SVG integrated with other W3C standards, such as DOM and XSL

SVG is a W3C Recommendation Standard

SVG 1.0 became a W3C Recommendation Standard on September 4, 2001.

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

SVG 1.1 (Second Edition) became a W3C Recommendation Standard on August 16, 2011.

SVG advantages

Compared to other image formats (such as JPEG and GIF), using SVG The advantages are:

  • SVG Images can be created and edited using any text editor
  • SVG Images can be searched, indexed, scripted, and compressed
  • SVG Images are extensible
  • SVG Images can be printed in high quality at any resolution
  • SVG Images are scalable
  • SVG Graphics do not lose any quality when scaled or resized
  • SVG is an open standard
  • SVG files are pure XML

create SVG images

SVG Images can be created using any text editor, but using drawing programs (such as InkscapeCreating SVG images is usually more convenient.