Charts and graphs. You can use SVGs to create scalable graphs and charts that support animations.

You can use CSS to animate SVGs, which makes them a useful component in website design, particularly for microinteractions.

SVGs are a perfect match for diagrams and any other kind of illustration that relies on plain lines.

Since you’ll probably re-use logos across websites and social media, using SVG resolves any potential scalability issues. The SVG format is a fantastic option for a whole set of other scenarios, though: If you try to re-create a complex photograph using vectors, you’ll usually end up with massive and unusable SVG files. Many websites use formats such as PNG and JPEG almost interchangeably. However, SVGs look good at practically any resolution. With more complex pixel-based graphics, the degradation becomes evident much faster. If you keep zooming in on the PNG rectangle, you’ll notice its quality begins to downgrade at some point. For example, SVGs are capable of retaining image quality as they scale up or down. Although both images look the same, SVG files offer a whole host of benefits that other formats don’t. In theory, if you take this code and drop it into an HTML file, you’ll see a similar set of rectangles to the PNG – that is, as long as the browser you use supports SVG files. If you wanted to replicate something similar using vector graphics, you’d need to generate it with XML code (the same found in use for sitemaps.) The following code could achieve the same result: This is another kind of image file called a Portable Network Graphic (PNG), used for illustrations and drawings. Take this image of a blue rectangle with a black border and shadow, for example: In theory, you can generate almost any type of graphics you want using a collection of vectors. For the uninitiated, a vector is an element with a specific magnitude and direction.

4 How to Use an SVG File (In and Out of WordPress).

Magic vector portable