Hello, SVG!

SVG is a vector graphics format. Unlike raster graphics (such as PNG, GIF, and JPEG), SVG can be stretched and shrunk without loss of quality. In other words, these types of images will be equally clear on both standard resolution and retina screens.

Another advantage of SVG is its human-readable code: you can not only read it, but also write it manually as well. You can open a file and edit it without using a graphics editor, meaning that you can write a simple image yourself.

In addition, SVG elements can be styled with CSS, and you can add interactivity to them with JavaScript. In addition, SVG is also reasonably well supported by all modern browsers, and you can start actively using it today.

Let’s learn a little bit more about it. Here’s a simple code example:

<svg>
  <circle r="50" cx="50%" cy="50%" fill="yellowgreen"/>
</svg>

The SVG element is inserted using the svg tag. The rest of the content is nested inside of this tag, including shapes, images, or text.

The content in this example is a circle (circle) that has been colored green (fill="yellowgreen"). This is what this code will look like in a browser:

SVG can be embedded in several different ways. We will examine them in more detail later, but for now we will embed the file directly into the page code.