web-dev-qa-db-ja.com

PhotoshopカスタムシェイプからSVGへのパス文字列

PhotoshopのカスタムシェイプまたはパスからSVGパス文字列を取得する方法はありますか？または、同様のデータを取得/構築する別の方法はありますか？私はこれに似た何かをしたいと考えています：

http://raphaeljs.com/icons/

vectorsvgraphaelphotoshop
33
Will Haynes
  1. Photoshopでパスを選択してコピーします
  2. Adobe Illustratorを起動します
  3. 新しいドキュメントを作成する
  4. ペースト
  5. SVGとして保存

ただし、Illustratorを使用していて、すべてのパスを作成していない場合は、Illustratorで直接作成する方が簡単です。

Illustratorをお持ちでない場合は、無料の Inkscape SVGエディターを使用してパスを描画することをお勧めします。

Photoshopに既にパスがあり、Illustratorがない場合、Photoshopの情報パレットをオンにして、パスポイントを1つずつ選択し、ポイント自体の位置も手動で記録することをお勧めしますそのハンドルとして、それらから手動でパスを作成します absolute curvetoコマンド、 'C' （ハンドルのあるポイントの場合）および absolute linetoコマンド、 'L' を使用してハンドルのないポイント。

44
Phrogz

別のオプションは、ファイルをPhotoshopでEPSとして保存し、エクスポートベクターがチェックされていることを確認し、それをイラストレーターにロードしてSVGとして保存することです

5
donatJ

すべての回答は良かったのですが、私にとっては多すぎるため、アドビが提供するオンラインツールがあります。

http://Adobe.com/go/extract_tryitnow_en

あなたがしなければならないのは、あなたの.psdファイルをアップロード/ドラッグ＆ドロップ/パスレイヤーを選択し、svgとしてダウンロードすることです。また、SVGパス、特にd属性を抽出できます。

それから私はpathをg要素に入れ、次にgをスケーリングし、pathを翻訳しました

3
ochitos

カスタムシェイプについては、カスタムシェイプファイルの変換に使用される カスタムシェイプファイルをSVGセットに変換 （Photoshop CS3以降の場合）と呼ばれる最近リリースされたオープンソーススクリプトをご覧ください。 .csh）またはカスタムシェイプ設定ファイル（CustomShapes.psp）をSVGファイルのセットに追加します。

1
user4756015