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.
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 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
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.
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.
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
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.
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.
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.
Drawings from Google Docs can be exported as SVG.
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.
The W3C offers a list of programs that support SVG.