What Is SVG (Scalable Vector Graphics)?

SVG (Scalable Vector Graphics) is an XML-based vector image format for defining two-dimensional graphics with support for interactivity and animation.

The SVG specification is an open standard developed by the w3.org. See the latest version at https://www.w3.org/TR/SVG11/.

Main features of SVG are:

• Supports vector graphic shapes including lines, rectangles, circles, ellipses, polylines, polygons, etc.
• Supports bitmap images in different formats like PNG, JPEG, TIFF, BMP, etc.
• Supports text of Unicode characters with different fonts and styles.
• Supports bitmap images in different formats like PNG, JPEG, TIFF, BMP, etc.
• Supports transformations, clipping paths, alpha masks, filter effects on graphical objects.
• Supports interactive, etc.
• Supports animation.

Here is a simple example of an SVG image of black rectangular:

<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="1" y="1" width="100" height="100"/>
</svg>

There are 2 XML elements used in the above SVG image:

• "svg" element acts a container to hold image objects. Its "xmlns" declares the SVG namespace as the default namespace.
• "rect" element creates rectangle shape as an image object. The "x" and "y" attributes define the location of the top-left corner of the rectangle. The "width" and "height" attributes define the size of the rectangle shape.

⇒ Insert SVG Images in HTML Documents

⇐ Introduction to SVG (Scalable Vector Graphics)

⇑ Introduction to SVG (Scalable Vector Graphics)

⇑⇑ SVG (Scalable Vector Graphics)