Svg Intro

SVG, Scalable Vector Graphics (Scalable Vector Graphics), is an XML markup language for describing two-dimensional vector 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 continuing, you should have a basic understanding of the following:

HTML
XML basics

If you wish to learn these first, please select the appropriate tutorial on the homepage of this site ().

What is SVG?

SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the web
SVG defines graphics using XML format
SVG images do not lose quality when zoomed or resized
SVG is a W3C standard
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 W3C SVG activities, visit our W3C Tutorial.

History and Advantages of SVG

History of SVG:

SVG development began with the W3C SVG Working Group established in 1998, following six standard proposals submitted to the W3C that year:

September 4, 2001: SVG 1.0 released.
January 4, 2003: SVG 1.1 released.
January 14, 2003: SVG mobile subsets SVG Tiny and SVG Basic introduced.
December 22, 2008: SVG Tiny 1.2 released.
August 16, 2011: SVG 1.1 (Second Edition) released, becoming the current W3C Recommendation.
W3C is currently working on SVG 2. See the latest draft here.

Advantages of SVG:

Scalability: SVG images can be scaled to any size without loss of quality. Because SVG is vector-based rather than pixel-based, it remains crisp on different resolutions and screen sizes.
Textual Nature: SVG files are text-based XML files, 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 enables SVG images to interact with users, creating richer user experiences.
Animation Support: SVG supports animations using CSS and JavaScript, making graphics more dynamic. You can achieve SVG graphics effects like transitions, rotations, scaling, etc., via CSS animations or JavaScript scripts.
Embeddability: SVG images can be directly embedded into HTML documents or linked as external files. This allows seamless integration with other web technologies such as CSS and JavaScript.

Viewing SVG Files

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

SVG images can be embedded into HTML documents either through inline SVG code or external SVG files.

Google Chrome: A popular modern web browser with excellent SVG support and rich developer tools.
Mozilla Firefox: A widely used web browser that supports SVG display and rendering, and most SVG features.
Apple Safari: Apple's web browser with good SVG support, suitable for Mac, iOS devices, etc.
Microsoft Edge: Microsoft's web browser that supports SVG format and continuously improves SVG support.
Opera: A fast, secure web browser with good SVG support and many modern web technologies.
Brave: A privacy-focused web browser based on Chromium, thus also supporting SVG images.
Vivaldi: A highly customizable web browser also based on Chromium, supporting SVG format.

Creating SVG Files

Here are the basic steps to create an SVG file:

Open a text editor: Use your preferred text editor, such as Visual Studio Code, etc. See the VS Code Tutorial.
Write SVG code: Write SVG code in the text editor. SVG code consists of XML markup describing graphic elements, attributes, and styles.
Save the file: Save the written SVG code as a file with a .svg extension, e.g., example.svg.
Preview the SVG file: Open the SVG file in a web browser, or embed the SVG file into an HTML document to preview the SVG image in a browser.

Here is a simple SVG file example, creating an SVG image containing a circle:

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), radius of 80 units, and fill color blue.

YouTip