より良いグラフィックのための20の便利なSVGツール

SVGは最近Webデザインで人気を集めており、SVGグラフィックを作成するためにIllustratorやInkscapeのようなツールを使うことができます。しかし、Webデザインに関しては、常により軽い結果に最適化する必要があります。.

ここで SVGを迅速かつ効率的に操作するために使用できる20のツール. 最適化、変換、パターン作成などに役立つオンラインツールがほとんどあります。.

インタラクティブSVG座標系

あなたがSVGを扱うとき、あなたはその座標を離れることができません。これはあなたを助けるために、サラSouidenによる素晴らしいインタラクティブなツールです SVG座標がどのように機能するかを学ぶ. を使う viewBox そして preserveAspectRatio オレンジと紫の線と便利な支配者によって導かれるSVGで、あなたはSVG座標がどのように機能するかについて学びながら遊ぶことができます.

b64

b64 簡単なツールです 画像を最適化してからbase64形式に変換する. SVG画像をドロップして（JPGやPNGなどの他の形式でも機能します）、結果としてbase64 background-imageを使用してCSSを取得することができます。.

SVGO

エクスポートされたSVGには 不要な情報 レンダリング結果に影響を与えずに削除できます。あなたがしたい場合は エディタのメタデータ、コメント、隠し要素を削除する, あなたはSVGOを使うことができます.

あなたはnpm経由でSVGOをインストールすることができます, $ [sudo] npm install -g svgo SVG最適化を処理するためにドラッグアンドドロップを提供するGUIバージョンを使用する.

SVG OMG

SVG OMG コマンドラインを SVGO （前のツール）に GUIのバージョン もっと直感的で使いやすいです。ただ ボタンを切り替える 各機能を有効または無効にします。最後に、画像ファイルやコードとして結果を取得することもできます.

今SVG

Illustratorで作業しているとき、エクスポートされたSVGには必要のない情報がいくつか含まれています。このツールを使えば エクスポートしたSVGの最適化バージョンを入手する あなたのIllustratorワークスペースから直接。このツールはSVGを最適化するためのいくつかのオプションを持つパネルを追加します。 SVG NowはCreative Cloudアドオンページから入手できます。.

SVGからPNGへのコンバータ

をしたい SVGファイルをPNG形式にエクスポート? Illustratorのように開くためのアプリケーションを開かずに？このSVGからPNGへの変換ツールを使用して、必要に応じてPNG形式の画像出力とPNG Base64データURIを取得します。.

SVGサーカス

ローダーアニメーションがクールだと思うのであれば、SVGを使って簡単にアニメーションを作成できます。 SVGサーカス. ツールにより、次のことが可能になります。 自分のローダー、スピナー、またはループアニメーションを使用して類似のものを作成する. パネルから 'Actor'、位置、サイズ、色などを設定し、エクスポートして結果を取得します。.

SVGスプライト

SVG SpriteはNode.jsモジュールです。 たくさんのSVGファイル, そして それらをSVGスプライトタイプにベイク処理します。 背景画像や前景画像、SVGスタックなどの伝統的なCSSスプライトを含む.

疑似

あなたがすることができます 準結晶画像を生成する あなたが以下に見るもののように。このジェネレータは実験的ですが、結果は間違いなくクールです。あなたはオプションの値を変更することによって遊んでそれから「Save SVG」ボタンで結果をダウンロードすることができます.

平野パターン

SVGを使ってパターンを作成する これまで以上に簡単で楽しいことはありませんでした。画像をアップロードしたり、縮小したり、間隔を変更したり、回転させたりして、美しい模様になるまで色を変えます。あなたはそれをダウンロードする前に結果をプレビューすることができます.

三角化ジェネレータ

美しいSVG幾何学模様を作成する と 三角化ジェネレータ. 色のランダム性/変形、粒度サイズを設定し、使用するカラーパレットを選択できます。このツールはTrianglifyのGUI版です。.

SVGグラデーション

あなたはあなたがCSSでグラデーションを作ることができることを知っています、しかしあなたはあなたがあなたがSVGで同じことができることを知っていましたか？最も簡単な方法 SVGでグラデーションを生成 このツールを使用しています。開始色と終了色を入力するだけで、生成された結果のコードが得られます。 CSSの代替も含まれています.

PSDをSVGにエクスポート

あなたの仕事のために画像エディタとしてPhotoshopを使うならば、時々あなたはする必要があるかもしれません PhotoshopワークスペースのデザインをSVGに変換する, これは、Photoshopではサポートされていない形式です。このツールにスクリプトをダウンロードしてから、 Adobe Photoshop /プリセット/スクリプト フォルダ.

SVG拡張子を持つベクトルレイヤ名を変更してください（例えば、layer1はlayer1.svgになります）。これでスクリプトを実行できます。 ファイル>スクリプト> PSからSVG.

SVGフィルタ

SVGを使用すると、色相、彩度、ぼかし、線形カラーオーバーレイなどの効果を画像に追加できることをご存知ですか。これはそのツールです これらの効果を視覚化してから、あなたにスニペットを渡します 簡単にするために 効果を埋め込む あなたのプロジェクトに.

SVGモーフィアス

SVGモーフィアス あなたを可能にするJavaScriptライブラリです。 SVGアイコンをある形状から別の形状に変形する. イージング効果、トランジションアニメーションの継続時間、回転方向を設定できます。.

クリップパスジェネレータ

SVGでは、Shapeを使ってイメージクリップをクリックできます。形状が正方形または円形の場合、これは非常に簡単です。しかし何 形状がポイントの多いものや多角形の場合? それがあなたがこのClip Path Generatorツールを必要とするところです.

Chartist.js

Chartist.jsは、 高度にカスタマイズ可能なレスポンシブチャートを作成する. SVGを利用してチャートを表示します。これもSMILを使用してアニメーション化できます。このライブラリを使用すると、折れ線グラフ、円グラフ、棒グラフ、その他の種類のグラフを作成でき、さらにそれらにアニメーションを追加することもできます。.

SVGストロークダッシュジェネレータ

これは簡単なツールです。 破線を生成する SVGを利用する 脳卒中. 最初にリストからダッシュの種類を1つ選択してから、幅、高さ、回転、または色に関してそれをカスタマイズします。その後、HTMLコードとCSSを取得してこのダッシュラインをプロジェクトに適用します。.

方法描写：簡単なSVGエディタ

Method DrawはWebベースのSVGエディタです。 キャンバスの両側にツールが付属している直感的なインターフェース. 線、図形、入力テキストを描画したり、組み込みの図形を使用したりして、描画したオブジェクトのプロパティを編集することができます。画像をSVGフォーマット（SVG base64フォーマットもあります）でエクスポートするか、PNGで直接保存します.

アニメーションSVGへのFlashのエクスポート

それほど一般的ではありませんが、Flashを手放すのに苦労している人がいる可能性があります。もしそうなら、あなたはすることができます FlashアニメーションをSVGに変換して、新しいテクノロジと互換性のある動作を維持する. このツールはFlashアプリケーションの拡張機能を形成し、CS5、CS6、およびCCで動作します。.

Shapes、Bitmaps Symbols、Classic Motionトゥイーン、Shapeトゥイーンに関しては、SVGにエクスポートすることができます（他の人にとっては議論の余地があります）。.