名前の通りAdobe社開発の無料のベクター系お絵描きアプリで、標準でPDFの書き出しに対応しています。ベジェ曲線の制御点を編集するツールや多角形ツールが無いなど他のアプリに比べて機能が少ないものの、その分イラストを描くに当たって重要な機能はタッチデバイスでも使いやすいようデザインされており、筆圧感知機能を搭載したスタイラスにも対応しています。余計な機能が多いよりも必要な要素だけに特化した方が使いやすくなりますし、iOSでのドロー系お絵描きアプリとしては個人的に一番お薦めです。残念ながらSVG出力機能が無いので今回のテーマでは条件外なんですが。CloudというAdobeのクラウドサービス(有料)を通じてデータ共有もでき、Illustratorでの編集も容易な独自ファイルも作れるのでSVGへの変換も簡単に行えます。※有料フローチャートやダイアグラムを作成できるアプリです。Diagramは通常の利用は無料ですがSVG出力機能はアプリ内課金で有効になります。独特のジェスチャー操作で図形を編集できる機能があり、慣れないと最初は戸惑うかもしれませんが使い方を理解してくると、タッチデバイスの利点を活かして素早く描けるので便利です。この3つともAndroid版もあります。※有料Isometicは独特なアプリで、このような菱形の図形を並べてイラストを構成することができます。シンプルなだけに色を様々に変更したり並べ方を工夫したり、まるでパズルのような魅力があります。公式サイトには解説動画や作例も載っているのでそちらが分かりやすいですね。写真を「ポリゴン風」に加工できるアプリです。Effectsこのアプリも写真を加工してSVGファイルとして出力できます。Android版もあります。※有料どちらも無料版もありますがSVG出力機能は有料版で有効になります。両方使ってみての感想としては、iOSのアプリに比べると洗練されていなくて使いづらい、というのが正直なところですね......。AndroidにはSVG出力できるお絵描き系のアプリは他にも多数あったりします。Freeいずれもきちんとしたイラスト制作には力不足ですが、メモ書き程度なら向いているかな、という感じですね。Demoフローチャート作成アプリはiOS版でも紹介しましたが、DrawExpressはジェスチャー操作に慣れてくると手早く描けるので、お勧めです。あとはSchematicが他のアプリとは変わっていて面白いです。SchematicSchematicは回路図の作成に向いているアプリ。機能の多い有料版も用意されています。EffectsiOS版も紹介しましたが、写真の階調を落として色調を変更できるアプリです。OSで使えるアプリです。Diagramsただ、どれもオンラインエディタやフローチャートの項目で紹介した通り、Chromeに限らずWeb版で使えます。フレームワークここでのフレームワークはスクリプトでSVGファイルを出力できるタイプのものを集めてみました。それぞれ詳しい説明をし出すと長くなるので、箇条書きで。QRコードを作成ハードウェア(デジタルペン)SVGが出力できる(スマートフォン・タブレットを除いた)ハードウェアというとペン型のガジェットでそうした機能を持つものがあります。※有料ペンタブレットでお馴染みのWacom社の製品、Inklingは標準でSVGが出力できます。Inklingはレシーバーと特殊ペンで構成され、特殊ペンに内蔵されたボールペンで描いた軌跡がレシーバーで取り込まれる仕組みです。なによりSVGでも出力できるためこれまで紹介してきたツールでも編集が容易なのは大きな利点です。Illustrator形式での出力機能を利用して、Illustratorで一旦開いて編集・修正を行ってからSVGに変換した方がいいでしょう......というのも私自身この製品を持っているのですが、描いてるうちに線のずれが起きて微調整が必要なことがままあるためです。した落描き程度はともかく常用にはまだ少しなー、というのが正直な印象ですね。2011年10月発売に発売された製品ということもあって、後継機に期待した方がよさそう。7回この商品を含むブログを見るぺんてる社のairpenでもSVG出力ができます。airpenによってはiOS/Androidと連携できるものがあるのですが、SVG書き出しはPC用の読み取りソフトで対応しているようですね。こちらの製品は持っていないので未検証。airpenシリーズも最新機種の発売が2012年5月とあって、Inklingも含めデジタルペン界隈が今後も後継機を出していくのか、それともタブレット製品に押されて消えていくのかは不透明なところ。あとがき私はSVG関連の情報を普段からチェックしていることもあって、気軽に書き始めたのですがいざ調べてみると関連ツールが次々に見つかり、それらを実際に一つ一つ使ってみたり、購入したり、検証していたら結果的に2ヵ月以上かかってしまいました。長文になってしまったのも反省点ですね、こんな長い記事を最後まで読んでいただきありがとうございます。それでも当然ながらネットにある全ての情報を網羅しているわけではありませんから、他にももっと便利なものがあるよ!という方は是非ご教授お願い致します。この記事について情報提供をお願いする一方で、こうしたまとめについては個人で管理するよりもwikiのような多人数で情報を集約・編集する方が良いだろうなー、とも感じています。Wikipediaこちらは更新頻度が高いものの、SVGに限らずベクター系全般とややジャンル違い。したものかなー、と考えているところです。この記事のような、誰が調べても同じような結果を得られる情報*8のまとめの場合は、著作権法において創作性のある著作物としては扱われないため、(※紹介文などを除いた)ツールのリストだけならば自由に利用できますから、誰でもwikiやGitHubか何かに転載して管理してもオッケーです。ここまでまとまった情報は世界的にもおそらくまだ無いと自負しているので、翻訳して英語圏にも放流するとアクセスや反響があるかもしれませんよ。利用しやすいよう、紹介文やスクリーンショットなどを除いた簡易まとめも置いておきます。今回紹介したツールのリストhttp://okiru.net/misc/20140526/svg_tools.html管理人お薦めのツール今回の記事は網羅的に蒐集・紹介するのが主眼でとても長い記事になってしまいました。ここではそれはそれとして、「で、使いやすいツールって実際どれよ?」というのを個人的な主観でピックアップして、ここだけ読んでも分かる構成にしてみました。拡張機能SVGを利用する際にはHTML+CSS+JavaScriptと連携させて使うケースが多いでしょう。CotEditor、BracketsともSVGだけに限らず利用できますから活用の場は大きいです。Illustratorは高価ではあるのですが、やはり使いやすさ・機能、そして関連書籍や学習環境も含め群を抜いています。オープンソースで無料で使えるInkscape。X用ですがSketchが最近注目を集めています。それぞれ使い方を学ぶならInkscapeではこちらの解説サイトが、Sketchならこの電子書籍が参考になるでしょう。最適化ツールそしてオーサリングツールから書き出したSVGには無駄な記述が多いので、それをカットしてファイルサイズの削減を行えるのが最適化ツールです。中でもSVGOはGUI版とGrunt版も揃っているので使いやすいでしょう。フローチャート・ダイアグラム作成フローチャート・ダイアグラム作成ならばdraw.ioが良いですね。スマートフォンで使うならDrawExpressですね、iOS版、Android版があります。Ideasが断然使いやすいです。RAWはExcelのデータを使って手軽にグラフなどの表現が行えますし、D3.jsで使いやすいようJSON形式での出力も可能なので、お勧めです。SVG関連ツールを120以上使ってみて個人的なお薦めツールを紹介でした。いう条件で選別をしています。2014の参加記事です。昨日はmemoca...2014-05-06ポリゴン風イラストを自動で作成できるアプリまとめと、その可能性ちょうど一年ほど前の2013年5月にこの記事が話題になりました。3はてなブログをはじめよう!rikuoさんは、はてなブログを使っています。ブログを報告する引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。