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.
One of the first vector desktop drawing apps: Aldus Freehand.
The internet and SVG
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.
This SVG rendering of the original NeXT logo in a Mac browser takes up just 4KB of file data.
SVG on the Mac
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):
- macSVG
- Boxy SVG ($20)
- Sketch ($10/mo)
- OmniGraffle
- Inkscape
- Canva ($15/mo)
- Gapplin (viewer only)
- Affinity Designer 2 ($69)
- Pixelmator Pro ($50)
- Adobe Illustrator ($23/mo)
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.
Some design apps such as Autodesk Fusion can import and use SVG files, but cannot edit or manipulate them directly. In general, most CAD apps don’t support the direct editing of SVG.
Some third-party apps such as Save as SVG can convert native exported CAD files and turn them into SVG files with varying results.
Some of the more popular SVG apps on the Mac.
If you use Microsoft 365, it has limited support for importing SVG, and rotating and scaling images to specific sizes – but it doesn’t currently support direct full SVG editing. You can however alter SVG image outlines and fills, or convert SVG files in Microsoft 365 into Office Shapes used in 365 apps.
Which Mac SVG apps should you use?
For years the most popular free SVG Mac apps were Inkscape and Boxy SVG (which later went commercial). These apps are still great for simple, easy, straightforward SVG editing and exporting.
However that all changed in 2022 when Arkansas developer Douglas Ward released macSVG – which is now the undisputed leader for SVG editing on the Mac. macSVG is both easy to use, and incredibly feature rich. It allows you to edit SVG images and also allows you to view the direct XML of any element with a single click.
Available tools include shape, point, and path controls, shape morphing, text, images, and some path and curve conversion functions. You can also view SVG in a complete XML file as it will appear when exported for use on the web.
A timeline editor not unlike Apple’s Final Cut Pro is also included – which makes animating SVG images a breeze. The animation produced is amazingly smooth and fluid. macSVG can also generate HTML5 video and Core Graphics code.
Sketch and Canva are probably the most popular modern SVG editors and both are reasonably priced. If you’re a graphic designer, you probably already use the paid version of Adobe Illustrator.
Pixelmator Pro and Affinity Designer are obvious choices, but both command a heavier price.
SVG on the web
The web is the obvious primary use case for SVG files and code – and there are numerous good SVG web frameworks available. Some of these are:
- Adobe’s Snap.svg
- SVG.js
- SVG.NET
- Fabric.js for SVG to canvas conversions
- SVG-Edit (which allows direct SVG editing in web browsers)
- SwiftSVG (mostly for icon and simple shape rendering)
Since most of these frameworks already provide most of the web code you’ll need for displaying SVG on the web. Including them in your web project cuts development time.
You’ll want to test your SVG code for your site in a wide range of browsers on as many platforms as possible to ensure compatibility. There’s also an SVG Toolkit for Figma from Tobias Strebitzer.
Once you have SVG files created for your web project, a simple display usually means including the files on your web server and referencing them in code or loading them dynamically during page loading. Scaling in most cases is handled automatically by the browser – unless you want images to only be displayed at specific sizes.
Overall, SVG is a great web technology since it provides a single common open standard for rendering images quickly in most browsers at any size.
There’s a free SVG tutorial at W3 Schools, and a huge SVG icon repository at svgrepo.com, if you want to know more.
Also be sure to check out the book SVG Essentials by J. David Eisenberg for a more in-depth analysis.
