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.
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.
SVG can be used in a variety of ways on the web, including as:
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.
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.
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
height (which specify the size of the image). The
<rect> element is a shape element that defines a rectangle, and contains four attributes,
height, which specify the position and size of the rectangle, and a
fill attribute, which specifies the color of the rectangle.
SVG shapes are defined using a variety of shape elements, such as
<path>. Here are some examples of how to define shapes in SVG:
<!-- A blue rectangle with a width of 100 and a height of 50 --> <rect x="0" y="0" width="100" height="50" fill="blue" />
<!-- A red circle with a radius of 50 --> <circle cx="50" cy="50" r="50" fill="red" />
<!-- A black line from (0,0) to (100,100) --> <line x1="0" y1="0" x2="100" y2="100" stroke="black" stroke-width="2" />
<!-- 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.
SVG shapes can be customized using a variety of attributes, such as
stroke-width. Here are some examples of how to customize SVG shapes:
<!-- A green rectangle with no stroke and a red fill --> <rect x="0" y="0" width="100" height="50" fill="red" stroke="none" />
<!-- 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" />
<!-- A pink rectangle with 50% opacity --> <rect x="0" y="0" width="100" height="50" fill="pink" opacity="0.5" />
<!-- 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.