SVGパス属性を学ぶ価値がありますか、それとも描画ツールを使用する必要がありますか?


7

Inkscapeのようなツールを使用してグラフィックを描画するよりも、path要素とd属性を使用して手動でグラフィックを作成する利点(数学の助けを借りていると思いますか?)がありますか?Inkscapeはより非効率的なSVGコードを生成しますか?

回答:


1

これは、パスに関するチュートリアルの1つであるSVGのチュートリアルのページです。

私はそれをプログラムの助けを借りて多くの円を描くために使用しました、そして驚いたことに、SVGにはコア円定義があります。

しかし、Inkscapeはそのフォーマットを読むことに問題はなく、私が期待したものを描きました。ファイルを保存するだけで、独自のボイラープレートが追加されました。

そのため、SVGインスペクタビュー(だけ)からではなく、inkscapeが提供するチュートリアルから学ぶことをお勧めします。


6

さて、ここには2つの学校があります...

  • 印刷デザイナーにPostScriptコードを書くことができるかどうか尋ねると、彼らはあなたを笑います。印刷設計者は、出力用にPostScriptファイルを手動でコーディングする方法を学ぶことに興味を示したことはありません。彼らは完全にWYSIWYGエディター(Photoshop、Indesign、Illustratorなど)に依存ています。だから、答えは強調だろうがありません

  • Webデザイナーがマークアップまたはコードを記述してWebサイトを作成できるかどうかをWebデザイナーに尋ねると、一般的には「はい」になります。ほとんどのWYSIWYG Webエディターは人間ほど熟練していません。確かにそれらはより高速になる可能性がありますが、一部の領域では必ずしも完全または詳細であるとは限りません。熟練したWebデザイナー/開発者の多くは、マークアップ/コードを手動で作成すること好みます。だからこのグループに尋ねれば、あなたは一般的なイエスを得るでしょう。

さて、svgコードを直接書くことあなたにとって価値があるかどうかは別の問題です。私が個人的には、SVGコードが期待どおりに表示されることを前提に、SVGコードがどのように記述されているかを口に出さないでください。また、WYSIWYGエディターを使用し、必要に応じてテキストエディターでsvgを手動で開いて「微調整」できることも知っています。そのため、svgコードのすべてのインとアウトを知りませんし、気にしません。必要に応じて学びます。

  • 利益独自のSVGを書くには次のようになりコントロール。手動で書くことは、多くの場合、これまでの自動方法よりもはるかに詳細で構造化されています。上記のWeb箇条書きを参照してください。あなたが細心の注意を払うタイプであれば、テキストエディタからsvgグラフィックを構築できることに大きな満足を感じるかもしれません。

  • 抑止力は、時間になります。多くの場合、WYSIWYGエディターを使用する方がはるかに高速です。または、エディターを使用してから、手動でsvgコードを変更します。

だからそれは本当にあなたの呼び出しです。

他の人(雇用者/クライアントなど)へのメリットについては、言うのは難しく、熟練度とスピードに大きく依存します。Illustrator / inkscapeの描画を開いて保存するのと同じ時間に手動で記述したsvgグラフィックを作成できる場合は、サードパーティにとって価値があるかもしれません。ただし、コードの記述に2〜3倍の時間がかかるとしたら、同じことを2倍の価格で望んでいる人はいないでしょう。


興味深い視点。第三の方法は、方法です開発者:生成する正確かつ簡単です(と答えは自明であるので、SVGは、アプリケーションのための出力の貴重な一種であるイエス)。
Paolo Gibellini、2016

@PaoloGibelliniええ、それは私が「ウェブ」の弾丸で言及したようなものでした。絶対制御が必要な場合は、マークアップの場合と同様に、確かにこれ以上の方法はありません。
スコット

私も同意しますが、特定のコンテキストでSVGを使用する(Webページの画像として)Web開発者と、SVGをエラボレーションソフトウェアの出力として使用する(図または要素として)開発者の違いさえ興味深いかもしれませんレポートまたは研究に入れる)。
Paolo Gibellini、2016

3

SVGを手で書くのはそれほど難しくありません。それは私の個人的な趣味のために少し冗長ですが、それは要点のほかです。

何をするかによる

ベクターファイルを手動で書き込む方法を知るには、いくつかの理由があります。

  1. 一部のデータにアクセスでき、グラフィックエディタで開くことができる必要があります。SVG、EPS、またはDWGへのデータのダンプは比較的簡単です。その後、任意のアプリケーションでさらに処理できます。

    これにより、場合によっては何倍もの生産性を実現できます。しかし、フォーマットを覚える気がないと、生産性を上げることはできません。あなたのプログラマーなら、あなたは間違いなくこの理由で学ぶべきです。

    質問とユースケースの例:import-vector-data-into-illustrator

  2. あなたはあなたの編集者がうまくいかないことをしています。非グラフィックスエディタでより簡単に行えることがまだあります。最も注目すべきは、数学的な組版ですが、カスタムハーフトーン生成などのようなものもあります。

    ここでの1つの大きなSVGユースケースは、インタラクティブな使用のためのCSSの生成です。またはSVGアニメーションの準備。しかし、これだけに限定されません。多くの場合、forループや単純な検索と置換、またはいくつかのテキストのコピー貼り付けは、手作業で行うのが非常に面倒な不思議なことです。ネストされた変換を作成できることは、GUIで悪夢となるような方法でフラクタル生成に使用できます。

しかし、これを行う方法を知っていると、あらゆる種類の奇妙な理由が発生します。といった:

  1. あなたは絵を描く必要がありますが、あなたが持っているのは端末だけです。シーケンスがどのように発生するかを説明することに加えて、私がしたことを読むことができるのはおまけです。この種の例はここにあります

一般に

ほとんどのユーザーにとって、学ぶことは意味がありません。いいえ。しかし、これを知っていても害はないので、興味深いと思うなら、数週間このテーマに費やすかもしれません。それは大きな成果をあげるかもしれません。

確かに、私にとってもその必要性はそれほど頻繁には発生しません。


有効ではありますが、最初のポイントは、私が「手動で」と呼ぶものとは正確には異なります。ここで行う重要な違いは、パスを手動で生成することと、パスを手動で生成するために必要な知識を持つことです。後者が重要です。
Wrzlprmft

自動で何かを行うには、@ Wrzlprmftのある時点まで手動で行う必要があります。したがって、おそらく10%を手動で実行してから、残りをループでラップします。手動で行うことは自動のスケッチです。また、ユーザーがすべての場合に手動で開始する方法を学習するよう求めていることに注意してください。
joojaa

必ずしも。ベジェ曲線を自動的にいじっていますが、完全に手動でプログラムしたことはありません。数値コースでは、ベジエレンダラーをプログラムしたことがありましたが、データを使用してテストするように依頼されたとき、すぐにInkscapeから取得しました。
Wrzlprmft

確かに、少し別のユースケースですが、svgを深く掘り下げる必要はありません。検索と置換に相当するポイントを入力する必要があるため、テキストエディターを使用する場合でも、手動ではありません。したがって、多くの場合、自動はデータダンプで検索と置換を行うことを意味します。
joojaa 2016

私が得ているのは、コンピュータ上で完全に手動であるものはあまりないということです。YMMV、私に関する限り、すべてが同じです。
joojaa 2016

2

文字通りの質問に答えるには:

Inkscapeのようなツールを使用してグラフィックを描画するよりも、path要素とd属性を使用して手動でグラフィックを作成する利点(数学の助けを借りていると思いますか?)がありますか?

めったにありません。私は通常WYSIWYGツールを使用しませんが、グラフィックのデザインには使用します。さらに、必要に応じてInkscapeのインターフェースから手動でノードの位置などを微調整できます。

ただし、パスを手動で生成する方法知ることは非常に貴重です。

  • 内部で何が起こるかを知ることは、WYSIWYGツールを使用するときに何をするかをよりよく理解するのに役立ちます。:への強い関係があるグラフィックデザインのために必要とされる数学は?。数学の基礎となる曲線に関する直接の例については、私の答えを参照したいと思います。

  • パスを手動で生成する方法を知っている場合は、SVGをプログラムで自動的に操作する方法も知っています。Joojaaの答えは、すでにこれについていくつかの良い例を示しています。

Inkscapeはより非効率的なSVGコードを生成しますか?

はい。Inkscapeのコードは、小さくすることを目的としていません。SVGのファイルサイズを小さくするための特定のツールがありますが、何が重要かわからないため、ツールはこれまでしか実行できません。何らかの理由でさらに先へ進む必要がある場合は、SVGを手動で「ゴルフ」する必要があります。例については、この回答を参照してください。それでも、これを行う場合、通常は最初からではなく、WYSIWYGで生成されたSVGから始めます。


2

答えは両方です。これが、両方のオプションが存在する理由です。

一部のグラフィックが描画アプリで作成されたり、一部がコードで作成されたりするわけではありません。つまり、作成するすべてのグラフィックで、次のツールの準備が整っています。

  • ペン
  • ベクトル描画ツール
  • UTF-8コードエディター

それがSVGツールキットだからです。そして一般的に言えば、あなたはその順序でそれらを使用します。

作成するグラフィックごとに、99%の描画と1%のコード、または10%の描画と90%のコード、または50:50を使用できます。ただし、作成できる最高のグラフィックを作成したい場合は、描画やコードだけを使用することはほとんどありません。

コード部分は単に最適化である場合もあれば、アニメーションである場合もあれば、単純なグラフィックを使用して回転を伴う複雑なものを作成している場合もあれば、誤って単に埋め込まれたビットマップ。しかし最終的には、コードを作成して公開することになるので、少なくとも出荷するものを承認する必要があります。

そして、その一方で、何かアートがあり、それにいくつかの人生がある興味深いグラフィックを作成したい場合は、目と視覚皮質を使用して、少なくとも最終グラフィックの最初のドラフトを作成することで、多くのことを得ることができます。クリップアートを開始点としてインポートするか、以前に作成したグラフィックをテンプレートとして使用することができます。SVGはテキスト編集可能なXML Webドキュメントとして保存されているため、これらおよびその他の実績のあるベクターグラフィックスの生成方法はウィンドウから破棄されません。XMLドキュメントは、ベクターグラフィックス生成用の追加機能であり、描画の代わりではありません。

つまり、ツールキット全体を使用します。片方の手を後ろで縛らないでください。


まあ、実際にはそうでもないかもしれません。人間が読める形式になっているのは、デバッグとプログラミングが簡単になるためです。もともと彼らがソフトウェアを置き換えることを意図したものでは決してなかった。しかし、長い年月をかけてフォーマットは独自の生活を送り始め、ソフトウェアが対応できないものになりました。それらはGUIに対して柔軟性が高くなりすぎて、GUI側が追いつけないほど広範に使用できるような説明になりました。したがって、マークアップは元の開発者にとって良いものであることを意味していましたが、最終的には元の目的を上回りました。
joojaa

-1

あなたがグラフィックデザインフォーラムで質問しているように、答えはノーです。

あなたがstackoverflow.comを求めていたならば、はい。


それは、2つのコミュニティに彼ら自身が何をするか/するかを尋ねた場合に得られる答えだと思いますが、それは質問に対する答えではないと思います。
カイ
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.