Help us understand the problem. What is going on with this article?

SVGコードの効率的な編集環境

More than 5 years have passed since last update.

IllustratorやInkscapeもいいけど、せっかくSVGはxmlベースなんだから直接ソース編集しようぜ。

ということでMacユーザならおなじみのテキストエディタCotEditorちゃんでSVGを編集する環境を作ります。

従来のOS XでのSVG編集の不便な点

  • OS Xではプレビュー.appでSVGは開けないしSVGZはQuick Lookすらできない
  • 「InkscapeとかIllustratorで編集できるよ」とは言ったものの:
    • 独自にレンダリングするからブラウザで見るのと結果が違う (とくにスタイルシートとかは酷い)
    • 所詮は画像編集ソフトだからコードは直接弄れないしアニメーションも無理
    • ちょっと見たいだけなのにソフトウェアの起動に時間がかかる
  • qlmanageとかコマンドラインでPNGに書き出しできるよ」とは言ったものの:
    • いちいちサイズを指定する必要がある
    • 背景が透過されなくて結局使い物にならない
  • 「Safariとかwebブラウザで見られるよ」とは言ったものの:
    • SVGパーツをプレビューするにはwebブラウザはウインドウが大き過ぎるし、いちいちウインドウサイズを変更するのはめんどう
    • ローカルファイルのSVGZをSVGに展開できないので、SVGZはいちいち手動で解凍する必要がある

まぁ、こういう諸々の不満を解決するための環境づくりです。

用意するもの

以下の3つを組み合わせます。全部フリーウェアです。

CotEditor icon Gapplin icon zip.png

  • CotEditor (テキストエディタ)
  • Gapplin (SVGビューア)
    • 外部のエディタで編集しつつプレビューすることに重きを置いたSVGビューア
  • CotEditor用SVG編集スイート (CotEditor用マクロ)
    • CotEditorでのSVG編集を助けるマクロ・CotEditorとGapplinの連携マクロの詰め合わせ

インストール方法はぞれぞれの案内にゆだねます。

Gapplin の外部エディタに CotEditor を指定

環境設定から選んでおいて下さい。これでGapplinから「編集」を実行したときにCotEditorでソースファイルが開くようになります。

Gapplin環境設定

また「ファイルが更新されたときに自動的に再描画」をチェックしておくと良いでしょう。

編集手順

こんな感じでGapplinでSVGの描画をプレビューしながらCotEditorでSVGソースを編集します。

screenshot.png

ファイルオープン

a. プレビュー先行型

  1. GapplinでSVGファイルを開く
  2. (ファイルがSVGZ形式だった場合)GapplinでプレーンテキストのSVGに展開する
  3. ⌘+E またはメニューの「ファイル > 編集」からCotEditorでファイルオープン

b. エディタ先行型

  1. CotEditorでSVGファイルを開く
  2. ⌘+Shift+R またはスクリプトメニューの「SVG > Preview」からGapplinでファイルオープン

編集

CotEditorでソースを編集し保存をすると、Gapplinのビューも更新されるので、ビューを見ながらエディタで編集を進める。SVGスイートにはW3Cの文法チェックやスニペットなども入っているので適宜使うと便利。

編集終了

  1. CotEditorで保存をする
  2. 必要があればGapplinでSVGからSVGZに変換する
  3. 必要があればPNGなど他の画像形式に書き出す

ここが便利

まぁ、最初に上げた不満が解決するわけですけれど、それ以外にも:

  • 使い慣れた普段のテキストエディタが使える
  • アイコンとかの真っ白な画像も背景色が切り替えられるからちゃんと見える
  • escキーでちゃんとキーワードの補完もするよ
  • 軽い・コンパクト
  • 日本語ローカライズ済み
  • バッチ処理用のAutomator.appアクションも付いてくる

なんかがいいんじゃないかと思います。

おわりに

お気づきかもしれませんが、CotEditor用SVG編集スイートとGapplinは拙作です(というかCotEditorも開発やってますね)。

そうです、CotEditorでSVG編集がしたいがために、こんなにマクロを書いて、シンタックス定義を書いて、そしてSVGビューアそのものまで開発したんです。CotEditorのためです。なのでGapplinとCotEditorとの相性の良さは保証します。 SVG編集はCotEditor 、覚えておきましょう。

あとGapplin使って下さい。こんだけ書いといてなんですが、CotEditor以外でも使えます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away