聴く耳を持たない(片方しか)聴く耳を持たない(片方しか)読者になる聴く耳を持たない(片方しか)この広告は、90日以上更新していないブログに表示しています。私はTwitterでよくSVG関連情報をチェックしているのですが、SVGってどう作ったらいいの?みたいな投稿をしばしば見かけます。SVGは地味な存在ですが近年は徐々に注目を浴び、関連ツールも増えてきたのでそうした人向けにSVG制作ツールって結構たくさんあるよ!と、まとめてみた次第です。114個って多過ぎ!......って思うかもしれない、いや正直オレもそう思う。最後に114個の中から管理人のお薦めツール10選っていうのもまとめておいたので、さっくり読みたい人はそれだけチェックすれば良いかと。そもそもSVGとは、なに?そもそもSVGってなに?という人もいるでしょう、それについては以前記事にまとめました。SVGとはなにか?とSVGの学習に役立つサイトや書籍の紹介SVGの説明と、SVGの学習に役立つサイトや参考になる書籍の紹介をしています。簡易目次的なジャンル別のリストです。アプリフレームワークハードウェアまとめと管理人お薦めのツール今回紹介するSVG関連ツールのピックアップ条件は概ねこのような基準です。SVGの編集・出力ができるただし単なるテキストエディタは除く最終更新が2012年以降SVGはXMLなので大抵のテキストエディタで出力が可能ですが、それはさすがに除外。1.0は2001年にW3Cの勧告になっており、実は割と古い規格です。そのため10年以上前に制作されたツールもあります。いったケースは足切りしたいので、最終更新がだいたい2012年以降のものとしました。あと、SVGを扱ったJavaScriptライブラリ系(Raphaël.jsやD3.js)は多いので、これはまた別の機会にまとめます。利用するのに有償のものは「※有料」と表記します。それが無いものは無償で使えます。SVG関連ツールを紹介していきます。SVGエディタテキストエディタベースで且つ、SVGプレビュー機能や何らかの連携機能のあるものをピックアップしてみました。組み合わせた開発環境です。SVG編集支援機能、バリデーション機能、また編集中のSVGファイルをGapplinでプレビュー、もしくはブラウザ呼び出しでチェックするなど、これらを連携させた総合的な運用をこちらの記事で分かりやすく解説されているので参考になるかと。Qiitaこの記事を書かれているのはCotEditor用SVG編集スイートとGapplinを制作し、CotEditorの開発にも参加されている@1024jpさん。GapplinにはPNGなどへの書き出し機能もあり、CotEditorはSVGファイル以外にももちろん使えるテキストエディタですからお薦めです。有料アプリですが公式サイトに試用版も用意されています。公式サイトAmayaAmayaはW3Cによるオープンソースのエディタ・ブラウザです。SVGに限らず、(X)HTML,CSSの編集に対応しています。Wordのオートシェイプで描いたようなロゴマークには一抹の不安を覚えるのですが、中身はしっかり実用的です。最終更新が2012年1月なので、今後予定されているSVG2の勧告などに対応されるのかは気がかりな点です。Systems社のオープンソースのエディタです。基本的にはHTML/CSS/JavaScript向けに開発されていますが、拡張機能を追加することでSVGのプレビュー機能も使えます。Preview」と検索すると目的の拡張機能がヒットするはずなので、そこからインストールできます。Editorは名前の通り、XMLエディタです。他のエディタには無いXMLを活かした編集と作成支援が行えるのが魅力ですね。Editorならきちっと対応しています。AtomAtomはGitHub製のエディタです。X用ですが、先日オープンソース化が発表され、今後Windows用、Linux用も開発される予定です。SVGは拡張機能で使えます。オーサリングツールオーサリングツールとはコードを書かずに制作できるソフトウェアのことです。ベクター系はドローソフトとも呼ばれます。Illustratorでしょう。Adobe税と揶揄されるように決して安価ではないのですが圧倒的な人気を誇り、関連書籍も揃っているなど学習環境も含め他のソフトウェアに比べて格段に整っているのが現状です。8のころから利用していますが、使いやすさは他のソフトに比べて随一だなと感じています*3。※有料Painterでお馴染みのCorel社のドローソフトです*4。Cloudに比べて安価なこともあって、近年は再注目を受けている...らしいですよ。InkscapeInkscapeはオープンソースのドローソフトです。無料で使えることもあってか利用者も多く、SVGの話題では必ずInkscapeを紹介されるので「SVGとはInkscapeの独自ファイルなんだ」と勘違いしている方も少なくありません。Illustratorの代わりになるか......というとさすがに疑問符がつきますが、ちょっとしたイラストの制作や編集であれば十分に活用できるでしょう。※有料ATOK、一太郎で有名なJustSystems社のソフトウェアです。「いやいや、イマドキ花子て」......と失笑まじりのイメージが正直あると思うのですが、比較的安価な国産のドローソフトとしてなかなか優秀だったりします。算数・数学用の長さ記号、角度記号などが用意されていたりと地味なニーズにも丁寧に対応されており、他のツールには無い花子ならではの素材が盛りだくさんで意外に使える場面が多いでしょう。SVGの出力はできても、SVGファイル自体は開けないんですよね......。DrawLibreOfficeはOpenOffice.orgから派生したオープンソースのドローソフトです。Officeみたいなものなので、WordやExcelの図形(オートシェイプ)のような操作で図や絵を描くことができます。Karbonこちらもオープンソースのオフィススイートです。以前はCalligraでなくKOffice、KarbonでなくKIllustratorという色々な意味で攻めた名称でした。DesignerはイギリスのXara社開発のソフトです。このソフトで特徴的な機能としては手振れ補正の調整が後からでもできることですなかなかユニークなので、他のソフトにも欲しいくらいですね。※有料DrawPlusもイギリスのSerif社開発のドローソフトです。最新版は有料ですが、古いバージョンを機能制限したものは無料で使えます。利用に当たってはユーザー登録が必要です。※有料PhotoLineは名前の通りベクター系だけでなく写真の編集なども行えます。印象としては全体的にそつがないというか、地味ながらも堅実に機能が整っているという感じですね。面白い機能としてはバーコード生成機能なども用意されています。House社開発でしたが、2003年にMicrosoft社に買収されその後のさらなる躍進が期待されました。......しかし2012年12月に開発の終了が発表。そのため本来は有料ソフトでしたが、開発終了を機に現在は無料版が公開されています。そんな事情ですので使い方を憶えても今後のことを鑑みるとあまりお勧めでないのですが、一応紹介。Illustratorに比べてもブラシ機能が充実しており、その豊かな表現能力にファンも少なくなかったのですが......買収以後の方が却ってブラシ機能が利用し辛くなった印象です。SVGの出力はできても読み込みはできません。※有料FireworksはDreamweaverやFlashと同じく*5、旧Macromedia社の開発したグラフィックソフトです。同社は前述のAdobe社に買収されます。SVGには標準では対応していませんが、拡張機能でSVG出力が可能になります。Export旧Macromedia社としては、おそらくFireworksをAdobe社のPhotoshop・Illustratorへの対抗馬として開発してた面もあったのでしょうが、買収された今となっては位置づけが難しいのか、2012年に発表されたCS6を最後にこちらも開発の終了が決定しています。Editorは有償のソフトウェアですが、公式サイトに試用版も用意されています。肝心の中身は、......うーん、今後に期待といったところでしょうか。GIMPGIMPはオープンソースの画像編集ソフトです。基本的にはビットマップ系の画像を制作するのに向いているGIMPですが、「パスをエクスポート」で一応SVGファイルの書き出しもできます。選択範囲の形状を出力する場合などに使える程度で、あくまで補助的な機能ですからイラスト制作などは向きません。オーサリングツールへの拡張機能オーサリングツールに便利な機能を追加したり、SVG書き出し機能を使えるようにする拡張機能を紹介していきます。Illustratorにレイヤー毎にSVGを書き出す機能を追加します。同様にJPEG、PNGも出力できます。Inkscapeへの拡張機能SoziSoziはInkscapeへの拡張機能です。このようなぐりぐりと動くPrezi風プレゼンテーション資料を作成できます。JessyInkJessyInkは同じくプレゼンテーション資料を書き出せる拡張機能。最近のInkscapeであれば標準で備えられているはずです。使い方はこちらのサイトが詳しいですね。Photoshopはとても人気のある高性能な画像編集ソフトウェアです。ラスター画像には強い一方でベクター系は不得手で、そのため初期設定ではSVGを扱えません。「どうしてもPhotoshopでもSVGを出力したい!」という需要は多いのかSVGを出力できる拡張機能があります。CCであれば拡張機能を追加せずとも、SVGファイル出力は可能だったりします。ヘルプこの機能は各レイヤーをJPEG,GIF,PNGに書き出せる機能なのですがこれをさらに拡張して、SVGファイル書き出し設定も有効にさせます。その指定の仕方はこちらの記事が参考になるかと(英文ですが)。作り設定変更を反映させます。CC\ただこうした拡張機能で一応はSVGファイルの出力が可能になったものの、この書き出し機能が実際使いやすいのか?というとかなり疑問で、Photoshopに固執せず普通にドローソフトを利用した方がいいんじゃ......と思ってしまいます。最適化ツール特にオーサリングツールで制作されたSVGファイルには無駄な記述や、独自要素などが盛り込まれ全体のファイルサイズが肥大してしまうことが多いため、最適化ツールを使い軽量化をすると良いでしょう。Cleaner、ドラッグ&ドロップで手軽に行えます。大量のファイルに適用するのなら後者2つの方がいいかもしれません。scourはPythonで制作されておりそのまま使える他、上述のInkscapeにも標準で搭載されているのでInkscapeから書き出す際にscourで最適化して出力もできます。SVGOはNode.jsベースの最適化ツールです。難しそう」......という人向けに複雑な設定の必要のないGUI版もあります。SVGOにはGruntで自動処理化するためのGruntプラグイン版もあり、実際に活用する場ではこれを利用することが多くなるのではないでしょうか。マインドマップマインドマップは考えなどをまとめたり整理する際に使われますね。FreeMindFreeMindはマインドマップのツールとして代表的なものです。オープンソースウェアということもあってか、大抵のマインドマップツールにFreeMind形式のファイルを出力する機能があります。※有料XMindもオープンソースのマインドマップツールですが、機能の多い有料版も用意されています。残念ながらSVG出力機能は無料版では使えないので、ここでは有料に分類。Visioは組織図やフローチャートなどの図表を作成するソフトです。テンプレートや素材が充実しています。Officeシリーズに組み込まれました。Diagramsはオンラインエディタ版、Windows8/RT版、Android版とバリエーションが豊かなツールです。draw.ioGliffydraw.ioとGliffyはオンラインで使える作図アプリです。図表を書くためのテンプレートや素材・アイコンが準備されており、それらを配置するだけで手軽に作成できるのが特徴ですね。他にもiOSアプリ/Androidアプリの欄でもフローチャート作成アプリをいくつか紹介しています。数学の幅広い処理やその可視化、化学の構造式の作図が行えるソフトウェアです。※有料Mathematicaは有償の数理処理システムです。Mathematicaは機能がとても広範すぎるので文章で説明するより公式の動画の方が分かりやすいでしょう。Sage*6一方Sageはオープンソースウェアです。様々な計算や多様なグラフ作成などが行えます。構造式エディタ構造式エディタは分子構造を作図できるソフトウェアです。X版、そしてiPad版がありますがSVG出力に対応しているのはWindows版のみ。SketchElはJavaで動作するオープンソースの構造式エディタです。Sketcherはアメリカの国立生物工学情報センター(NCBI)によるオンライン構造式エディタです。Avogadroもオープンソースで、こちらはこのような感じでSVG書き出しが行えます。単純な分子を一つ描画するだけでも、かなり細かくポリゴンで分割するためSVGファイルサイズが相当重くなってしまうのでご注意ください。参考にAvogadroで書き出したSVGファイルを置いておきます。http://okiru.net/misc/20140522/Avogadro.svgこの分子のイラストだけでも2.47MBのSVGになります。拡張機能Blenderはオープンソースの3DCG作成ソフトです。拡張機能の追加でSVGの出力を行うことができます。※有料Mayaはハイエンドな3DCG制作ソフトです。お値段もハイエンドなので試せていませんが、ヘルプで調べてみるとサポートするファイル形式にSVGが挙げられているので大丈夫かなと。ラスター画像からの変換ツールJPEG,GIF,PNGなどのラスター画像をベクター画像に変換して利用したい、という場面もあるでしょう。した時に役立つツールです。Illustratorで変換するのが最も使いやすく編集しやすいので素直にそれが一番お勧め......というのが結論です。言え、お高い有償ソフトウェアですから比較対象としてはアンフェアですが。Magicは回数制限がありますが試用を行えます。PotraceはオープンソースでGUI版も制作されていたりと様々なバリエーションがあるのですが、上述のInkscapeではPotraceをベースにラスター画像を変換する機能があり、その後の編集もしやすいです。ドット絵化への変換ツールラスター画像をベクター画像に変換するツールの中でも、これらはピクセルごとにSVGの要素に書き替える、いわゆるドット絵化するツールです。JavaScriptで作られドラッグ&ドロップで変換できます。成果物の出来としては、画像左のpixel2svgはピクセル毎に愚直にrect要素で置き換えるのに対し、右側のドット絵svg化スクリプトver2では隣接した同色ピクセルを統合し・同じ色なら複合パス化したpath要素で書き出すため、ファイルサイズの面でも描画速度の面*7でも優れているのこちらの方がお薦めです。SVGファイルオンラインエディタオンラインエディタはブラウザだけで制作・編集ができるWebアプリです。インストールせず手軽に扱えるのがメリットですね。これは数も多いのでまとめて紹介。SVGMondrianOpenClipArtですがやはりブラウザ上で動くため、作業としては動作が重く本格的な制作物にはさすがに向きません。この中で特徴的なものをピックアップするとOpenClipArtは各イラストページの「Edit」からオンラインエディタで編集できるのですが、それはさておき、このサイトの特色はクリップアート(イラスト)の共有を目的にしていること。投稿されたイラストはパブリックドメイン、もしくはCC0という非常に自由なライセンスで公開されているため権利的な面でとても使用しやすいです。オンラインエディタとして機能が揃っているという点ではJANVASが最も優れています。先ほど紹介したOpenClipArtに投稿されたイラストを検索して簡単に挿入できる便利な機能もあります。簡単な操作でSVGファイルを作成できるWebサービスです。オンラインエディタに比べ目的や機能が特定の方向へ絞られているため、それぞれ独特のものが手軽に制作できます。svgAvatarsアバターを作成して、SVGで出力できるWebサービスです。Somestuff.ruこれはプロモーション映像を見た方が分かりやすいでしょう。いわゆる「ポリゴン風」と呼ばれる、多面体で色面分割したイラストの作成支援をしてくれるツールです。これを含め「ポリゴン風」のイラストを作成するツールについては先日まとめたので、詳しくはそちらでポリゴン風イラストを自動で作成できるアプリまとめもしSVGでなくPDF出力でもいいならば、便利な他のソフトもあります。Maker画面上の好きなところを4ヶ所クリックすると、前述の「ポリゴン風」なものを自動で作成してくれます。色などは変更可能です。@qrohlfこちらも「ポリゴン風」の背景画像を作成します。Loading...Loading...は背景画像を作成できるジェネレーター。他の人が作ったものをアレンジして使うこともできます。RAWRAWはExcelやスプレットシートのような表形式のデータをコピー&ペーストで様々なグラフを作成できます。出力はSVG、PNGの他、D3.jsで使いやすいようにJSON形式でも出力でき、かなり便利なWebサービスです。手動SVG組版機は、タイトルの通りテキストの文字詰めなどを手動で調整してSVGで出力できます。EffectsSVGにはfilter機能があり、図形や写真に対して様々なエフェクトをかけられます。したfilter機能を試せるページです、機能を組み合わせたりパラメータを変えるとどのような効果になるのか手軽に試せるので面白いですよ。Plantこちらは画像などに対してマスクかける効果を、SVGやCSSで行えるジェネレーターです。本格的な制作物には向きませんが、こうした機能を試せる場としては参考になるでしょう。※有料iOS版もあります。※有料TouchDrawはiOS版、Android版もあります。※有料SVG出力に対応しているのはPro版。公式サイトに試用版がありますがSVG出力機能は制限されています。2014.4.26EazyDrawはバリエーションが豊かなのが特色ですね。(価格は記事公開時)Macアプリではざっとこれくらいですね。私自身がMac機を所有していないこともあって、実際に使用した感想は書けないのですが、レビューや比較記事をいくつかチェックした限り推薦したいのはiDrawはなかなか評判良さそうな印象です。Illustrator形式のPSD,AIファイルを読み込めることもあってかなり使い勝手がいいでしょう。一つは最近注目を集めているSketchです。CS6以後の開発終了を発表して以後、その代替として関心が高まっています。アプリそのものもそうですが、拡張機能開発などの利用者コミュニティも盛んですね。Previewあとはこちらはまたちょっと毛色が違うMacアプリ。SVGKinectで撮影した画像をポリゴン風に加工してSVGで出力できるそうです。私はKinectも持っていないので検証はできていませんが、なかなかすごいツールですね。アプリWindows8.x/RT向けのアプリです。Proはフローチャートの項目でも説明しましたね。Windowsストアで購入すると若干お安いです。touch,iPad向けのアプリです。iOSでSVGを制作するなら、iPadのみに対応したこれらのアプリが機能も多く使いやすいでしょう。