Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

SVG Tutorial

SVG stands for Scalable Vector Graphics.

SVG defines vector-based graphics in XML format.

SVG graphics are scalable, and do not lose any quality if they are zoomed or resized.

SVG is supported by all major browsers.


Examples in Each Chapter

With our "Try it Yourself" editor, you can edit the SVG, and click on a button to view the result.

SVG Example

<html>
<body>

<h1>My first SVG</h1>

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

</body>
</html>
Try it Yourself »

What you should already know

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

  • HTML
  • Basic XML

If you want to study these subjects first, find the tutorials on our Home page.


What is SVG?

  • SVG stands for Scalable Vector Graphics
  • SVG is used to define vector-based graphics for the Web
  • SVG defines graphics in XML format
  • Each element and attribute in SVG files can be animated
  • SVG is a W3C recommendation
  • SVG integrates with other standards, such as CSS, DOM, XSL and JavaScript


SVG is a W3C Recommendation

SVG 1.0 became a W3C Recommendation on 4 September 2001.

SVG 1.1 became a W3C Recommendation on 14 January 2003.

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


SVG Advantages

Advantages of using SVG over other image formats (like JPEG and GIF) are:

  • SVG images can be created and edited with any text editor
  • SVG images can be searched, indexed, scripted, and compressed
  • SVG images are scalable
  • SVG images can be printed with high quality at any resolution
  • SVG images are zoomable
  • SVG graphics do NOT lose any quality if they are zoomed or resized
  • SVG is an open standard
  • SVG files are pure XML

How does it Work?

SVG has elements and attributes for rectangles, circles, ellipses, lines, polygons, curves, and more.

SVG also supports filter and blur effects, gradients, rotations, animations, interactivity with JavaScript, and more.

A simple SVG document consists of the <svg> root element and several basic shape elements that will build a graphic together.


Creating SVG Images

SVG images can be created with any text editor, or with a drawing program, like Inkscape.

For you to learn the concept and basics of SVG, this tutorial will just use plain text to teach you SVG.

The next page shows how to embed an SVG image directly into an HTML page!