Scalable Vector Graphics are now widely used on the web. Scalable Vector Graphics are a common resizable image format for the web. Here's how to use them in macOS. Modern web browsers and image apps have the ability to scale images using mathematical calculations, such as Bezier curves. This is as opposed to fixed bitmap graphics, which don't scale well and offer a blocky, pixelated appearance at times.
Scalable (or "vector") graphics use math-based descriptions of images. When an image is resized, it can be fully recalculated at the new size with no visible loss of quality. The history of scalable graphics goes back decades and originated in computer science research. In the late 1980s, the desktop publishing (DTP) revolution happened, and as a result, scalable graphics went mainstream.
It became apparent during that time that the ability to size graphics and text to various print and display sizes was key. Some of the earliest DTP apps included Aldus Freehand, Adobe Illustrator, and others. Illustrator, of course, still lives on today in Adobe's Creative Cloud suite of apps.
These apps allowed creators and designers to create graphics, manipulate them via control points, and size and reshape them at will. This made changing images very easy compared to editing uniform bitmap images which contain only a grid of pixels. Early desktop computers, such as those from NeXT, also used scalable graphics for their on-screen displays using technologies such as Display Postscript. Today Apple's operating systems use a similar technology called Core Graphics (also known as "Quartz") to calculate images off-screen before they are displayed.
Some modern apps such as Adobe Photoshop have the ability to convert or vectorize some bit-mapped graphics into vector formats, although the results may vary. When the internet first became popular in the 1990s, most graphics on the web were bitmapped. Many years later it became obvious scalable graphics for the web were needed - due to the use of large high-resolution displays and the ability to resize browser windows.
Collaboration requirements also demand the ability to manipulate graphics in real time by several stakeholders on the web. This is where Scalable Vector Graphics (SVG) come in. Lacking any existing third-party standard for vector graphics, the World Wide Web Consortium (WC3)'s SVG Working Group created the Scalable Vector Graphics (SVG) recommendation in 2001 for use on the web. SVG files contain descriptions of how to draw and scale images cleanly at any size using a full-color palette, and even some forms of animation.
The SVG Working Group considered several commercial proposals for a scalable graphics format, but ultimately ended up deciding on an open specification. There is a later RFC for using SVG images in RFC drawings: RFC 7996. There is also a newer unapproved SVG 2 standard in the works by WC3. Due to the widespread adoption of mobile devices, two additional standards were also introduced: SVG Tiny (SVGT) and SVG Basic (SVGB).
SVG is based on the common open XML data standard - virtually guaranteeing its universal compatibility across most modern systems and web browsers. SVG XML is extremely compact - consisting mostly of drawing commands as tags, coordinates, shape descriptions, and colors.
Early adoption of SVG was limited - mainly because of a lack of common browser support. Adoption began to take off sometime around 2010 as more browsers began to include SVG rendering. By 2017 SVG web acceptance was mainstream. On Windows platforms, most versions of Internet Explorer earlier than version 8.0 don't support SVG.
The most obvious reason to use SVG is scalability. When a web browser window is resized, the web page and all its component elements resize along with it. Being able to quickly recalculate and redraw images at any size to fit a resized window vastly improves web image quality.
SVG files can also be compressed using the gzip format, which makes them download faster when they're being loaded by a web page. Even without compression, SVG files are usually tiny - many SVG files used on the web will be under 10KB in size and many more under 5KB.
For sites that allow image downloads, SVG allows graphics files to be easily exchanged on the web via web pages without additional servers or conversions. SVG files are also used in some user interfaces, making parts of them scale cleanly, for example when a desktop app's window is resized.
macOS supports SVG, and there are many quality apps that can edit, export, import, and save SVG graphics as image files. Most SVG files have an extension of either .svg or .svgz. Some of these apps include (but are not limited to):. Some apps such as Sketch can import/export SVG, as well as a host of other files and formats including CSS (web), bitmaps such as PNG, JPG, GIF, TIFF and WebP, Figma files (.fig), PDF, Adobe Illustrator and Photoshop files, and even raw SVG code. Sketch doesn't support animations in imported graphics formats such as GIF or WebP.
