IvanoffツイートするいまやモバイルアプリのデザインでもWebデザインでも、欠かせなくなったSVG画像。ブラウザー上でサクッと編集できる、SVGエディターを紹介します。SVG画像の普及率は、PNGやJPGといった人気ビットマップフォーマットに比べれば低いかもしれません。そのメリットから、プロジェクトにSVGの導入を検討するデザイナーが増加してきています。いままでは、IllustratorやInkscapeといったデスクトップアプリケーションが普通でしたが、2017年となった現在では、Webブラウザー上でもベクターデザインができます。そこで、無料のWebベースのSVGエディターを探している人のために、6つのおすすめエディターを紹介します。VectrVectrはビギナーにもSVGのベテランユーザーにもとてもおすすめです。インターフェイスが簡潔で、使いもしないような大量のツールに圧倒されてしまうことがありません。なにに使うのかも分からないようなツールに困惑することがないので、SVG初心者にはぴったりです。チュートリアルも付いているので、SVGの完全初心者でも素早く作業を始められます。機能が少ないわけではありません。シェイプ、テキスト、レイヤー、シャドウ、ボーダー、背景など基本的な機能はすべてカバーしています。デスクトップエディターのようなすごさはありませんが、手早くデザインや編集が可能で、それだけでも十分過ぎると言えます。ゼロから新規ファイルを作成したり、既存画像をアップロードして編集したりできます。地図や詳細なダイアグラムなど、複雑なイラストのアップロードがいつもうまくいくとは限らず、イライラさせられることもあるかもしれません。アイコンやロゴなどシンプルなSVGであれば快適に動作します。使いたい機能がない場合は、追加機能があるVectrのデスクトップ版が利用できます。Windows、Mac、Linux、Chromebookに対応しています。Vectrのもっともすばらしい点は、Vectrで作成したグラフィックをVectrサイトから直接リンク・埋め込み、SVGのホスティングサービスとして活用できることです。SVGファイルのアップロードを禁止しているサービスが多い中で、これは大きなメリットです。SVGファイルの表示はできても、サーバーへのアップロードをブロックしているWordPressやMedium、Tumblrなど活用できるからです。Vectrにはまた、ベクターグラフィックをVectrエディターパネルで共有し、ほかのユーザーに編集してもらう機能もあります。テンプレートとしてSVGロゴを提供し、ユーザーが独自の条件に合わせてカスタマイズして、ブラウザーですぐに使えるということです。Vectrは最近WordPressプラグインもリリースしました。RollAppRollAppがここで紹介しているほかのツールと違うのは、ホームページを開いてもツールがすぐに表示されないことです。RollAppは単一のアプリではなく、アプリのパッケージであり、Web版SVGエディターはそのうちの1つに過ぎません。いえ、Inkscapeのブラウザーベースのバージョンなのでツールとしては抜群です。RollAppを使うにはアカウントが必要で、新規アカウントを登録するか、Google、Facebook、Amazonのアカウントを使ってログインします。個人的には大量の新規アカウントを作成したあと、不要なアプリであったと気づかされるのが非常に嫌なので、後者はとても便利です。ログインをすると次の図のようになります。Inkscapeが燦然と登場します。Inkscapeが今回紹介するアプリの中でももっとも多くの機能に恵まれたアプリであることに疑いはありません。ブラウザーで使えるのです。リスト内のアイテムを個別に比べることはしませんが、Inkscapeにはレイヤー、オブジェクト、パス、フィルター、エフェクト、拡張などすべての機能が備わっています。インターネットのサーバーでアクションを実行しているので、大きなファイルは動作がさほど速くないことに注意してください。大きく複雑なファイルの編集に関しては、RollAppは理想とは言えないかもしれません。基本的な編集の範疇を超えるタスクについては、いま出回っている中で最良のWeb型エディターでしょう。BoxySVG1年以上前にBoxySVGについて取り上げたことがあるので、SitePoint読者の人ならすでに知っているかもしれません。SVG」って知ってる?』で紹介しているので、ここでは省きます。重要なのは、BoxySVGが上の記事のレビュー時にはなかった、コードインスペクターを追加したことです。Web開発者にとって、コードインスペクターはSVGツールとしてかなり大切なものだからです。JanvasJanvasは数年前には非常に人気のあるSVGエディターでした。残念なことに進歩を続けるWebの世界にありながらまったく変化がありません。機能してはいますがアクティブな開発はされていないようで、選択肢としては劣ります。実際にSitePointのAlexがJanvas(有料版を含む)を多用していたのは2013年から2014年のことでした。そのときにはJanvasのGoogle+では、しばらくサポートに関する質問に答えていました。Janvasは確かに心強いアプリだったのです。Janvasが抱える大きな問題は、時代にあまり追い付いていないということです。ブラウザーが進歩を遂げる中、進歩をしないアプリは日に日に不具合が多くなっていきます。Janvasにはシェイプ、テキスト、描画ツール、バス、マスク、レイヤーなどたくさんの機能がありますが、フォーラムに寄せられたユーザーレポートにもあるように、思い通りの結果をもたらさない機能も多くあります。Chromeアプリとして新バージョンが登場するという明るいニュースもあります。これで問題が修正されることを祈るところです。チェックしてください。メニューが左側にある、クリックして開く形のサブメニューなど、デスクトップアプリから移植されたWebアプリとは見た目も使い勝手とは違う、Webアプリらしいところが私のお気に入りです。DrawSVGでは、オブジェクトの描画、修正、レンダリングができます。基本的なシェイプ、ベジェ曲線、直線・カーブテキスト、いろいろなタイプのストローク、塗りつぶしスタイルが可能です。SVGからPNGへのエクスポートもできます。SVG-editSVG-editは2000年代中期あたりからあり、ブラウザ型ベクターエディターのおじいさん的存在です。サーバー側での機能はなくブラウザーのみで機能するため、アプリに機能を追加しない限り作品を保存できません。基本的なシェイプを描いたり、バス、レイヤー、グラデーションを使ったり、SVGソースの閲覧、編集をしたり、PNG、JPEG、BMP、WEBPにエクスポートしたりできます。最後に6つのSVGエディターのほかにも紹介したいものがたくさんあります。IllustratorやInkscapeといったデスクトップ型SVGエディターで本格的にSVGを扱っている人にとって、紹介したツールでは物足りないかもしれません。簡単、スピード、柔軟性を重視するなら、今回紹介したエディターにも十分な価値があります。追記:SVGエディターというよりはUIデザインツールに近いのですが、Figmaも良いかもしれません。優れた機能を持ち、最適化されたSVGのコードを生成します。Edition」を発表した。00WebProさくらのレンタルサーバの新機能として「新さくらのブログ」を開始さくらインターネットは、「さくらのレンタルサーバ」の新機能として「新さくらのブログ」を提供開始した。プライム・ストラテジーがWordPress脆弱性診断開始プライム・ストラテジーは、WordPress簡易脆弱性診断サービスを開始した。QTmediaとさくらがLGWAN対応のWebサイトホスティング開始さくらインターネットとQTmediaは、行政専用ネットワークLGWAN「LGWAN対応自治体向けWebサイトホスティングサービス」の提供を2024年7月25日より提供開始した。事業者はLGWANに対応する環境を自ら構築することなく自治体のWebサイトを運営できるようになる。00WebPro「KUSANAGI」の新バージョンでは複数のNginxのバージョンのインストールが可能にプライム・ストラテジーは超高速CMS実行環境「KUSANAGI」のバージョンアップを発表。新バージョンでは複数のNginxのバージョンのインストールが可能となる。BIGLOBE調べBIGLOBEは「インターネット利用に関する意識調査」結果の第3弾を発表した。「ウェブサイトの表示が遅く、ストレスを感じる時間」の質問では、5秒未満と回答した人の割合は4割弱という。スマホお気に入り一覧マイページ。