SVG Tutorial
- Previous Page Maps Reference Manual
- Next Page Embed SVG in HTML
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>
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.
- Previous Page Maps Reference Manual
- Next Page Embed SVG in HTML