Image formats like PNG and JPG are classified as raster formats. These formats are made of a matrix of pixels. The problem with these images is that they don't upscale well — in other words, if you make the image larger, its definition will decrease.
An SVG is a different kind of image. It is a Scalable Vector Graphic (SVG) and it uses equations to plot the image. In that way, the definition of the image won't change when we change its scale.
We can use SVG images in HTML with the tag . Example:
This example was taken from the freeCodeCamp website. This code draws a smiling face:
Now that we know what an SVG is, let's see how we can use it. First, the basic structure is:
Let's see what means each element:
xmlns – Specifies the namespace (It's required).
width / height – Defines the display size of the image.
viewBox – Defines the internal coordinate system of the image (minX minY width height).
An SVG is a different kind of image. It is a Scalable Vector Graphic (SVG) and it uses equations to plot the image. In that way, the definition of the image won't change when we change its scale.
We can use SVG images in HTML with the tag . Example:
This example was taken from the freeCodeCamp website. This code draws a smiling face:
Now that we know what an SVG is, let's see how we can use it. First, the basic structure is:
Let's see what means each element:
xmlns – Specifies the namespace (It's required).
width / height – Defines the display size of the image.
viewBox – Defines the internal coordinate system of the image (minX minY width height).