SVG 101: What is SVG? (and what is it actually good for?)

Though it was conceived back in the late 1990's, SVG is, in many ways, the 'ugly duckling' file format that grew up to become a swan. Poorly supported and mostly ignored for most of the 2000s, in 2017 all modern web browsers can render SVG – and most vector drawing programs export it.

It turned out that SVG was the one graphic format that most closely responds to current web development demands of scalability, responsiveness, interactivity, programmability, performance, and accessibility.

So, What Is SVG and Why Should You Use It?

SVG is a vector graphic format—based on XML and is used to display a variety of graphics on the Web and other environments.

At their heart, SVG documents are plain text files describing lines, curves, shapes, colors, and text. As they are human-readable and easily understood and modified, this code can be manipulated via CSS or JavaScript. This makes SVG much more flexible and versatile than any PNG, GIF or JPG.

SVG is an W3C standard, which means it can inter-operate easily with other open standard languages and technologies including JavaScript, DOM, CSS, and HTML. As long as the W3C sets the global industry standards, it seems likely SVG will continue to be the de-facto standard for vector graphics in the browser.

The real value of SVG is it solves many of the most vexing problems in modern web development. Let’s see what they are.

• Scalability and Responsiveness

  Behind the scene, SVG uses numbers and coordinates — rather than a pixel grid — to render graphics in the browser, which makes it resolution-independent and infinitely scalable. After all, the instructions for tracing a circle on a sketchpad or on the sky essentially the same.

  With SVG, you can combine different shapes, paths and text elements to create all kinds of visuals and to be sure that they will look clear and crisp at any size.

  In contrast, raster-based formats like GIF, JPG, and PNG have fixed dimensions, which causes them to pixelate when they are scaled. Although various responsive image techniques have proved valuable for pixel graphics, they will never be able to truly compete with SVG’s ability to scale infinitely.

• Programmability and Interactivity

  SVG is fully editable and scriptable. All kinds of animations and interactions can be added to a drawing via CSS and/or JavaScript.

• Accessibility

  SVG files are text-based and do can be searched and indexed. This make them readable by screen readers, search engines and other devices. By contrast, a chart

• Performance

  One of the most important aspects impacting web performance is the size of the used files on a web page. SVG graphics are routinely smaller file sizes compared to their raster graphics brethren.

Common Use Cases and Browser Support

SVG has an avalanche of practical use cases. Let’s explore the most significant of them.

• Plain Illustrations and Diagrams

  Any traditional drawing that may have been produced with pens and pencils should translate perfectly into the SVG format.

• Logos and Icons

  Logos and icons often share the same need to be clear and sharp at any size – from button to billboard – making them an ideal candidate for SVG. SVG icons are more accessible and are much easier to position. For more detail, see Inline SVG vs Icon Fonts.

• Animations

  You can create appealing animations, and even special kinds of animation, including SVG line drawings. SVG can interact with CSS animation, as well as its own built-in SMIL animation ability.

• Interactivity (Charts, Graphs, Infographics, Maps)

  SVG can be used to plot data and update it dynamically based on user actions or some events – Interactive SVG Infographic, SVG Interactive Roadtrip Map.

• Special Effects

  Many live effects can be achieved by using SVG, including shape morphing or different gooey effects

• Building Interfaces and Applications

  SVG enables you can make challenging interfaces and incorporate it with HTML5, web-based applications, and rich Internet applications (RIAs).

• And many more…

Continue reading %SVG 101: What is SVG? (and what is it actually good for?)%

by Ivaylo Gerchev via SitePoint