SVG

Some pictures are made of shapes.

These shapes stay clear. You can make them very big. They do not get fuzzy. This is because they use math to draw lines.

These files are just text. You can use a text tool to make them. You can also make them move. They can even change color. This makes them great for the web. Computers can search through them easily. It is a smart way to make art.

SVG stands for Scalable Vector Graphics. It is a way to make pictures for the web. Most pictures use pixels, which are tiny dots. If you make a pixel picture too big, it looks fuzzy.

SVG is different. It uses math to draw shapes. This means you can make the image very large. It will still look sharp and clear.

SVG files are actually made of text. They use a language called XML. Because they are text, you can edit them with a text editor. You can also use special drawing tools. These files can hold shapes, text, and even other pictures. You can group parts together or change their colors.

SVG is very smart. You can add movement to the shapes. This is called animation. You can also use a tool called JavaScript to make the art interactive. This means the picture can react when you click it. These files can also be made smaller to save space. We call these smaller files SVGZ files.

Scalable Vector Graphics, or SVG, is a special way to make digital art. Most pictures use tiny dots called pixels to form an image. If you stretch a pixel picture, it looks fuzzy or blocky.

SVG is different because it uses math to draw shapes. This means you can scale the image to any size without losing quality. It stays sharp and clear whether it is tiny or huge. SVG files are also made of text using a language called XML. This makes them easy for computers to search, index, and compress.

To work, SVG uses instructions to build different parts of a picture. It can create paths made of straight lines or smooth curves. You can also make basic shapes like circles, ellipses, and rectangles.

These shapes can be filled with solid colors or pretty gradients. A gradient is a smooth change from one color to another. You can even use patterns that repeat across a shape. SVG can also hold text and bitmap images within its code. You can group these objects together to make complex scenes.

Creating SVG was a big team effort. In 1998, six different groups sent in ideas for how to make vector graphics. These included companies like Adobe, IBM, Microsoft, and Netscape. The World Wide Web Consortium, or W3C, decided not to pick just one. Instead, they started a new group to build a brand new language. Chris Lilley led this working group to create the SVG standard. The first official recommendation for SVG 1.0 was released on September 4, 2001. Later, SVG 1.1 became a standard in early 2003.

There are many different versions of SVG for different jobs. SVG 1.1 is very common and was updated in 2011. There are also special versions called SVG Tiny and SVG Basic. These were made for mobile phones and devices with less power. In 2003, the 3GPP group made SVG Tiny the required format for new phones. SVG 2 is a newer version that adds features from HTML5. It reached the Candidate Recommendation stage on September 15, 2016. The most recent draft for SVG 2 was released on September 14, 2025.

SVG is very useful because it can move and react. You can use a tool called SMIL to add animation to the shapes. You can also use JavaScript to make the art interactive. This means a picture might change when you click on it.

Because SVG files are text, they can be made much smaller. Using a tool called gzip, you can turn them into SVGZ files. These files are usually 20 to 50 percent smaller than the original. This helps websites load much faster for everyone.

Scalable Vector Graphics, or SVG, is an XML-based format for defining two-dimensional graphics. Unlike standard images that use a fixed grid of pixels, SVG uses mathematical descriptions to create shapes. This allows the graphics to be scaled to any size without losing quality or becoming blurry.

Because SVG files are stored as XML text, they are highly versatile. They can be searched, indexed, and compressed to save space. This format is an open standard managed by the World Wide Web Consortium (W3C). It is widely used in web design, printing, and mobile applications.

To build an image, SVG uses specific instructions to define various graphical objects. The system relies on three main types of objects: vector shapes, bitmap images, and text. Vector shapes are created using paths, which consist of straight lines or complex curves. These paths use commands like "M" for move to and "L" for line to, followed by specific coordinates.

Users can also define basic shapes such as rectangles, circles, and ellipses. Once these shapes are drawn, they can be styled with colors, gradients, or patterns. You can even use clipping paths or masks to control which parts of a shape are visible.

SVG offers many ways to add visual depth through painting and effects. Shapes can be filled with solid colors or complex gradients. A gradient can be linear, moving in a straight line, or radial, spreading out from a center point. Patterns can also be applied by repeating a specific graphic object across a surface. For more advanced work, the specification includes features like alpha masks for transparency and filter effects. These tools allow artists to create highly detailed and professional-looking illustrations.

Beyond static images, SVG supports interactivity and animation. Animation can be handled through a method called SMIL, which the W3C recommends for time-based changes. Alternatively, developers can use JavaScript to program how an image reacts to a user. This is done by accessing the SVG Document Object Model, or DOM. You can assign event handlers like "onclick" or "onmouseover" to any object. This means a shape can change color or move when a person clicks it or moves their mouse over it.

The history of SVG began with a period of intense competition. In 1998, six different groups submitted proposals for a vector graphics language. These included companies like Adobe, IBM, Microsoft, and Netscape. The W3C SVG Working Group, chaired by Chris Lilley, chose not to use any of these commercial versions. Instead, they developed a new, independent markup language. The first official version, SVG 1.0, became a W3C Recommendation on September 4, 2001. SVG 1.1 followed as a standard on January 14, 2003.

Different versions of SVG have been created to meet specific technological needs. For mobile devices with limited power, profiles called SVG Tiny and SVG Basic were developed. SVG Tiny was specifically designed for highly restricted devices like cellphones. In 2003, the 3GPP group made SVG Tiny the mandatory format for next-generation phones. More recently, the SVG 2 specification was developed to incorporate features from HTML5. SVG 2 reached the Candidate Recommendation stage on September 15, 2016. The latest draft for SVG 2 was released on September 14, 2025.

Efficiency is a major advantage of the SVG format. Because SVG files are XML-based, they contain many repeating text fragments. This makes them perfect for lossless data compression using the gzip algorithm. When compressed, these files use the .svgz extension.

An SVGZ file is typically 20% to 50% smaller than the original uncompressed file. This reduction in size helps websites load faster and saves data for users. This combination of scalability, interactivity, and small file size makes SVG a fundamental tool for the modern web.