タグ付けされた質問 「svg」

スケーラブルベクターグラフィックスに関する質問。静的および動的(インタラクティブまたはアニメーション)の2次元ベクトルグラフィックスを記述するためのXMLベースのファイル形式の仕様のファミリー。SVG形式のグラフィックスの設計に関連することを尋ねます。

2
WebグラフィックにSVGまたはSVGZを使用する必要があるのはいつですか?
私の理解から、 SVGZは、SVGの圧縮ファイルタイプです。私はSVG画像の使用が大好きで、SVG画像を多く使用しました。 私がそれらを使用したすべての時間で、私は数百キロバイトを超えるグラフィックを持ったことがありませんでした。 レスポンシブWebサイトの作成中に、レスポンシブグラフィックスにSVGを使用します。私のお気に入りのデザインスタイルはベクターベースのグラフィックなので、私もそれらを使用します。私の最も強いデザインの強みは、特にグラフィックデザインに関してはイラストレーターです。 SVGグラフィックを使用するもう1つの理由は、腕や脚など、グラフィックの特定の要素を簡単にアニメーション化できることです。 特に、ページの全体にまたがる都市のような背景要素は、ライトのちらつきなどをアニメーション化します。 ファイルが圧縮されている場合、SVGコードが失われるため、アニメーション化できませんか? SVGだけでなくSVGZを使用する理由はありますか? 更新 古代のCS3がSVGZを保存できることを知ったので、SVGとSVGZを作成して、それらがWebでどのように動作するかを確認することにしました。 テスト後、SVGZファイルタイプで非常に予期しない問題が発生しました。(Chrome、Firefox、およびIEでテスト済み)画像の直接URLにアクセスすると、エラーが発生します。これらのファイルタイプのSVGコードにアクセスできないと仮定していますが、フィドルを作成した後、画像を表示することさえないようです。 これらはウェブにとって役に立たないのですか? .svg .svgz JSFIDDLE

5
Illustratorを使用してSVGパスでCSSクラス名を指定する
各パスにCSSクラスを指定できるIllustratorでSVGファイルを編集する方法はありますか? Illustratorでは、レイヤー名に実際の名前を付けると、その名前がパスのIDとして使用されることを既に知っています。これは、同じページでアイコンを複数回再利用する予定がない場合は問題ありません。 私の現在の回避策は、IDメソッドを使用することですが、その後コードエディターでIDをクラスに変換しますが、SVGスプライトを生成するたびに行う必要があるのはかなり面倒です。 現在Illustratorでそれが不可能な場合、それを指定できる他のアプリはありますか?または、GruntまたはGulpパッケージですか? Inkscapeでハックを使ってそれを行うことができるように見えるので、他に良い解決策がない場合はそれを見るかもしれません。

4
アンチエイリアスなしでSVGをラスタライズする方法
inkscapeでマップを作成しましたが、ビットマップまたは.pngに変更する必要があります。マップはコンピュータープログラムによって解釈されます。コンピュータープログラムは正確な色を探すため、エッジを鮮明にする必要があります。inkscapeで.pngをエクスポートするとき、オンラインファイルコンバーターを使用するか、スクリーンショットを撮るときでも、常にアンチエイリアス処理されます。助けて。

2
inkscapeにフォントを埋め込む
inkscapeで読み取り可能なsvgファイルにフォントを埋め込む現在の状態がどのようなものであるかを誰もが知っていますか。埋め込みフォントがないことは、特にマシンの管理者アクセス権がなく、フォントをインストールできない人にファイルを送信する場合、svgファイルの移植性を著しく妨げることに気付きます。 私はこのリンクで与えられた指示に従うことを試みました: HOWTO:Linux Inkscape SVGドキュメントへのフォントの埋め込み しかし、それを機能させることができなかった場合、このリンクはそれが可能であることも示唆しています: https://answers.launchpad.net/inkscape/+question/83618 私は公平に言えば、これをLinuxではなくWindowsで動作させようとしています(現在、Linuxマシンにアクセスできません)。この機能が動作している実際のsvgファイルを知っている、またはアクセスできる人はいますか?
20 fonts  inkscape  svg  embedded 

6
アニメーションSVGを作成するツールですか?
アニメーションSVG画像を作成および編集するためのグラフィカルツールはありますか?Inkscapeは素晴らしいですが、アニメーション以外のすべてを実行します。Inkscapeで画像を作成し、XMLを手動で編集してアニメーションプロパティを追加しました。これは私が望むものを与えてくれましたが、やや複雑なデザインの場合は非常に退屈です。
17 animation  svg 

5
印刷グラフィック用のSVG
スケーラブルベクターグラフィックスはどの程度印刷に適していますか? 印刷ドキュメントに含めるグラフィックをプログラムで生成する必要があります。ターゲットファイル形式には、EPSとSVGの2つの重大な競争相手しかないようです。 プログラマーとして、SVGは扱いやすいように見えますが、グラフィックス業界で受け入れられたようには見えません。以前は、SVG(例:Adobe PDFXML)に基づいて印刷グラフィックスを作成するプロジェクトがありましたが、現在アクティブなプロジェクトはありません。また、アドビのツールは、SVGの簡単な回避を終了したようです。 成果物の形式としてSVGを選択した場合、代替案と比較してどのような問題が発生する可能性がありますか?SVGのテキスト処理に関する苦情を聞いたことがありますが、詳細な議論は見つかりませんでした。もう1つ問題があると思われるのは、SVGがPDFにどれだけきれいに変換されるかです。
17 svg 

3
パス内のアンカーの順序を逆にする方法はありますか?
パス内のアンカーの順序を逆にする方法はありますか?再びパスを再描画したくありません。アンカーポイントの開始点をパスの開始点から終了点に変更したい。既に描いたアンカーの順序を逆にすることには、次のようないくつかの利点があります。 ストロークオプションダイアログでブラシの方向を反転せずにアートブラシを適用する。 描画ストロークアニメーション効果のように、SVGを任意のWebページに好きな順序で表示したい場合。

5
WebサイトにあるSVGをコンピューターに保存するにはどうすればよいですか?
このWebサイト(左上隅)のロゴを使用する必要があります。 ページからコピーしたコードは次のとおりです。 <svg viewBox="0 0 215 50" height="50" width="215" xmlns="http://www.w3.org/2000/svg"><path d="M128.783 40.08v7.74h2.078v-5.66h18.843v5.66h2.08v-7.74h-3.322V5.82h-14.017c0 14.588-.467 23.26-2.596 34.263h-3.064zm-43.58 2.08h4.154V5.82h-4.153v3.116l-9.138 24.352V5.818h-4.153V42.16h4.153v-3.114l9.138-24.35v27.465zm-22.842 0h4.36l-6.904-21.08 4.83-15.262h-2.13l-4.88 15.263H52.08V5.82h-4.155V42.16h4.156v-19h4.048l6.233 19zm71.562-2.08c1.764-10.433 2.492-18.842 2.598-32.186h7.783V40.08h-10.38zm74.6 2.08h4.31L204.894 5.82h-4.31l.88 4.206-6.852 32.137h2.13l2.59-12.097h6.548l2.643 12.098zm-169.574 0h4.31L35....8zm147.355 0h4.158V5.82h-13.968v2.076c-.05 8.05-.414 18.12-1.143 23.204-.466 3.066-1.61 5.508-3.532 5.508v5.555c3.588 0 4.623-4.83 5.246-9.24.936-6.752 1.4-16.976 1.506-25.025h7.732V42.16zM159.88 7.896h9.347V5.818H155.73V42.16h13.497v-2.08h-9.348V20.564h7.265v-2.076h-7.266V7.895zm-59.1 0h9.34V5.818H96.626V42.16h13.496v-2.08h-9.34V20.564h7.266v-2.076h-7.265V7.895zm-96.2 0h8.306v34.267h4.152V7.895h8.306V5.818H4.58v2.077zm28.396 6.023l2.858 14.067h-5.66l2.802-14.067zm169.58 0l2.853 14.067h-5.66l2.807-14.067z"></svg> 私はこれにあまり精通していませんが、テキストファイルに貼り付けて「.svg」としてさらに保存しようとしましたが、すべて無駄になりました。 (タグに何か問題があるかもしれません) …

2
IllustratorでSVG形式を使用してプリミティブをパスに変換する
Illustratorで複数の四角形で構成される簡単な描画を取得しました。それを後でコードで処理し、ドキュメントをSVGとして保存する必要があります。 長方形<rect />はSVG形式のノードとして表示されます。四角形をプリミティブ型からIllustratorのパスに変換するクリーンな方法はありますか?もしそうなら、どのように? これまでの私のハッキングソリューションは、[オブジェクト]> [パス]> [単純化]を使用することでした。変換が適用されていないシンプルなボックスを扱っていたため、直線もチェックしました。これはボックスに対してうまく機能しました(同じ数の頂点と外観を保持しました) プリミティブをIllustratorでパスに変換するための、よりクリーンでハックの少ない方法はありますか?

4
SVGテキストをパスに変換しても、グリフを再利用できますか?
大量のテキストを含むSVGがあります。スペース番号が書かれた駐車場の地図です。これをWebブラウザーで表示します。Firefoxのすばらしい小さなバグのおかげで、ブラウザーはテキストを正しくレンダリングしません。ブー。 そこで、テキストをパスに変換しました。最大4000個のラベルについて話しています。たぶん15,000個の新しい図形がベクターになりました。4MBです。通常は、これは圧縮に自分自身を貸すだろう主張するかもしれないけど、私はする必要があります HTMLにインラインこのSVGを。CSSの変更を動的に追加していますが、これがクロスブラウザサポートの唯一の方法です。とにかく、生の(精練された)出力は大きすぎて役に立たない。 ここで私を襲ったのは、これらすべてのスペース番号が共通のグリフを共有していることです。ゼロから9。すべての番号のすべてのインスタンスに形状定義を含めるのはなぜですか?これらを重複排除できますか? 私はInkscapeを使用していますが、提案を受け入れています。
14 inkscape  svg 

6
3Dオブジェクトの平面投影をベクターグラフィックとしてレンダリングするソフトウェアはどれですか?
3次元の幾何学的オブジェクトの2次元投影を作成したいと思います。図面は、InkscapeまたはAdobe Illustratorでインポートできるベクター形式のSVGまたはPDFである必要があります。ウィキペディアで、次の例(元のSVG、CC-SA)を見つけました。 それらは等角投影法です。そのワイヤフレームバージョン(黒い線のみ)は、InkscapeのAxonometric Grid機能を使用して構築できます。ただし、この方法はシェーディングには役立ちません。グラデーションが欠落している場合、球体は平らに見えます。Inkscapeに似たプログラムがあります。これにより、光源の位置を選択し、グラデーション付きの平面投影を生成できますか? IllustratorやInkscapeなどの2Dベクトルアプリケーションのもう1つの欠点は、グリッド軸と整列していないオブジェクトを描画するのが難しいことです。遠近感を変えずに、図の立方体を20°回転させたいとします。どうしますか? 注:ここにある回答の助けを借りて、次のツールが有望であることがわかりました。 Blenderのベクターレンダリング方法(フリーソフトウェア) Maya Vector Renderer(商用ソフトウェア) Swift 3D(商用ソフトウェア) カラーラ用VectorStyle 2(商用ソフトウェア) Google SketchUp Pro(商用ソフトウェア) GeoGebra(フリーソフトウェア)

1
「100%スケールでアイコンを設計する」とはどういう意味ですか?
Androidのマテリアルデザインガイド、 システムアイコンは24dpで表示されます。アイコンを作成するときは、ピクセル精度のために100%スケールで設計することが重要です。 100%規模で設計することの意味は何ですか?アイコンの寸法は24 * 24 dpでなければならないということですか?または、SVGファイル形式のように、スケーリングによってデータの損失や歪みなどが生じないファイル形式にする必要があるということですか?

2
コマンドラインでsvg図面をキャンバスに合わせる方法は?
.svgコマンドラインでのファイルのトリミングは簡単です。 $ inkscape --verb=FitCanvasToDrawing --verb=FileSave --verb=FileClose *.svg 私は反対をする必要があります。描画を64 x 64ポイントキャンバス(すべての.svgファイルに設定済み)に合わせたい。残念ながら、InkscapeはFitDrawingToCanvasコマンドを提供していません。さらに、フィッティングは図面の縦横比を維持する必要があります。 重要な場合:Ubuntu raringを使用しています。

1
次の画像を説明する正しいスタイルは何ですか
次の画像で使用されているスタイルの名前は何ですか。Google、Facebook、atlassian.com、bitbucket.org、および情報グラフィックで使用されています。 私はそれらをライフスタイル画像と呼びますが、これらのタイプの画像を検索したいのですが、正しい用語がわかりません。 画像でGoogle画像検索を行うと、画像のソースが取得され、スタイルに関する情報は取得されません。

1
SVGとviewBoxの値
誰かがviewBox値(つまりviewBox="a b c d")がどのように決定されるかを知っているなら、私はただ興味があります。 私はInkscapeのSVG機能を理解しようとしているので、Inkscapeで100pxxのドキュメントを作成し100px、ビューポートの左側(0水平方向の値)から右側(100水平方向の値)まで線を引きます。 しかし、奇妙なことに、このドキュメントをプレーンSVGファイルとして保存し、テキストエディターでファイルを開くと、viewBox値はviewBox="0 0 26.458333 26.458334"、たとえばの代わりに設定されviewBox="0 0 100 100"ます。 これらの値(0 0 26.458333 26.458334)がどのように決定されるのか、そしてなぜそれらとビューポートの寸法との間に関係がないように見えるのか、誰もが知っていますか? PS viewBoxドキュメントオプションでプロパティを手動で編集できることは知っていますが、Inkscapeがそれらをファンキーな値に設定する理由についてはまだ興味があります。
13 inkscape  svg  xml 

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.