Boxy SVG
SVG は、アイコン、バナー、チャート、イラストなどのベクターグラフィックスを保存するための標準フォーマットです。Boxy SVG プロジェクト……
- macOS 12.0 or later, 64-bit processor
概要
SVG は、アイコン、バナー、チャート、イラストなどのベクターグラフィックスを保存するための標準フォーマットです。Boxy SVG プロジェクトの目標は、非技術者からプロのデザイナー・開発者まで、あらゆるユーザーにとって最高の SVG エディタを作ることです。
主な機能:
• Inkscape、Sketch、Adobe Illustrator を強く意識した、シンプルで直感的な UI
• オブジェクトの幾何学的属性、変換、塗りつぶし、その他のプロパティをキャンバス上で直接編集するための広範なサポート
• SVG/SVGZ 形式での保存および PNG/JPG/WebP/PDF/HTML5 へのエクスポート対応
• 数千点の無料ベクターアートが利用可能な Open Clip Art Library との連携
• 数百種類の無料フォントが利用可能な Google Fonts との連携
• 100 以上のコマンドに対してカスタマイズ可能なキーボードショートカット
• 手動ガイド、スマートガイド、グリッド機能
• パス演算(結合、交差、減算、除外、閉じる、反転など)
• 配置演算(整列、回転、反転、順序変更、グループ化など)
Web 開発者向け機能:
• Chromium をベースとしたレンダリングエンジン
• Chrome DevTools に類似した SVG および CSS コードインスペクター
• ID、クラス、タイトルなどのメタデータを保持したクリーンな SVG 出力
• SVG スプライト編集機能
新機能(バージョン 4.111.0):
• 追加:OpenMoji ライブラリ
• 追加:PNG/JPEG エクスポート時の「カラースペース」オプション
• 修正:「パスを結合」コマンドが動作しない問題
必要環境:macOS 12.0 以降、64 ビットプロセッサ
スクリーンショット
広告ブロッカーをご利用の場合、当サイトをホワイトリストに追加してご支援ください!広告収入こそが、皆様に高品質なコンテンツを提供する私たちの原動力です!または、こちらの説明をご覧になり、ご支援方法をご確認ください。ありがとうございます!
サイズ:222.5MB
以前のバージョン
編集部確認情報
standard SVG を直接納品する front-end、design system、icon/Logo designer、product team に推奨。「viewBox/name/accessibility rule → symbol/use/filter/mask/font/foreignObject fixture → visual edit+Elements/CSS audit → ID/class lock → copy を lint/optimize → Safari/Chrome/Firefox+実 component regression → small-size contrast/keyboard/screen reader → source SVG+optimized SVG+PNG proof+manifest」を運用。Boolean/Join Paths 前 copy を保存し、public asset は不要 foreignObject/不安定 external link を避けます。OpenMoji 等は license/attribution を記録し bitmap color space を固定。complex UI/brand は Sketch、強い illustration は Affinity Designer/Amadine/EazyDraw、SVG markup/sprite 自体が成果なら Boxy SVG。CMYK print、page layout、photo compositing は専用 tool を使います。
長所
- proprietary document ではなく SVG 自体が中心で、canvas と SVG/CSS inspector が同期し、ID、class、symbol、title、metadata を制御したい front-end、icon designer、design system team に適します。Chromium rendering で browser behavior を早期確認。standard SVG は Git、code review、diff、sprite、component pipeline に入り format lock-in が少ないです。path Boolean/arrangement、guide/grid、gradient/filter/marker、sprite、shortcut が Web vector をカバー。SVG/SVGZ と PNG/JPEG/WebP/PDF/HTML5 export で一 source を code/preview/delivery に利用でき、4.111.0 の color space と OpenMoji が便利。小 icon、Logo、illustration、data graphic、Web animation、SVG component には大型 suite より直接的です。
短所
- SVG 特化のため print layout、complex multi-artboard brand、photo/RAW、professional CMYK/spot、long document には不向きで、PNG/JPEG color space は prepress system ではありません。Chromium canvas は Chrome に近くても Safari/Firefox、mail client、native renderer、sanitizer は異なり、開発者も use、foreignObject、external reference の edge を認めています。Google Fonts、Pixabay、OpenMoji/online import は availability、license、privacy、archive 問題を伴います。complex filter、mask、animation、多数 node は performance/accessibility に影響。XML/CSS の ID/class/href 誤変更や optimizer の DOM 変更は script/style を静かに破壊します。Illustrator/Affinity/Sketch より complex illustration、typography、plug-in、collaboration/interchange ecosystem が小さく、desktop/Web/PWA は filesystem、font、API permission も異なります。
インストール手順
- Boxy SVG 4.111.0 の Mac App Store 版は macOS 12.0 以降で、Intel/Apple silicon Mac に対応します。viewBox/preserveAspectRatio、nested transform、symbol/use、marker、mask、clipPath、filter、gradient、pattern、CSS class/ID、external image、Google Font、foreignObject、animation、metadata を含む実 SVG のコピーを fixture にし、Boxy SVG、Safari、Chrome、Firefox、実際の embed page で比較します。新 icon は viewBox、coordinate precision、name、accessibility title/desc を固定。Boolean 前に source object を複製し、複雑な Join Paths 後は direction、fill-rule、open subpath を確認。SVG/SVGZ export は ID、class、title、metadata 保持を確認し、外部 asset を embed/package。PNG/JPEG は color space を明示し target app で確認、PDF/WebP/HTML5 も font、filter、alpha、size を別々に検証します。
アンインストール手順
- 削除前に全 editable source を標準 SVG で保存し、PNG/PDF だけにしません。SVGZ、preview PNG、実 deploy artifact、browser reference capture も保存。manifest に Boxy SVG version、viewBox、dimension、color space、font source/license、external resource、ID/class/API contract、sprite symbol、animation/CSS/JS dependency、optimizer version、SHA-256、verified browser を記録。Google Fonts、Pixabay、OpenMoji 等は実 asset、license/attribution、取得日を保存し URL だけに頼りません。external href、image、font、CSS を offline test。component/NPM は package lock、config、build script も保存します。別 browser/text editor で SVG の readable valid XML と app-only reference 不在を確認後に削除。account/cloud は別管理で、uninstall は remote copy を消しません。
よくあるエラーと解決策
- editor/browser 差は、開発者が use、foreignObject、external reference 多用 file の一部で起こり得ると説明しています。Safari/Chrome/Firefox の最小再現で namespace、href/xlink:href、base URL、CORS、font、CSS を確認。crop/scale は viewBox、width/height、preserveAspectRatio、transform origin、filter bounds を調べます。Join Paths 後の fill/hole は subpath direction、nonzero/evenodd、open endpoint、transform を確認。4.111.0 は command 不動作修正で topology 自動判断ではありません。Google Font path 化は load/Local Font Access を確認し duplicate を変換。external image/font は embed または相対 path で package、MIME/CSP/CORS を確認。PNG/JPEG は新 Color space を明示し target で検証。重い animation/filter は node、blur、filter region を減らし、optimization 前に ID/class と DOM/visual regression を固定します。
今回の更新内容
- 公式 4.111.0 履歴は3項目のみです。OpenMoji library 追加、PNG/JPEG export の Color space option、Join Paths command 不動作修正。他 branch の変更を混ぜません。SVG を native editable format とし、canvas geometry/transform/paint、path Boolean/arrangement、manual/smart guide、grid、SVG/CSS Elements inspector、SVG sprite、ID/class/title/metadata 保持を提供。SVG/SVGZ 保存、PNG/JPEG/WebP/PDF/HTML5 export、Chromium-based rendering です。Mac App Store minimum は macOS 12.0、多言語(簡体中国語、日本語、韓国語等)で、privacy label は data not collected。開発者も全 SVG standard を完全対応する editor はないとし、use/foreignObject/external reference 多用時は cross-browser verification が必要です。
