SVG Tutorial

The purpose of the HTML SVG tutorial is to get you started with SVG in a short period of time and to use SVG, and you can also use this tutorial as a quick reference in the future. Here, as many SVG examples as possible will be provided to cover a wider range, so that you can quickly master the use of SVG.

SVG Introduction

SVG stands for Scalable Vector Graphics. It is a graphics format where shapes are specified using XML. Then the XML is presented by the SVG viewer. Today, most web browsers can display SVG, just like they can display PNG, GIF, and JPG.
Internet Explorer 8（and earlier versions）users may need to install Adobe SVG Viewer to view SVG in the browser. IE 9 +, Chrome and Firefox all support SVG natively.
SVG is used for two-dimensional vector graphics.
If you are not sure whether SVG is suitable for you or your project, quickly browse the SVG example page to quickly understand the functions of SVG.

SVG Online Editor -　 SVG can be edited online, and SVG can be converted to SVG source code

Comprehensive SVG Examples　 - Basic SVG examples to help you quickly familiarize yourself with SVG

SVG Reference Manual - Collecting commonly used SVG elements and the usage methods of their properties

SVG is used for vector graphics

As a vector graphics format, SVG is most useful for vector type charts, such as:

1. Two-dimensional graphics in the X, Y coordinate system.

2. Bar graphs, pie charts, and so on

3. Extendable icons and logos for web, tablets, mobile applications, and web apps.

4. Building and design drawings

5. And so on

As a ‘vector graphics’ format, the shapes to be displayed are stored as vector or vector-like structures. In other words, as numbers. Not in pixels.

‘Scalable’ means that viewers can scale SVG images up and down without losing quality. This is possible because the graphics are defined as numbers rather than pixels. Scaling SVG images up or down simply means multiplying or dividing the numbers that define the SVG shapes.

Although bitmap graphics can be embedded into SVG images, SVG is not an ideal choice for bitmap graphics such as photos, movies, etc. This is a convenient method to draw shapes or text on bitmap images.

SVG is very suitable for generating images/Graphics/Chart

SVG is an XML format (text format) that is easy to generate from Servlet, JSP, ASP.NET, PHP, or other web application technologies. This makes SVG very suitable for computer-generated graphics and charts. Interestingly, you usually need to accurately generate the most suitable chart type (graphics, charts, etc.) for SVG in a web application. This makes SVG even more suitable for generating graphics and charts.

Write SVG Script

SVG images generated in the browser can be modified through JavaScript. This allows SVG to be used for more dynamic demonstrations, even small games.

About This Tutorial

The purpose of this tutorial is to help you get started with and use SVG in a short period of time, and also to use this tutorial as a quick reference in the future. It will try to cover as much of SVG as possible, but it is not intended to cover every point of the SVG specification. Once you have a fairly good understanding of the basics, you can easily refer to the SVG specification for more advanced or special topic subjects.