Microsoft Wordで「Webページとして保存」したHTMLを使ったことがありますか？
おっと、これはひどい。
Word HTML :10年ほど前にこのようなものを見たことがあるはず…
考え方は素晴らしかったですが、実際に初めて使ったとき思わずコーヒーを口から吹き出してしまった人もいるかもしれません。常に複雑で長ったらしく、Web向けとしてはとても満足できる品質ではありませんでした。大して珍しいことでもないですが…。
正直なところ、MS Wordのユーザーは、おそらく何がベストなのかを特に意識していないでしょう。むしろ、考えているのは次のようなことではないでしょうか。
- ページのロード回数は？
- Web画像のフォーマットは？
- セマンティックWebやSEOへの対応は？
- スクリーンサイズ調整は（柔軟なデザインか）？
- 対応フォントは？
後から考え直して修正する無駄が多い混乱したHTMLは驚くべきこと、というのは明白ですね。
SVGは新たな「Webページとして保存」なのか？
最近、SVGが流行っていますね。PhotoshopやSketch、Illustrator、Inkscapeなどのよく知られる画像編集アプリには大抵「SVGとして保存」があって、うれしい限りです。
しかし、MS WordからHTMLへの変換に似たようなリスクもあります。ソフトウェアメーカーは、できるだけ良質でパワフルな画像ツールを作ろうと競争を続けています。3Dモデリングインターフェイス、透視変換、ベベル、フォント作成などの驚くような機能が詰め込まれることになるかもしれません。
だからこそ、完成画像ををSVG形式に出力すると、結局、WordとHTMLのような関係になってしまいます。
デザインの自由度という点からすれば良いことですが、大抵のSVG制作には不向きです。SVGの主な機能だけを利用できるシンプルなツールが好ましい場合もあるのです。
SVGの主な機能とは？
SVGにはWebであつかうにはとても便利な機能が数多くあります。以下はその例です。
- 数学的コントロール：SVGは効果的で簡潔なシェイプとレイアウトを持つ言語で、エディターで編集できます。
- シンボル：CSSに少し似ています。図形を一度定義すれば、後で好きなときに呼び出せます。
- パターン：CSSのタイル状の背景画像と同様に、小さい画像を使って広範囲をカバーできます。
- マスク：ハードベクトルシェイプや、よりソフトなアルファチャンネルマスクを使ってマスクがかけられます。
- ブレンドモード／チャンネル：Photoshopと同様に、重複したレイヤーの相互作用（暗さ、ハードライト、覆い焼きなど）の調整ができます。
Boxy SVGを試してみよう
Boxy SVGはChromeアプリとして公開されている、シンプルな無料ベクトルエディターです。問題なくSVGの主な機能にフルアクセスできます。
ベクトルエディターについては知っていると思いますから、総合的なレビューは控えますが、私が気に入っている機能について幾つかご紹介します。
基本描画ツール
期待どおり、Boxyには、ペンやベジェ曲線、テキスト、SVGの基本シェイプ（長方形、円、三角形ほか）などのベクトル作成ツールが一式搭載されています。
もっと面白いメニューは、右側のパネルに用意されています。
アイコンの意味は、右から順番に次のようになっています。
- フィル
- ストローク
- 合成（レイヤー）
- 表示（ドキュメントサイズ、セットアップ）
- 調整（揃え、変型、Zオーダー）
- タイポグラフィー（フォント、パス上でのサイズとタイプを含む）
- DEFS（パターンやシンボルなどの再利用可能なリソース）
- マスク（ベクトルとアルファ）
- 形状（ポジション、サイズ、回転）
- パス（パスへの変換、合体、除去など）
- 出力（PNGへも可能）
フィルとストローク
予測できるカラーピッカーやグラデーション調整のほか、Boxyにはとても優れた「パターンフィル（pattern-fill）」オプションのストライピー・ボックス（stripey box）があります。パターン・ボックスをクリックするとDEFSパネルが開き、そこにパターンが格納されています。
DEFSパネル
たぶんSVGフォーマットで唯一優れている点は、「定義」のコンセプト、つまり<defs>でしょう。SVGドキュメント上部のセクションで、SymbolsやPatternsなどの再利用可能リソースの定義ができます。
グラフィック要素向けの<style>ブロックに少し似ています。Boxy SVGを使えば、シンボルやパターンを簡単に作成、管理、再利用できます。Boxyの中でどのように表示されるか見ていきます。
シンボル：作成した図形を1つ選び、シンボルメニューの「+」ボタンをクリックすると、シンボルパネルの中に表示されます。
Boxy SVGでのDEFSの使用
IcoMoonで作成したSVGアイコンをBoxy SVGで開くと、シンボルメニューの中にすべてのアイコンが表示されます。作成したアイコンをメインドキュメントビューから削除しても、DEFSパネルには残ります。
パターン：パターンメニューの「+」ボタンをクリックすると、パターンを追加できる新たなキャンバスが表示されます。作業が終わると、すぐ使える新しいパターンがFILL and STROKEパネルに表示されます。
COMPOSITING（合成）パネル
SVGではブレンドモードのサポートがよくできており、ベクトルシェイプをより「Photoshop的」な方法で作用できます。シェイプを1つ選択し、ドロップダウンリストのDarken、Multiply、Color Burn、Difference、Hard Lightなど、Photoshopでおなじみの機能を試せます。
MASKS（マスク）パネル
マスキングもSVGの優れた機能の1つで、あらゆるデザインに応用できて便利です。イメージの上にマスクシェイプを作成し、イメージとシェイプの両方を選択したあと、MASKメニューの「Clip」をクリックするだけでマスクをアクティブにできます。
アニメーション：Boxyでのマスキング
その他にもタイポグラフィーコントロールやパスファインダーツールなど素晴らしい機能がたくさんありますが、ここで多くを語るのは控えようと思います。時間さえあれば試せますので、ぜひ使ってみることをお勧めします。
SVGを出力するベクトルアプリがあっても、なぜ使うべきか？
Boxy SVGを試すべき理由は2つあります。
- 第1に、BoxyはUIオプションを制限して、SVGの特長が体験できるからです。Webアイコンやインフォグラフィック、チャートなどを上手く設計してみましょう。
- 第2に、Boxy SVGは適切で効率的、かつ分かりやすいSVGを書いてくれるからです。HTMLが使いやすいと感じている人は、好きなテキストエディターでSVGファイルを開くと、きちんと構成された簡潔で分かりやすいファイルであると気づくはずです。
自分のCSSのクラスを、SVG要素と上部の<style>ブロックに加えれば、さらにパワフルになります。ホバーエフェクトやCSSトランジション、アニメーションへの挿入が容易になります。
はじめのうちは比較的シンプルな作品にしておけば、目の前のコードの理解につまずかないでしょう。優れた機能がたくさんあっても、素晴らしいSVGがないツールはたくさんあります。
今のところ、唯一BoxyにないSVGの機能は、ぼかしや色調などのSVGフィルターの適用でしょう。しかし、コードが編集できるので、SVGドキュメントに手書きでコード化したフィルターを入れるのはそう難しいことではありません（それに粋な勉強にもなります）。
まさにシンプルさこそが、特筆すべき機能なのです。
このアプリケーションは100%無料で広告も入っていません。その理由はよくわかりませんが、儲けものですよね？
私にとっては、Boxy SVGは｢SVGをエクスポートするベクトルエディター｣というより、むしろSVG言語用のWYSIWYG UIです。
その違いは微妙ですが、重要な点だと思います。
（原文：Boxy SVG: A Fast, Simple, Insanely Useful, FREE SVG Editor）
［翻訳：Noriko O. Romano］
［編集：Livit］
