Though it was conceived back in the late 1990s, SVG is, in many ways, the ‘ugly duckling’ file format that grew up to become a swan. Poorly supported and largely ignored for most of the 2000s, in 2017 all modern web browsers can render SVG – and most vector drawing programs export it.  It turns 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.

 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.

Under the hood, SVG documents are nothing more than simple plain text files that describe lines, curves, shapes, colors, and text. As it is human-readable, easily understood and modified, SVG code can be manipulated via CSS or JavaScript. This gives SVG flexibility and versatility that can’t ever be matched by traditional PNG, GIF or JPGs.

SVG is a 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 true 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

  Under the hood, SVG uses shapes, numbers, and coordinates — rather than a pixel grid — to render graphics in the browser, which makes it resolution-independent and infinitely scalable. If you think about it, the instructions for creating a circle are the same whether you’re using a pen or a skywriting plane – only the scale changes.

  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 makes them readable by screen readers, search engines and other devices. By contrast, a chart

• Performance

  One of the most important aspects of 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.

• Browser support

  As of Internet Explorer 9, all major browsers support SVG: IE 9, Mozilla Firefox, Safari, Google Chrome, and Opera. Mobile devices with Webkit-based browsers also support SVG. On older or smaller devices, chances are that SVG Tiny is supported.

 

Inkscape

URL: www.inkscape.org

One of the most important tools for a graphics format is a decent drawing program. Inkscape offers state-of-the-art vector drawing, and it’s open-source.

Moreover, it uses SVG as its native file format. To store Inkscape specific data, it extends the SVG file with elements and attributes in a custom namespace, but you can also choose to export as plain SVG.

List of some tools to work with SVG file

Adobe Illustrator

URL: www.adobe.com/products/illustrator/

Before Adobe acquired Macromedia, it was the most prominent promoter of SVG. This time stems the good support of SVG in Illustrator. However, the resulting SVG often shows some quirks, that make it necessary to post-process it for general applicability.

Apache Batik

URL: xmlgraphics.apache.org/batik/

Batik is a set of open-source tools under the roof of the Apache Software Foundation. The toolkit is written in Java and offers almost complete SVG 1.1 support, as well as some features that were originally planned for SVG 1.2.

Batik offers a viewer (Squiggle), a rasterizer for PNG output, an SVG pretty printer to format SVG files, and a TrueType-to-SVG-Font converter.

Together with Apache FOP Batik can transform SVG to PDF.

Other renderers

Several projects exist that can create a raster image from an SVG source. ImageMagick is one of the most famous command-line image processing tools. The Gnome library rsvg is used by Wikipedia to raster their SVG graphics. Usage of headless browsers such as SlimerJS and PhantomJS are also popular for this purpose, as the image produced is closer to what the SVG will look like in the browser.

Raphael JS

URL: raphaeljs.com

This is a JavaScript library, that acts as an abstraction layer between browser implementations. Notably older versions of Internet Explorer are supported by generating VML, a vector markup language, that is one of two ancestors of SVG and exists since IE 5.5.

Snap.svg

URL: snapsvg.io

A newer JavaScript abstraction layer from the same author of Raphael JS. Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking, clipping, patterns, full gradients, groups. It does not support the older browsers that Raphael does.

 

Google Docs

URL: www.google.com/google-d-s/drawings/

Drawings from Google Docs can be exported as SVG.

Science

The well-known plotting tools xfig and gnuplot both support exporting as SVG. To render graphs on the web JSXGraph supports VML, SVG and canvas, automatically deciding which technology to use based on browser capabilities.

In GIS (Geographic Information System) applications SVG is often used as both storage and rendering format. See carto.net for details.

More tools!

The W3C offers a list of programs that support SVG.