SVG

May 20, 2023

Scalable Vector Graphics (SVG) is an XML-based vector image format used to create and display two-dimensional vector graphics on the web. SVG images are defined by lines, curves, and shapes, which can be scaled and resized without losing quality.

Purpose

SVG was developed as an open standard by the World Wide Web Consortium (W3C) in order to provide a standard way to create vector images that could be displayed on the web. Vector graphics are an alternative to raster graphics, which are made up of pixels and can become blurry or pixelated when resized. In contrast, vector graphics are made up of mathematical equations, which can be scaled up or down without losing quality.

SVG is especially useful for creating images that need to be scaled up or down, such as logos or icons. Because SVG images are defined by mathematical equations, they are typically smaller in file size than raster images, which can be important for web performance.

Usage

SVG can be used in a variety of ways on the web, including as:

Images

SVG images can be embedded directly into HTML documents using the <img> tag, or they can be included as background images using CSS. Because SVG images are vector-based, they can be scaled up or down without losing quality, making them a popular choice for responsive web design.

Icons

SVG icons are a popular choice for web designers because they are small in file size and can be scaled up or down without losing quality. Icon fonts, which are collections of vector icons that can be used as web fonts, are a popular way to use SVG icons on the web.

Animations

SVG can be used to create animated graphics on the web. Animations can be created using CSS or JavaScript, and can include transitions, rotations, and other effects. Because SVG animations are vector-based, they can be scaled up or down without losing quality.

Data visualizations

SVG is often used to create data visualizations on the web, such as charts and graphs. Data can be imported into SVG using JavaScript, and visualizations can be created using a variety of tools and libraries, such as D3.js.

Syntax

SVG images are defined using XML syntax, which consists of a series of elements and attributes. The basic structure of an SVG image looks like this:

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

In this example, the <svg> element is the root element, and contains two attributes, xmlns (which specifies the XML namespace) and width and height (which specify the size of the image). The <rect> element is a shape element that defines a rectangle, and contains four attributes, x, y, width, and height, which specify the position and size of the rectangle, and a fill attribute, which specifies the color of the rectangle.

Shapes

SVG shapes are defined using a variety of shape elements, such as <rect>, <circle>, and <path>. Here are some examples of how to define shapes in SVG:

Rectangles

<!-- A blue rectangle with a width of 100 and a height of 50 -->
<rect x="0" y="0" width="100" height="50" fill="blue" />

Circles

<!-- A red circle with a radius of 50 -->
<circle cx="50" cy="50" r="50" fill="red" />

Lines

<!-- A black line from (0,0) to (100,100) -->
<line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2" />

Paths

<!-- A green path that draws a triangle -->
<path d="M 10 10 L 50 50 L 10 50 Z" fill="green" />

SVG paths are defined using a series of commands, such as M (move to), L (line to), and Z (close path), which specify the path of the shape.

Attributes

SVG shapes can be customized using a variety of attributes, such as fill, stroke, and stroke-width. Here are some examples of how to customize SVG shapes:

Fill

<!-- A green rectangle with no stroke and a red fill -->
<rect x="0" y="0" width="100" height="50" fill="red" stroke="none" />

Stroke

<!-- A blue rectangle with a stroke of 2 and no fill -->
<rect x="0" y="0" width="100" height="50" stroke="blue" stroke-width="2" fill="none" />

Opacity

<!-- A pink rectangle with 50% opacity -->
<rect x="0" y="0" width="100" height="50" fill="pink" opacity="0.5" />

Transformations

<!-- A red rectangle rotated 45 degrees -->
<rect x="0" y="0" width="100" height="50" fill="red" transform="rotate(45)" />

Transformations can be used to rotate, scale, and translate SVG shapes.

SVG