W3docs
en
Log in

SVG Intro

On this page, you can find useful information about SVG. Particularly, you can learn what SVG is, what its advantages are, and how you create SVG images.

SVG (Scalable Vector Graphics) specifies vector-based graphics in XML format. In order to work with it, you need to have some basic understanding of HTML and XML.

SVG is used to specify vector-based graphics for the Web. Each element and attribute in SVG files can be animated. SVG is a W3C recommendation. It integrates with other W3C standards, like the DOM and XSL.

Advantages of using SVG

Using SVG over other image formats, such as JPEG and GIF, has many advantages. Particularly:

  • SVG images can be generated and modified with any text editor.
  • SVG images can be scripted, indexed, searched, and compressed.
  • You can print SVG images with high quality at any resolution.
  • SVG images can be scaled and zoomed.
  • SVG graphics do not lose quality when zoomed or resized.
  • SVG is an open standard.

Creating SVG Images

You can create SVG images with any text editor. However, creating them with a drawing program, like Inkscape, is often more suitable.

Embedding SVG in HTML

SVG files use the .svg extension and are supported by all modern browsers. You can embed them in HTML using the ```<img>``` tag or inline markup. A basic SVG structure looks like this:

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

Practice

Practice

What can you tell about SVG in HTML?