Boxy SVG
SVG is the standard format for storing vector graphics such as icons, banners, charts and illustrations. Boxy SVG project...
- macOS 12.0 or later, 64-bit processor
Description
SVG is the standard format for storing vector graphics such as icons, banners, charts and illustrations.
Boxy SVG project goal is to create the best SVG editor for non-technical users as well as for professional designers and developers.
CORE FEATURES
• Clean and intuitive UI heavily inspired by Inkscape, Sketch and Adobe Illustrator
• Extensive support for on-canvas editing of object geometry, transform, paint and other properties
• Save to SVG and SVGZ formats, export to PNG, JPG, WebP, PDF and HTML5
• Open Clip Art Library integration with thousands of free stock vector arts
• Google Fonts integration with hundreds of free fonts
• Configurable keyboard shortcuts for over 100 commands
• Manual guides, smart guides and grid
• Path operations (unite, intersect, subtract, exclude, close, reverse, etc.)
• Arrangement operations (align to, rotate, flip, order, group, etc.)
FOR WEB DEVELOPER S
• Chromium-based rendering engine
• SVG and CSS code inspector similar to Chrome Dev Tools
• Clean SVG output that preserves IDs, classes, titles and other metadata
• SVG sprites editing support
WHAT’S NEW
Version 4.112.0:
• Release notes were unavailable when this listing was updated.
REQUIREMENTS
macOS 12.0 or later, 64-bit processor
ScreenShots
If you are using Adblocker!! Please support this website by adding us to your whitelist. Ads are what helps us bring you premium content! Or read this to know how you can support us. Thank you!
•
Size
– 232.6MB
Previous Versions
Editor-checked details
Recommended for front-end engineers, design-system maintainers, icon/logo designers and product teams delivering standards-based SVG directly. Use: define viewBox/naming/accessibility rules; maintain fixtures for symbol/use/filter/mask/font/foreignObject; draw visually while auditing Elements/CSS; lock IDs/classes; lint/optimize a copy; regress in Safari/Chrome/Firefox and the real component; inspect small-size contrast, keyboard and screen-reader behavior; archive source SVG, optimized SVG, PNG proof and manifest. Preserve pre-Boolean/Join Paths copies. Prefer avoiding unnecessary foreignObject and unstable external links in public web assets. Record license/attribution when importing OpenMoji or other libraries, and lock bitmap export color space. Compare Sketch for complex UI/brand systems and Affinity Designer, Amadine or EazyDraw for deeper illustration; Boxy SVG is stronger when SVG markup and sprites are the product. Send CMYK print, professional page layout or photo compositing to dedicated tools.
Pros
- It is built around SVG itself rather than a proprietary document. The canvas and SVG/CSS inspector work together, suiting front-end developers, icon designers and design-system teams that need visual editing plus control of IDs, classes, symbols, titles and metadata. Chromium-based rendering exposes browser-oriented behavior early. Standard SVG fits Git, code review, diffs, sprites and component pipelines with little format lock-in. Path Boolean/arrangement tools, guides/grids, gradients/filters/markers, sprite editing and configurable shortcuts cover everyday web-vector work. SVG/SVGZ plus PNG/JPEG/WebP/PDF/HTML5 exports let one source serve code, preview and delivery; 4.111.0 adds bitmap color-space control and OpenMoji speeds prototyping. Multilingual and cross-platform/web availability help mixed teams. For small icons, logos, illustrations, data graphics, web animation and SVG components, it is more direct than a broad design suite.
Cons
- SVG focus means it is not full print layout, a complex multi-artboard brand system, photo/RAW editing, professional CMYK/spot color or long-document publishing. PNG/JPEG color-space control does not turn a browser workflow into prepress color management. A Chromium canvas is close to Chrome, but Safari/Firefox, email clients, native renderers and SVG sanitizers can differ; the developer explicitly calls out use, foreignObject and external-reference edges, so correct canvas display is not delivery proof. Google Fonts, Pixabay, OpenMoji and online imports introduce availability, licensing, privacy and archival concerns. Complex filters, masks, animation and node counts can hurt performance/accessibility. Direct XML/CSS editing is powerful, but changing IDs/classes/href can silently break scripts/styles, and optimizers can alter the DOM. Complex illustration, typography, plug-ins, asset collaboration and client interchange are smaller than Illustrator/Affinity/Sketch ecosystems. macOS requirements are relatively recent, and desktop/web/PWA platforms differ in filesystem, font and API permissions.
Installation steps
- Boxy SVG 4.111.0 on the Mac App Store requires macOS 12.0+ and can be used on Intel and Apple-silicon Macs. Start with copies of real SVG fixtures covering viewBox/preserveAspectRatio, nested transforms, symbol/use, markers, masks, clipPath, filters, gradients, patterns, CSS classes/IDs, external images, Google Fonts, foreignObject, animation and metadata. Compare every fixture in Boxy SVG, Safari, Chrome, Firefox and the final embedding page—not just the canvas. For new icons, lock viewBox, coordinate precision, naming and accessible title/desc. Duplicate source objects before Boolean operations and inspect direction, fill-rule and open subpaths after complex Join Paths. Before SVG/SVGZ export, confirm IDs, classes, titles and metadata survive; embed or package external assets for web delivery. Choose a deliberate color space for PNG/JPEG and verify in target browsers/apps. Independently test PDF, WebP and HTML5 for fonts, filters, alpha and dimensions.
Uninstallation steps
- Before uninstalling, keep every editable source as standard SVG, not only PNG/PDF. Also retain SVGZ, preview PNG, deployed web artifacts and browser reference captures. A manifest should record Boxy SVG version, viewBox, dimensions, color space, font source/license, external resources, ID/class/API contracts, sprite symbol names, animation/CSS/JS dependencies, optimizer version, SHA-256 and verified browsers. For Google Fonts, Pixabay, OpenMoji or other libraries, archive the exact asset, license/attribution and retrieval date; a library URL is not an archive. Test external href, image, font and CSS offline and prove the SVG still renders without networking. Component/NPM workflows also need package lock, config and build scripts. Open archived SVGs in another browser and text editor to confirm readable, valid XML without app-only references before removing the app. Handle account/cloud files separately; uninstalling does not remove remote copies.
Common errors and fixes
- Different canvas/browser rendering: the developer notes that a minority of files heavily using use, foreignObject or external references can differ. Reproduce minimally in Safari/Chrome/Firefox and inspect namespaces, href/xlink:href, base URL, CORS, fonts and CSS. Clipped/scaled icons require checking viewBox, width/height, preserveAspectRatio, transform origin and filter bounds rather than merely enlarging the canvas. If Join Paths reverses fills or loses holes, inspect subpath direction, nonzero/evenodd fill-rule, open endpoints and transforms; 4.111.0 fixes a nonworking command, not topology decisions. Google Font path conversion requires loaded fonts and Local Font Access; convert a duplicate and retain editable text. Offline external images/fonts must be embedded or packaged with stable relative paths plus correct MIME/CSP/CORS. For PNG/JPEG color shifts, deliberately use the new Color space option and verify in targets; browser display is not print color management. Slow animation/filter effects need fewer nodes, smaller blur/filter regions and performance testing. Before optimization, lock IDs/classes and run DOM plus visual regression so CSS/JS is not broken.
What changed in this version
- The official 4.111.0 history lists exactly three changes: the OpenMoji library, a Color space option for PNG/JPEG export, and a fix for the Join Paths command not working. No changes from other branches are attributed to 4.111.0. SVG is the native editable format, with on-canvas geometry/transform/paint controls, path Boolean/arrangement operations, manual/smart guides, grids, an SVG/CSS Elements inspector, SVG sprite editing and preservation of IDs, classes, titles and metadata. It saves SVG/SVGZ and exports PNG, JPEG, WebP, PDF and HTML5 using Chromium-based rendering. The Mac App Store requires macOS 12.0 and lists many languages including Simplified Chinese, Japanese and Korean; its privacy label reports no data collection. The developer also states no editor covers the full SVG standard, so heavy use/foreignObject or external references still need cross-browser verification.
Alternatives
Screenshots
