SVGs: What’s the Hype?

Before joining the RedMonk team I donned my frontend hat to write up some practical advice concerning SVGs. Since that time, I have become increasingly interested in the impact these graphics are making on the web development and design tools market (and in spite of Adobe Creative Cloud’s dominance of the space, there are other design tools worth noting). SVGs are not a new technology; in fact, the World Wide Web Consortium (W3C) began developing the SVG in 1999. But with the proliferation of JS and client side rendered web apps, the use of SVGs has expanded greatly.

Scalable Vector Graphics, or SVGs, have revolutionized how web designers and developers incorporate images into their web projects. Unlike bitmapped image formats such as jpeg, png, or tiff files, these lightweight, versatile XML-based vector graphics are created using markup language. In addition to loading quickly, SVGs can scale to any size without resolution loss because instead of relying on a grid of pixels like bitmapped graphics, vectors describe images using filters, paths, shapes, and text. SVGs are particularly popular for rendering icons and logos, although they can be as complex and detailed as a bitmapped image.

SVGs occupy a unique space spanning engineering and visual art. Therefore, designers and engineers tasked with creating SVGs tend to have different strategies concerning their use and creation. This precarious betwixt-and-between positioning has motivated numerous companies to introduce no-code solutions intended to collapse this disconnect. Web developers looking to add, say, the Twitter logo to their page can download an SVG from their Brand Toolkit, drop the code block into their site build, and adjust the size, color, hover state, etcetera by updating the markup as needed–no visual canvas or GUI needed. What really sets SVGs apart for interactive teams is the ease with which they can be modified. If a stakeholder requests a color change, instead of creating, exporting, and uploading a new jpeg to the CMS, developers need only update the Hex, RGBA, or named value of the fill property in the SVG’s code (try it out in the CodePen below).

Designers and UI/UX practitioners are more likely than engineers to require a visual tool suite to create SVGs, and it is primarily for them that the wealth of options and approaches on the market today have sprung up. Many, many products and libraries capitalize on the SVG’s popularity, and I will look at three industries that have built up around the SVG buzz: SVG building tools, SVG converters, and SVG animators.

1. SVG Builders: Designers with paid Adobe Creative Cloud subscriptions will likely create SVGs using Illustrator. Adobe’s tools tend to be industry leaders in graphic design, photography, and animation, which their Q4 2021 statement of financial highlights bears out, increasing $571 million quarter over quarter to $12.24 billion. Illustrator is one of Adobe’s most popular offerings owing to its power, features, and the many tutorials and docs available online for supporting the community. Illustrator certainly offers many nice-to-have features, such as default effects (like drop shadows). However, all of these attributes mean that users must be careful to strip out extraneous data prior to dropping Illustrator-built SVGs into a webpage’s CSS or HTML. Unless exported in a particular manner, files retain extra, proprietary information such as guides that augment the file size without adding value to a webpage.
   
   Designers may also look to one of the many free and paid online SVG builders. Other products that have sought to occupy this space include Boxy SVG, Method Draw on Deta Space, and Media Modifier. These apps all generally share with Illustrator a UI design logic for creating vector graphics consisting of a canvas and palette. Inkscape, for example, is one such program that permits users to design sophisticated, featureful vector graphics. In addition to freehand and shape tools, this free and open source project also enables users to manipulate objects through transformations and layers, color and pattern fills, node editing (“moving nodes and Bezier handles, node alignment and distribution, etc.”), and text support.
2. SVG Converters: Another common product is the bitmap to vector converter. Designers frequently need to update an asset’s format, and although converted images won’t look identical to their bitmapped sources these tools are tremendously useful for teams tasked with vectorizing a site’s preexisting simple graphics (icons, logos, etcetera). Adobe offers several tools to accomplish this (here, here), but a number of smaller companies also provide this service. Vectorizer, Synium Software’s Vectorize!, QaamGo Media’s SVG Converter, Softo’s JPG to SVG Converter, and Cedar Lake Ventures’s Vector Magic all allow users to upload or drag and drop an image onto the app to vectorize it.
3. SVG Animators: Finally, and most exciting in my view, is the market for SVG animators. These products offer solutions to make SVGs move. You have probably seen vector animations in videos and webpages without realizing the mechanism behind them. By changing paths, color fills, and shape size and placement designers can create gorgeous visual experiences that evolve over time. These applications use javascript to add the fourth dimension. At its most basic, animated SVGs could include bouncing icons, pulsating text, and dynamically appearing buttons (although many of these simple effects can be achieved with less overhead using CSS). However, this is just the tip of the iceberg of what engineers and designers can achieve using the SVG format.
   
   Developers can use the dependency-free JS class vivus to integrate linear animations into their code (see Sten Hougaard’s vivus example below). However, the greatest number of SVG animation solutions are targeted at non-engineers. The interactive web page design tool Framer includes an SVG animator as part of their platform. Adobe’s own Animate (formerly Flash Professional) also enables users to build vector animations, and, like other offerings in the Creative Cloud, is the gold standard for professionals. Of course, this means Animate may appeal less to individuals unwilling/unable to overcome the steep learning curve and price. Other companies in this market seem to recognize the value of simplicity. It is doubtless owing to these rival companies’ less-technical intended audiences that they have emphasized their frameworks’ no-code positioning. SVGator, for instance, seeks to attract digital artists and UI/UX teams by proclaiming “No coding skills required” in their headline.

The market which has built up around vector technologies is in many respects still in its infancy, with few companies positioned to challenge the Adobe Creative Cloud’s dominance in this space. However, I am keeping an eye on the numerous offerings popping up as stand-alone apps and bundled with webpage developing tools. Those taking advantage of the non-technical user market through no-code solutions will be particularly well-positioned to take advantage of this trend.

Disclosure: Adobe is a RedMonk client.